Roku TV — Product Discovery & E-commerce Redesign
I redesigned the Roku TV shopping experience to make it easier for customers to understand the product lineup, compare options, and move from discovery to purchase. The concept was informed by a UX audit, competitive research, and analysis of the existing customer journey, with a focus on clearer information hierarchy, product comparison, and a responsive experience across desktop and mobile.
Project Summary
Role
Product Design, UX/UI
Focus
Product Discovery, Comparison & E-commerce
Methods
UX Audit, Competitive Research, Information Architecture, Prototyping
Platform
Responsive Web
The Business Problem
Roku’s TV lineup had expanded across multiple models, sizes, and feature sets, making it increasingly difficult for customers to understand the differences between products and determine which TV was right for them.
The existing shopping experience presented product information, but there was an opportunity to create a clearer path from discovery to comparison and ultimately purchase.
My Role
I led the UX/UI exploration for the concept, beginning with an audit of the existing Roku TV experience and competitive research across other consumer electronics brands. I used those findings to rethink the information hierarchy, product comparison experience, and responsive customer journey, then developed the concept through wireframes, high-fidelity UI, and interactive prototypes in Figma.
The Original Experience
Before beginning the redesign, I reviewed Roku's existing TV shopping experience to identify opportunities to improve product discovery, comparison, and navigation. These screenshots show the original experience and provide context for the design decisions that follow.
Strategy & Research
I reviewed the existing Roku TV shopping experience alongside competing consumer electronics and TV brands to understand how customers were being introduced to product differences, features, and purchase options.
The audit highlighted three opportunities: simplify how the TV lineup was presented, make comparison easier earlier in the journey, and create clearer paths between product education and purchase.
Those findings shaped the information architecture and helped prioritize the content and interactions carried into the redesign.
Simplify Discovery
Help customers understand the Roku TV lineup without requiring them to navigate through excessive product information.
Make Comparison Easier
Surface meaningful differences between models and sizes earlier in the shopping journey.
Connect Education to Purchase
Create clearer transitions from learning about Roku TV features to evaluating products and taking the next step toward purchase.
Design Decisions
Simplified Product Discovery
Reorganized the experience around clearer product categories and stronger visual hierarchy, helping customers understand the Roku TV lineup and identify relevant options earlier in the journey.
Comparison & Product Education
Brought key product differences and features forward so customers could evaluate models without having to move back and forth between multiple pages.
Responsive Customer Journey
Adapted the experience across desktop and mobile, maintaining clear hierarchy and purchase paths while prioritizing content for smaller screens.
Interaction & Micro-interactions
Used purposeful motion and interaction states to provide feedback, reinforce hierarchy, and make product exploration feel more intuitive without distracting from the shopping journey.
Final Experience
Outcome & Takeaways
The redesign concept brought product discovery, comparison, and education into a more cohesive shopping experience across desktop and mobile.
By simplifying the information hierarchy, highlighting meaningful differences between TV models, and creating clearer paths toward purchase, the concept explored how Roku could help customers make more informed buying decisions.
Key Takeaways
Clarity Over Complexity
Making product differences easier to understand was more valuable than presenting every feature at once.
Designing for Decisions
Product comparison and education should work together to help customers confidently evaluate their options.
Responsive Thinking
Designing across desktop and mobile required prioritizing information and interactions rather than simply scaling down layouts.
The project reinforced the importance of connecting UX research, information architecture, and visual design to real customer needs.