Worked on the design, research and UX components of Disney's Online Streaming Service - DisneyNOW

DISNEY ABC

OVERVIEW

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. 

ACCESSIBILITY STUDIES
USER RESEARCH

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 

Document

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. 

Problem Space

Test

 

 

RESEARCH

Research Questions

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

Stakeholder Interviews 

Persona Building

Task Analysis

 

 

DEFINE

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

DOCUMENT

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.

Documentation Tools

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.

 

DESIGN

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.

TEST

 

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.

Translated into Visual Design

©2017 BY JHILLIKA'S DESIGN PORTFOLIO. PROUDLY CREATED WITH WIX.COM