HULU SEARCH, FILTER, + FAVORITE FEATURES
two redesigns of Hulu's existing UI to ease the search, filter, and favoriting journeys
MY ROLE
For this project, I conducted desk and user research and created lo-fidelity wireframes based on those insights. Afterwards, I conducted usability testing and created hi-fidelity prototypes.
TEAM
Just me!
DURATION
4 weeks
TOOLS
Figma, Protopie
The CATCH UP
Identify two features of a streaming service's UX that could be enhanced while staying true to the existing design language.
Hulu is one of the leading subscription-based streaming services, with over 50 million subscribers as of May 2024. As someone who uses Hulu myself, I recognized that I still wasn't entirely familiar with the app and believed that there could be some incremental design changes made to improve functionality and user experience while adhering to the design language of the brand.
Research methods
For research, I applied heuristic evaluations and rapid user testing.
Afterwards, I documented flows of the app and took note of some of its most prominent features, such as the different navigation bar tabs. I created flows for three broad tasks to understand a user's journey as they would navigate across different screens.
WHAT WAS THE TRICKIEST TASK TO ACCOMPLISH?
"It was surprisingly difficult to find a movie with English subtitles. From what I experienced just now there wasn't any organization or filters to see which movies or shows offered what language subtitles."
Participant 1
TELL ME ABOUT A TASK THAT STUMPED YOU.
"It didn't exactly stump me, but I'm just kind of confused what 'My Stuff' is supposed to be for. Like, is it a favorites folder? A watchlist? I feel like if you end up saving things it can get unorganized really fast."
Participant 2
OVERALL, WHAT ARE YOUR THOUGHTS ON THE TASKS?
"The tasks weren't too difficult, with the exception of the subtitle one. I think in general Hulu has good organization and it's nice how I don't need to search things up to find things I want to watch since I can usually just see them on the screen."
Participant 1
For rapid user testing, I asked individuals to talk through their journey as they completed specific tasks:
"Find a Behind the Scenes featurette of Modern Family"
"Watch the trailer for any comedy movie"
"Turn on English subtitles for a foreign-language fim"
"Add a show to 'My Stuff', then go remove it"
RESEARCH INSIGHTS
Let's look into some methods of organization and making more elements visible to create smoother user journeys.
Based on user testing, I learned that certain tasks are much easier navigated than others. Finding a foreign-language film was not difficult, but finding a specific language was. There was a significant struggle to find a film with English subtitles, so much so we changed the task from finding a film to finding a show.
Adding a show to "My Stuff" was easy, but one participant voiced how they felt confused what purpose it exactly served. From this insight, it helped me see that "My Stuff" may have the most potential to expand upon, even if slightly.
Concept exploration
What information will we show and how will we do it?
Keeping my research insights in mind, I sketched 30 screens and narrowed down to 10 ideas with the most potential, writing use cases and opportunities for design changes. Many of my screen changes had to do with different layouts for more structured organization. I drafted 10 low-fidelity screens which helped me better visualize what the design change may look like.
Some ideas that I liked but didn't move forward with are pictured below!
I moved forward with the ideas that I felt were the most promising: creating more organization within the user's "My Stuff", and adding a filter system to the search feature.
EARLY VARIATIONS
I then created three variations and conducted A/B testing, asking the same users for feedback on which they preferred.
From monitoring click-through user testing, we received valuable feedback that would inform our next design decisions.
SEARCH, FIRST ITERATIONS
Allows user to pull up a bottom sheet to filter and sort content.
Filter system would use checkboxes to narrow down user's search, while sort would use radio buttons.
FILTER, FIRST ITERATIONS
Allows user to organize content that they desire into different groups, or "shelves"; to familiarize organizing media as if shelving movie DVDs.
USABILITY TESTING + FEEDBACK
I then created three variations and conducted A/B testing, asking the same users for feedback on which they preferred.
How easy was it to use the new features?
What did you like and dislike about the design?
How do you feel the feature fit in with the rest of the app?
SEARCH FILTER
The drawer felt the most intuitive with the mobile design.
DRAWER TO SHOW SCRIM
Allows users to still see the search screen while interacting with the feature
FULL LIGHT BACKGROUND PAGE
Allows user to see more filter options at once
FULL DARK BACKGROUND PAGE
Fits design language of the rest of the app, allows user to see more options at once
WHICH VERSION DO YOU THINK WORKS THE BEST AND WHY?
"The dark background is cool because it looks like the rest of the app, but I think it's awkward to take the user away from the search screen... like there'd be too much tapping. The second version is better, but it's the principle. I think the first one feels the best."
Participant 1
For the filter feature, some other key feedback I received was:
Include an "apply filter" at the bottom of the drawer
Include category titles during selection process
Some features I later thought to implement were:
Add a "clear all" option for filters
Add applied filters at the top of the search results
MY STUFF FILTER
Users enjoyed the simplicity of only having two options to sort into.
Separate buttons
Allows users to quickly add content to either category, both of which are under "My Stuff"
Drawer that expands tapping "My Stuff"
Allows users to add content to either category after opening a bottom drawer
Customizing shelves
Allows users to create customized categories for different media
CATEGORIES NEXT TO EACH OTHER
Users can scroll down to see the content they've sorted
FULL DARK BACKGROUND PAGE
Allows users a preview of what they've added; can scroll or view on separate page
WHAT DO YOU LIKE AND DISLIKE ABOUT THESE VARIATIONS?
"I think the concept is really fun! But I feel like it makes more sense for things like music and Spotify playlists than it does for shows and movies. Only having two options feels really clean."
Participant 2
The key feedback I received was:
Having too many "shelves" can overcomplicate things, makes more sense for music playlists rather than visual media
Not having a drawer can lead to users adding or removing content on accident
Not having a drawer labeled "My Stuff" means people might not be able to easily find "To Watch" and "My Faves"
Final DELIVERABLE
The final deliverable is composed of two flows: one for when the user is in a hurry and can easily access the cultural information on their own later, and one for when the user has more time to browse the area.
Flow 1: Search
User is able to filter Hulu content by subtitles, language, genre, and whether it will be leaving the platform soon.
Users will be able to see what options they've selected from the main filter screen for ease of recognition rather than recall.
Search results at the end allow user to remove filters previously applied, and the user to see what they've already checked from the main filter screen.
fLOW 2: FAVORITE
User is able to add content to "My Faves", which is for content they enjoyed, or "To Watch", which is for content they hope to watch soon. This allows them a bit of organization within "My Stuff."
Takeaways
KEEP IT SIMPLE
After some more thought, many of my ideas would have actually complicated the user flow rather than make it easier. Plus, some of my iterations created unnecessary touchpoints, interrupting the current design. Sometimes it's better to keep things simple!
USER RESEARCH IS INVALUABLE
So many design decisions in this project were made due to user research and testing. User testing can be very time-consuming, but even just interviewing a user for 15 minutes made all the difference for these designs. I'm thankful for having such kind participants who were willing to sit with me and answer all of my questions!
Made with love <3
Evelynn Li © 2025