Jump to:

Project Brief

Background + Objectives

Younger users are having trouble transitioning from their parents' profiles to their own. Users as young as 4 have their own profiles so they can access family friendly content, but sometimes it takes more than 10-12 movements on their controller to get to a hidden profile switch screen.

My Role + Stakeholders

I was the sole designer and lead the ideation, visual design, and user testing.

Skills Applied
UX Design
Visual Design
Brand Design
Technology Used
Figma
FigJam
Business Context

Problem Severity & Risks: Parents will get frustrated and unsubscribe from the streaming service. The client will lose revenue if they are unable to solve this small problem. The client expects subscriptions will stop dropping from households with young children if the parents and kids have a smoother experience sharing the streaming service in the home.

Project Goals:

  • Users must be able to switch profiles within 6 actions from anywhere in the app
  • A confirmation screen that profiles have been switched is required
  • Also there must be a visual difference between the interface for adults and the interface for kids

The User Experience Design Cycle

I relied on the cyclical UX design process to guide my efforts on producing this app:

ux design process diagram
The UX design process

User Persona

All signs point to younger users (ages 4-8) having a difficult time finding where the profile section lives in the application.

user persona card with details
Vesta user persona

Competitive Audit

When I began this project a bit of research was already available. I expanded research findings by doing a competitive audit.

A competitive audit between Netflix, Amazon Prime Video, Disney+, and other UI inspiration helped to set some direction for wireframes.

ux competitive audit of Netflix UI
Netflix, competitive audit
ux competitive audit of Netflix UI
Netflix, competitive audit
ux competitive audit of Amazon Prime UI
Amazon Prime Video, competitive audit
ux competitive audit of Amazon Prime UI
Amazon Prime Video, competitive audit
ux competitive audit of Disney+ UI
Disney+, competitive audit
competitive audit
competitive audit
competitive audit
competitive audit

User flows and wireframes helped to build out ideas early in the process. Before I moved into visual design I decided to do a user test to weed out any immediate issues.

User Flows

The first user flow starts from app launch which doesn't empathize with the user so I addressed that in the revision. The Red Route is identified within these flows, and the second flow gets the user to their goal in just 2 screens.

user flow 1
user flow version 1
user flow version 2

Sketches and Wireframes

The wireframes started in my sketchbook, and were continued in Figma. I focused on the key screens identified in the revised user flow.

sketchbook with ideas
The sketchbook's left page has some of my initial concepts
wireframe
First and second rounds of the select user screen
wireframe
First and second rounds of the dashboard / home screen

Visual Design and Branding

The visual design started with some light brand exploration for a centralized concept. I considered pulling ideas from literal streams and rivers, but decided space and satellites offered more visual material to work with.

The user persona is a child so this product should be family friendly and feel appropriate for a family home entertainment platform. I started with looking up heavenly bodies in space and found the mythical equivalent of Vesta is the Goddess of hearth, home, and family—so I felt this direction aligned.

branding research
Two conceptual directions for the app's branding—bodies of water and outer space
brandmark exploration
I developed a low-fi logo and marketable tagline

Iterations

animated progression of wireframe to visual design
An animated progression of the visual design

User Testing

I prototyped and tested the wireframes early in the process so I could address issues ahead of visual design.

wireframe
Adjustments made to the wireframe after a wire flow test
wireframe
Adjustments made to the wireframe after a wire flow test

After some visual design iterations I conducted additional users tests. A test user completed the flow within 00:01:13 (hh:mm:ss). Afterwards, they shared some thoughts about the interactive experience and visual design. Revisions were made to the prototype and a second user test was performed where the flow was completed in 00:00:21 (hh:mm:ss). Additional insights were shared after the second test was completed.

notes from user testing diagram
Notes from user testing
notes from user testing diagram
Notes from testing

Final Product Design

Here's a demo of the user flows and annotations to explain each screen. You can test the design yourself using the Figma prototype below.

Switch user and play video flows

In this recording the user changes to their own profile, and then finds a video to play. An explanation of the screens follow.

app user interface diagram
The user select screen
app user interface diagram
The user's personal content library screen
app user interface diagram
The watch list screen
app user interface diagram
Series overview screen
app user interface diagram
Media player screen

Edit profile flow

In this recording the user finds their profile and edits content preferences to be focused on cartoons. An explanation of the screens follow.

app user interface diagram
The edit profile screen for a kid user

Try the prototype right here:

Outcomes and Business Results

The following data helps to measure the success of this project and what the next steps to improve would be.

Users must be able to switch profiles within 6 actions from anywhere in the app

Satisfied, user actions reduced 66%. Users can access switch profiles option within 2 actions from anywhere in the app.

A confirmation screen that profiles have been switched is required

Partially satisfied, the switch profile screen mostly achieves this. Users confirm profile switch by pressing "start watching". Stakeholders might argue differently.

Also there must be a visual difference between the interface for adults and the interface for kids

Unsatisfied, the current version of this prototype doesn't have a visual difference in the interface for kids. While I might argue against needing this at all the client would likely be upset by this and it should be addressed.

Time for User Goal Completion Was Reduced 29%

By comparing user tests the goal was completed 52 seconds faster.

Test users were unrepresentative. Unfortunately I was unable to get access to my target demographic user (6-year old children) so I had an adult user perform this test. This might be the most critical part of user testing that remains unverified.

The "Continue Last Watch" button was missed by all test users. This button is not immediately clear what it might do so changing the UX copy to something like "Resume: Peppa Pig", where the previous title appears within the call to action is displayed.

Retrospective

I learned that each user has their own biases and ways of doing things. Over indexing on the way one user does something doesn't mean the design should necessarily be changed to support their experience. This suggests the importance of quality user testing where the base of users are well selected to be representative and account for some edge cases—if all the users are too similar it would skew data.

My personal favorite part of this design is the user select screen, and how the color stripe tumbles across!

×
Modal Image

Thanks for Viewing!

Now, take a look at my other work. I design products, brands, and websites.