HUB: UX Report

Logo for HUB website

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.

(left) — based on easiest-hardest to implement and highest-lowest user impact; features in the top left corner connote the MVP. (right) — based on the MoSCoW method features are broken up depending on their determined overall necessity.

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:

Discover Page (Home): hover over shows source and additional information, options for Live TV, and recommendations
Manage Accounts Page: Add or remove services

After gathering insights, here are the high fidelity wireframes with changes we made to the original:

Users were overwhelmed by the amount of content
Users had difficulty finding the Manage Accounts Page
Users didn’t see the value added by the recommendations: added a call to action for recommendations in the form of a short quiz

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

New recommendation used a filter system, we removed the hero image for a below the fold feature

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

Finding shows via the Live TV section and TV Guide
(left) Adding and syncing an owned streaming service (right) Disabling the ability to have a live TV channel show in HUB
Two unique recommendation features (left) hero image “explore better” quiz (right) filtering section below the fold with on-the-fly recommendation updates

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.

--

--

--

UX Designer exploring a sea of opportunities and experiences. Research, Design, Prototyping. Also loves art and media, biking, and traveling.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Light & Dark: Theme customisation in Sketch App

Mega Project on E-Planners — Circle 4

NFT Artist Swayatra Sold out Her Self-Titled Collection on the Blind Boxes Marketplace in less…

Real Estate Development: What’s at Risk When You Leave Vision to Chance

Learn About How Shipt Works, Its Business Model And App Development Cost To Build An App Like Shipt

Studio O+A- 10 Iconic Products — RTF | Rethinking The Future

Start Manufacturing Your Product With the Right Documentation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Zach Sussman

Zach Sussman

UX Designer exploring a sea of opportunities and experiences. Research, Design, Prototyping. Also loves art and media, biking, and traveling.

More from Medium

My Summer at Feedzai as a UX Designer Intern

A Home Buyer’s Journey to Touring a Home: A Zillow UX Case Study

UX industry leader shoutouts and how they helped lead me on my UX Journey

BIASES IN UX RESEARCH AND HOW TO OVERCOME THEM