ROKU AUTHENTICATION EXPERIENCE IDEATION

UX DESIGN / UI & VISUAL DESIGN 

The Brief

Create multiple solutions for the user to choose from when authenticating their MVPD provider on Roku.

The NBC App on Roku allows users to watch their favorite NBC TV shows anytime! Episodes are available without a TV provider login 8 days after air. With a TV provider username and password, episodes are available the day after they air.


THE PROBLEM
One of our user’s main pain points is authenticating their MVPD provider so they can access all content on the NBC App. In order to authenticate, users must log-in to their TV provider account on NBC’s website online, then pair their device. This pain point can be particularly troublesome for our users that feel they are not technologically savvy. 
THE SOLUTION

Currently the live options to link a provider on Roku are either to go to NBC’s website online or scan a QR code. Our aim is to provide multiple sign-in options so the user can choose the option they believe to be easiest.

 


THE PROCESS

Team: Gigi G (me), with the supervision of a Sr. UX Designer specializing in Roku

My Role: UX | UI Designer, High Fidelity Comps, Specification Documentation

Tools: Sketch

Platform: OTT Roku

UX PROCESS

In this project we were able to complete the UX process to the designing stage. This task was de-prioritized due to an overall app update.

Step 1:
RESEARCH

Step 2:
DESIGN

Step 3:
PROTOTYPE

Step 4:
TEST

Step 5:
ITERATE

Step 1: Research

Evaluate current
experience

Compare with competitors

List opportunities
CURRENT EXPERIENCE EVALUATION

Points of entry to the TV provider link screen include Settings or clicking on locked content. The authentication screen may or may not include the QR code option.

Roku Settings Fork Screen – Here the user can either choose to sign in to their NBC Profile or to link their TV Provider.

The users current options are to go to the link provided on their phone or computer and type in the activation code, or scan the QR code on their phone which will direct them to the same link.

COMPETITIVE & COMPARATIVE ANALYSIS

Based on research of other log-in experiences by our senior designer, we were able to collect other examples of potential linking solutions. 

Fullscreen’s tvOS Login Screen 2016 

POTENTIAL OPPORTUNITIES

Based on the current & competitor offerings we came up with the following potential solutions:

  • Create an experience where the user can complete linking their provider in-device.

  • Allow users to utilize devices on the same network that are already linked.

  • Provide an additional or alternative option to link a provider.

Step 2: Design

Design Strategy

Initial Comps

High Fidelity Wireframes

Design Strategy

Between the senior designer and I, we split up the potential solutions. However after creating initial comps for the first two, we found they could not be implemented due to our contracts with the TV providers and/or platform limitations. I proceeded to continue designing for the last solution – providing an alternate or additional option to link a provider.

Initial Comps & Proposed Solution

Taking inspiration from Fullscreen’s log-in screen we decided to offer a mobile solution. We also decided to re-design the fork screen in order to be more in-line with tvOS’s design. 

Roku Fork Screen – Before

Roku Fork Screen – Initial Comp

Our proposed solution: Roku Text Link – Intial Comp

If the user selects to link their provider, we proposed to give them 3 options to proceed. If the user selects “Text Link,” they will be able to enter their phone number and the activation link will be texted to them. The Text Link option allows the user to stay in-device until they receive a text to click on, which may seem easier than correctly typing in the correct web address or scanning a QR code that may or may not work in a 10ft experience.

Final Designs

Upon final review with our UX Director, the initial designs were too far towards tvOS’ aesthetic, so we edited the comps to reflect a more native, familiar Roku experience.

Roku Fork Screen – Initial Comp

Roku Fork Screen – Final Comp

Roku Link Online – Initial Comp

Roku Link Online – Final Comp

Roku Text Link – Initial Comp

Roku Text Link – Final Comp

Roku Scan QR – Initial Comp

Roku Scan QR – Final Comp

Next Steps

While these final versions were well received they were not scheduled for a build/sprint as we began work on a higher priority overall app update.

I created a specifications documentation in the case that this project would be revisited. If we proceed to testing we would measure success based on if the additional linking options were used on a regular basis.

GIGI GUITING

EMAIL
gguiting@gmail.com
Copyright © 2017 Gigi Guiting