Pottermore — a UX case study

Introduction

I joined Pottermore in mid-2015 as a freelance senior UX designer to launch the new Pottermore website. Pottermore is the digital heart of J.K. Rowling’s ‘Wizarding World’.

The project started by collaborating with marketing to define five audience segments for Pottermore. I then worked with analysts to create equivalent digital cohorts based on typical site usage. I added context to the audience segments by conducting interviews with customers.

Components and IA

Several components were proposed by Studio Output to represent the differing content across the Wizarding World. This made it possible to represent the different moods of the books, films, or theatre productions without making the experience feel too fragmented.

The IA relied heavily on tagging similar artefacts (handled by a Contentful backend). In this way the IA was quite shallow so we utilised content recommendations when you’d finished reading a page. The new design system used paper components for writing and stacked artefacts for associated content (or for hubs).

We created interesting paths through related content and used tags to encourage deeper engagement with the wider Wizarding World.

Searching

We identified a key user need in having an effective site search and designed the search experience to be as delightful as possible (some content could only be found via search). During a search you could filter by popular content, J. K. Rowling’s original writing, story artifacts, features, or news.

Migrating users

Pottermore has a very passionate following and so it was incredibly important to provide a delightful experience. I worked with the social team to assess existing sentiment across our audience segments.

One key finding from social was that it was important to bring as much of the previous logged in experience to the new site as possible. Existing users were worried that their identity and progress would be lost by moving to a new site, so we needed to migrate everything they cared about.

I worked closely with the developers to understand the requirements for the non-happy-path identity migration flows. This involved designing and testing multiple recovery journeys based on different user scenarios: retrieval via email, retrieval via username, forgotten password, multiple accounts on one email address, family account, etc.

It was important that no customer felt locked out of the new platform. We transferred their account, house and wand to the new platform. The conversion rate of active users was extremely high.

eCommerce shop

After the personlised hub was handed over to devs, I followed a similar process for designing and testing the all new Pottermore shop.

The shop had to handle some fairly complicated eCommerce (and delivery) flows for eBooks and audio books (including device compatibility checking and content previews). The shop also had to be capable of selling more conventional (physical) gifts and gift cards.

I designed for simplicity and delight, the core flows were again tested across our five audience segments.

During testing, I identified it was critical to be able to sync your purchased content without re-visiting the shop. The personalised hub was tweaked accordingly so that it could store and sync users’ digital purchases.

AR experience

For the ‘A Celebration of Harry Potter’ weekend in Orlando, Florida. I created an AR experience in the form of a HUGE interactive map.

Fans could scan the map using their phone to access exclusive wizarding schools content (brand new writing from J.K. Rowling). They could then take their journey further via registration on Pottermore, or could share their discovery with their friends.

I created a prototype map (at scale!) to ensure the hotspots would scan well. The prototype made me realise I needed to create an interstitial screen where you could pick one of the three European schools (as otherwise it was difficult to scan Hogwarts due to it’s proximity to other schools).

To ensure strong uptake of the experience I promoted downloading the AR app at several key stages prior to the event.

During the weekend there were over 15,000 interactions by over 1,700 users. The average dwell time (per user) was just below 3 minutes. There was a huge amount of positive feedback about the AR experience and we were able to see a strong uplift in the number of newly registered users on the Pottermore site during the weekend (and beyond).

One unexpected element was when there was further uptake of the experience by fans that weren’t at the event… other fans took high-res photos of the map so their friends could then scan it remotely!

Patronus Quiz

One of the most requested and anticipated features from Pottermore fans (usually on social media) was the Patronus quiz.

To do this feature justice, I first mapped a value proposition canvas to discover how to match user needs to business goals.

After many workshops and technical conversations, I proposed a fully immersive experience utilising three.js libraries to create an animated 3D model of your Patronus. We prototyped some low-fidelity variations of the core flow and started testing them internally:

We conducted some accessibility checks which surfaced a problem for users that couldn’t operate a traditional mouse. We needed to tweak the time constraints to ensure the experience could be enjoyed by all.

The experience was designed to work delightfully across all devices (including older phones). I created the ideal traffic flow for launch before mocking up the pages and testing the flow for usability.

The Patronus quiz was a long awaited feature (2–3 years in the making). It was developed by Active Theory and caused quite a sensation on social media when it was launched. I suggested many possible future uses for the infinitely scalable 3D models whilst at Pottermore, watch this space…

Summary

I worked at Pottermore for just over a year, most of my projects for Pottermore took ~3 months. I usually worked in sync with the dev sprint cycle. However, sometimes I collaborated more closely with marketing (outside of a sprint).

I worked alongside another UXer and we had a development team of six. Whilst I was at Pottermore the developers were being supported by Energized Work (in transitioning to more agile ways of working). The core website components were proposed by Studio Output.

Pottermore had a 167% rise in revenue from 2016 to 2017.

Awards

The new Pottermore site was awarded a Social Buzz Award in 2016.

The Patronus quiz was awarded ‘FWA of the Day’ and ‘FWA of the Month’ (October 2016).

The Patronus quiz was awarded a Daily Award from Awwwards and was featured in ‘The Best 365 Websites Around the World’ (2016).