Mathieu Triay: A designer 'spins-a-Penguin' for PRH

Mathieu Triay: A designer 'spins-a-Penguin' for PRH

Editor's Note: As when Penguin Random House launched its PelicanBooks.com app last November, the Little Black Classics retrospective promotion has a strong component of design involved. And having had designer Matthew Young write for us about the Pelican Books development, we wanted to hear from another PRH designer named Matt -- Mathieu Triay -- about how he had approached the iPod-wheel user experience (UX) for the Classics site. As he describes the challenge, that spinning Penguin "needed to find a balance between providing information, with browsing the books both manually and randomly." -- Porter Anderson


For their 80th anniversary, Penguin Books released a new series of 80 books, each costing 80p, called the Little Black Classics. These very affordable and approachable titles would serve as a window into the wider world of Penguin Classics, an introduction of sorts to the pleasure of classical literature.

The microsite project started when Claudia Toia, the Penguin press community manager, shared her idea for ‘Spin-a-Penguin’ with me.

Claudia was keen that the digital component to the campaign would help the readers discover the new books in an interesting way, and so this is how the idea of shaking your device to find a random book in the series came about.

The spinning Penguin site became the main point of call for the campaign, meaning it needed to find a balance between providing information, with browsing the books both manually and randomly.

The intent was mobile first, keeping the shake and the interactivity but allowing for a more granular control over the list of titles. This was going to be a discovery tool as much as a showcase of the new series. The aspect of serendipity and interactivity was paramount; it couldn’t just be a simple list.

With this in mind, we faced a new and interesting puzzle: how do you create an interface where the user can browse, but also be surprised?

And most importantly, how do you achieve this whilst keeping within the constraints around the iconic branding? The colours were to be taken from the book cover design by Jim Stoddart, the Penguin Press art director, which meant I could only really play with black and white. These covers were the ultimate guide around the design of the Web site.

During the next couple of months Claudia and I revisited the first prototype I built in just a few hours, working together closely both in terms of design and features. We soon realised everything needed to be "gesture" based if we wanted it to work on smartphones: scrolling, spinning, tapping, shaking. A search bar or a dropdown list of numbers wouldn’t have the same effect. It became clear that the best idea was that of a circular user interface, undeniably influenced by the iPod clicking wheel. As soon as I thought of a circular interface, my trusty old iPod came to mind with its brilliant way of navigating huge lists quickly, whilst reaching the next tracks accurately.

Then, it’s fair to say that I became obsessed with clicking wheels for a short while. The iPod had a wheel and a screen, but in my case the screen was the wheel and the wheel was the screen. I had a lot of information to display and I couldn’t really separate the two elements: they had to be inside the same window.

On a long journey from Paris to London I ended up drawing about 20 pages of wheels and I kept coming back to something that was close to the original prototype. Once I settled on form and function, I hopped on Illustrator and made about 30 different versions with all possible combinations of colours, Penguin on the inside, on the outside, with numbers and without numbers.

I finally settled on the design you can see now. The quote would be housed under the circular cover: when the user taps the cover, it flips to uncover it.

At this point, we wondered: why can’t you browse the quotes randomly, just as you can with the covers?

The interface remained the same but adding this aspect gave a whole new dimension to the Web site. You could now test and play with your knowledge of the classics by guessing the books from the quotes.

Who would have thought that "Do you see your son, standing over there, in the antechamber? Well, I am going to shoot him." came from Herodotus' The Madness of Cambyses?

Another element that played an important part in the UX of the Web site was the physical outdoor campaign for Little Black Classics.

The 80 posters on the London Underground invite new readers to discover the books with just a quote and a number.

It was crucial to consider the different ways in which the user might come to the Web site and discover the 80 titles.

We realised that whilst some users will land on the site with existing knowledge of the Little Black Classics, we still had to cater to those who might arrive with no prior knowledge, and potentially feel a little lost.

This could easily be, for example, if someone tried to find the specific quote they had seen underground (as in the advert to the right), on the Web site.

Moreover, we had a few difficulties with people discovering "the shake" on mobile (or clicking on the Penguin, the equivalent on desktop).

As soon as we introduced the interactive tutorial (left), these problems disappeared.

As a final touch, we also added a few discoverable commands on desktop, such as using the keyboard arrows to move to the next or previous book, or scrolling to land on a random one as an alternative to clicking on the Penguin.

I was very excited when this project came to completion. We launched the Web site as a tool for both discovery and pre-awareness, one month prior to publication date. In doing so, we gave people the chance to familiarise themselves with the list and pre-order their favourite titles, which they did in great numbers.

The publishing industry can be criticised for its lack of digital savvy, but with the rebirth of PelicanBooks.com as a read-in-the-browser experience and new digitally-focused projects such as the Little Black Classics Web site, Penguin is showing sure signs of wanting to change this perception for the better.

The marketing team at Penguin Press is full of ideas, and I’m positive we’ll see a lot of new digital initiatives coming from them in the near future.