Hulu Android Redesign
In the world of Android, the debut of Google's Material Design framework was a historic moment. For the very first time, there was coherent, comprehensive set of standards to guide the design and development of a best-in-class Android app.
At Hulu, we seized this opportunity to kick off a long-overdue redesign of our own Android experience. I lead the design effort, which included defining the application of Material Design, improving core screens and flows, and partnering across the organization to establish content priorities and requirements.
Role: Design, prototyping
Home is the main vehicle for discovery in the app, and the first screen to load on launch. Design-wise, it's essentially a condensed version of the website homepage, with rows of scrollable "trays" stacked on top of one another.
Analytics indicated that scroll depth down the page and within the trays was quite shallow. We suspected this behavior was largely due to how the page was designed. Specifically, there were three problems that we inferred:
- The concurrent display of so many choices was overwhelming, leading to decision fatigue.
- Content wasn't meaningfully organized, making it unclear on how to effectively navigate the space.
- Presenting the show artwork and video thumbnails alone failed to provide enough context to motivate user action.
To address the first two issues, I proposed the idea of persistent categories of content to serve as pivots in finding something to watch. This would allow for a more focused and predictable browsing experience.
Working with the Content, Editorial, and Marketing teams, we arrived at five top-level categories: Featured, Watchlist, Recommended, Popular, and Trailers.
From Tiles to Cards
Having thought through the organization of content, the next piece of the puzzle to solve was presentation.
Traditionally, content on Hulu is represented as rectangular boxes we called "tiles". Tiles work great as modular building blocks, but are limited in their ability to provide context.
Because of this limitation, users exploring new content would find themselves bouncing between landing pages and detail pages in an effort to learn more. This can quickly add up to a high interaction cost.
After weighing several options, I found the card pattern to be great solution. It's a standard Material Design component, and offered a number of benefits:
- Designated area to provide details about the content.
- Contextual menu for useful actions, such as saving to watch later.
- Ability to grow/contract based on content needs.
With the information architecture mapped out, I was ready to start prototyping the interaction model for Home. I was particularly excited to explore how to apply meaningful motion to the experience. Meaningful motion is a core principle of Material Design, wherein animations aid in user understanding by establishing relationships between objects and screens.
My tool of choice was Pixate, which allowed me to create realistic, interactive prototypes that were perfect for gathering feedback.
Video of the Pixate prototype:
Section by Section
Though the card component was being shared across all of Home, some sections had unique content and functionality requirements. I wanted to make sure we thoroughly addressed these, so I went through each section to stress-test the design with live data.
The Featured section consists of promoted content and editorial collections. For the editorial collections in particular, we introduced the concept of themed playlist cards. The Hulu editorial team invests significant time into curating video collections, and we hoped to inspire more watching with the new presentation format.
The Recommended category benefited immensely from the card format. Bringing in the synposis helps explain the show's premise, and the contextual menu provides several useful shortcuts, including expressing disinterest to refine recommendations.
The popular category brings together the numerous trending and popular collections. With an emphasis on short-form content, it tends toward highlights from talk shows and reality TV.
For movie trailers, we pushed forward the idea of using video thumbnails in place of posters. This keeps the card design consistent, aligns more closely with the video content of the trailer, and indicates new trailer availability more effectively than static poster art.
The Watchlist cards had some unique considerations worth diving into separately.
Watchlist keeps track of the shows users are actively watching or have saved for later. Its most common use case is to resume an episode or watch the next one in the series.
However, to actually play a Watchlist video, the user has to manuever through the Show Page first. Oftentimes this creates an extraneous step, since the Show Page offers little value if you're already watching the show.
To resolve this, the new Watchlist card shifts the emphasis from the show to the episode. Now, tapping the card initiates video playback of the episode, making it easy for users to pick up where they left off.
The Show Page is still easily accessible via the show bar, which sits right above the video thumbnail. Also worth noting is the addition of an episode progress bar, which informs users what portion of an episode they've already watched.
The Show Page is the hub for all video content attributed to given show. Again, the original design mirrored the website — show artwork, followed by a series of trays.
In the original design, details such as the synopsis, user rating, and genre were located on separate page. Given that one of the main purposes of the Show Page is to introduce new shows to users, this was less than optimal.
In rethinking the design, our first change was to incorporate the show details into the Show Page. Next, we dropped the horizontal trays for a more easily-scrollable list layout, and reorganized the page into clearly defined sections. The Watchlist and sharing functionality, which were quite buried in the original design, were added as actions in the Action Bar.
As with Home, I wanted to model out transitions and animations, so I prototyped the flow leading up to the Show Page and the core micro-interactions within it.
Video of the Show Page prototype:
As the cornerstone of the Hulu platform, the video experience was something we wanted to improve on as well.
In the original interaction model, tapping a video thumbnail anywhere in the app goes to a Video Detail page first, rather than to the video player. While this page offers some potentially useful information and actions, it mainly adds friction to the experience:
We changed this logic so that tapping video thumbnails would immediately start video playback. Video details would still be available on the paused state of the video.
We also made refinements to the player UI for a more streamlined, balanced layout. Contextual actions were moved to the Action Bar, with commonly used controls (Chromecast, close-captioning) exposed and ancillary functions nested under the overflow menu.
Redesigning the Hulu Android app was an extremely rewarding challenge for me. I felt that we achieved great success in delivering a design that's current with the latest Android standards, but also premium and on-brand for Hulu.
For me, this was also a great opportunity to jump back into designing for Android and aquainting myself with Material Design. As Google continues to refine and expand their design framework, I look forward to deepening my understanding and experience with it.