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
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
experience
Compare with competitors
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:
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.
