They asked us a simple question: What role does a publisher’s website play in world of Amazon?
As formerly separate companies, Penguin and Random House each had their own websites. Collectively, they also managed more than 700 other websites focussed on authors, books, series, and characters. They knew this wasn’t working. Few of those 700 sites had much traffic, and commissioning new sites with external agencies every time was getting expensive.
Penguin was to become the new consumer-facing brand; it has 100% market recognition and the biggest catalogue in the world. Penguin Random House wanted to expand the brand beyond classics. People also don’t know that it’s related to two other strong brands, Puffin and Ladybird. How could we change the perception of Penguin and its related brands? This brief became one of our biggest, most challenging projects. Here is the story…
Penguin Random House believed that the new Penguin website could help people discover their next read. At Clearleft, we love a good provocation, so we asked a question to challenge this notion: What is a publisher’s website for? What value can the organisation offer consumers?
We wanted wide input on this question from across the organisation. Enter the KJ workshop, a tool we use to get a large number of people answering a question (in silence!).
The results contradicted what we had heard. Staff believed that what they could offer readers was unique content, and better access to authors. To get strategic clarity, we worked with stakeholders to identify the top business objectives. With a bit of help from us, the internal team decided that the web should:
- Help to grow authors as brands
- Increase the value of the Penguin brand (and any other consumer brands, like Puffin)
- Foster users’ loyalty with compelling experiences (to support the other objectives)
A further challenge emerged in the early days of the project. How could a website serve both the industry and the public at the same time?
Firstly, Penguin Random House’s customer intelligence team gave us their latest customer research; handy! With a clear idea of the customer base from them, we invited representative readers into research sessions to see what we could find out. Some example insights from the research:
- Most people didn’t find the idea of using penguin.co.uk to find books compelling. Yet, once there, they liked what they saw. We also saw an uptick in visitors using the site for this purpose at Christmas.
- Wikipedia ruled the roost. When asked to find out what an author had written, people ignored the author’s own website (1st result on google), then headed straight for the author’s Wikipedia entry (2nd).
- We also saw users fail to find what they wanted on author websites, and thought there might be a connection.
- Young adults had different ways of discovering and choosing books. Example: looking at selfies on Tumblr of other young adults holding books they liked.
- Parents seemed willing to accept marketing aimed at their kids if it encouraged reading. They were more sceptical about marketing aimed at themselves.
At the end of this process, we had a set of personas to empathise with, and a catalogue of user needs to design against.
Discovery: product concept
We took some time to reflect on what we’d discovered. Then, we summarised the kind of product we thought the organisation should create. We made two principle suggestions:
- A new consumer-facing website should act as a ‘universe’ of everything that Penguin offers. House the related brands (e.g. Puffin, Ladybird, authors) in one place, like the BBC does.
- Original and exclusive content should be focussed around the authors and their books. Penguin Random House could do a better job producing author-related content than other sites. The platform would allow authors to have a great digital presence without the expense of commissioning a new website.
The new platform would give internal teams the chance to share marketing capabilities. They could also place content into relevant areas (e.g. an article about an author, a book, and a genre). A design system that meets user needs consistently would avoid the problems of 700+ different websites.
Splitting the product
Once we had proposed a product, we realised it was too much to take on at once. Even though we wanted to create a design system for re-use, there were three workstreams:
- penguin.co.uk should be the centre of a universe, with content for adult readers. You can keep reading about this project below.
- Puffin / Ladybird: Our research showed that parents and children had different needs. The brands required different design and destinations. Read a case study about this project
- B2B - many other publisher sites try to serve the needs of industry and consumers in the same place. We decided against this example, and so created penguinrandomhouse.co.uk to serve the B2B audience. Read a case study about this project
The Information Architecture
Influenced by Mike Atherton’s ‘Beyond the Polar Bear’ - we created a domain model. It covered concepts like authors, books, and all the associated content from 700+ websites.
In doing so, we wanted to disambiguate the relationship between titles (like The Tipping Point) and editions of that title (such as hardback, paperback, etc). The old penguin site had a page for every edition, with no relationship between editions of the same title. We felt this was confusing for users and a missed opportunity. The new IA made the title the central unit of content, instead of the edition.
Next up: a roadbump. Although we wanted to craft a new taxonomy based on new metadata, we realised it might be wasted effort. Penguin Random House were only just starting the difficult process of merging their catalogues. There was no possibility of reclassifying books during this process. We decided against rethinking the ‘fiction’ and ‘non-fiction’ (and all the related categories) too much; we had no way of changing categorisation in the short / medium term.
Taking our cues from the needs list and the personas, we crafted a series of journeys with different entry points. We thought about the way someone might browse the site, and the potential opportunities for discovering interesting content at different points in the journey.
Visual Design and Brand
When it came to the brand, we were pushing the Penguin into unchartered waters, places the brand guidelines didn’t cover. The design language would be used to in places where the Penguin is secondary to another brand (e.g. Jamie Oliver, or Puffin).
After much experimentation and testing with other brands, the result is the sidebar shown here. It gives some implicit consistency across the Penguin universe, while allowing other brands to express themselves. A user might unconsciously know that the brands were part of a universe, even if the colour and logo were different.
We agonised over the typography. Although there were brand guidelines, we didn’t feel they had a universal feel. Our choice of Bliss and Fort reflects this idea. We built throwaway HTML responsive prototypes, to see what our suggested design language looked like on a variety of devices.
UI Design and Testing
Armed with a these inputs, we began the process of designing the interface. To make fast progress, we (mostly) skipped wireframes, going straight from sketches to visual design. To get constant feedback, we ran usability testing sessions roughly once a month (over 6 months). Feedback was positive: participants were quick to click on the original content. This supported our hypothesis about the value of the product. Comments included: “I would bookmark this and visit it regularly”. We fixed some usability issues along the way.
Once the interface had matured to a certain point, our work sped up. The early design patterns could be reused on later pages. Eventually we handed the design patterns to the Puffin + Ladybird team to restyle: they could avoid creating new elements when ours fit the bill.
The content producers worked in different divisions across a large organisation. To finish up, we created a manual to explain the design and to ensure consistency between teams.