Designing the Human Body Clock
Andreia Paralta Carqueija
User Experience Designer
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.
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
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.
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.
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