Product Design: DisneyNOW Tokens
Work
The Tokens program is a feature on the DisneyNOW app. Launched in the fall of 2017 on iOS and Android devices, the app aggregates all content from Disney Channel, DisneyXD & Disney Junior apps. With children of all ages and parents as the target audience, the app experience and design had to address immediate challenges: work for children who are too young to read; be visually fun, delightful and appealing to the older children demographic; include sound and motion; and have easy setup flows for parents.
Tokens Feature:
Tokens is an add-on feature, aimed to promote and increase user engagement with DisneyNow app content. When users play games, they earn and accumulate “tokens”. They also win bonus tokens the very first time they open the app each day. Soon users will have enough tokens to exchange them for new emoji. That exchange happens in a special "Emoji Machine" and all emoji are collected into a special screen called "My Emoji". Users can then place new earned emoji throughout the app.
Below are the highlights of the year-long journey creating this feature.
In the Beginning…
Defining requirements and user journey. In order to stay focused on what we needed to accomplish during initial brainstorm sessions, we established a few design principles:
-
Allow users to earn emoji while playing with favorite games
-
Create a hub to house everything Tokens
-
Keep records of earnings (points) and emoji
-
Create a delightful experience
Brainstorm
With data collected from the original launch, and with ideas from the research group with kids of all ages, we got started by asking ourselves a few questions:
1. How should the app let users know when they earn tokens?
2. What are fun ways to collect more emoji after the user gather enough tokens?
3. How to make a seamless experience for both kids and parents?
We also checked to see what the competition was doing. None had an award feature.
User Flow
Users (children of all ages and parents) come to DisneyNow app to watch video and play games:
“As a user, I see ‘My Profile’ icon on the main nav.”
“As a user I can navigate to ‘My Profile’ where I can access my emoji collection, check how many tokens I have, and earn more emoji.”
“As a user, I want to use my tokens to earn more emoji”
“As a user, I want to see a list of the emoji I’ve earned, plus see how many I can still earn”
“As a user, I want to interact with my earned emoji and use it on my profile”
Sketches
Wireframes
Visual Design
Since the visual language, text styles, and patterns had already been established during the first phase of the app, I could then focus on preliminary explorations and came up with some questions: should the feature stand out from the others by giving it a unique background color and texture? What would the illustration style be? Do we need new iconography?
Explorations
Color Palette & Background Texture: After many… many attempts with colors, the team consensus was that, because the Tokens feature related closely to onboarding and settings screens, we would stick to the already established blue (#0048BB) from those screens. We also thought that the blue would make a good base color background for the illustrations, which most likely would have a color palette of reds and yellows. The background texture was still being considered.
Illustration Style: For consistency's sake, the team decided it would be necessary to use the app's existing emoji style, so we hired the same vendor to work on Tokens illustrations. Once it was created, the golden token illustration became the main icon, and I used it throughout the feature, including the token burst background texture (above).
Emoji: During design explorations, I added background plates to emoji displayed on "My Emoji" and "Onboarding Pick Emoji" screens grids. The plates serve as containers, and help blocking off the background texture. There were three emoji instances on the app: No backplates - Used on all screens except the ones mentioned above; With back plates unlocked - to represent earned emoji; With backplates Locked: to represent not earned emoji. I added a fallback blank plate instance for loading delay and/or error. I also created a template to facilitate production – over 700 assets had to be converted.
Motion and Sound
Motion designers help us put the storyboards to life. We also added sound and voice over (for kids who haven’t learned how to read).
The Final Product
Most of Tokens feature has launched in Summer 2019 on Android mobile and tablet devices. Release on iOS devices and TV (Roku, FireTV and Android) is scheduled for some time in the near future.
