Project Contributions: Product Thinking, Persona Development, Experience Mapping, Information Architecture, Systems & User Flows, Interaction Design, Prototyping, Visual Design, Style Guide & Pattern Library Development
The thoughts and opinions presented here are my own and do not reflect those of The Walt Disney Company. To the best of my knowledge, I have omitted confidential material to comply with my non-disclosure agreement.
I first heard about DisneyLife (a.k.a. "Project Horizon") in late 2013, within my first week of joining Disney Interactive Labs . To everyone on the project, our task seemed equally exciting and ambitious: create Disney’s first direct-to-consumer streaming service.
DisneyLife as it looked on launch day, November 2015.
Design Challenges
1. Support video, books, and music — all in one app
Early on, it was decided that DisneyLife would encompass multiple content types. Each of these types required its own set of mental models, user behaviors and scenarios. With this in mind, we knew weaving these threads cohesively would be a difficult––though invigorating––task.
2. Design an experience useful to both parents and kids
Disney prides itself on being a brand that resonates with Guests "aged 2 to 102." With the same expectation placed on our app, we knew we'd have to design for a range of demographics. Most prominent of these user groups were young kids aged 4-9, who would use the app regularly, and parents, who were the main targets for marketing.
3. Meet Guests' expectations for Disney "magic"
These days, the word "magic" is synonymous with Disney. We knew Guests expected to be dazzled with our service from day one, and we wanted to deliver. To achieve this, we had to stretch our definition of "magic" to encapsulate both an intuitive, useful user experience as well as an emotionally and visually stunning product.
Finding the Heart of the Story
We kicked off the project with loads of market research, a hearty set of business goals, and qualitative data from target user interviews. After evaluating these materials, we dove straight into design, mapped out flows, created prototypes, and tested paradigms with users.
We know now that was the wrong approach.
We first needed a holistic vision of how all our proposed features could be fused to create a Guest experience full of meaning, delight, and value. To achieve this, we pivoted our focus toward creating documents that:
- showcased a vision that would inspire all stakeholders and makers on the project
- synthesized the feature list into a valuable experience Guests would gladly pay for
- identified potential pitfalls and points of tension within the service
- found opportunities to inject Disney “magic” into the service, whether it be through our famous customer support, interactions with our memorable characters, or our stunning technological legacy.
Vision Poster
Inspired by Alexa Andrzejewski's talk on communicating vision, I led an exercise to help the larger team prioritize features and define the Guest narrative for DisneyLife. The result was an 8.5 x 11" vision poster that could be easily shared and presented to any team member.
The initial vision poster for DisneyLife (a.k.a. "Project Horizon").
Shot of whiteboard session to curate the vision poster.
Imagining Personas
The vision poster inspired us to create our first set of user personas. These characters, which represent our primary and secondary demographics, continue to be useful throughout our design and strategy process. They have helped us dive deeper into the psyche of our Guests, remove subjectivity from our design and product discussions, and give soul to our process. Most of all, they serve as a constant reminder that we are creating this service for other people, not ourselves.
An overview of our primary and secondary user personas for DisneyLife.
Bio of a primary user persona.
Mapping the Guest Journey
The vision board and personas helped us imagine a general Guest experience. Soon, there came a need to get more granular. Enter the experience map: a tool famously championed by UX consultancies such as Adaptive Path and IDEO. With this exercise, I married our personas' perspective with all the proposed touchpoints, technologies, and services that would encompass this robust service.
By seeing the entire "kitchen sink" from our Guests' point of view, our team could collectively discuss what was necessary for launch and better prioritize our roadmap.
An overview of the Guest journey for DisneyLife.
An outline of the service's touchpoints, their opportunities and challenges.
Shot of whiteboard session to gather and organize insights for the experience map.
Building Features
Collecting Insights From All Perspectives
With so many stakeholders and makers invested in the project, it was important to ensure that we considered all relevant points of view in our design process. To achieve this, my design team and I held collaborative workshops that utilized exercises from Dave Gray's book Gamestorming and the 5-Day Google Venture Sprint. Within these workshops we conducted card sorting, blueprinting, journey mapping, and other exercises to harmonize expectations and generate ideas that met our Guest and business goals.
Shot of a "Wellbeing North Star" exercise to discuss improvements to our sign up process. This exercise helped us collect a range of ideas from the whole team, and then decide together what were the most important problems to tackle.
Shot of card-sorting and other exercises with stakeholders to decide hierarchy of our navigation. Minutes into the meeting, we realized there were many different opinions on this, and it was important to iron it out there. These conversations were very effective, allowing each participant to order the items to their preference and offer their reasoning.
The navigation schema we ultimately built. The bottom tab bar allows our most valuable feature—content—to be visible and accessible to Guests at all times while they are browsing. This was especially important for our younger Guests, who may not be able to find features in a hidden menu easily.
Features that resonated with older kids or adults (favorites, downloads, settings, etc) were made accessible on a drop-down menu. Embedding it within the Guest's avatar indicates the features' secondary hierarchy as well as their ability to empower the Guest to personalize his or her experience.
Digging Into the Details
Once the direction for a feature was agreed upon, our design team dug into the details of the Guest journey. With the help of our researcher and strategist, we reviewed competitive analyses of similar services as well as data from our target demographics.
Next, we'd identify personas relevant to the feature and walk through scenarios with them in mind. Throughout this process, we asked ourselves:
- In what context are they using this feature?
- What challenges would they encounter?
- What did they want from this feature?
- Was there any similar service they’d compare this to?
This step was crucial to defining an actionable and effective user flow. It also ensured we were remaining user-centered while designing.
Sketching exercise to imagine our personas within the user scenarios of a feature.
Communicating the Final Design
Early on, we discovered our product and engineering teams required different information to vet and scope a design. After trying many methods we landed on the following set of deliverables:
User Flow Storyboards
Storyboards of mockups were preferred by our product team. These documents were easy to read and could be pitched to business partners with minimal explanation.
User Flow Diagrams
User flow diagrams helped the engineers anticipate the various edge cases for complex features.
In addition to the two deliverables shown above, we learned that prototypes resonated with all of our colleagues and stakeholders. For the design teams, prototypes allowed us to discover challenges and iterate on our designs quickly. Once we felt we were at a good pausing point, we circulated the prototypes to our peers for swift, effective reviews. See the next section for more details.
Prototyping Interactions
The Year of Prototyping Tools
Between 2014 and 2015, we tried ten different prototyping tools to help us make better design decisions and communicate them effectively.
Why did we try so many?
We wanted to find the right fit: a tool that could be both manageable and accurately represent our visions. We needed something fluid with a manageable learning curve. Most of all, we needed a tool that could help us see unnecessary complications — either in flow or in functionality––that we couldn’t see in our static comps.
A list of the ten prototyping tools we tried in 2014-2015.
Selected Workflow: Invision and Framer
Ultimately, we found InVision and Framer provided the necessary tools and flexibility to animate our mockups and fuel discussion amongst our collaborators. Both tools have integration with Sketch, our preferred rendering tool, and allow us to easily share prototypes with our team.
Invision
InVision quickly became our go-to for demonstrating "the feel" of longer user flows. By easily sharing and reviewing InVision prototypes with our collaborators, we could better evaluate the mental load to which our Guests would be subjected. For this same purpose, we also used a number of InVision prototypes for user testing sessions.
Framer JS
A robust tool demanding "just enough code" from designers, Framer has become a vital part of our efforts to heighten the quality of the app through microinteractions and animations. The tool has also compelled my team to increase our understanding of code, and, concurrently, develop a deeper level of empathy for our engineering partners.
Organizing Our Visual System
About mid-way through the project, we surpassed the concept phase and prepared to get our designs ready for production. In doing so, we realized our mockups varied from one another, and did not speak to a standard set of principles or guidelines. In collaboration with our lead Interaction and Visual Development designers, I put my architecting brain to work and drafted our first style guide.
Much like Twitter Bootstrap, this Sketch file contained standard set of components to be utilized throughout the app. It also documented how our components, margins, and typography would scale across all of the screen sizes DisneyLife supported.
The UI components section of our DisneyLife style guide and an example of its implementation.
Our style guide implemented across our range of supported devices.
Before DisneyLife, I had never made a style guide nor had been entrusted with such a visual design feat. Creating the project's first style guide allowed me to dissect and organize our visual system as well as study the robust style libraries Apple, Google, and other user-centric companies.
Though I had not previously considered it a personal forte, I am glad to have taken up this task. It has provided me with greater confidence in my visual design abilities, and I feel I am a much better designer for it.
Adding Quality with Motion Design
Our style guide encouraged consistency within our mockups. Soon, we were in need of defining common interaction and animation patterns across the app. Taking inspiration from the app's branding theme of "Atmosphere," I collaborated with our Visual Development Lead to define a series of animations and transitions for the app.
Demo of transitions designed for DisneyLife. The depicted prototypes were created with Framer JS.
I visualized these transitions in a series of prototypes reviewed by all teams. Once approved, I worked with an iOS developer to map each view of the app to a transition. As he built a library to manage the transitions in XCode, I built my own library in Framer so my fellow designers could quickly use the transitions in their future prototypes.
Our Transitions Library (shown in back) allows us to pull a heap of functionality into Framer (shown at front) with a few lines of code. A special thanks to the team at Walt Disney Parks and Resorts Online for their inspiration and guidance in this endeavor.
Propelled by the success and usefulness of the initial transitions library, my team and I continue to build it in our spare time. We are currently adding more components and interactive states. We hope this could be the start of a living style guide that could be used regularly by the entire DisneyLife team and possibly other teams in the company.
Launch and Learnings
At the time of this writing, DisneyLife has been live in the United Kingdom for ten months.
When we launched in November 2015, we saw a number of positive reviews. Many of these confirmed our Guest’s love of the concept, content, and the emotional resonance of the app. We also received some positive critiques of the design, admiring us for summoning the company's rich history of technological achievements and customer support.
Some early customer reviews from the App Store.
Of course, the launch wasn’t perfect—neither is the app itself. At this very moment, we are accumulating deeper insights from our Guests and are working toward the next phase of DisneyLife. We expect the additions and improvements we bring to it will be our most magical yet.
To Infinity... and Beyond!
The story of DisneyLife is far from over, and neither is my journey as a designer.
The lessons I have learned while working on DisneyLife have been some of the most valuable of my career. Contributing to the design of this robust service has pushed me to deepen my own definition of user-centric design. I have learned the importance of knowing your audience well, not only who they are, but why they are who they are. I have learned that there can be common ground between the goals of the business and user. It is a designer's duty to not only find that common ground, but to champion it.
I expect this project has impacted me in more ways than I know now. I look forward to writing more about the lessons I have learned throughout the process.