Hulu Homepage Interactions
Solving pain points within the Hulu iPad ios app's homepage.
Role:
-
Design Sprint-personal project
-
Sole Designer and Researcher
Problem:
​
As a frequent user of the Hulu ios app, I'm often frustrated by usability issues found within the homepage. With this project, I set out to solve those issues once and for all. But first, I consulted with friends and family and confirmed that in fact the usability issues below plagued my interviewees as well:
1. No refresh option:
Often after reentering a session on the Hulu app (after a few hours/days of it being active on a device) users are surprised to find that a show that was supposed to release a new episode that day didn’t.
-
The root of this issue is simply that the screen does not auto-refresh.
-
If one attempts swiping up, the gesture associated with refreshing, nothing happens.
-
The only way for a user to see their new shows is to exit the app, close the session and restart it.
2. Un-motivating loading screen:
Sometimes the app/the wifi requires the loading screen to play a little longer than intended to generate content.
-
The problem is, with the current loading screen users often feel like nothing is happening.
-
The current loading screen has a very subtle animation; making users feel like there is no progress in their content loading.
3. No way to manually skip an episode in the ‘Keep Watching’ carousel:
Often, even after watching an episode or finishing a show, it still shows up as unwatched in the 'Keep Watching' carousel.
-
The only current fix for this is to completely remove the show from one's watch history.
-
This fixes the issue of having shows that users are finished watching in their ‘Keep Watching’ list but not the problem of the system not recognizing that they already watched a particular episode in a show they're currently watching.
Research:
Branding Guidelines:
I referenced Hulu’s branding guidelines before starting with the design, to ensure my ideas were feasible and matched the existing guidelines. These served as a great framework for my sketches and designs.
What makes an effective loading screen?
Before sketching, I did some research on how I could effectively achieve my goals with the loading screen:
-
Loading screens need to be something users will not become sick of: while a fun animation is exciting to watch once or twice, it can quickly get old and annoy users.
-
Loading screens should not be too exciting: The goal of this app's loading screen isn’t the same as a video game’s, it isn’t to inform, it's merely to get users from point A to B without creating impatience.
Sketches:
I sketched out potential solutions to target the pain points; 2-3 variations for each solution. I then proceeded to fully flesh my sketches out into high-fidelity prototypes.
High Fidelity Solutions:
After sketching I created high-fidelity prototypes to see what my solutions would look like in action. (Solutions are labeled for reference purposes.)
​
At this stage there were several solutions created to solve each problem, later on, after testing, I selected one solution for each.
​
3
Loading Screens:
1
2
Refresh Interaction:
1
2
Skip Episode Manually:
1
2
Usability Test:
Thirteen participants tested out my design; below are the results (options are clearly labeled above):
Something that particularly excited me about the testing portion of my study was how passionate the responses were. For example, in selecting their preference one participant exclaimed" "this one, I find the other very irritating", not only did they have a preference, they vehemently disliked the alternative.
​
One participant preferred refresh option 2 (referenced above) because it "feels like refreshing my emails"
The general takeaway from this usability study was that users generally want what feels most natural to them, whether an interaction is familiar because it (to quote) "feels like refreshing my emails" or was preferred because it feels seamless within the current application.
Solutions:
This refresh option is the most intuitive and requires the least effort. All it requires is one swift motion. (option 2)
By showing the Hulu logo progressively filling up with color, users are encouraged to wait, even if loading takes a bit longer than usual. The wait time seems to be decreasing instead of static, as it was previously. (option 3)
Even though this (option 2) wasn't the majority choice (it was a close call) I find that the language "Mark this episode as watched" fits in more with the copy style of the rest of the options in the popup. (ex: "My Stuff", "Remove from watch history")
If I had the chance to implement my work...
If I had the chance to work with Hulu in problem-solving for these pain points:
-
I would like to hear the reasoning for the current choices (the current loading screen, swipe interaction that doesn't serve a purpose, and lack of approach for marking an episode as watched/ removing it from the carousel. ) as this information may contribute to a better solution.
-
I would like to have the opportunity to test out my solutions on more users to receive more feedback and eventually apply the changes, testing them over time to see if they in fact improve the overall user experience.
​
Nonetheless
-
It was enjoyable to work with an existing design system: to take a step back on customization, and be able to hone in on problem-solving.
-
I enjoyed working on solving real problems that I experience. It’s easy to complain about your issues with a product, but actually thinking of a real and plausible solution is a whole other ball game. I genuinely enjoyed exercising my problem-solving muscles.
​