The Secret Life of the Cat: Interactive infographics

Thursday 13 June 2013, 08:00

Helene Sears Helene Sears is senior editorial designer for BBC News visual journalism

Tagged with:

Hi I’m an editorial designer for BBC News and recently my teammates and I have been working on an interactive feature to accompany and enhance the BBC Two Horizon programme The Secret Life of the Cat.

Ever wondered what your cat gets up to once it leaves the cat flap? The Horizon programme, in collaboration with the Royal Veterinary College, set off to a Surrey village with GPS trackers and collar ‘cat cams’ to find out.

cat_tab_1024.jpg Cat tabs


While the idea seemed light-hearted to begin with there was some serious science behind it. We know more about wild tigers than our cuddly feline roommates and this project aimed to fill that information gap. The study, the largest of its kind ever conducted in the UK, also offered interesting challenges for our team.

Wanting to make our content fun as well as educational we decided to arrange the information around 10 of the cats tracked by the research team. In order to do this we made clickable 'cat tabs', illustrations of each of our 10 cats which would serve as the main navigation around the content.

When a user chose to click on a tab it would take them to a new page of content about that selected cat with information about their character and roaming habits as well as video of their activities.

None of us had illustrated cats before and it turns out it's tough to get right. We have discarded art boards full of cat disasters: stylized robots, cheap clipart and several rather evil looking specimens.

cats_2_1024.jpg Rejected illustration  


After a few rounds we established a style we were happy with and wanted the illustrations to be slightly sprawling over the top of the page in a ‘cat-like’ way. It was also important we carried that same style across all platforms.

Editorially we built the content up from feature phones (small screens, no JavaScript) where we wanted the most basic experience to be a scientific profile of each cat. As we progressed upwards into smart phone territory we added the illustrations and stacked the various cat profiles behind a drop down menu.

The different profiles also became more enhanced with static maps of each cat's daily journey and clips of cat cam footage. Once into tablet and desktop space we went to town. We made the maps clickable so that the different cat routes would lead the user back to each cat profile page, we added cat cam video panels navigated to from an individual cat image as well as the clickable cat tabs mentioned previously.

cats_3_1024.jpg The design for different screen sizes


Lucy Rodgers, the editorial lead on this project, describes the experience:

The cat project was a perfect one for the Visual Journalism team as we specialise in visualising large amounts of data in an engaging way. The key to the success of the project was collaboration from the start, getting the programme producers talking to the designers, developers and editorial strands of the website team to find out what content would be needed and when.”

A key aspect to the work was mapping the data. Developer Noah Veltman, our visiting Knight-Mozilla OpenNews Fellow, worked on parsing and sequencing tens of thousands of raw GPS readings into a usable format and then used that data to build prototypes using mapping tools like Leaflet and D3. He experimented with a variety of different views like a heat map, a comparison of one cat's movements on different days and a chart of total distance travelled, before settling on the time-lapse of a day in the life of a particular cat as the most interesting view.

All these elements were being assembled by developers Marina Shchukina and Steven Atherton with help from Chris Finch. They were often coding while we were still figuring out aspects of the design.

cats_4_1024.jpg The desktop, mobile and tablet view


Working in such an agile way has its advantages and drawbacks. It’s easier to make design decisions when they can be seen in a browser, but as we work to such tight deadlines it can create unexpected complications such as compatibility in older browsers, responsive coding complications and so on.

This more joined up way of working with development, design and editorial teams collaborating from the start, is the inevitable future for our team in my opinion.

A lot of hard work went into this feature and I’m grateful to have worked on it alongside some very talented people. I would be interested to hear what you think.

Helene Sears is an editorial designer for BBC News.

Read more about developing the cat-cams for The Secret Life of the Cat on technologist Alia Sheikh's blog and more about the programme on the BBC TV blog.

Tagged with:

Comments

Jump to comments pagination
 
 

This entry is now closed for comments

Share this page

More Posts

Previous
Storyline Data Model: Sharing the ontology for BBC News

Wednesday 12 June 2013, 07:00

Next
Developing the camera for Horizon: The Secret Life of the Cat

Thursday 13 June 2013, 11:00

About this Blog

Staff from the BBC's online and technology teams talk about BBC Online, BBC iPlayer, BBC Red Button and the BBC's digital and mobile services. The blog is reactively moderated. Your host is Nick Reynolds.

Blog Updates

Stay updated with the latest posts from the blog.

Subscribe using:

What are feeds?

Links about BBC Online

BBC Internet blog Archive

owl-plain-112.jpg 2012 ι 2011 ι 2010 ι 2009 ι 2008 ι 2007

Tags for archived posts