Context

Hulu Mobile App UI Research & Redesign

CLIENT
Hulu (unsolicited redesign)
SECTOR
Streaming / Broadcasting
MY ROLE
Lead UI / UX Designer
PROJECT TIME
1 Week

discovery

What Were The Client's Needs?

As a quick overview on this project, Hulu is a streaming / broadcasting service that provides their users with a way to stream all of their favorite shows and movies. If you're like me and have used the Hulu mobile app before you may have noticed some hang ups with the UI / UX of the app the way it sits currently. For this very reason I decided to take my own stab at the Hulu UI (this was an unsolicited redesign of the mobile experience and isn't a real world project, it was more of a passion project).

Given the way that the Hulu mobile app architecture sits during the time of this project (June 2020) and based on user research gathered from web forums regarding the Hulu mobile experience, the pain points for the user were as follows:

  • The home screen of the app only allows the user to view one show / movie at a time. This wastes valuable screen real estate and makes it difficult for the user to quickly scan and discover shows.
  • From the home screen, it's unclear where the user can access the "keep watching" feature (this feature lets the user easily resume shows that were unfinished) as it's hidden in a carousel. This is a top priority for returning users and needs to be featured prominently.
  • The color scheme of the app changes dynamically based on the current show that is displayed. While this is a nice design touch, it can cause confusion for the user as there is no visual / design cohesion throughout the app. This also reduces the impact of Hulu's branding.
  • From the "My Stuff" screen - the user is only able to view two shows / movies at a time. This wastes valuable screen real estate and makes it difficult for the user to quickly scan their added shows.
  • Also in the "My Stuff" screen - users had no way to sort their list. This made it very difficult for users that have a variety and multitude of shows and movies to quickly navigate their list.
  • On the "Show details" page users could only view a maximum of 3 episodes at once due to the design layout of each episode card. Reducing this would allow the user to more quickly navigate through the list of episodes.
Original layout of the Hulu mobile app.
Hulu mobile app UI before the redesign.

design

Design Strategy & Concept

Prior to beginning the design process, I spent two days scouring Hulu’s online forums, feedback and online videos for real user feedback on the features that they considered to be hindering their user experience. I also spent this time examining the mobile experience of Hulu’s direct competitors (Netflix, Amazon Prime, HBO Go etc). Based on the feedback of Hulu users I had gathered, the majority of these users considered these direct competitors to have a more intuitive user experience than Hulu’s as well as greater scannability and discoverability of new shows and movies.

Keeping the feedback and pain points that I had collected in mind, I set out to create the initial wireframes of the overhauled mobile experience. My biggest focus was enabling the user to be able to view more shows / movies at a time throughout the various screens of the app to reduce the amount of time they had to spend searching. Another large point of focus was making the “keep watching” section much more prominent and easier to find for returning users so that they can quickly jump back into their shows. 

During the wireframing process, a few different card variations and sizes were tested initially before deciding on having 3 cards wide with side scrolling available (the only exception being Hulu originals where Hulu could better promote their original content). Based on my research, on the home screen, the vast majority of users are in discovery mode. They are quickly skimming through the seemingly endless options before drilling down into a particular show or movie to find out more details about it. Because of this, all nonessential information was stripped away leaving only the cover image to do all the talking and draw the user in.



Hulu mobile app UI Wireframe.
Hulu mobile app UI initial wire frame.

CONCLUSION

The Outcome Of The Project

I had a blast with this redesign as it’s a mobile user experience that countless Hulu users online along with myself believe has sorely needed an overhaul. Being able to re-imagine a better Hulu experience is something I’ve been wanting to create for a while now. 


The most prominent usability changes that were made to the Hulu mobile user experience were as follows:

  • Increased the speed of discoverability of new shows and movies on the home screen by changing the layout to strip down the information and only present the cover image of the show. The drawback to this of course is the loss of genre and episode name information (from Hulu’s current app) however, the vast majority of users want quickly scannable information. 
  • On the home screen, featured just beneath the suggested shows banner at the top of the page is the “keep watching” section where users can quickly jump right back in where they left off with their streaming. This section is buried and hard to find on Hulu’s current app. 
  • Omitted the dynamic color changing that happened to content based on the current show’s colors. Based on my own UX research, I have found that having a wide library of colors can be visually confusing to the user and also reduces Hulu’s brand recognition. 
  • The search icon was moved into the bottom sticky nav bar. In the current version of Hulu’s mobile app, the search is at the top of the page and disappears on scroll. The search needed to be readily available to the user at all times. 
  • The “My Stuff” screen was changed to “My List” to better match the verbiage that users are familiar with across other streaming platforms. This screen now features more show cards above the fold for better scannability while preserving all of the information available. 
  • Also added to the “My List” screen was the ability to sort the user’s list. This allows the user to navigate their list more quickly and accurately than simply scrolling does. This is especially important for users that have a lot of items on their list. 
  • Created a search screen that grants the user more control over their search by adding in genres and categories. This helps to expand the search capabilities while still giving the user the current functionality from Hulu’s mobile experience.
  • On the “Details” page of a show - changed the layout of the episode cards so that more episodes are readily visible both above the fold and after the user has scrolled. 


Upon researching the usability issues that a wide range of users have experienced with Hulu’s mobile experience highlighted an overarching desire for a simpler, more intuitive user experience. Had this been a real project, I would have spent more time on the research and testing component to ensure that the design decisions I made helped to improve the user experience. That being said, I was able to test this UI on a small group of Hulu users. It received very positive feedback for the intuitive nature of the UI, the increased discoverability of shows and the overall aesthetics and brand recognition of the app.

Hulu Mobile App UI Redesign showcase.

browse

my other projects