6Music Homepage 2011

I was the design lead on this project. I worked with interactive producer Daniel Bean. We worked up the initial concept. Producing various low and hi fidelity wireframes before the indie was engaged. This meant that the scope of the project was as clear a possible from the start.

Some of the features of the redesign included the automatic refreshing of the carousel to display the live DJ image and that DJ's latest tracks. Another feature was the smooth transitions and animations within the carousel they add a polished finish to the end result. www.bbc.co.uk/6music. The in house team and Kent Lyons did a great  job using the feeds and data mechanisms available in a 'real time' way so the page is constantly up to date, new and fresh.

The page was was tested rigorously on different browsers as it needed to work smoothly on all browsers from IE6 to Google chrome.

Low-resolution concept wireframe

High fidelity wireframe














 

The final treatment

Desert Island Discs 2011

Desert island discs is a much-loved and long running Radio 4 show (since 1942). 

The old website wasn't doing justice to this very popular and much revered radio show. So a complete redesign was embarked upon. Digital design consultancy Fallon were commissioned to create a new brand identity kit (Classified) for Desert island discs. And digital agency Magnetic North were awarded the design and build contract.  

Early in the process, we was recognised there was a real opportunity to surface the large  breadth of content from the shows archive. 

A key challenge was finding an intuitive way to enable users to navigate through the 2850 shows available (approximate: it adds 1 every week) . The image on the left shows the browse and search mechanism. I was particularly pleased will the light grey indicator bars under the categories under "Explore Castaways". This gives an instant visual indication of the amount of content available per occupation, presenter or gender.

We worked though several prototypes, meetings and mock ups to get to the end result.We hope users enjoy delving into the archives to listen to the likes of George Clooney or Margaret Thatcher.

Right is a mock up of the top part of the homepage that didn't make it live. It was an attempt to integrate some the "listen live" box (top right) into the banner. Also an experiment with the "Radio 4" logo to align it horizontally

Key elements that did make it were the large image carousel instantly showing the latest shows and a highly prominent visual call to the users to search the archive.

My responsibilities on this project were..

• Signing off the designs 
• Identifying the key of functionality of each page template.
• Keeping the online offering true to the brand kit delivered by  Fallon to BBC Marketing.
• Assuring consistency in look and feel and functionality on  web and mobile. 
• Checking work against accessibility and BBC UX&D design standards and guidelines.

To the left is the final individual castaway template (if they have an image). The touches I like the most on this page are the large inviting image but most of all the circular images of the discs Alice Cooper had chosen.Visually the discs tie-in so well with the brand logo and the evokes thoughts of LPs and CDs in many people. Initially we wondered if we had a technical solution to make this possible for 2850 castaways X 8 songs. But we found an automated 'imagechef' solution that did the job.


One of the final pieces of work was the mobile site. Keeping visual treatment consistent  and offering the search and listen functionality were identified as 'must haves'. On the right is the final treatment for search page on mobile. As you can see visually it feels like the same offering as the site, with consistent colours, icons and branding.

On the mobile site we deliberately went for the most common format phone template rather than the higher end ipad/android layouts. We wanted a solution for all phone formats, so everyone can search andl listen.

If you don't know what Desert Island Discs is...

http://en.wikipedia.org/wiki/Desert_Island_Discs

Sounds of 2011

Originally a little site parked in a corner of the BBC News site. Rory Connolly (producer at BBC  /music) took up the cause. The "Sounds of" site is dedicated to highlighting new music acts who pundits think will be the next "big thing".

I was the design lead, this entailed discussion with Rory on the visual 'tone' he wanted the site to achieve. Our clooective steer on initial branding and sites we thought were interesting or in the same sphere (competitor analysis).This enabled us to convey a clear brief to the indie.

Later in the project I reviewed the wireframes, visual treatments and the final  pre-launch build. I gave feedback and signed off on each of these stages. .

All the stake holders on the project were very pleased with the end result and the smooth running of the project. http://www.bbc.co.uk/music/soundof/2011/

Wallace and Grommits World of Invention! Nov 2010

This site recently won a new media Bafta !!
http://www.youtube.com/watch?v=cQ1RXM2gMYI

I was the design lead for the website working with Aardman based in Bristol. Below is the final homepage design with notes to Aardman's coders and UX team. The link colours changed later on but this became the final layout. A challenging site to produce but I was happy with the end result. As you can see it's unmistakeably an Aardman product, the tricky bit was making it all fit BBC layouts.

Hat's off to Aardman for a great flash game. Well tested, great concept and very sticky, I was hooked on it for a while.

http://www.bbc.co.uk/bbcone/wallaceandgromit/wallaces-workshop/
 

Radio 1 Teen Awards

Visual treatments of this events site.

Radio 4's, What Are They Worth?

Tim Stansbie and his team at "Kite" (http://madebykite.com). The purpose of this little game was to guess how much people get paid and contrast that with how much "you think" they should be paid.

The results fed into a database that collated the scores and displayed the "average" of what everyone else thought. 


I was the design lead. I wanted something fun looking and accessible for a radio 4 audience. I didn't want them to feel like they were being tested. so we came up with the idea of friendly lego style characters of each type of person. My personal favourite is the prime minister.

I also wanted an "info graphic" to show people clearly what the figures all meant. Inspiration for this idea came from the great work done by David McCandless(http://www.davidmccandless.com/) and more specifically is billion dollar-o-gram. Kite and Sandy (producer) took on board an initial wireframe/ concept I produced and ran with it. 

http://www.bbc.co.uk/radio4/features/pay/

Junior Apprentice 2010 initial designs

The Apprentice is really popular, the key information people want to know is the profiles of the candidates,if you deliver on that, and you can’t go far wrong. We (with Freemantle) delivered a slick looking but easy to implement design. The 'classic quotes' and candidate pages were the unique selling point of the site. That's what people wanted to know, the unique users per week stayed at around 200K throughout the series lifespan.

I was the design lead on this project. There was a tight turn around time. Mainly due to the general election and Lord Suger's labour affiliation the TV shows launch date jumped forward several of months.This meant the site had to be live several months early also.. 

Electric Proms 2010

This was a phased launch (pre/live/post) and the site needed to clearly give key information to a less web savy Radio 2 audience. It needed to look fun, exciting and slick. Kent Lyons delviered on a great looking design.

I was the lead designer Radio 2's Electric Proms website.  I worked closely with the production team from A&M interactive, also the marketing team, the brand agency Fallon and Kent Lyons. A six week project from start to finish.  

Designing for the BBC crib sheet

I was asked to produce a 'One pager ' for designers working outside the BBC to refer to easily.  I wanted something that could be printed on one page. I used my experience of working with indies to try address the most common problems that come up on a regular basis.

Example screens from Good Design Process document presented in Newcastle, Leeds and Manchester for BBC@North

Presented as the UX Lead at the BBC @North presentation in Newcastle Manchester and Leeds in Feb 2010 on the New GVL and "how to design for the BBC". The point of this was to get  the Indie industry across the North aware of what we're doing and help themconnect and pitch for opportunities . 

*Note Michael Albers created the original document shown below some of the visuals supplied by  "in house" BBC designers.

Modern Masters BBC1 : May 2010

The Modern Masters site highlights the life and works of Matisse, Picasso, Dali and Warhol. I art directed the site build and managed the design sign off 'gates' on various parts of the project. From initial mood boards to the final designs the visual cleanness of the site makes it work well.
 

The site included of downloadable art walks in various cities around the UK.

Eddie Gachegua the designer at Lion TV did a really great job for brilliant design skills, patience and flexibility. The site produced was clean and crips allowing the content of the "Masters" to shine through.

Hands on History

This was a nice little project hat worked really well. Quick turn around and a pure 'in house' job.

Celebdaq GVL 2

Some screen designs of a website that didn't make it despite the best efforts of everyone involved. 

Celebdaq was a fake Celebrity trading game where players make fake money gambling on the success or failure of real Celebs. Some really hardwork and effort went into the design phase of this project so I thought I would show it.

Move like Michael Jackson

Move Like Michael Jackson was a site where users could upload their favourite MJ dance move to the site and other users could rate them and Judges could awards. At several round of wireframing  Eddie at Lion TV worked up some great designs.

The Beauty of Maps

I worked with Chunk Media (http://www.chunkdigital.com/) based in Glasgow and in house editorial and technical teams to produce this site to complement a BBC Four series.

Chunk were a great agency to work with, Donnie (creative director) was always happy to discuss options and produce a variety of solutions. They were open to new ideas on look and feel and art direction. Chunk were particular strong on there integration of deep zoom and flash to produce some really slick immerse interfaces.
http://www.bbc.co.uk/bbcfour/beautyofmaps/historical_maps.shtml#/psalter/intro/

Chunk were also familiar with the prescribed design process (wireframing, persona creation, sacrificial concepts, style and colour treatments) . Adhering to the BBCs website page grid (Global visual Language 2). They were happy to comply with search engine optimisation standards (SEO Aka 'googleability') and the BBC accessibility standards on issues such as colour contrast, link conventions and tab ordering.

Vision multiplatform indie commission process Diagram 2008.

I found working out the project flow for new media projects was becoming  a challenge. Especially if is tight timeline  with multiple stake holders. Figuring out and visually displaying a  process graphicallycan really help highlight the problems and show others that improvements could be mad 

Hamlet BBC4 December 2009

The Royal Shakespeare Company were putting on a performance of Hamlet and BBC2 filmed it. David Tennant (x Doctor Who) playing the lead. The indie commissioned were Traffic Digital, they came up with some great ideas around user interaction, such as interactive timelines and adding archive data from previous productions at the RSC in... so we did.

Jose Deniz (producer) and myself wanted a dark brooding but modern look to the site to reflect the stage production. Jose also wanted a strapline with the impact of a dramatic Eastenders plot line.

 We user tested a few different staplines on secretaries and canteen staff and this one stuck

"My father’s died,
my mother has married my uncle
and I’m being watched" (could happen in Albert Sqaure)

In addition we wanted to use the richness of the scenery and clothing of the production. Traffic were and are great to work with always flexable and friendly. 

Eurovion and Your country needs you : 2008

This project morphed from one TV show to another and the design needed to take this into account. The budget was around 80K. The timescale was around 8 weeks. I managed two freelancer designers working 'in house'. I Chased up the brand assets for the TV shows and working with the guidelines from European Broadcasting Corp  http://www.ebu.ch/  who own the "EuroVision" brand. There was a really strong editorial techincal and creative team on this project, our TPM (technical project manager) even had a Eurovision party. Overall the project hit all it's launch dates and met apporval from the audience.

Strictly Social -- Final treatment

Strictly Social was the BBC's first attempt at a prime time, full access ,second screen experience with voting and live simulcasting through iPlayer. It had a quiz, live commenting and the ability to "Boo", "Wow" and "Gasp".

After an extensive pitch process with various indies. Pancentric and Monterossa were asked to go forward with the project. I wold represent the BBC uxd oversight of this project and present it to the various meeting it needed to go through for high level approval. The design phase of the project went well, early wireframes I gave to Pancentric were iterated and translated into an interface that 'felt' as 'strictly' as the TV show. Pancentric's team did a great job with the visual treatments. Monterossa were engaged for their technical expertise with the forge platform and there own bespoke software solutions.

In hindsight,  this was an ambitious project for the timescale. Also it confused the audience because it offered too much. Arguably this was the wrong product for the 'Strictly' audience. Leesons learnt: keep these offering simpler and allow a passive user experience. ensure the technical archecture exists to handle a project of this size.

Despite these issues the project was worth while, it showed the technical boundaries and capabilities of the BBC technical framework (at the time). But it did show that with a little more time and technical infrastructure, a real time, second-screen experience could be offered a large audience simultaneously.

Victorian Farm: December 2009

Victorian Farm Christmas was a show on BBC2 showing who to make Victorian Christmas treats.

Indie Lion Media were commissioned through the PACT agreement. The timescale was 8 weeks. Lion's designer came up with a visually rich design which picked elements from Victorian Christmas cards and displayed flourishes of iron work reminiscent of the time. The page templates needed a little calming down to fit in with standards and guidelines but I think it still keeps original approach as much as possible.