J.K. Rowling’s Pottermore

J.K. Rowling’s magical corner of the internet’ – Pottermore.

I worked with Studio Output – the design team behind the One Direction website and some of the BBC’s most iconic brands, to re-imagine the new Pottermore.

I was Senior Designer on the new responsive website - a digital experience to captivate and engage one of the biggest fan communities in the world. Our challenge was to help set the future digital direction of Pottermore. I was involved in setting visual style, interaction language and the user experience of this magical universe.

Window into the wizarding world

The original Pottermore site was built for desktop, and with an increasing number of users accessing the site on mobile devices, ensuring the new site worked beautifully across all screen sizes was paramount.

Our design direction took inspiration from traditional print and book design. We took a mobile first approach which allowed us to quickly prioritise content, helping inform both the content strategy and the site architecture. We built rapid prototypes in HTML & CSS to explore and test our grid systems, type stacks and layouts - and InVision was used to share high fidelity interactive user journeys with the client.

Creating a beautiful reading experience

The new Pottermore is all about J.K. Rowling’s new writing. One of our primary goals was to create an inspiring and enjoyable reading experience.

We begun by looking at type size, line length, type scales and other typographical wizardry. Our main challenge was to achieve the same delightful reading experience across all devices and screen sizes. Type sizes that feel wonderful when sat at home, on the sofa with your laptop, don’t neccessarily work as well on your mobile; they have to be carefully considered for each screen size or device. We built prototypes to test and share with users and the client.

Achieving something magical

We spent 2-3 days a week embedded in the Pottermore HQ, essentially becoming an extension of the in-house team.

We presented & showcased our progress to up to 30 people each week (from team leads to the CEO). We ran weekly meetings and workshops with key stake-holders and worked collaboratively with the software engineering team, Energized Work. The whole project span over 12 months and each sprint allowed us to develop and evolve both our thinking and individual features. We ran user testing sessions with staff from Warner Brothers, which enabled us to understand how well the overall experience was evolving and ensured our focus was on the users needs.

Design Director
Johanna Drewe

Maria Turk

Siobhan Rae

Strategy Director
Dave McDougall

Martin Davies

Senior Designer
Tommy Toner

Energised Work