Role
Lead UX Designer
Duration
12 Weeks
Tools
Figma
Team
Brand Voice
Creative
June 2024
$1B Homepage Redesign
Measured Results
37 Million
$90 Million
2 Million+
Currently enjoying helping users discover a new chapter in their hydration journey!
Cirkul is a customizable hydration company that offers a unique bottle and flavor cartridge system, allowing users to personalize their drinking experience with adjustable flavor intensity and a variety of flavors.
As a Lead UX Designer, I shape user experience strategy across multiple projects, ensuring designs are user-centered and aligned with business goals. I collaborate with cross-functional teams to define requirements, create prototypes, and refine designs through research, usability testing, and data-driven iterations.
*During my time at Cirkul, I worked on projects that I cannot disclose due to NDA restrictions. Please contact me for more information at UXbyAndrew@yahoo.com.
Context
Overview
Redesigning Cirkul's homepage has been an incredibly rewarding experience, as it directly impacts how users engage with our brand and discover our customizable hydration system. I worked closely with the team to define, develop, and deliver a visually compelling and user-friendly experience that enhances education, improves conversion, and aligns with our business goals. The challenge was to create a homepage that not only informs new users about Cirkul’s unique flavor cartridge system but also optimizes the shopping journey for returning customers.
My Role
As the lead designer for Cirkul's homepage redesign, I was responsible for the UI, UX, layout design, and visual storytelling. Collaborating closely with key stakeholders, I created frameworks and prototypes to align the vision, design principles, and content strategy, ensuring a seamless and engaging user experience that drives conversion.
Timeline
Over the three-month timeline, we conducted multiple creative reviews with the Creative & Brand Voice teams to refine the design and messaging, ensuring brand alignment. Additionally, we held several stakeholder reviews with company executives and the Data team to incorporate high-level business direction, allowing for strategic iterations that optimized the homepage experience.
Project Brief
Cirkul was founded in 2018 with a single developer leading the way, initially prioritizing functionality while usability and branding took a backseat.
We needed to present key information in a way that effectively educates users while driving sales, ensuring the new content is easy to find and understand without overwhelming the user.
️ The Challenge: Balancing style with an efficient user experience
We focused on presenting key information in a way that drives sales while maintaining a seamless shopping experience, ensuring that conversion rates and AOV remain strong.
Design
Overview
The Chief Brand Officer's top priority was educating users on the unique flavor Sip technology that sets Cirkul apart. So we decided to leverage interactivity to demonstrate:
Sip Technology - Create a narrative that shows the Sip and calls out the company’s myriad of flavor options.
How it Works - Visually demonstrate how the Cirkul Sip & Bottle work together while allowing the user to control the action.
Keep it Convenient - Provide a scroll indicator & skip button so the user doesn’t feel “stuck” especially if they’ve seen it more than once.
By combining storytelling with interactive elements, we ensured that users could engage with Cirkul’s unique technology in a way that felt intuitive, informative, and seamless—enhancing both education and the overall shopping experience.
Original, wire/story, and final render
Boosting product visibility
Data shows that our core lines—LifeSip, FitSip, and GoSip—not only attract the most page views but also lead in add-to-cart and purchase rates. While these lines receive the most traffic, the Chief Financial Officer (CFO) challenged us to enhance visibility for the other 11 sub-brands.
To address this, we developed an interactive tool that allows users to seamlessly toggle between sub-brands, providing a brief overview of each brand’s unique selling proposition alongside a visual representation of its personality.
Early stage proofs to demonstrate functionality (Not Final)
Working within a design system
Using Cirkul’s design system, I created multiple layout iterations to identify the most effective components and assets, ensuring an optimal page length, seamless user experience, and fully responsive design.
Result
By the metrics
37 Million
Sessions
$90 Million
Revenue
2 Million+
Product Sold
After multiple rounds of reviews and iterations, we crafted a homepage that balances education and sales while ensuring a seamless, responsive experience across desktop, tablet, and mobile. Clear navigation allows users to easily explore key sections, interactive elements make information engaging, and strategic CTAs guide them toward discovering the right products. Seeing this design come to life has been incredibly rewarding, knowing it will enhance the experience for both new and returning Cirkul customers.
Takeaways
🤝 Bridging Vision, Design, and Performance
This project required seamless collaboration across teams—working closely with developers to ensure interactivity felt engaging yet unobtrusive, aligning with Creative to strike a balance between visual impact and page performance, and partnering with the C-Suite to bring their vision to life while grounding decisions in data. It was a dynamic exercise in communication, ensuring that excitement for new features translated into strategic, KPI-driven outcomes for Cirkul’s homepage.
🌟 Designing for Ease and Engagement
This project reinforced the importance of creating an experience that not only helps users accomplish their goals effortlessly but also meets both new and returning customers where they are. By focusing on intuitive navigation, clear messaging, and interactive elements, I gained valuable insights into balancing education and conversion—ensuring a frictionless journey that drives engagement and sales.
