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

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.

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.

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.

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.

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.

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:

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

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.

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:

Information Architecture

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.

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:

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.