Hero Carousel Redesign
Rebuilding the main hero experience for scalability, usability, and impact
My contributions: Design system unification and contribution, workshop facilitation, user testing, product strategy, UX/UI design, accessibility
Context
The web platform underwent a complete site redesign and needed a new hero carousel component that is responsive.
Problem
The inconsistent hero carousel designs on Pluto created implementation hurdles for engineering. The current design is also unable to handle various content metadata and as the result, negatively impacts the overall user engagement, making it feels less premium and out of sync with the new redesign.
Solution
A unified hero carousel design capable of handling various metadata permutations while maintaining a consistent and premium look across all breakpoints. This solution streamlined engineering efforts, allowing for easier implementation and scalability for future updates.
Impact
From testing, we saw a 20% increase in engagement in the treatment group (new hero carousel group) in comparison to the controlled group.
The following data tracks the performance of the two hero carousel designs:
Control: Older hero carousel design
Treatment: New hero carousel design that was previously delivered
Results: Users are not engaging with the new hero carousel and out of those that do engaged, about half of those users are engaging further with its content
Before figuring out the exact dimensions for the hero carousel, a thorough understanding of how the metadata can change is critical. Outlined in red below, are ways that the metadata block can mutate across a variety of content types.
Mobile Considerations
After understanding how much space this component might require to handle various metadata permutations, I needed to consider how it'll work on mobile devices since smaller screens have limited real estate.
