Lead Product Designer
Roku HQ, San Jose CA
Roku
Creating order
The Roku TV program is one of the highly popular surfaces on the Roku platform. As the number of channels offered to customers continued to grow, users began having more difficulty finding programs that they were looking for.
Redesign
The Redesigned Guide included a higher-density grid along with a categories column to make it easier for users to browse the guide by interest, leaning into the genre-neighborhood browsing behavior that we observed from users.
Creating order
The Roku TV program is one of the highly popular surfaces on the Roku platform. As the number of channels offered to customers continued to grow, users began having more difficulty finding programs that they were looking for.
After conducting user research to further understand the problem we discovered that many users were unaware of the favoriting functionality that was designed to make finding programs easier. We also learned that users wanted to see more rows of the channel guide on screen at once. We also observed that users browse the guide in "genre neighborhoods”, first going to an area of the guide where they know that the type of content that they're looking for usually lives (sports, news, comedy), and then selecting a program from that "genre-category".
The Redesigned Guide included a higher-density grid along with a categories column to make it easier for users to browse the guide by interest, leaning into the genre-neighborhood browsing behavior that we observed from users.
Redesign
Creating order
The Roku TV program is one of the highly popular surfaces on the Roku platform. As the number of channels offered to customers continued to grow, users began having more difficulty finding programs that they were looking for.
Navigation
A historical back-stack was used to increase discoverability of the categories column.
Visual Alts
A historical back-stack was used to increase discoverability of the categories column.
This exploration positioned the show description and meta data within the focus position creating a very high contrast feel.
Visual Alts
A historical back-stack was used to increase discoverability of the categories column.
Visual Alts
Multiple alternatives for the visual design were prototyped and tested with users in the usability lab in San Jose.
This visual alt of the version above explores a larger, more airy focus position with the current program playing in the background.
This ideation explored a semi-transparent grid for a more modal feel.
This exploration positioned the show description and meta data within the focus position creating a very high contrast feel.
This visual alt of the version above explores a larger, more airy focus position with the current program playing in the background.
This ideation explored a semi-transparent grid for a more modal feel.
This ideation explored a semi-transparent grid for a more modal feel.
Positioning genre's within a side-sheet was also explored.
Categories folders across the top of the guide were explored but ultimately tested poorly for remote usability.
Categories folders across the top of the guide were explored but ultimately tested poorly for remote usability.
Positioning genre's within a side-sheet was also explored.
patfiori.design
© 2024