Designing the Human Body Clock
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, award-winning 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 create a shareable Body Clock Quiz where the user can find out if they are a ‘Morning lark’ or ‘Night owl’.
The interactive piece 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 was composed of online and TV designers, developers and journalists.
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 to ensure we would deliver everything to tight deadlines.
Design Studio
Keeping the requirements from the brief in mind, we 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.
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.
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 personalised 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. We 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.
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.
Working closely with developers — advantages and quick response
Our developer was involved right from the beginning and 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 my colleague developer 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.
Conclusion
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.
Visit BBC Body Clock
Awards
BBC Body Clock | Digital innovation award — Medical Journalists’ Association
Best investigative journalism — Association of British Science Writers
Excellence in journalism — Endocrine Society
