UX/UI Design
Wemote
Streaming services like Netflix and Hulu have complex user interfaces that are very tedious and annoying to navigate with a remote control.
The goal is to reduce the amount of remote control button clicks that it takes for a user to turn on their TV and start watching their desired content.
I was responsible for the UX design process for this entire project* from start to finish.
**This is a capstone project for my coursework with Springboard.com’s UX/UI Career Track program
Currently, on-demand streaming services such as Netflix, Disney +, and Hulu have taken over as convenient means of watching television, as 60% of Americans have ditched cable TV.
However, instead of changing television channels or loading a DVD disc, users are now faced with the dilemma of having to find a new way to search and access the content they want to watch. This leads to the cumbersome process of navigating the interface with only a singular OK button and directional arrow keys.
The challenge at hand is to mitigate how tedious this process is for all users, while remaining intuitive enough for everyone in the household to easily learn and navigate smoothly.
In order to understand more about user behavior when interacting with smart TVs, we conducted the following research methodologies:
From this process, we were able to ascertain 3 main insights concerning the usability of smart TVs.
Using our research, we identified the following insights to set a foundation for our problem definition.
We synthesized the research insights by creating two user personas based on observed behavior:
Our goal is to design solutions that can help both user types and everyone in between. This leads us to our "How Might We" problem statements.
The first thing to consider when attempting to overcome this dilemma is to design a solution that proves itself to be feasible and beneficial for the 3 main groups of people. It must be viable to the software developers who code the smart TV apps, compatible with the hardware manufacturers who make the physical TV’s and remotes, and beneficial to the consumer, our everyday user.
With these concerns in mind, I noticed a common link that is already built into the average remote lying around the house: colored buttons.
Since these colored buttons are already built into so many remote controls, our solution for this case study will focus on using these buttons.
To create a red route for our user story and MVP, we have to ask: what is the primary goal of watching TV? Looking back at my secondary research, there was a lot of very helpful content about this:
“We encourage designers of TV experiences to innovate and create new features and experiences but to not lose sight of users’ primary tasks when using a TV: to find and watch video content.” (Google)
For television interfaces, the primary user goal is to find the right content as quickly and seamlessly as possible. Supporting this goal is crucial to designing a usable and enjoyable television interface. (Nielsen Norman Group)
So, the red route will be one where the user turns on the television knowing what they want to watch. How can they access the correct content as fast as possible? How can we use our color shortcut buttons to help?
Using our user story's MVP from above, our sketches will focus on the following tasks:
A basic wireframe with more realistic elements (such as TV show images) was created for testing purposes. We used the Marvel online tool for this.
(Actions from MVP User Story: Type up search, see search results, choose search result)
Typing up the search and selecting one of the many search results using only the OK and directional arrow buttons on a remote take lots of clicks. During this design phase, we designed 3 solutions that utilized the color shortcut buttons to improve navigation and reduce remote clicks.
Solution C got the best feedback during testing, because the color shortcuts provided ways to access tasks users may not have thought of otherwise (tasks like "Like", "Add to List", etc). Also, users welcomed the idea of the colored buttons and appreciated the color coordination between the on-screen UI and the remote.
Designing a Solution for this screen: use shortcut buttons to have faster access to tasks shown below
The usage of shortcut buttons here often confused users. In this case, the "shortcuts" does not seem helpful.
When choosing a specific episode within a given season containing many episodes, a user is often required to produce numerous clicks on their remote in order to access that desired episode. This is especially true if the cursor is hovering on episodes in the latter end of the season and the user wishes to access an episode from the earlier part of the season.
(For example, if a user last watched episode 20, but wanted to watch episode 1, it would take 19 clicks to do so. That's a lot.)
Users responded positively to the "Back to Top" idea, but often didn't see it the first time. Onboarding or on screen cues will be necessary so that the user can learn that this function is available.
Utilizing the common colors featured on the integrated buttons of most conventional media streaming remotes, a brand identity for this project is starting to form. Below is the logo, color scheme, and minimalistic remote that will be used for this project. In essence it is a modified RokuTV remote.
Due to the fact that users interact with a smart TV primarily through the use of a remote, it's important to design a prototype that mimics the usage of a remote as closely as possible. To work around this unique situation, a smart remote image with hotspots was added to the right side of the side of the screen. All interactions will be made by clicking on the remote.
A horizontal A-Z keyboard is implemented (now found on the Disney+ smart TV app, and the universal keyboard design on newer Apple TVs. This design provides the fastest access to the search results, and also the delete button. Though a QWERTY or a grid-style keyboard may provide a faster access from one letter to another, our research found that search algorithms usually only need 2-4 letters of search input to find what the user wants to watch.
**can reduce up to 20 clicks for TV seasons with a lot of episodes; depends on how many episodes in a season and what episode user wants to watch.
The user will access “More Episodes”, where it is currently set to Season 4, Episode 13. They can click “Up” 12 times to get to the desired Episode 2. However, there is also a designated shortcut button designed to go “Back to Top”, with a legend on the bottom showing its function. This would be the fastest way to accomplish the task.
Due to the fact that users interact with a smart TV primarily through the use of a remote, it's important to design a prototype that mimics the usage of a remote as closely as possible.
Also, the tasks assigned to the user have to be very specific due to the large screen and complex interface of the smart TV. At the same time, the tasks must test the usability of the project. Testing participants could only navigate the screens by clicking on the remote on the right.
This case study has solved some common user experience issues that come from using smart TV. We started by conducting research and user interviews, learning that the pain point of using a remote to navigate the smart TV interface was almost universal. We then used this research to focus or scope on reducing the amount of clicks a user needed to click to access their desired content. We tried and tested different solutions and concluded with a design that features the usage of 4 color buttons found on many smart TV remotes to achieve a reduction of clicks needed by the user. We created a prototype for usability testing, and the results provided a lot of positive feedback for the usage of colored buttons and color coordination.
At the completion of this case study, I am really proud of this project because I learned that even something as complex as the user interface of a smart TV can be improved through user-centered research and design. If you've read this far, thank you. It means a lot to me! A lot of time was spent on this project, and there were so many findings that were uncovered, secondary to the primary content conveyed on this page. Here's to a better UX experience and an innovative future for smart TVs moving forward!
