Towards the end of last year, we completed a project for blinkbox Books that charted the careers of some of the greatest authors of the last 200 years, and showed at what age they published their breakthrough books. The final piece was an overall success, doing well on social media and gaining some excellent coverage online. However, the process of arriving at the final execution and design was by no means straight forward.
I’m a graphic designer at Distilled and my role in this project was to design the piece, i.e. to create an overarching style relevant to the content, consider the user experience, and ensure the piece works across different platforms. Throughout this process, I worked closely with our data journalist and creative lead to find the most compelling visual solution for the data we had and the story we wanted it to tell.
In this post I’m going to walk you through the design process, focusing on how we developed our chosen method for executing the data, and showing real examples from each step.
The final piece
For the final execution we arranged bars on a timeline (one bar indicates that at least one book was published in a given year) and used a heat map to show where multiple books were published – the deeper the shade of orange, the greater the number of books (up to ten). The timeline was normalised (as opposed to chronological) to focus on the author age as opposed to the year in which books were published. We then book marked the breakthrough books, as well as direct labelling the age of the authors when they published the books. Finally, we added filters at the top to allow additional exploration of the piece, with age of breakthrough set as the default view.
(Since working with blinkbox Books Tesco decided to close its ebook service and so the website is not longer active, but you can still take a look at the interactive piece here.)
Campaign results
In the first ten days, the piece received 186,000 visits, 739 tweets (including tweets from Short List and Book Riot), and 3800 Facebook likes (and was shared on Haruki Murakami’s and Thomas Hardy’s pages). The piece also gained coverage from a host of websites including:
-
The Guardian
-
BuzzFeed
-
Short List
-
The Daily Telegraph
-
Adweek
-
Paste
-
Vox
-
Book Riot
The design process
When I started working on this piece, a strong idea had already been established. My task, along with the data journalist and creative lead, was to find an execution that would best highlight the core story or hook of the piece (the age at which authors published their breakthrough books) whilst meeting a criteria of deliverables:
-
Visualising a timeline that spanned 100 years
-
Designing the piece to be fully responsive
-
Displaying multiple data points per year (up to ten)
What follows is a series of design mock-ups, tests and visual experiments in the order that they were created.
The initial mock-up pitched to the client
Pro:
-
Bubbles on a timeline seemed to work and the breakthrough book was clearly highlighted.
Cons:
-
Design was unlikely to work on mobile.
-
The solution for multiple books in a year was, at this stage, stacked bubbles which wouldn’t be feasible.
Going mobile-first
We explored stacking the bubbles horizontally with the breakthrough book highlighted and age at breakthrough book directly labelled within the appropriate bubble.
Pros:
-
Worked well responsively as the bubbles could drop down onto new lines as the window reduced in size.
-
Conveyed some of the top level stories (number of books published, age of breakthrough book, etc).
Con:
-
The data visualisation was counterintuitive to making cross-author comparisons of age at breakthrough book.
Bubbles by age of author
Pro:
-
Interesting to see the authors compared side by side on the same timeline.
Cons:
-
A bit squeezed on such a narrow screen.
-
Still no solution for multiple books published in the same year.
While the latter wasn’t a priority at this stage, we started testing solutions with the current execution. We applied a heat map to the bubbles and increased the graph width to see how this approach might look as the screen size grew.
Heat map and wider graph
Pro:
-
Addition of the heat map began to add a bit more interest and tell more of a story.
Con:
-
Because the dots had to be so small (due, ultimately, to the number of years on the timeline) the piece was beginning to feel a bit underwhelming and the core story was somewhat retreating.
A bunch of quick tests
These explored alternatives to both dots and the heat map.
Number of books represented by size
Arc graph
Con:
-
Too much of the focus on time between publishing.
Radial timeline
Cons:
-
Cross author comparisons difficult and counterintuitive to way people understand timelines.
-
Requires the user to work harder to pull out stories.
None of the above felt like the right solution – there were some interesting results but in every case the core focus of the piece, again, seemed to be somewhat insignificant.
So we decided to go back to looking at this project mobile-first, designing it in a way that would include all the criteria outlined at the beginning of the post.
Back to mobile-first
Pro:
-
Initial execution seemed as if it would work on very narrow screens.
-
Stacked horizontal bars subtly resembled books on a shelf.
Con:
-
Showing multiple books per year by breaking the line into a number of smaller stacked lines was unclear and hard to see, especially on mobile screens where the bars were already so thin.
-
Lines too thin and the core story wasn’t clear enough.
Same but with bookshelf metaphor emphasised
Pro:
-
Clear visual representation of books on a shelf.
Cons:
-
Rectangles too large and needed to overlap to fit on the scale, affecting the overall readability of the graph.
I then tried creating something between this and the mobile-first design.
Bookshelf metaphor with more subtlety
I then developed this approach by reintroducing the heat map and thickening the bars.
Pros:
-
Heatmap was working better on the bars than it was on the dots and additional stories started becoming visible. While this wasn’t necessarily the most accurate way to show exactly how many books were published each year, we were happy to compromise as this was not the core focus of the piece.
-
Similarly, we knew highlighting the breakthrough book by making the bar for that year a dark shade of purple was not the best practise from a data vis perspective because it obscured the heat map tone for that year – but we were, again, willing to compromise as it was more important that the breakthrough book really stood out.
-
Other attempts to highlight this whilst still making the heat map visible had not been obvious enough when the piece was viewed from a broader perspective.
At this stage we were happy we had arrived at the the execution that best highlighted the core focus of the piece in a compelling way, whilst still meeting the criteria of deliverables. On top of this, we had created a subtle visual metaphor relevant to the content within the data vis itself.
Refining details and adding design and interactive elements
Approaching the execution mobile-first paid off toward the end of the design process because we knew the piece would work across all platforms as it was fully scalable on the horizontal axis:
Pros:
-
The core focus of the piece – the age at which authors published their breakthrough book – was still very clear and comparisons between authors were easily made.
One problem we had on mobile was that interaction with the bars was tricky given their thickness, but this is something we anticipated when seeing the early mock-up of this execution. As such I proposed we add a touch and drag functionality that would give the user more control over selecting specific bars.
Last minute design changes
The client was happy with the latest piece. In particular, they liked the bookshelf metaphor and wanted us to focus more on that, making it a more prominent design feature around which the overall styling could be built, so I re-skinned the piece.
Taking the opportunity to make a few more design tweaks, we:
-
Changed the way we highlighted the breakthrough book. Whereas before the whole bar was a dark shade of purple, we instead added a bookmark to the top of the bar. This had the benefit of still allowing the heat map to be seen.
-
Added direct labels relevant to each of the filters to give the user direct information relevant to the key and secondary stories.
I hope you found this case study interesting. It talked through many of the challenges we typically face when creating content, particularly with data-led pieces. What worked was that we had an idea we really believed in – a core story that people would care about and we let that lead the visual execution, ensuring it was always the core focus when assessing suitability at each step.
Whenever we work on projects like this we remain aware of the principles of data visualisation and design but accept that comprises will occur in the interest of prioritising the focus. With this piece, for example, we knew that the heat map wasn’t the perfect solution but it was good enough, it added context to the core focus but in no way overshadowed or detracted from it.
While the process of iteration outlined here can be slightly time consuming, it is generally very interesting and in our experience the exploration is invaluable to nailing the execution, telling the right stories well and getting the best result possible!
If you’d like to get notifications of upcoming posts from our Creative team, sign up to our mailing list. We’ll be talking through tips for designing slidedecks, meta tags for social media SEO, and more.