Hulu TV App
Portfolio Project | Unsolicited Redesign | UX Case Study
Tools: Axure, Figma
Scope: UX Research and Testing, UX Design
Introduction
The purpose of this case study is to identify usability issues on the Hulu app, address the impact of these issues, and offer effective solutions to improve the Hulu user experience.
Overview
Hulu launched in 2007 as an internet streaming service focused on providing advertiser-supported movie and television content that became available to the public in 2008. By 2024, Hulu will be entirely owned by the Walt Disney Company and is projected to have upwards of 66 million active subscribers. While Hulu has an estimated retention of 2/3 of its subscribers, competitor streaming apps have cut into Hulu’s market share with the recent launches of Peacock, Paramount+, and HBO Max, causing Hulu to slip to 4th place in terms of Streaming Video On Demand (SVOD) providers behind Netflix, Amazon Prime, and Disney+.
To better compete with the influx of streaming services and increase SVOD market share, Hulu should address three existing usability issues, including lack of personalization in the algorithm, difficulty reading the interface, and an over-complicated account management process.
Research
To identify areas of improvement for an app redesign and better understand the Hulu user experience, usability studies were conducted remotely via Zoom with four users who met the characteristics informed by Hulu’s current user base.
Usability Testing
Users were asked to verbally express any thoughts, feelings, or observations about their experience while browsing their Hulu homepage recommendations for a total of ten minutes. This specific time frame was chosen based on the average time it takes users in their age bracket to make a selection on a streaming service; however, users were not provided this information beforehand so as to not influence behavior.
Feedback was captured and bucketed into similar categories that helped inform further user task analysis observations and to identify the three primary issues further addressed in this study.
Usability Testing Results
3 out of 4 users did not add anything new to their “My Stuff” list within the allotted 10 minutes
2 out of 4 users expressed feelings that the algorithm didn’t actually “know” them
2 out of 4 users negatively compared Hulu’s interface to a competing app
User Task Analysis
User experience concerns regarding account management and “keep watching” features were uncovered during initial usability testing. To better understand the problem, users were tasked with completing two different objectives while verbally expressing their thoughts, which were also observed via Zoom:
#1 Resume the next episode of the most recent television show watched in the last two weeks via Hulu’s “keep watching” category
#2 Locate their user account settings to compare Hulu’s different plan options
User Task Analysis Results
1 out of 4 users located their most recently watched show in “keep watching” section
3 out of 4 users located account settings without help
0 out of 4 users found the comparison page helpful
4 out of 4 users agreed the comparison page should live in the Hulu TV app
Key Design Updates
Recommended If You Like…Anything?
Background
Once a user selects their profile, they are taken to a homepage personalized based on their viewing habits on the Hulu platform.
Problem
Filter and sort options are limited and not accurately prioritized for a personalized user experience.
Impact to User Experience
Usability Testing revealed frustration with Hulu’s homepage design and recommendation algorithm. Users were asked to browse their respective homepages - without utilizing the search bar functionality on the app - and to describe their feelings about the experience.
Users were also asked to complete the first portion of a Task Analysis with the objective of finding and resuming a TV show they’ve most recently watched within the last two weeks.
Results indicated 75% of users had to take additional unnecessary steps to find the show.
Solution
Leverage the readily available user data to personalize and prioritize recommendations by delivering accurate content recommendations aligned to user interests and streaming habits that requires little to no effort on the part of the user. Featured content at the top of the page should render in order of importance to the user, beginning with most accessed categories featured in a title card carousel (ex. My Stuff, Keep Watching, TV), followed by additional categories sorted by a user’s most watched available genres.
Why it Works
Keeping users engaged is a critical part of maintaining customer retention, especially in a market as competitive as the streaming industry. Personalized experiences are no longer a rarity, they are a bare minimum expectation for a platform providing large volumes of content on-demand.
User attention spans are saturated with readily available content available from competing streaming apps, with average time spent streaming on Netflix nearly double the average time spent streaming on Hulu. Creating a better personalized experience reflective of the user’s watch habits can alleviate cognitive load and create an enjoyable experience that doesn’t result in users deciding to spend their evening with Netflix instead.
Make Good Choices
Background
Hulu’s redesigned app interface includes a dark gradient background with rows of personalized content options. When a user wants to select a movie or show, a white rectangle frames the content to indicate it has been selected.
Problem
Hulu’s color scheme affects the readability of the app, especially when selecting a show or movie, because the selection frame blends with the app background and content frame.
Impact to User Experience
Usability testing capturing user comments as they browsed their respective homepages indicated a key frustration with the app was the amount of times users accidentally selected the wrong movie or show due to confusion about what the selection frame is actually highlighting.
While none of the other streaming services have a different strategy regarding the creativity of their selection frames, some competitors utilize app real estate to feature real time previews of whatever show or movie is selected, which was revealed to be preferred based on anecdotal evidence captured during Usability Testing.
“I never have this problem with Netflix, because it's easy to tell what movie I've picked because the top of the screen changes to display the preview for whatever I'm on. For Hulu, I literally have to pull out my glasses and lean forward to see, and I still end up picking the wrong thing. —User #4
Solution
Modify the shape of the selected content frame and adjust the color scheme to enhance the visibility for users.
Why it Works
Carousels are popular when featuring different options for personalized content, but it is critical that the carousels do not overload the user’s ability to make a decision, and that the frames are easy to identify and interact with. Hulu is aware of content overload and has already made a conscious design decision to mitigate this in shifting from a grid-based design to an algorithmic approach. Enhancing the visibility of the selection frame by increasing the size and shape of the selected content can improve the overall browsing experience that doesn’t require additional dynamic previews at the top of the page.
Spot the Difference
Background
Hulu requires most account updates or changes to be made through a web browser on a page that showcases all package offerings.
Problem
Users must access details about their subscription or view package offerings from an account add-ons page that requires users to click into individual cards for plan details vs. featuring a true comparison tool.
Impact to User Experience
Reviewing account settings or package options is not a seamless experience when the user is required to entirely leave the Hulu TV app and then access their account from a web browser. This creates unnecessary steps, additional devices, and for the user to become immediately proficient in Excel and the art of a good cost-benefit-analysis to manage their plan. The overarching sentiment around the comparison page is that it is currently a cumbersome experience that likely deters users from making plan updates unless it is absolutely necessary, and users could be missing out on features important to their Hulu experience.
Participants tasked with locating their account settings from their TV to compare Hulu’s different pricing and plan options expressed a lot of valuable, honest, and candid feedback that helped further inform updates required for users to maximize their experience on the platform.
Solution
Redesign the current account add-ons page to offer a clear comparison tool, and consider adding account management functionality within the TV app.
Why it Works
Best practices regarding comparison menus and comparison tools reflect the importance of keeping options visible and clear to users to reduce any unnecessary cognitive burden. The changes included in the above mock-ups would highlight the advantages and prices of the packages in a way that allows users to clearly see the differences in the plans. If users are already required to go through the additional step of logging on via web browser, the rest of the experience should be as seamless as possible. This frees users up to focus their attention on all of the additional content just waiting to be affordably bundled.
Summary of Findings
Based on the results of the usability testing, an interactive prototype was designed with the following needs in mind:
Homepage redesign with an emphasis on user preferences
Creation of an in-app plan comparison tool
Homepage Prioritization and Selection Frame Redesign
Now features a user’s most accessed/pinned categories at the top of the page, followed by the user’s most recently watched shows, and then their recommended movies based on Hulu’s algorithm.
This emphasizes personalization for the user and allows them to instantly view and access their favorite media vs. the previous design utilizing the full homepage as an advertisement for the latest release.
Additionally, the content selection frame is now updated to enlarge the selected content with Hulu’s trademark green.
Account Options Redesign
Now features all options previously included when clicking on the Account icon in the top nav in a colorful grid format vs. the original vertical list.
Additionally, Manage Plan + Add-Ons no longer leads to an error requesting users visit hulu.com for changes. This button now leads users to an informative comparison tool that allows users to browse and make updates in one place, eliminating the stress of finding a separate device to make needed changes.
Comparison Tool Redesign
New page features a comparison tool that includes additional plan options and other add-ons available from Hulu. Users can see their current plan selection (greyed out) and easily compare to Hulu’s other packages/bundles.
Selecting a bundle will now prompt users to review the changes, enter a security authorization code to confirm the changes, and then an additional notification once the update is complete.
User is prompted to confirm the update. Clicking cancel will stop the process and return users to the Comparison Tool Page.
User is prompted to enter their security pin to process and confirm the changes to their plan to avoid accidental or unapproved updates or purchases.
User is notified when the update has processed and they can resume enjoying Hulu or continue to browse available plan options.
Conclusion
46.2 million estimated monthly subscribers currently entrust Hulu with what is objectively their most personal user data - their TV consumption habits. Hulu knows exactly how many times you’ve rewatched that one early 00s teen drama. Hulu knows just how much you don’t actually hate reality TV as much as you claim. Hulu even knows what time you actually went to bed last night. The profiles and attached user history of streaming services are more than just digital footprints; they are accidental diary entries that inform brands (including Hulu) of exactly who we are and how to reach us. Hulu has all of the information it needs to keep our attention, and just a few design tweaks could make it our favorite streaming app all over again.