Suave

MEAN GIRLS

Watch Party

I worked on the UI/UX design for a promotional website featuring a collaboration between Suave, Fandango Rewards, and Mean Girls. The experience encouraged users to watch a branded video to unlock access to the site and receive a promotional code to stream Mean Girls. Once unlocked, users could explore Suave’s featured product lines through an interactive carousel designed to mimic an e-commerce shopping experience, with individual products linking directly to their respective product pages.

Interactive UI Design in Figma

Interactive UI Design in Figma

Using Figma, I developed high-fidelity UI designs that brought together Suave’s branding and the playful aesthetic of Mean Girls. I used Auto Layout, reusable components, component variants, and shared styles to build a flexible design system that streamlined updates across buttons, product cards, and carousel states. With Figma’s prototyping tools, including Smart Animate and interactive components, I demonstrated how users could unlock the experience by watching a branded video and navigate through the featured products. These prototypes helped communicate functionality, refine interactions, and bring the overall concept to life before development.

UI DESIGN

My approach focused on creating a visually engaging experience that balanced promotional content with intuitive product discovery. For desktop, I used bold imagery, spacious layouts, and clear calls to action to guide users from the branded video experience into the interactive product carousel. The e-commerce-inspired design featured organized product categories and intuitive navigation that encouraged users to explore Suave’s featured products.

For mobile, I adapted the experience with vertically stacked content, touch-friendly controls, and optimized imagery to accommodate smaller screens. I paid particular attention to the video player, carousel navigation, and product cards to ensure the experience remained easy to navigate and visually consistent across devices.

SITEMAP & WIREFRAMES

I collaborated with the team to develop the sitemap in Lucidchart, outlining the site's structure and mapping the user journey from the initial video experience through reward redemption and product exploration. Once the sitemap was reviewed and approved, I moved into Figma to create low-fidelity wireframes using Frames, layout grids, and reusable elements to establish page structure and content hierarchy. I explored different layouts and navigation patterns to determine how the video player, promotional messaging, and product carousel would work together. This early planning helped identify potential usability issues and provided a clear foundation for the high-fidelity designs.

HANDOFF & DEVELOPMENT

I used Figma’s Dev Mode to streamline the developer handoff, providing detailed design specifications, assets, spacing, and responsive layouts to ensure an accurate transition from design to development. I also contributed directly to the front-end development, helping build the interactive product carousel, implement responsive mobile layouts, and refine transitions and interactions. My background in both UI design and development allowed me to collaborate closely with the development team, troubleshoot issues, and ensure the final experience stayed true to the original designs while maintaining usability and performance across devices.