Designing for a (very large) flightless bird

Penguin Random House

Creating the UK corporate face of the newly-formed publishing giant

Intro

Having just recently become one of the world's largest publishers, Penguin Random House needed a way to update and inform potential authors, publishers and interested consumers interested in working with the publishing giant.

Already 6 months into a 12-month commission for redesigning the entire consumer-facing Penguin UK site, Clearleft were further commissioned to redesign the corporate website. I was tasked with designing the new corporate visual language of the Penguin Random House UK site, using the new identity designed by renowned brand agency Pentagram as a starting point.

Exploration

As with most projects these days, after speaking to the key stakeholders to better understand the desired direction, style and tone of the future site, I created various element collages to help articulate and illustrate some ideas. Using the typographic palette specified by Pentagram, I explored various routes, always seeking to elevate the content through strong typographic hierarchy and punctuated by the strong, stark colour palette. After all, this is partly Penguin — a brand with a huge design heritage — so it was in our best interest to get it right.

Elements

Getting direction

Once we hit upon a style and tone for the visual language that felt appropriate to the stakeholders and clientele alike, we dived deep into the experience and user journeys of the site.

Working with Andy Parker as the UX designer, we co-designed the various user journeys, breaking up the journeys into 2-week sprints that let us work closely with our stakeholders to ensure we were designing for the right audience and with the right information.

As we sketched out ideas for pages, I designed and mocked-up the journeys at a higher fidelity. Through small, quick cycles of convergent-to-divergent design, we arrived at the end of each sprint with just-enough-fidelity journeys to play back to the stakeholders and wider team.

sketch

An early concept for the News section of the site.

discovery-news

Navigation

Surprisingly the navigation of a seemingly straightforward corporate site was more complex than first expected. Firstly we faced an uphill battle in that the rebranding of PRH and the consolidation of content happening at the same time as this redesign meant that 'real' content was at a premium. As a result we were challenged with creating an Information Architecture and navigational system that scaled and adapted to future content, without knowing what the content would be.

As a result I proceeded to create various design elements around the navigation and demo the ideas to our stakeholder team. Turning to the great prototyping app Marvel I quickly mocked up a few ideas for both small and large screen experiences, which helped the client better understand how the navigation would look and — more importantly — feel. We then baked this interaction design (IxD) into a full-fat HTML prototype that Andy had whipped together.

Search-1

Below is the prototype used to communicate the ideas for small screen navigation:

Focusing

As Hemingway once said, "The first draft of anything is shit". The original element collage and subsequent higher-fidelity design comps were useful for eliciting ideas and conversation, but they weren't yet fully-refined to the visual language PRH felt was on par with their messaging and stature. In a 'less is more' approach, I refined, reduced and minimised the overall visual language, while still keeping strong typography and the emphasis of content at the top of the list.

Outcomes

The result is a rich repository of Penguin Random House's corporate content... a place where interested authors, publishers and consumers can go to get a better, fuller picture of the publishing giant's corporate responsibility initiatives, the history of the merger, press releases, locations and more. Of course the site is responsive, and the IA will (hopefully) scale accordingly to accommodate more content for years to come.

Company-history
News-article
Office-2---Strand
Homepage-playback