How Clearleft redesigned Penguin’s website

Penguin Random House started life as the world’s largest English language publisher after £2.4 billion merger in 2013 and has since launched two new websites – one aimed at consumers and one at the corporate world.

We chat to the founder and managing director of Brighton-based design agency Clearleft, Andy Budd, about how they created the online consumer presence for the new giant.

The first step, it seems, is to deservedly gush a little. “It was a really, really great honour for Clearleft to work with a brand that so many great assets, that has such a design heritage,” says Andy. 

After the initial excitement came the first problem: what was the site going to be for? Competitors like Amazon seem to offer just about everything users need – the ability to read up on potential book buys, check out some colourful reader reviews and, if that all checks out, spend some money.

How do you to draw browsers away from immersive competition to a non-trading site like Penguin Random House? “This picture started forming fairly early,” said Andy, "that it would be really good is to turn Penguin's site into an IMDb for their books.”

As a leading book publisher, Penguin Random House had plenty of access to authors – which meant exclusive interviews, videos and images with the likes of Neil Gaiman. Clearleft had found the site’s hook.

Merging two giants (and their countless offspring) 

Clearleft weren’t just tasked with merging two colossal companies – who together have 25% of the market share – but all their associated brands such as Penguin Classics, Puffin and Ladybird, which Clearleft brought together for the first time in their history.  

The resulting site’s branding may not look particularly Random House, but it’s unmistakably Penguin: the URL includes Penguin, not Random House; the left hand navigation looks like the orange spine of a Penguin book; and, of course, there is the ever-present, ever-enchanting Penguin, er, penguin.

“There was a decision strategically at the early stage that it was all going to be largely under the Penguin brand, mostly because Penguin was better well known in the UK. I can't think of that many other brands in the UK that have books written about their design.”

Even after such a game-changing decision was made (which thankfully made the game easier), Clearleft still had hundreds of identities to deal with. In scale and task, the job wasn’t unlike the government website project that won Design of the Year

Image: Ladybird homepage (top); puffin homepage (bottom)

Each mini-brand within Penguin and Random House had microsites, as did many of the authors. Clearleft had to bring all these hundreds of sites into a larger system for “a much stronger design focus, a much stronger presence and a presence on the single Penguin site.”

Penguin Random House caters from old and young, enthusiasts from gardeners to more specialist hobbyists, and those who enjoy classics to others who prefer Twitterature. “What you want is brands to feel like they’re part of the Penguin family.

There's actually lots of variations of the penguin that kind of has a bit more personality - they're walking around and flapping their wings. For the more playful areas we had the ability to kind of use some of those icons as well.”

Likewise, the publishing house works with thousands of vastly (vastly, vastly…) different authors who originally may have had different websites. “How do you create a design language where you can get both Will Self and Katie Price, which will speak to the audiences in an honest way?” 

Well, we were all thinking it. Sticking authors’ brands and book covers all over Clearleft’s presumably otherwise very-well-decorated walls meant the team could start spotting patterns. Soon common elements were created, such as navigation and – particularly – headers.

“We needed to make it flexible enough that you could take it in different directions. The plan was to basically make that process really, really simple - picking a major colour from the book title, grabbing a graphic from the book title and blurring it out, and creating some of these initial kind of holding pages as default. 

Colour and typographic schemes on top of that create a specific personality - whereas it might be natural for Peppa Pig to happily pop onto the page, it might seem a little weird if a character from a Will Self book did.  

A never-ending story - “see problems, tweak them, iterate them, change them”

Clearleft define themselves as user experience designers - not super sexy, Andy admits, but core principles rarely are. Rather, it’s the designs that come from user experience that are exciting. 

The story begins with two teams of four people researching for over three months, conducting dozens of workshops and talking to hundreds of people – and immersing themselves in everything Penguin. “You don't want to be the people to drop the ball. You don't want to be the people to take 100-odd years of heritage and put something online that doesn't stand up to it.

“We had loads of postcards of Penguin design around the office and books about Penguin design, and the design ambassadors at Penguin have got a wealth of information. It was a very, very intense project.”

Turning all that cramming into a tangible, grade A result took 9 more months of sketching, processing wireframes and prototypes, creating the design language and applying it to an incomprehensible variety of brands.

Clearleft talked to stakeholders, got to grips with Penguin Random House’s existing content and mapped their ideas, through sketches to detailed templates, all the while asking “what’s new and fresh, what needs updating, what can be ditched.” 

From this process – making mistakes and ironing them out – Clearleft created a prototype of the site, which they took for testing. Resulting changes were remarkably simple - such as increasing font size for parents struggling to read thanks to the squirming toddlers on their laps 

“Even if you've got great designers like Clearleft working on a process, there will be things you don't account for because people's mental models are different from yours. People's expectations are different.

“Typically in a usability test, 60 or 70% of the things that we assumed that users would do, they do exactly how we expected. They other 30% look for things in a different way.”

Clients’ tastes are also hard to predict. Andy says conflicting ideas are both inevitable and understandable, whether you’re a well-regarded agency working on a massive project or a smaller agency helping a start-up. “Ultimately what your goal is as a designer is to try and design something that works for both.”

Much more effective than the old ‘fling solutions at a problem we don’t really understand’ approach – where agencies present radically different designs to the client, who then picks one – the modern design process favours understanding the client’s needs and requirements before presenting a best guess.  

“You keep refining and refreshing and perfecting until you get to a point where everyone is kind of happy with the direction and the results. It's lots and lots and lots of iteration.”

At least adapting the site for all platforms, whether the smallest smartphone or a colossal iMac, was simple enough - Clearleft have been leaders in responsive design since before it existed. 

“All of our sites are responsive by default. Whenever we design a site now, we don't just think about the desktop. You need to try and think about all the various platforms that it's going to be designed on.

“That's our philosophy: you design so that whatever device you're looking on, so no matter what size of screen, it looks as good as it possibly can be.” This means that, rather than design for a bigger screen and squashing it down - or visa versa and stretching it out - web designers have to find the middle ground. 

What next? A Penguin Randomhouse cliffhanger

“I think a lot of people think the website launch is the end of the process. Actually, for us, this is just the beginning. So much more is going to happen over the next year or so.”

Clearleft’s job was rooting the creation in a design language – and then letting it grow. As the Penguin internal design team tightens their grip on the reins, it’ll become increasingly inventive with imagery, type and colour. 

CMK Webs Solutions took a comprehensive look at the site: “Sadly, the joy of immersion in some excellent content, is too often jarred by small oversights in the UI; oversights that realistically could be fixed in an afternoon,” it concluded, mainly criticising minor navigation problems.

Andy took these criticisms comfortably – not a surprise given his approach is principally about learning and iterating. “I think the design team internally is already kind of planning the next phase and what they're going to be doing. They'll push the boundaries, as all good designers do.”

Image: CMK Web Solutions criticised the inability to return to the authors menu from an individual author's page without using the 'back' button on your browser

One interesting future possibility is e-commerce, which makes perfect sense, economically, for ease-of-use - and quite possibly to have a satisfying stab at Amazon.

“From what we can tell, the reception has been really, really positive. I think lots of other publisher are looking at it and going ‘there's something interesting here’. We can see where this is going and it's getting better.”

For Clearleft, a project is a success if the client doesn’t need to return to them – however fun the project might be. “A lot of design agencies want to get in with a brand and get their claws in and stay there forever. We're the opposite.”

Clearleft had to work hard to get their “dream project”, finding they had to sell design to such a large organisation - it’s harder to convince a sprawling, massive company to trust in you than it is to convince an organisation whose employees can fit round one meeting room table. 

“I think the best designers are communicators at heart. It's about explaining the decisions, explaining the rationale, getting everyone comfortable. Its' a tough job, but it's also a fun one, as well.

“And, like I say, this is just early days. It will keep getting better and growing and turning into an amazing site.”

Find out how Clearleft designed Penguin Random House’s corporate site. 

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...