How much do we really know about the human body? While part of the BBC News Visual Journalism team I had the opportunity to design an online feature about the fascinating and complex Body Clock. I’m going to give an overview of the process we followed to create a fun interactive experience for our audience - regardless of their device or language.

Context and idea

Researched, written and produced by the Health and Science team Rachael Buchanan and James Gallagher, the “Body Clock” project won the internal News Multimedia Ideas competition, earning support from BBC TV channels, Radio and Online.

The body clock is controlled by a small structure in the brain and, though often overlooked, has tremendous impact on what the body can do at certain times of day. This biological clock affects the body’s natural rhythm and when disturbed can lead to serious consequences. This feature aims to inform the audience about their body clock.

Design brief

Our challenge was to create an informative, engaging and beautiful experience suitable for our audience around the world. The page had to deliver a personal result, relying on the time of the user’s computer to inform what their body would be doing at that time of day. A second request was to make a highly shareable Body Clock Quiz  where the user can find out if they are a morning lark or night owl.

The interactive had to work on mobile, tablet and desktop and also accommodate seven languages: Mundo, Turkish, Burmese, Russian and Portuguese, Persian and Arabic (the last two being right to left languages).

Methodology and initial steps

The Visual Journalism team is composed of online and TV designers, developers and journalists. For this project I worked with Senior Broadcast Journalist Dominic Bailey, Senior Designer Helene Sears, Developers Richard Bangay and Marcelo Zanni and Project Manager Sally Morales.

We started with a kick-off meeting with stakeholders James and Rachael to ensure we understood the story they wanted to tell. For inspiration I created a mood board with websites, animations and colours and a document with all the requirements to ensure we stayed focused. We also scheduled weekly catch-ups going forward to ensure we would deliver everything to tight deadlines.

Snapshot of the mood board

Sketch meeting

Keeping the requirements from the brief in mind, Helene and I had a sketch meeting where we came up with as many ideas as we could think of - at this point we were after quantity rather than quality, which would come later.

We worked mobile first, meaning we designed from the smallest screens with very basic functionality all the way up to big desktop screens with slick modern browsers. Of the many ideas we came up with, two stood out as the strongest - the first being a long page the user scrolled down to explore (a popular format), the second being a carousel style driven by a sun dial-styled navigation.

Our early ideas

 

The importance of prototyping

Although sketching is a very important part of the process, prototyping should be considered fundamental.

First and foremost prototyping designs for user testing means we can sanity check our ideas with our audience and make improvements early. However, they are also invaluable for getting the rest of the team onboard with an idea - small things like timing and animation can be overlooked and prototypes get everyone thinking about the little details that can have a big impact.

Prototypes can be complex and detailed, but as we need to work quickly for this project I used online prototyping tools, Apple Keynote - which has useful animations - and even paper.

Long form piece and sun dial carousel made out of cut out paper

After prototyping both of our top ideas we felt the sun-dial carousel stood out as the best direction. We also wanted to have a more personalized message on top that would sync with the user’s time and tell them what their body was doing at that time.

Because we always want to know what our audience thinks, we got away from our desks for some guerrilla user testing where we approached several (friendly looking) strangers and asked them if they would spend a few minutes of their time testing our prototype. My colleague designer Charlotte Thornton and I ran a few sessions and gathered as much feedback as possible.

Change of course

User testing early indicated that we had the tone right, but the interaction mechanism wasn’t working - people missed the “sun dial” wheel and instead tried to swipe the content left and right. Worryingly some of our users did not notice the personalised result at the top - a crucial requirement. As a result I created a bolder navigation, ensured swipe gestures on tablet would work and highlighted the personal body clock result.

Final design solution

Final design solution for the Body Clock quiz

We also decided to add images of the human body over the course of the day. Nicknamed “Little Dude”, I illustrated the character, his outfits and his scenes - each optimised for the time of day.

Little Dude over the course of the day

Working closely with developers - advantages and quick response

Richard was involved right from the beginning and he ensured we created a great user experience that was technically possible and he also introduced us to new technologies.

Designing responsively is not just about screen sizes, older and more basic browsers cannot handle Javascript which enables complex animation. For those devices we don’t deliver the personal message or the animated illustrations - the user will only see static but important content.

On the full interactive version, when users have Javascript-enabled browsers and also SVG support (enabling high quality graphics), we deliver the personal body message plus the fun page loading animations.

Throughout the development Richard and I sat next to each other. It meant the QA (quality assurance) happened conversationally throughout the build rather than being crammed into the end. I also created a detailed annotated document to ensure the design details were clear.

Annotated designs

We have done our very best to deliver an engaging feature with clear visual language. The agile, rapid methodology was truly effective in bringing this project to life - most importantly different disciplines worked closely together right from the beginning and we tested our ideas early. I welcome feedback so please leave a comment below.

Andreia Paralta Carqueija is a User Experience Designer, BBC World Service

 

Tagged with:

Comments

This entry is now closed for comments.

  • Comment number 2. Posted by kmca

    on 16 May 2014 19:27

    Mel - not everyone who doesn't have a TV license is a 'non-payer'. I don't have a TV license because I don't have a TV - but I do have a computer. You don't need a TV license to watch BBC programs on a computer if you're not watching the programs live. (Now, you might argue that this makes no sense! However, that is the law as it stands.)

    • This entry is now closed for comments. Number of positive ratings for comment 2: 0
    • This entry is now closed for comments. Number of negative ratings for comment 2: 0
    Loading…
  • Comment number 1. Posted by Mel Holmes

    on 16 May 2014 14:22

    Now that the iPlayer allows signing in, why do you not make signing in
    compulsory, and include the entry of of the TV licence number as part of
    the signing in.

    If you did this then those who do not pay their licence would have no
    access to stuff they have not paid for (at our expense), and those of us
    who have paid could even be allowed to watch it while we were away on
    holiday! After all, we HAVE paid for the licence and should, therefore,
    be allowed to watch the programmes. It would give non-payers more
    incentive to pay up too.

    I have made this suggestion several times in the past, but now that you
    are NEARLY THERE - WHY NOT DO IT PROPERLY?

    Mel Holmes

    • This entry is now closed for comments. Number of positive ratings for comment 1: 0
    • This entry is now closed for comments. Number of negative ratings for comment 1: 0
    Loading…

More Posts

Previous