Wizarding World App

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.

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.

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

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

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

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.

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

Full recording of the prototype made in Principle app

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

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.

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:

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.

Official App Based on J.K. Rowling's Wizarding World Announced

New joint venture the official Wizarding World Digital, a partnership between Pottermore and Warner Bros., will release an official app based on J.K. Rowling's Wizarding World, dubbed " Harry Potter and Fantastic Beasts companion". Previously, Wizarding World Digital launched WizardingWorld.com, a new platform bringing together digital experiences from around J.K.

https://www.forbes.com/sites/emmapocock/2019/08/16/official-app-based-on-j-k-rowlings-wizarding-world-announced/#ce8a87e4570e

Take a First Look at the New Wizarding World App | MuggleNet

We've been anxiously awaiting the brand-new official Wizarding World app ever since it was announced earlier this year. Fans in New Zealand have already gained access to the app, which combines elements from Pottermore with all-new content.

http://www.mugglenet.com/2019/08/take-a-first-look-at-the-new-wizarding-world-app/

Get Sorted Into Your Hogwarts House In AR With New Wizarding World App

Harry Potter fans can now try on the famous sorting hat in AR through the Wizarding World app. Then watch on in fanboy splendor as the hat determines which Hogwarts house they belong in. The experience is part of the new Wizarding World app. It's a companion app for the new site of the same...

https://uploadvr.com/ar-wizarding-world-sorting-hat/

The (NEW) Hogwarts Sorting Ceremony - Wizarding World | Cherry Wallis

☾ PRE-ORDER CHRISTMAS BOX ☞ http://bit.ly/2m80LM9 ♡ Making Aunt Petunia's Pudding: https://youtu.be/yZ69FBLmQYk ♡ Subscribe: https://bit.ly/2SVNVfv ♡ MORE INFO BELOW! Hello! Thank you so much for watching! Be sure to join in the discussion down below! ♡ SOCIAL MEDIA ♡ Twitter: http://www.twitter.com/cherrywallis Instagram: http://www.instagram.com/cherrywallis Facebook: http://www.facebook.com/officialcherrywallis ♡ WANT TO SEND ME MAIL?

https://youtu.be/lRh7o6obsYY?t=82

The NEW Hogwarts Sorting Quiz - WIZARDING WORLD APP (Formerly Pottermore)

I'm taking the NEW Hogwarts Sorting Ceremony on the Wizarding World App! TIME FOR ANOTHER EXISTENTIAL CRISIS ⬇ read more below ⬇ SUBSCRIBE + HIT THAT NOTIFICATION BELL to join the Starfish family!

https://youtu.be/cOg-zPZlFoc?t=126

Wizarding World App Secret Codes (Magical Unlocks)

Uploaded by Nic Ravenclaw on 2019-10-02.

https://www.youtube.com/watch?v=n3BPSEfD5Og

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!