Worked on the design, research and UX components of Disney's Online Streaming Service - DisneyNOW
Role: UX Designer + UX Researcher
Tools: Pen & Paper, Balsamiq, Sketch, Invision,
Abstract, Jira, Confluence
Duration: 3 months
Details: Worked at Headquarters in Burbank,
California in the Digital Media Team
My Role in the Team
Demo of the Latest Version of the DisneyNOW Web Platform
During the summer of 2018, I interned at the Disney/ABC. I was placed in the Digital Media design team working alongside UX designers, visual designers, and motion designers. The team worked to revamp the DisneyNOW streaming service across the several platforms and breakpoints. I worked on several projects and gained experience mocking up wireframes for new features- flows for: Web, Mobile, TV and Tablet. Once approved, the wireframes I created were used as the primary source of information to support visual design and later translated into the live prototype by software engineers on the Front- End Development team. I participated in full user research design process by writing requirements, conducting usability tests, testing newly incorporated features for success, and incorporating feedback into the next design iteration.
User Studies to test DisneyNOW features with kids aged 5-12
My investigation of Disney's Accessibility across platforms
Disney's Design Process
Over the course of my internship, I was able to participate in the full development cycle as Disney was adding three main new features to the DisneyNOW platform: Age Collection, a modified Navigation bar, and the addition of the Search feature. My involvement in this extensive process, from writing the requirements to wireframing the features to collaborating with developers based on findings to launching the features to the public, taught me the importance of using user research to communicate human needs.
PROJECT 1 AGE COLLECTION
WHAT IS MY DESIGN PROCESS?
My personal User Experience design process is based on elements of the Double Diamond, and I follow the standard Interaction Design process
We can't have ads on DisneyNow because we are legally restricted from advertising to younger age groups. Marketing teams are not able to target age specific ads to users as such data is not collected.
We wanted to find out how to collect data so that parents and children are comfortable with giving out such information. Some questions we explored were:
How comfortable are parents about children releasing data about their age?
Is there an alternative form to collect such data, e.g. birthdate collection?
How familiar are children (ages 5-12) with entering their birthday?
How do participants expect to flow through the profile creation process?
What birthday collection interfaces do users find challenging?
How do users usually interact with the Select-Date Interface?
Field Studies / User Interviews
Based on our research, we found that parents and children would be most comfortable with a birthdate collection feature that ask users for their birthday in order to receive surprises/rewards. This simultaneously provides internal teams age-related information to target advertisements/features/rewards. Next, how are we going to integrate the Birthdate Collection feature into the User Flow?
Affinity Mapping - We used these diagrams to synthesize the results from interviews and contextual inquiries.
Paper Prototyping - We used these diagrams to synthesize the results from interviews and contextual inquiries.
Journey Mapping - Storyboarded the step by step journey process to help us empathize with our user group and keep our team focused addressing user needs.
Pageflows - Printed sequences of flows to inform the app infastructure
My role was to provide documentation through the wireframes and journey flow from the three entry points into age collection. I had to visibly differentiate the visual elements between iOS and Android and provide documentation so that developers + designers would be on the same page about flow. Users can either set their age when they create their profile, when they go into settings, or through a pop up. I focused on designing the tablet wireframes for the 3 scenarios. Entry Point 1: "Edit Profile", "Setup Profile" and "Create Profile".
Entry Point 1: "Setup Profile" Wireframes
Design modification for existing users
Entry Point 2: "Create Profile" Wireframes
If the users are currently existing users using the app, I designed this modal which would pop up asking to "Personalize the experience" and allow users to enter their birthday. Hence, the app aims to collect data on the age by asking users to enter their birthday. The visual and motion designers went on to designing birthday surprises.
Design modification for new users
Since the birthday collection feature goes into the Profile Creation that the user undergoes when initially creating an account, the flow diagrams had to be altered to integrate the changes. One challenge we faced was investigating the best default date to use at when the iOS calendar opens.
I used the Notebook Plugin on Sketch to annotate buttons to indicate to developers the functions and specific rules to maintain design consistency across the wires.
After completing the documentation, I collaborated with the visual designers to translate the tablet wires into visual designs. They took the infrastructure I provided and added, color, iconography and components. This was sent to them on Sketch and they worked on it using inVision. From there, it was passed on to the Design Developers to implement into the app.
We gave 8 users the task of creating an account, ensuring the user scenarios were realistic drawing from the user research previously conducted. My goal was to observe whether users understand how to locate content and within the app and engage with the user interface. This specific feature was tested by asking users to create an account when they first open the app.
PROJECT 2 MODELING SYMBOLS
Context: When ABC and Disney interaction designers to link actions on a remote with buttons on a screen, specifically on Roku, no standard documentation exists (in file or online) for the Roku remote and it’s gestures.
Goal: I used the apple remote as a guide to create the Roku remote mockup as standard documentation that can be inserted into dartboards when designing the Roku flows.
PROJECT 3 CAROUSEL FEATURE
Context: DisneyNow wants a way to display snippets of its most watched/popular shows as soon as the user lands on the page to link directly into the content.
Goal: Create a carousel at the top of the page that flips through scenes of the most popular episodes.
PROJECT 4 OPEN SOURCE FEATURE
Context: Disney does not accessibly display its open source content for the public to view.
Goal: to create a page within Settings > About that links into the application’s open source code for other developers/individuals to easily find and employ.