Hulu launched a new experience in 2018. This onboarding flow redesign was part of the new experience. The onboarding flow allows users to select what genres or shows/movies they like for a tailored experience and introduces the product features. As the first thing that new users see, it significantly impacts how users feel about the Hulu TV viewing experience. The goal of this project was to create something that is not just easy to use but also feels personal and pleasant.
In the project kickoff meeting, we identified why we need a redesign, who we are designing for, and what problems they are experiencing. Sarah, our persona, just canceled her cable TV and signed up for Hulu Live. She wants to set up her profile quickly and start to explore, but the onboarding flow is frustrating her. There is too much text, and Sarah is unclear about how many steps there are and unable to skip.
After understanding the project goal, we took steps to understand the design constraints and opportunities better. We conducted an internal investigation with the Product, Tech, and Research teams to understand why we went down this path and how the completion/abandonment rate looked. We've also talked to different types of TV streaming users to find out how they feel about the existing Hulu onboarding experience.
After the investigations, we came up with some initial ideas and formulated our hypotheses, such as removing the transitional screens and shortening the copy could make the experience feel shorter and lighter, and moving the text-heavy Video Privacy Protection Act (VPPA) info to the end of the flow could improve the overall pleasantness.
With screenshots of the existing experience and post-its, we quickly put together a user journey map and identified screens to keep, remove and redesign.
Next, I created four versions of wireframes to explore different layouts, different steps, and different interactions. I added step indicators to help users feel more oriented and anticipate what's coming next. With the help of our copywriter, I rewrote the messages on each page for conciseness and encouragement.
After discussions with the Product Manager and other designers, we narrowed down on one direction. To validate the new direction, we conducted internal user testing with Hulugans from other teams. Three other designers and I set up the testing room and took turns being the transcriber and moderator.
With color-coded post-its, each transcriber took notes on what each participant said, did, what pain points they had, and what their expectations were. We found out that the new messages in the flow were easy to understand, browsing was easy, the design looked clean, and participants liked the ability to skip. However, there was still room for improvement. For example, the progress meter was not comprehensive for all the participants; some of them wanted to be able to go back and edit their selections, they didn't know where to find the items they had selected in the app, etc.
After the internal usability testing, I addressed the issues in the visual design, which has annotations for each interaction. Next, our prototyper Sean helped me build a prototype so that we could test it with actual Hulu users.
The external user testing was conducted by the Research team in the lab. It was interesting to learn that users were more engaged with the show-picking page, but less engaged with the taste-picker, potentially due to the density of the options on the screen. Most participants prefer a more contextual product tour experience once they get into the app, instead of seeing feature introductions during the onboarding flow. They were also confused by "Add to My Stuff" because they haven't gone through the product tour and learned about the "My Stuff" feature.
The final deliverable addressed all the findings and issues. I created a simpler progress indicator, adjusted the density of tiles on the taste-picking screen, rewrote some of the messages for clarity, and separated the onboarding flow and product tour so that users can learn about the features more easily within the context.