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.
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.
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 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.
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.
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.
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.
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
User Flow Diagrams
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.
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.
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.
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.
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.
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.
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.
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.