Team: 4 designers including myself

Duration: 4 weeks

Launched: June 2017

Context: With the company-wide rebrand and acquisition of Rdio designers, all of the product designers at Pandora were busy pushing out the new Pandora Premium on-demand service and refreshing existing web, mobile, and consumer electronic (TV, car, video game consoles, etc.) designs.

Goal: Redesign the UX on Roku according to platform restrictions and update the visual language with the rebrand and Pandora Premium designs.

I primarily redesigned the Settings and Login & Registration screens, and helped with the Now Playing, and My Stations screens for the Pandora app on Roku.

Defining the Problem

Roku system and TV, photo courtesy of TechCrunch

A reference photo I took of the current Roku Pandora app for a screen during the subscription purchase flow

The unique asterisk “more options” button on the Roku remote control

What is Roku? How is it unique from other CE devices?

Roku is a streaming media player platform, similar to your Apple TV, Fire TV, etc.

Gotham was the only the typeface allowed on Roku, which was an important difference that Roku had from other Consumer Electronic (CE) devices.

The remote features a four-directional arrow pad, an enter button, and an asterisk (*) button that is often used as a type of “more options” navigational tool. The Roku app used this asterisk button as a “more options” toggle, and our proposed redesign intentionally took this out to remain more consistent with other CE devices and the simplify the user’s experience.

The Problem

With the rebrand at the time to be announced in December 2016, this specific project was on a short timeline in order to provide enough development time for a third-party developer familiar with Roku.

The Pandora app on Roku had an outdated design from around 2013 that needed a redesign to align with the rebrand and the soon-to-launch Pandora Premium product.  Roku is also Pandora’s the top performer in Consumer Electronics (CE) with 1.5 million monthly unique visitors, which meant that my work would actually impact peoples’ lives.

Research

Audit, Brainstorming, and Key Insights

Given the short timeline and lack of resources, no formal qualitative user research and usability testing was done. Instead, I had several impromptu meetings with the 3 other designers on my team in front of a TV with Roku near our desks and shared our insights in informal critique and brainstorming sessions. Here are some important insights we agreed on and others we wanted to explore more before making a decision:

Visual redesign is a high priority

The existing design is a clear remnant of some of the first Pandora UI designs with ample use of bold typefaces rather than large font size. For typeface and navigation structures like modal styles, we asked our PMs to learn more if they could be customized.

In addition to keeping up with the new rebrand, we also wanted to align the Roku redesign with other concurrent redesigns for Apple TV and Xbox, which both featured more album art, image-based UIs. The existing Roku app was more text-heavy for navigation, which is less effective at bottom-up attentional searches (meaning the general use case if I wanted to find a station, I would want to look for indicating images rather than words).

Asterisk "more options" button is inefficient UX

To be objective, all three of us were not frequent users of Roku, so therefore this could be biased. Within other Roku apps (notably Spotify), the use of the asterisk button as a modal with more options was prevalent.

With that said, we felt that hiding functionality behind a button was inefficient for the user, so we wanted to try to reprioritize and surface the most important features.

Roku on TV can be a group experience, so account management and privacy is important

Though privacy and account management is always a priority, we made the assumption that because Roku is used on a TV, the setting implies that there will be times when more than one person will be sharing the same screen. As a result, the use of Pandora on Roku in a group setting influences the UI mainly in how to switch between accounts or hide passwords while logging in.

The existing approach to switching accounts was hard to find as it was tucked behind the asterisk “more options” button, so we decided to improve this.

It was easy to get lost in the UI

Without a top navigation or breadcrumb structure, it was confusing to know where in the product you were. The primary concern here was the ability to return to the “Now Playing” screen on a track, which wasn’t directly accessible if you were not on the “My Stations” page.

Designing for a 10 foot UI is very different from mobile or web

The largest concern here was to make sure text was legible, as pushing pixels on a monitor may not appear as well on a 10 foot screen.  The existing design gratuitously used of the bold typefaces, which we felt wasn’t visually appealing due to the lack of contrast between different headings and body text.

Another concern was the limitation on the brightness of colors we could use. Though Pandora across platforms favors a light, bright design and consistency across platforms is important to maintain a consistent brand image, the use of lighter colors on large 10 feet screens generally create a lot of light, which can be jarring for a user. In addition, lighter colors like all white #ffffff can cause screen burning. On the other end of the spectrum, the use of dark colors like all black #000000 on TVs can cause ghosting, which is also a subtle restriction.

Furthermore, due to the general increased energy uses of a 10 foot screen, screensavers are important to be socially responsible and save energy.

To help answer questions we had, conducting user research would have been ideal; however, the short timeline of the project prohibited this, and we had to trust our best gut instincts and guerrilla user test on each other.

Competitor/Existing Product Analysis

Through our user interviews and preliminary research, we decided to synthesize our data into user personas to best describe the users we’re designing for.

Xbox

At the time, there was an ongoing Xbox redesign as well, and it was important for both the Roku and Xbox redesigns to be consistent to maintain a cohesive brand image across platforms.

  • My Stations screen features a horizontal carousel with albums indicating individual stations
  • The Mini Player bar is stretched across the bottom of the screen
  • Visual styling was set, and so was the UI for Settings and Login & Registration

Spotify

As a responsible designer, it was important to look at the Spotify app on Roku and also pick at both its strengths and weaknesses.

  • Outdated visual style. similar to the Pandora app on Roku
  • Use of asterisk “more options” button
  • Selected state changes color of font and hovers a box over item
  • No top navigation bar

Apple TV

Similar to Xbox, a redesign for Apple TV was also underway, and it was important to keep all CE devices consistent.

  • Now Playing features album art work in a horizontal carousel, with metadata (song name, artist, album) directly to the right of the album artwork
  • Mini player featured below the metadata
  • Background takes on the album artwork in low opacity
  • No top navigation

Low-Fidelity

Sketches

With all the insights from my initial meetings, I began sketching out some basic user experience flows for Settings and Onboarding to get some ideas on paper.

Some quick sketches of the Settings page and user flow

Design Decisions

What should the Settings main page UI look like?

The sidebar format was chosen main reason was to keep consistent with other CE devices; however, the accordion, folder style also helps organize and hide options under higher-level categories. People also read left to right, meaning that finding a feature would begin on the left side of the screen with higher-level categories, and proceed to the right to find their feature within a sub-category.

How did you decide which items and higher-level categories to show on the left sidebar under Settings?

I broke down each feature within Settings in a list and affinity mapped them according to similarity. In the end, there were roughly 5 distinct categories: Account Settings, Content Settings, Subscriptions, Logging In/Out, and Help/Legal. Initially I organized the left sidebar like so, but then asked a copywriter for assistance with specific wording.

What keyboard is optimal for typing with a remote?

Though typing on keyboard with the QWERTY layout is standard, but Roku system restrictions only allowed for an A-Z, 3-row keyboard layout. Traditional QWERTY keyboards utilize two hands with 10 fingers to type, and letters are divided among halves of the keyboard to allow one hand to prepare the next letter of a word while the other hand types.

Since typing on a remote is limited to a 4-directional pad and an enter button, it’s important to minimize the time a user has to travel between individual letters. A 3-row approach was used to minimize distance traveled by maximizing vertical movement. Unlike traditional keyboards that deprioritize less common letters to the bottom row, an A-Z layout more even distributes letters vertically. For options that required only numbers like a Zip Code, only a number pad in a 3×4 layout was needed and to simplify the UI.

Wireframes, Experience Flows, Information Architecture

Version 1

Settings IA

To gain feedback, my team held weekly design reviews with our design manager, PMs, engineering leads, and the VP of Creative Services. In my first presentation, I whipped together a quick InVision prototype to better illustrate the interactions and flow.

InVision Low-Fidelity Prototype – Settings

Some Key Feedback

  • “Help, Terms of Use, and Advertising” is arranged in a confusing manner, as it breaks the vertical navigation introduced in the sidebar.
  • What about error states? Would they be modals, new screens, or overlays?
  • “Allow Explicit Content” is tucked away under Account Settings, which isn’t exactly accurate. It would fit under a “My Music Settings” type of category

Login & Registration IA

During this time, I was also tasked with redesigning the Login & Registration flows, so I mocked-up screens and the experience flow in Sketch. Below, I indicated two possible flows for Login and Registration separately, with a total of 4 possible choices.

Login Design Decisions

Some Design Decisions and Key Feedback

How do we minimize the time it takes for someone to login?

If a user could get to using the radio service quicker, they would enjoy the product and potentially engage with ads more quickly.

To do this, a possible solution I suggested was integrating Pandora’s “Sign-in with a Mobile Activation Code.” Into this process. As opposed to logging in by typing in on a keyboard (which is exceptionally slow on a TV remote), sending a Login code via mobile or email would allow a user to punch in a 4 digit code instead.

In order to implement this, I proposed two options. One option was the flow Login/Register straight to the Mobile Activation screen; however, for users without this feature, a second option was the flow Login/Register to Email Keyboard login with the Mobile Activation option on the screen > Mobile Activation. Ultimately the first option would simplify the user’s experience and prioritize this new feature. The second option would maintain a similar flow as current, but would hide the Mobile Activation option on the screen.

In the end after asking PMs at my weekly design reviews, we opted for the first option to prioritize the Mobile Activation login, and de-emphasize the standard keyboard login.

Registration Design Decisions

Some Design Decisions and Key Feedback

What about a progress bar?

One of my first proposals included the use of a progress bar along the bottom of the Registration flow, which would help the user set accurate expectations of how long this process would take them, and help them understand their position in the process. Though I advocated strongly for this idea, my design manager eventually made the point that doing so might overload the user with too much information, as the Registration flow contains 7 steps.

Should we list all the steps at once?

The second most important design decision was whether to include all the steps of the Registration flow on one page and use modals for information entry, or to separate each step into separate screens. This was proposed above as V1, a linear, separate screen per step design, which was currently being used, and V2, featuring a one page design.

The benefits of the V1 Linear flow with separate screens is that transitioning from screen-to-screen gives the impression that progress is being actively made, and that, with only one step on a screen, there is less visual clutter. A downside was that a long 7 step process might feel long and fatigue the user.

The benefits of the V2 One Page flow with modals for information entry was that the user could stay contextualized in the process at any time with modals, and a user could see their previously entered information. However, downsides were visual clutter, and the introduction of error states (specifically with underage registrants).

In the end, after the design review meeting and receiving feedback, my team, PMs, and my design manager felt that V2 would be most effective mainly because it would eliminate the need for a progress bar and it would allow the user to see previous information in case mistakes were made.

Version 2 and Iterations

After 2 weeks of these initial wireframes and gaining feedback from weekly design review meetings, my designs were beginning to come together. However, it was important to iterate and incorporate the feedback I got.

Settings Iterations

Changes from V1

Recent or A-Z Sorting?

However, after the previous Design Review, there was a discussion about the use of a “Recent” versus “A-Z” sorting of the My Stations page, as shown on the right. In the proposed designs by another designer on my team, the toggle was located between the top navigation and the album artwork stations, meaning that user, who on a remote, would have to travel an extra step between the top navigation and station list every time they wanted to access either. I pointed out this was inefficient UX, and instead I proposed to move the Recent/A-Z toggle to Settings, where it would be de-prioritized.

To justify this change, one of the Engineering leads ran through usage numbers, and found that less than 5% of users used the Recent/A-Z toggle. Therefore, we felt it was justified to move the Recent/A-Z toggle to settings.

Other Changes

Help, Legal, and Advertising are arranged vertically in the left sidebar to maintain consistency. Though Help, Legal, and Advertising are arranged to be consistent, these options are clearly less important than the other options; how might we de-prioritize these options but still keep a similar navigation structure? To do so, in my final iteration I decreased their font size but still left aligned them in the left sidebar.

“Music Settings” is introduced to the left sidebar, containing Explicit Content toggling.

Login & Registration Iterations

Changes from V1

For registration, we settled for the One Page layout for reasons explained above, with no progress bar.

For the Login process, we settled for the Device Activation method first, with the traditional method available, but de-prioritized for reasons above.

With a lot of the meaty UX problems and questions solved, it was time to spice things up and move onto visual design and high-fidelity prototyping.

High-Fidelity: Visual Design

Specs and Grid

The first things my team and I did was to specify a grid layout, font sizes, colors, and typography for use with Roku. Thanks to the ongoing redesign on Xbox, we used the following grid layout and specs. Gotham was used as a Roku system requirement, and font sizes followed a 4 pt. system.

Iteration 1

Some Design Decisions and Feedback

As previously mentioned, a final change to the UX was shrinking the “Help” and “Legal” text in the left side bar smaller to de-emphasize their importance.

One of the first visual changes was aligning all the elements to the grid, which notably provided a more uniform look. Furthermore, the extra padding on the left and right columns provided more negative space and gave a more simple, minimal look.

Another change was bolding the “Settings’ breadcrumb at the top. This was done to make it clear to a user where in the Roku app they were, as there was confusion before. This was added due to the gear icon symbolizing Settings in the top navigation bar.

Another idea I wanted to play around with was the background color. An important debate that we began at the start of the visual design phase was the idea of a light theme versus a dark theme. From our secondary research, we saw a majority of Roku apps feature a dark background, primarily because TVs emit a lot of light, and light themes on a big display are jarring. Some other advantages include preventing screen burning, and the application of brand colors. In this first iteration, I pitched 4 versions 3 from light to dark, and 1 with a Pandora blue with a 80% black overlay. These styles were only applied to the right side of the Settings page to emphasize the idea of the left sidebar and provide depth.

In this first iteration I also began to introduce hover states, using a cyan-filled box and cyan-filled text. This was consistent with the Xbox redesign, and the strength of using cyan, an accent Pandora color, was effective to introduce change without being too jarring.

Iteration 2

Some Design Decisions and Feedback

The most noticeable iteration was moving from a different colored background to a single, uniform colored background, regardless of light or dark. This was important to provide a more uniform look, and to create a more simple user interface. We felt that there was no need for a visual separation between the left sidebar and right options to isolate those two elements because a user would intuitively scroll through the left sidebar and learn the UI.

After initially unbolding the Settings breadcrumb to reduce the weight and importance of it, I proposed to the team to remove the Gear icon from the top navigation and instead replace it with “Settings” copy, as indicated on the right. This would not only make the top navigation bar more uniform and consistent, but it would altogether remove the need for a large Settings breadcrumb at the top of the page, thus simplifying the UI.

Another design decision proposed here was changing the hover state visuals. On the left was the previous hover state, featuring cyan fill and a cyan rectangle, now shrunk to fit within the grid around the text. However, this design proved difficult if we were to use a dark theme, and on the right, I introduced a bolded font hover state, which would make it more easy to distinguish, especially on a 10 foot UI.

Iteration 3

Some Final Design Decisions

As previously mentioned, the removal of the Gear icon from the top navigation allowed for the breadcrumb to be removed, simplifying the UI by decluttering.

After a week-long discussion with the design manager and PMs, we decided to follow a dark theme for the following reasons:

  • A dark theme allows for the addition of a subtle blue gradient background, indicating the Pandora brand
  • Dark themes on 10 feet UI are easier on the eyes, as light themes flood a room with light and can be jarring
  • Dark themes prevent screen burning

To make the dark background more interesting, a subtle gradient was applied with dark on top. Although this goes against the concept that sunlight comes from the top, this was done to provide more contrast with the top navigation bar.

Lastly, the hover state here was finalized, straying away from using cyan on a dark blue background to opting for a very light gray bolded font and a box. Active and inactive states are also finalized by using different opacities, lighter indicating active and darker indicating inactive. Active items are lighter to provide contrast with the dark background.

Here were a few things I learned during this process:

  • Never use #ffffff white and #000000 black; these colors have too strong contrast, and are not visually appealing
  • Adding a 5 point curve to corners can make the UI more inviting as opposed to sharp and rigid
  • Hover states, active states, and inactive states are beyond simple opacity changes; color and font weight can affect these
  • Dark themes are good for 10 foot UI

Prototype

After finalizing the UX flows and the UI visual design, the final step was to create a prototype to think about the interaction design and present to engineering.

Preparing a presentation of my final prototype to my team, design manager, PMs, engineering leads, and the VP of Creative Services

Unfortunately due to NDAs, I am unable to share the prototype for the Roku redesign I did in Proto.io. Here are some features:

  • You navigate through the prototype as if using a remote using a keyboard’s directional pad and enter key
  • Interaction design: the motion of the hover state, white box follows a bezier curve, allowing for more natural motion
  • The transition between songs features album art shrinking and enlarging while also moving along the x-axis, and is done in a smooth manner using bezier curves and a slight 500 ms delay. Song album artwork first moves, and after the delay shrinks

tl;dr

Over 4 weeks, here’s a chronological list of things I did:

  • I audited the existing Roku app and brainstormed concepts with two principle designers
  • I sketched preliminary wireframes of redesigns
  • I presented with my principle designers, design manager, PMs, and the VP of Creative Services to get feedback and ask questions
  • I iterated over 12 versions of wireframes specifically covering Settings and Login & Registration in Sketch and InVision
  • I implemented high-fidelity visual designs for the wireframes
  • I created a high-fidelity, interactive prototype in Proto.io for My Stations and Now Playing (and which I don’t have permission to share).
  • I presented at the company-wide intern showcase at the end of my internship.

The focus of this project was to redesign the user experience on Roku according to platform restrictions and update the visuals of the user interface to be in line with the rebrand and other Consumer Electronic platforms (mainly Apple TV and Xbox).

Reflection

What I Learned:

Attention-to-detail: Even “easy” UIs like Settings and Login & Registration are surprisingly complex and require careful thought

Trusting your gut: In a situation where there is little to no research or data, as a designer you can try your best to exercise empathy and make educated assumptions

Designing for 10 foot UI: Unlike web or mobile, readability in even the smallest things like hover states become exceptionally important

Although working on Settings and Login & Registration aren’t necessarily “glamorous,” there is a surprising amount of design decisions that need to be made; I certainly underestimated the amount of work

Always create a lot of different versions, but only propose a few of the best to save everyone some time

Creating a prototype really helps demonstrate the look and feel of a design, especially when presenting to others (and engineers, who can comment on whether certain interactions are possible and can fully understand what a designer wants)

Next Steps and Improvements:

A/B Testing: It would be nice to A/B test light versus dark themes for visual styles

Usability Testing: It would be nice to conduct heuristic evaluations or usability tests to assess success of designs

User Research: A lot of decisions were admittedly educated assumptions, so interviewing users and understanding their needs could improve the UX