Year

2017- Present

 

Role

Lead Designer

 

Teams

Engineering
Web Development
Customer Strategy

PlayStation Vue Onboarding flow

 

For new and existing subscribers on 10ft devices

PlayStation Vue is a streaming OTT internet television service that provides cable-originated television channels, on-demand video, and cloud-based DVR to stream television programs, movies and sporting events directly to supported devices. Targeting cord-cutters, Vue is designed to complement subscription video-on-demand services.

As the lead designer, I was responsible for a complete redesign of the current onboarding flow for the PlayStation® 4 console and Amazon Fire TV. From end to end, I provided iterations, wireframes, and final spec documentation while working with cross-functional teams.

Goal: Redesign current onboarding flow

The original onboarding flow was shipped as an MPV and met most of the requirements however the user testing that followed indicated six major pain points contributing to the drop off rate. Roughly 45% to 50% of the users did not continue to the shopping cart after the first screen – effectively slowing our growth in subscriber numbers.

User Education

Pain Point 1: New users (including non-gamers) who had never used a DualShock controller were intimidated by the number of inputs on the device.

Shopping Cart Tracking System

Pain Point 4: New Users had no way to track their purchase or total amount which discouraged additional purchases.

Complex Offerings

Pain Point 2: Users found it difficult to view the stand-alone channels all at once from a birds-eye view and bypassed the option to purchase additional channels.

Commerce Logic

Pain Point 5: The breakdown of charges was not clear or easy to interpret when users reviewed their purchase upon checkout.

Features + Benefits

Pain Point 3: The original design did not offer space to view the product benefits of each subscription package.

New Splash Screen with Option for Video

Pain Point 6: The welcome screen did not convey much about the product leaving the user with uncertainty about the brand experience.

Core principles applied for a successful onboarding flow

Heuristics

A successful onboarding experience should keep the following principles in mind:

• Reinforce value proposition
• Introduce core features
• Be easy and short to complete
• Use short, concise, and natural copy
• Present information contextually
• Track user’s progress
• Provide user control (i.e. skip, undo, close)

Best Practices

Reaching that “aha” moment should be the goal of your onboarding for first-time users

• Short term memory can hold 3-5 items
•  Action reinforces memory and the brain physically changes
• Help first-time users navigate
• Test designs – there is no one-size-fits-all solution for user onboarding
• Requires constant changes and optimization

Onboarding Patterns

First-time user experience and onboarding should be unique to the product platform

• Set up Wizard
• Guided Tutorial
• Coach screens
• Inline cues
• Forced Account Creation
• Lessons

User Education For PS4 Console

On a 10-foot device, familiar interactions from the mouse/trackpad/touch had to be replaced with input devices that do not always produce familiar input partners. This was further compounded when we realized that a mobile interface cannot be applied to a 10 foot experience without considering the limitations of the input device.

To help our users better understand the navigation, a slider appears at the bottom of the screen that informs the user on which button to use.

User Education For Amazon Fire TV

In addition to educating new users on a unique and unfamiliar controller like a DualShock, the button mapping had to be translated to a device that had minimal inputs to complete the same tasks. A coach screen with button mapping is served to new Amazon Fire TV users to inform the next action.

Complex Offerings for Base and Standalone Plans

Vue offers 4 base plans ranging from 51- 89 channels  (Access, Core, Elite and Ultra) including 11 stand-alone plans (4 bundles and 7 premium channels). The plans can be combined or grouped with a base plan depending on which one is purchased.

 

 

They are configured on the backend utilizing a system of package entitlements – groups of offerings that we make available to specific users.

 

The most challenging task was ensuring easy access to all options while making the information digestible with the least amount of navigation as possible.

Features and Benefits

In the previous design, users did not have a way to view all of the features included in the plan.

It is assumed that most users already know what is included in a plan (like HBO) but it was important to show updated benefits and new features like a show premiere trailer, or to upsell/highlight new unseen content.

Shopping Cart Tracking System

Due to the complexity of our pricing system, the mini cart offered a way for new and existing users to see a preview of the price total with the membership discounts (PlayStation® Plus), free trials, or pro-rated pricing applied accordingly before confirming a purchase.

Commerce Logic (Breakdown of Charges)

Due to free trials (which could overlap billing cycles) and pricing stipulations I had to design a review order page that was clear and concise on pricing including all of the legal copy required.

New Splash Screen with Option for Video

Adding video capabilities on the welcome screen provided another space to showcase and upsell new content including trailers, featurettes, and clips of sports highlights.

Onboarding User Flow

While it was challenging to build a flow with minimal screens and navigation, there were a number of product features, including voucher redemption, and channel comparison pages that had to be included.

 

The goal was to get the user though the checkout process while simultaneously informing them of all our product features.

Rough Sketches

There were several iterations of sketches. The most simplified version became the most valuable solution as it moved the user through the flow much faster than the others.

Wire Frames

Several wireframe iterations were explore until all pages met the stakeholder’s expectations.

High Fidelity Screens

After the IxD documentation was completed, discussed, and approved amongst our team with several use cases, I developed the final screens.

Final Redesign

After months of development, we shipped out the new onboarding flow for PS4 console and Amazon Fire TV. We are still making constant change and improvement to enhance the commerce experience for all new and existing subscribers.