HUB: UX Report
--
Project Overview
As a team we conducted research, gathered insights and designed HUB, the newest streaming service, bringing all your content together in one place. Roku, a respected name and leading platform in home streaming, proved to be the most ideal brand to partner with for this companion. We found Roku to be valuable because they are a trusted brand that aren’t already a part of a greater service provider like Amazon, Apple, or Google and they don’t have any presence on computers a growing platform for cable cutters for consuming media.
My role
UX Designer
Timeframe
We had 2 weeks to research, design and iterate on our project. We spent the first week for research and some design and the second week for design and testing.
Limitations, Parameters, Resources, and Materials
Our team had 3 UX Designers, including myself. Due to our limited time, our main goal was to understand what the current issues were and figure out the appropriate way to address them. Our research included:
- Conducted general brand research and business model canvas for Roku.
- Screener Survey: 16 participants (within the Greater New York City area)
- User Interviews: Five (5) interviews with users vetted through the screener survey. 2 male, 3 female ages 22–30.
We decided to design a responsive website considering 87% of people on our surveys consumed media on their laptop or desktop.
We used Sketch to design wireframes, InVision to create the first round of prototype and Flinto to create the second and third rounds of the prototype.
Problem Statement
Once we synthesized our data from our interviews we created a persona Wanda: the primary of two personas. Wanda subscribes to numerous streaming service accounts for her entertainment needs. Finding content can be frustrating when having to traverse multiple streaming accounts. Current solutions attempt to address these issues on TVs, however it is not to the full extent of Wanda’s needs.
Our revised problem statement became:
“ How might we enable users to discover quality content across streaming or cable accounts and devices?”
How did you confirm or refine your initial assumptions?
Doing a Competitive/comparative analyses & competitive matrix: Assessment of the current landscape of retailers specializing in media streaming services. First this helped us determine what was useful research and what wasn’t. We found that Roku’s competitors (other TV-connecting streaming devices) have a completely different business structure and audience as well as limited web presence. We found that companies such as Netflix, Hulu, and HBO GO had more comparable business models to the type of service that we wanted to make and would make for better examples to base out features off of.
My Research Report has additional synthesis in much more detail: https://docs.google.com/presentation/d/1bEBf5dKM8BHKE1DBc4l6BdxIrT3PGsBTSRCumJZvGi0/edit#slide=id.g3d40e2b5a3_0_155
Design Studio
We came up with as many features as possible and then organized them through prioritization methods that include creating several matrices (seen below). We then listed off key screens began with a design studio drawing out potential interface design and layout design. These lead to the creation of our prototype.
User Testing
In the 3 rounds of testing we did, 5 Usability tests we conducted. We gave the users three tasks that took them through the most important functions of the site: Adding and disabling services from their manage accounts, finding live TV, and finding recommendations. We also timed each task and asked them to rate each task from 1 (easiest) to 5 (hardest). While users were able to complete tasks with relative ease most of the advice we received was based less on their performance and more on how they felt as they went through the prototype.
- Users were overwhelmed by amount of content
- Users had difficulty finding the ‘Manage Accounts’ Page
- Value added by the recommendations wasn’t apparent to the users
- Users felt it was too “Netflix”
Sketches
Here are our original wireframes that the aforementioned usability tests were based on:
After gathering insights, here are the high fidelity wireframes with changes we made to the original:
Usability Tests and Resulting Iterations
Upon testing our new prototype: our first task (finding the manage accounts) improved greatly. Task 2 dropped but it’s likely the higher fidelity caused people pause. when asked to look for a place to watch or a show to watch seeing the show thumbnails tends to slow down the eye and create more bias in decision making. Task 3 changed since we added a call to action the task took a bit longer.
The biggest takeaways were:
- Users liked recommendation quiz but were not confident in its value.
So our solution was to test a new type of recommendation alongside the old one to see which one they felt was better
We conducted 5 more usability tests. We tested 5 more people with one version first, then the other (and switched the order of which feature was tested first with each new tester). We found users liked both about equally and voiced that they’d prefer both ideally. So we ended up putting them together (this also helped fill out the navigation page with more content. We also added a mood feature to the filter recommendations since users liked them from the quiz.
Prototype
Key pages of prototype captured in Flinto: www.flinto.com
Reflection
Moving forward we would like to test the final site more so we can get more comprehensive data from the first two tasks and more importantly see how users react to both recommendation features together. We aren’t entirely sure how successful we were in making HUB feel like it’s own thing and less like Netflix. Perhaps having users test Netflix’s site would have helped us determine how to improve or differentiate. Doing a card sort would also be helpful in creating show recommendation algorithms (for the quiz at the very least).
The biggest take away was making sure it was clear which of our two problem solutions was the main focus and the one that HUB was designed to tackle (multiple accounts all in one place) and which one was the solution that formed secondarily through feedback and was worked into helping to differentiate HUB from other platforms while helping our users (recommendations). Our first solution caused problems in a slightly new way that other platforms didn’t necessarily have the answers to.
It seems like users were all very interested and excited about the prospects of what we’d created. If we could figure out how to get streaming services to agree on mixing content with other streaming services in a central location that would be the final step as well as making sure our designs work to benefit of all the necessary business and development teams we would be in communication with.
