Hulu - UX Design Team

Projects at Hulu

UX Design, Mobile Design System, A/B Testing
Project Overview
When Hulu started transitioning its outsourced design team to in-house, I was the 8th designer to join. I have worked on many projects since the early phase of its new product, including mobile app design, TV app design, design system, A/B testing, etc.
Tools I Used in This Project
Sketch, Mural, Framer, Marvel, UserZoom, InVision
My Contributions
Each project I worked on at Hulu closely collaborated with the product, research, and tech teams. My role included
- hosting project kickoff meetings to gather insights from stakeholders and domain experts
- coming up with design solutions through the UX design process
- delivering artifacts like wireframes, prototypes, and visual designs with annotations at different stages of the projects
- maintaining the iOS mobile component library
- working with the research team to conduct user testing or the tech team for A/B testing
- providing dev support to launch the design works
TV and Mobile Apps
Onboarding Flow Redesign
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.
Mobile App
Design System
design system is a complete set of standards intended to manage design at scale using reusable components and patterns.

When I first joined Hulu, the design of the new product was underway, but we didn't have a design system yet. One of my responsibilities as a designer on the Mobile team was to co-create and maintain the mobile component libraries, which contain iOS phone & tablet and Android phone & tablet components. I was in charge of the iOS phone library specifically. 

We used Sketch Libraries, which had just come out at the time, to manage our components. We would review any new component requests each week, meet with other designers to discuss the use cases, update the component libraries, and inform the corresponding design and dev teams of the changes.
A/B Testing
In my second year at Hulu, I had the opportunity to join the User Engagement and Retention team and work on A/B testing projects. One of my favorite projects was designing a "pause subscription" flow for users who clicked the cancel subscription button. The assumption was that some users might not want to cancel the service permanently; instead, they need to take a break and pause the payment.

In the design of the flow, we first ask users if they'd like to consider pausing the subscription instead of canceling and explain to them that we will not charge any payment until the end of the selected period; then, we ask users to choose the duration.

Soon after we released the flow to a subset of the users, we saw the churn rate reduced by 25%, and many paused users re-engaged at the end of the pause period. It was an intriguing project that piqued my interest in Product Management because I saw how data-informed product decisions could have a significant impact on business goals.