HBO Max redesign
Paws Forward: Streamlining Cat Adoption in Madrid.
Rol: UX & Graphic Designer – Research, Interaction & Visual Design.
Tools:
The problem
The old experience
Ambiguous categories, an overly extensive menu with no clear information architecture, difficulty locating desired titles, leading to website abandonment and user loss.
The website has usability issues that impact user experience and business performance. Unclear navigation and flows reduce efficiency and increase frustration, while the lack of advanced search and recommendations limits discovery and conversion. Weak support mechanisms further contribute to abandonment, highlighting the need for a user-centered redesign focused on clarity and performance.
The solution
A solution focused on clarity, efficiency, and visual impact
The redesign focused on creating a more intuitive, visually appealing, and user-centered experience. Through usability testing, the proposed improvements received positive feedback, confirming that users could achieve their goals more easily and through multiple clear paths.
%2014_30_50%202.png)
The solution
The design process
This case study explores the design of a user-centered adoption app, developed using the Design Thinking methodology. By empathizing with users, defining core problems, ideating solutions, prototyping, and testing iteratively, we ensured that every design decision addressed real user needs while optimizing for a seamless, engaging, and efficient experience.
Design decision
Mapping Experience Gaps in Content Discovery
I conducted a journey mapping analysis that identified several UX gaps: genre-based categories lack visibility, movie and series descriptions are not easily accessible, trailers are absent, and key engagement features such as favorites and rating options are missing, limiting content discovery and user interaction.
Surveys
Learning from Users
Using an empathy map, I identified users’ needs, pain points, and motivations, which directly informed the definition of the MVP. This approach ensured that the minimum viable product focused on solving core problems efficiently, delivering value quickly, and guiding future iterations based on real user insights.
As a result, we obtained relevant data about their perspectives, current experience, and potential improvements for the platform.
Information Architecture (IA)
Structuring the Experience
Having a clear and logical information architecture is essential to help users easily find relevant content and successfully complete the tasks the website was designed for.
The current HBO website presents several opportunities for improvement, beginning with its core structure. Content discovery can be challenging for some users, which may result in them abandoning the platform and turning to competing services.
Information Architecture (IA)
The new architecture
We designed the new information architecture based on insights gathered from previous usability tests, including tree testing. The results showed that 39% of users experienced a direct failure when attempting to complete a task, indicating that the previous information architecture contained categories that were ambiguously labeled and difficult to understand.
The new structure features clearer, more logically organized categories, grouped by similarity and streamlined for simplicity. This allows users to better orient themselves from the homepage, complete their tasks more efficiently, and feel confident continuing to engage with the platform. As a result, the improved experience encourages retention, promotes recommendations to other users, and contributes to stronger business outcomes.
Design decision
Building the new design
We wanted the UI design to convey the right message to new users—a space of calm and trust for adopting their next pet. Unlike the apps we studied in the benchmarking phase, this interface not only supports a meaningful social cause but also provides a simple and intuitive way to achieve adoption goals.
%2015_14_11%202.png)
We designed a homepage where information is organized according to the new information architecture. In addition, we applied key UX principles to the content layout and introduced a horizontal set of options featuring the most relevant categories, allowing users to choose the path that best fits their needs and context.
%2015_30_54.png)
When opening a selected series, users are presented with detailed information, related titles, and the new Favorites button.
Design decision
Colour palette
We present the design system, our visual guideline that outlines the visual decisions made throughout the project. These decisions were informed by the insights gathered during the research phase, based on a deep understanding of the HBO MAX platform and its users.
Design decision
Icons
We used the Material Design iconography system, featuring rounded, outline-style icons. In this stage, we applied the icons shown below, and the same system will be used throughout the interface. This ensures that users can quickly understand available actions without being overwhelmed by visual information, especially given the image-heavy nature of the platform.
The final design
Design Outcomes & Wins
The redesigned solution delivers a clear and concise navigation paired with a streamlined, effective information architecture. Key engagement features, including a favorites button and movie rating system, were added to enhance interaction. Movie discovery was simplified, reducing the search process from eight steps to four, improving efficiency, user satisfaction, and retention.
Before
-
Ambiguous navigation
-
Extensive and confusing information architecture
-
No Favorites button
-
Finding a movie takes 8 steps
After
-
Clear and concise navigation
-
Streamlined and effective information architecture
-
Favorites and rating buttons
-
Finding a movie in 4 steps