PlayStation Vue Onboarding and Commerce Flow

PlayStation Vue was a streaming OTT internet television service that provided 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 was designed to complement subscription video-on-demand services. I provided iterations, wireframes, and final spec documentation while working with cross-functional teams for a complete redesign of the current onboarding flow for the PlayStation® 4 console and Amazon Fire TV.



PS3, PS4, Roku,
AmazonFire TV


Product Designer

STrategy: Goal

Redesign Current Onboarding and Commerce 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.

Core principles applied

Add in 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

Product Execution: solving Pain point 1

User Education For
PS4 Console Controller

Our primary users (gamers) were very comfortable with the input controls of a DualShock controller, therefore it was an easier transition from a standard tv remote to a gaming controller with analog input which operated with the same button functions. However we also considered the users who had never used a DualShock controller as a tv remote and did not obtain the muscle memory from hours of game play like our gaming users. To help non-gamers better understand the button mapping, we utilized the "System Voice" at the bottom of the screen as a guide.

Product Execution: solving Pain point 1

Amazon Fire Remote
Coach Screen

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 was provided to new Amazon Fire TV users to inform the next action.

Product Execution: solving Pain point 2

Complex Offerings for Base and Standalone Plans

We offered 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 could be combined or grouped with a base plan depending on which one was purchased.  They were configured on the backend utilizing a system of package entitlements – groups of offerings that we made 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.

Product Execution: solving Pain point 3

Features and Benefits

In the previous design, users did not have a way to view all of the features included in the plan. It was assumed that most users already knew what content was included with a specific network (like HBO) but it was important to show updated benefits and new features like a show premiere trailer, or have a way to upsell/highlight new unseen content.

Product Execution: solving Pain point 4

Shopping Cart Tracking System

Due to the complexity of our pricing system, a mini shopping cart was added at the bottom of the screen to offer a preview of the price total with the membership discounts (PlayStation® Plus), free trials, or pro-rated pricing applied accordingly before confirming a purchase.

Product Execution: solving Pain point 5

Commerce Logic
(Breakdown of Charges)

Due to free trials (which could overlap billing cycles) and pricing stipulations, a newly designed review order page was added for clarity and visibility of all purchases including all of the legal
copy required.

Product Execution: solving Pain point 6

New Splash Screen with
Video Background Content

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

PRoduct Execution

IA of 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.

PRoduct Execution

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.

PRoduct Execution

High Fidelity Wireframes

PRoduct Execution

High Fidelity Visuals

Onboarding and Commerce Demo

Demo Walk-through

15 Second Spot

A short video of product highlights as a slate for commercial breaks