Shop Roku TVs

How do users want to learn about, choose, and purchase a new TV?

My Role

On this project, I guided the discovery, the definition of project goals and personas, and collaborated to brainstorm design concepts that aligned with those goals. My primary responsibilities included mentoring a junior designer, contributing to UI and visual design concepts, and presenting hi-fi conceptual mockups in executive reviews.

The Problem

Roku is a very popular and beloved streaming platform, and offers a wide selection of TV options for many different brand partners. Potential customers visit Roku’s shopping pages to learn more, find the right TV, and ideally purchase it, but the current learn/choose/buy experience was very unintuitive and convoluted, often leading customers down dead ends or the wrong path. and away from the purchase funnel.

👇🏼 BEFORE

How might we make it easy for potential customers to understand how Roku works, why it’s the best OS for streaming, easily to figure out which TV is best for them, and provide a frictionless purchase funnel?

What do users value?

Based on Consumer Insights studies, we determined the key things consumers value when shopping for a Roku TV:

1. Learn about how Roku works - cost, compatibilities, viewing options

2. Ease of use - remote, setup, warranty

3. Compare TVs - picture quality, screen size, dimensions

4. Help choosing, based on type of user

5. Endorsements from trusted sources

6. Home theater/smart home systems

Personas

Based on these insights, I created personas to determine different user types:

User Journey (Happy Path)

Giles, a dedicated soccer fan and family man, just purchased a new home and wants to upgrade his TV. He’ll primarily use it for watching soccer games and YouTube clips, sometimes hosting viewing parties with his buddies, and often times for movie nights with the family. He’s heard people talk about Roku TVs, and wants to know more. He goes to Roku.com to find out what it’s all about.

Boxes & Arrows

Next, I started figuring out the best way for the customer to learn about what a Roku TV is, how it works, and which is the best for their needs.

Final Designs

The final design of the Shop Roku TVs landing page focuses on…..

Prototype

Using the refined sketches, I built a simple prototype to validate the concepts... give the interactive version a go here!

Wireframes

Once the designs were validated, I started digitizing the screens. I began to add small interactions, like expanding the overlay & viewing additional features. At this point, I was able to get a much better idea of space and layout, before moving on to high fidelity mockups.

High fidelity mockups

In the final step, the designs were brought to life and further refined by adding color, iconography, font treatments, and spacing.

Logo & app icon design

As a final step, I designed a logo for PostUp, and applied it to an iOS app icon at various sizes.

Summary and next steps

This fun, simple UX exercise was a personal development project, a refreshing break from the highly complex and strongly corporate-branded projects I work on at Apple. We have experts in things like research and prototyping on our design team, so I rarely get a chance to get hands-on in those areas... this was a great way to flex those underused muscles!

Also, since I can't show any of my design work from the time I've been at Apple (8 years as I'm writing), I spend time on personal development projects, which allow me to demonstrated the breadth of my design skills, if not necessarily always the depth :)

As next steps in this project, I would:

• make a hi-fi and more robust prototype with additional features such as onboarding, favoriting, and writing a review

• conduct usability testing with my original user group, to see if my solution meets their needs, and iterate the designs based on their feedback

• collaborate with developers along the way to ensure technical feasibility, and with stakeholders to keep on track with business goals.

Thank you!