Overview
Almost all 2018 I've worked for an app for Warner Brother's Harry Potter franchise called The Wizarding World. An app that would unify all subbrands and be like an HP universe, a go-to place to find info about your movies, games, quizzes, video trailers and much more.
This came like a really cool story because I haven't read or seen any Harry Potter book or movie and surprisingly all my colleagues where quite fans of it. This was soon to change, but in the first stage, I think this was quite cool as it balanced out the team. I was more of a user and tech advocate, bridging the gap between the dev team and the creative directors.
We used React to build the whole app and this brought some interesting solutions how to create 'magical' interactions like smoke, glitter, sparkles within a framework that is mainly used for fast grid-like content (for example Instagram app is built in react native). We used Airbnb's Lottie plugin a lot, combined with video renders along with parallax libraries
I've joined the team at Huge just after the discovery phase, when we decided that we have in scope an app, as opposed to a web portal (As Star Wars franchise has).
My work included
- User Research on various audience groups
- UX documentation
- Visual design, components
- Propose, validate and mock up features
- Setting up a scalable design system with reusable components
- Interaction solution for mobile devices
- Prototype testing with multiple user groups
- Handling out design to the dev team in Bogota
Here is a demo prototype made especially for J.K. Rowlins showing the core functionality like the first run, introduction to the feed, menu, profile, card packs navigation, showing different card types, quiz flow (questions, scorecard), It was built in Principle with assets from Sketch + After Effects, apart from the Sorting Hat flow (1:30) that was the actual AR build. (Please be mindful as it may take time to load)
Concept
The app mechanics is a way to digest content in small 'bite-size' pieces. It works as a feed, similar of what facebook, twitter and Instagram delivers to the users, this was great because it has some great advantages over traditional navigation as you can tailor the experience to each user groups.
The content is pushed to the users in the form of cards and pack of cards. We content tested with multiple ways of doing this and how the audience will perceive packs with a weekly structure (similar to a magazine) versus single daily drops. We came to the result that a combination of these two will be great to capture attention and enrol users to create a habit in checking the app.
Cards come in packs or individual items and the user will always see a different feed when the app is opened up. When a previous pack is outdated by a new pack it will be positioned at the end of the current array of cards.
Side by side navigation of the prototype shows the different levels of content a user can go through. You can see related cards and dive endlessly deep into the structure, but always can come back to the starting point using the main navigation.
Original video link
Cards have a haptic response, moving them left and right (swiping) will pull other cards with a slight delay while tap and hold brings out the respective card.
/w=3840,quality=90,fit=scale-down)
Coppa flow
The project itself was designed for a broad audience as the franchise covers adults, kids and parents on the same app. For the under 13's in the US we were required to create a specific flow where their parents or supervisor would grant permission to use the app. In the example below, we created a way to request, grant permission (via email) and register under 13's without any storage of their data. This was later sent and approved by a law consultant part of Warner Brothers group.
The app itself would feel and be structured the same as most of the section is modular and can be made invisible or visible according to the permissions.
_(2)/w=3840,quality=90,fit=scale-down)
Login, Onboarding and Registration
Working on login brought a mix of UX, Visual Design and motion Interaction. Here is a video of the full (prototyped) experience and below is a breakdown of each feature and a bit of explanation.
Features
Load Screen
Once the page is loaded the logos and text appear gradually, they hold ±800ms and then the screen moves down to the day date input
/w=3840,quality=90,fit=scale-down)
Date Input
Once touched, the input field will be auto-populated with the 01 number and the select port will pop on.
From here the selection is either synced or it auto update itself when the user selects a date from the selection promt
.gif?w=800)
Email Input
The two markers on the side indicate the step and details of the input
Back button gets us to the previous step
Additionally you can swipe up and down to go to the back and next fields
Note: The blinking text cursor will disappear when fields are transitioning
/w=3840,quality=90,fit=scale-down)
Show or hide password
Password comes as default hidden, if you are the only one using the device and you feel confortable an option to show the text.
/w=3840,quality=90,fit=scale-down)
In the onboarding we created a selection flow in order to know our users more and tailor our content and prevent spoilers. In this example users can select what Books, Movies and Plays they seen or read.
Benefits Vault
The benefit vault is the place where you could see your benefits as a member of the Wizarding World. As opposed to simple benefits listing grid, we had a couple of variables as some of them where date driven (events), that will most likely be featured or pinned on top when you open the section.
We had a couple of variations beside 'normal' items, a few and what I think are the most interesting ones listed below:
Weekly Drops used a similar pattern used frequently in the sneaker industry for special or limited releases.
Coming Soon — Can be used on some but not all benefits in order to build up anticipation (aka hype). As a CTA you can choose to be notified will be a nice to have. Can include a countdown until the product is launched.
Claimed — This means they have claimed it by doing the tap and hold but have not yet redeemed it. Could use same icon as we use in the ‘My Rewards’ button at the top of the main page?
Expiring Soon — Are benefit items that are about to go away. In order to emphasize this in visual terms we mocked up a benefit card that literally goes way, at least with a couple of pixels.
We also experimented with a sniffler like animation that will 'steal' or push the container aside.
Expired — Expired benefit cards would appear greyed out but still readable. With expired cards we wanted a way to show what users missed out and promote reccuring events. Also bare in mind this app is about to launch globally and we considered the variations of content versus determined by location.
User Testing
In this project apart we had over 7 user testing rounds, roughly one per month or one at every two-week sprints in order to test and help us pivot our product dynamically.
Here is a sample of our mid october user testing round in order to see the steps and process of our close to the finished app:
October User Testing
For testing we created a key template in spreadsheets with our hypothesis in scope. Each section of the app has a cell allocated to see if a user would pass or miss each section. When the testing is over we can see a percentage score of each section from where we can then decide which area we can improve recording of the prototype
Items we tested:
Parallax Canvas
To reduce the size and avoid video files we created a mix of images that move position on scroll and transition up and down automatically. The aim is to reduce file size as long as to create a not distraction environment where content will pop out more.
Menu and Navigation
Navigation is based on tabs, each section should be treated as a separate workspace, once you tap another section and come back, you will end on the same place where you left.
Discover page/Indexes:
Discovery is the go to place to see structured documented content
Issue Archive
A section where you can see past issues of the magasine like card packs
Editorial Section
News
Quizzes
Quiz archive with a horizontal scroll filter method
Lazy Loading When a user scrolls to the end of the page some elements will start to load. This will save a lot of the loading speed on mobile as most of the pages are content-heavy
Methodology
- We conducted six one-on-one user testing sessions with Devourers and Faithfuls to evaluate users’ experiences with two wireframe prototypes and the latest Sorting Hat build from Nexus.
- Sessions took place on 29 October , 2018 and lasted up approximately 30 mins.
- The sessions were moderated by a Huge researcher and conducted in the Huge Brooklyn office.
- All interviews were video and audio recorded via Lookback.io, a platform that allowed averyone from the team to review and add comments.
Findings
We each created notes and observations individually, after the tests we merged our findings in a google doc
Agregated findings in our monthly stakeholders presentation.
Wizzarding World Web
UX Workshop
Now I know every time is different so It's better to choose and improvise what is the best way to collab and sparkle creativity within your group. In this case we used the crazy 8's workshop method in order to engage everybody from the team to draw their ideas on paper, present and then vote for the most interesting findings. Here are a couple of ideas that popped out:
- Magazine “Fanzine” Editorial Packs
- Profile Timeline
- WW “Passport” Printing
- Hover State Interlinks and Images
Information Architecture
/w=1200,quality=90,fit=scale-down)
Ecomm
One of the big revenue streams for the Harry Potter francise are merch. Their stores are always crowded and has an incredible taxonomy of items. We worked with a third party agency specialised in custom large eCommerce platforms.
The challenges was to work out the interation of the store in out app, navigation, product widgets, featured products, promotions, filters, on store collection flow, apple pay integration.
.gif?w=896)
Experiments
Here is a selection of the many interactions prototypes we did in over a year of testing, some of them where included in the development roadmap later on, some are just to test all kind of wacky ideas that came out of a workshop session:
/w=3840,quality=90,fit=scale-down)
Press coverage
Here are a couple of articles and youtubers reviewing the app. As in late 2019,it seems it's launched on iOS and Android and includes most of the features in scope, following for all updates to be pushed in yearly 2020 (to replace the Pottermore website).
You can get the app for iOS here.
Thanks to the HUGE & WB teams
It was a pleasant ride to spend time with you guys and shape up this project! There where so many cool and talented people around like Kieron Leppard, Angie Yuanmalai, Derek Fridman, Oliver De Cet, Tom Bloomfield, Ben Gonshaw, Anna Parellada, Giorgia Xia, Baptiste Dumas, Stephanie King among the rest of Huge London and Ney York teams!
