ASM Logo (7).png

Hulu Case Study

May 2019

 

Tools
Figma

Project Info
Individual Design Exercise

Timeline
One Week

 

The Challenge

The goal of this redesign was to align the high quality of content on Hulu with its mobile experience. Streaming platforms have one relatively simple goal in mind: to let users easily watch what they want when they want. But this does come with the challenge of creatively differentiating ones platform experience from competitors, especially in a highly competitive market. Streaming companies need to maintain a unique and positive experience to stand out from the rest. Hulu for mobile has done well in terms of being different from the rest, but the trade off is apparent in its experience design.

My high level goals for this redesign are as follows:

1. Make it seamless for users to navigate around the application
2. Give more focus on high level categories of importance to the user

 

The Process

This was more of a fun side-project that I chose to work on because 1.) I just don’t like using the Hulu mobile app and 2.) It’s a good way to sharpen my skills as a UX Designer.

With that said, I’m not working with a full team here so there are parts of my normal design process that I have omitted. The full design and development of an actual product is built upon a strong collaborative effort between engineers, product managers, researchers, and various stakeholders.

 

The Discovery

At the beginning of this redesign I didn’t have enough existing insights from actual users so that was my first main objective. Having some insights about the problem(s) of the existing application can give a more tangible goal to work towards solving. I contacted 5 close friends of mine to observe how they interacted with the product.

 

Insights

The goal was to understand the pain points that users faced when using the application and to grasp an understanding of their mental models. We want to uncover how the users believe this application should behave.

IMG_1863.png

The current interface did not promote discoverability.

 
 
IMG_1862.png

The entire screen’s locus of attention was given to a single TV show or movie one at a time. This was frustrating to users when they wanted to quickly scroll through and see what new shows were added.

 
 
IMG_1861.png

Some users had trouble reading the primary content. The title and description of a program can be obscured because of text overlaid on gradient heavy backgrounds. It was an annoyance especially when someone wanted to read what a movie was about only to have to squint to see what it was saying.

 
 
image+3.1.jpg

Navigating throughout the app was often clumsy and did not promote speed. Users had the goal of wanting to quickly filter through different genres or quickly see a high level overview of Hulu’s recommendations. Another issue was that many times the categories that Hulu did provide were often not relevant or interesting to the user.

 
 

Other Insights

Many of the hypotheses I had about the Hulu mobile app were verified during this first round of user interviews. However, additional information about the users were also uncovered. 4 out of 5 of them had a Netflix account and used it weekly. 2 out of 5 of them had a Hulu account and 1 out of 5 had an Amazon Prime Video streaming account. After speaking with them a bit more I realized that they were all fairly tech literate which made me wonder then how much of an issue this may be for a broader audience. How would an older demographic with vision issues be able read the titles of TV shows if everything was overlaid with colorful imagery? If tech-literate millennials were a bit frustrated navigating throughout the app, how did those who weren’t tech-literate fair with using the product?

 

Framing the Problem

There are many design decisions that could improve the overall experience of using Hulu on a mobile device. But after evaluating the results of the data collected after the discovery phase, the main issue seemed to boil down simply to a poor navigation. A poor navigation discourages discoverability, obscures content, and introduces inefficiencies to a users flow.

 

The Redesign

Introducing.. the new Hulu for iOS

We live in such an exciting time in history, especially with the rapid integration of technology into our everyday lives. However, we all have stressors and problems we’re dealing with in our lives. Entertainment products should take that edge off by providing a positive holistic experience. Hulu is an easy to use product that allows users to discover enjoyable viewing experiences.

 

The New Navigation

Hulu has been streamlined to provide a quick seamless flow to get users to quickly find what they want to see. No more need to view things one at a time or in isolation.

 
iPhone 8 2.1 (1).png
iPhone 8 2.5 (2).png
 
 
 

Group Contextual Information and Action Together

Hulu gives you everything you need for each screen all in one place. No more linking to separate screens or looking for where you have to find a certain action. Everything that is relevant to a particular screen that you’re viewing is right there.

 
iPhone 8 2.4 (2).png
iPhone 8 2.3 (1).png
 
 
 

TV Show or Movie Recommendations

A way to better inform a user about their viewing options to help connect them to the hundreds of movies or shows that fit their viewing preferences.

 
iPhone 8 2.6.png
 
 

Designing for Inclusivity

Brand identity is important but so are the user needs. There are many places within the current Hulu experience that are not up to the WCAG (Web Content Accessibility Guidelines). Contrast and visibility have been improved on the primary actions and important pieces of information. The brand guidelines of Hulu have been slightly deprioritized but the experience for a larger demographic have greatly improved.

iPhone 8 2.7.png

Increased contrast between text and background

iPhone 8 2.8.png

Solid dark blue background against white text

iPhone 8 2.9.png

Transparent dark grey background to increase text visibility

 

Conclusion

Hulu and other streaming platforms have not only fundamentally changed how we view television but also changed how we interact with entertainment products. Companies everywhere are beginning to launch their own streaming services. Technology is moving more towards cloud infrastructures and industries everywhere are being impacted. Video games are even beginning to be streamed as well!

If I had more resources and time I would love to see how this redesign effort affected KPI’s. I would suspect that the time spent on the actual app would increase and overall viewership of less featured content would rise. There are many more things that could continue to be iterated upon and learned. Many of these redesign decisions were made in isolation. I have no context on the business goals, no historical user data, or a history behind how design decisions were made for the existing Hulu product.