Leilo
Case Study Context
Role: UX Designer & Project Manager
Industry: B2C
Timeline: 10 weeks (Mar. 2024 - Jun. 2024)
Tools: Figma, Miro, Google Suite
Project Focus
"Redesigning Leilo’s website to better communicate its value to a diverse customer base"
Communicating Value Amid Content Overload
After observing Leilo's current Web Analytics:
Leilo’s original website was filled with overwhelming amounts of information that left users confused about product benefits. Inconsistent design and unclear messaging further diluted the brand’s value proposition.
Speaking with Leilo Stakeholders & Customers:
We also had a conversation with Leilo's stakeholders and customers to gain a deeper understanding of customer needs, innovate around real customer problems, prioritize website architecture, and target marketing and messaging effectively. Using these conversations and interviews, we were able to complete a Jobs To Be Done diagram to help us brainstorm how to redesign the Leilo website to cater to a typical Leilo Customer.
Taking the Web Analytics and JTBD diagram into account, we were able to more clearly define a problem statement to guide our redesign efforts and focus.
Problem Statement:
“How might we redesign Leilo’s website to clearly communicate product benefits, improve user engagement, and enhance brand consistency?”
Insights that Shaped the Redesign
Our team conducted user research through interviews, surveys, and a card-sorting activity to identify how to organize the website’s pages in a way that made sense to Leilo’s customers. We also performed heuristic evaluations and usability tests to refine the navigation and product pages.
Links to Research Documentation & Materials:
Research Findings:
1) User Needs: Through user interviews, we learned that Leilo’s customers highly valued clear, accessible product information. Many users were unfamiliar with kava, one of Leilo’s main ingredients, and sought educational content that was simple and easy to understand. This insight prompted us to prioritize ingredient transparency and clear product descriptions in the redesign.
2) Content Organization: The results of the card-sorting activity revealed how customers naturally grouped different types of information. This guided us in reorganizing the product pages, ensuring that users could easily navigate the site and find the details they were looking for. We developed a more intuitive page structure that highlighted product benefits, safety information, and educational content.
3) Usability Testing: Our usability tests revealed several friction points on the original website, particularly around product descriptions and the checkout flow. Users often felt overwhelmed by lengthy product information and had difficulty navigating between pages. These findings were instrumental in simplifying the design and reducing cognitive load, helping users focus on what mattered most
Journey from Insights to Redesign
With these insights, we shifted into the design phase. Our first priority was to simplify the product pages, turning long text blocks into digestible, engaging content. The card-sorting results inspired a revamped navigation system that made key pages like "Shop" and "Ingredients" easy to find. The checkout flow was streamlined to reduce steps and improve clarity, addressing the usability issues we had identified.
From here, we translated these ideas into mid-fidelity wireframes. Product pages became more visual, using icons to highlight key details, while navigation was reorganized to match user expectations
Mid-Fidelity Prototype:
Usability Testing:
After finalizing the mid-fidelity wireframes, we conducted a new round of usability tests to ensure our design changes effectively addressed the user frustrations we uncovered earlier. This round of testing focused on whether the simplified product pages, improved navigation, and streamlined checkout flow made it easier for users to understand product benefits and complete their purchases.
The results confirmed that the new design reduced confusion and improved overall user satisfaction, validating the direction of our redesign.
The Final Solution
The redesigned Leilo website addressed these challenges head-on:
Additional Deliverables:
A/B Test Validation
To validate our final design, we conducted an A/B test comparing the redesigned website with the original. The results showed a significant improvement in user satisfaction. This confirmed that the streamlined navigation, simplified content, and optimized checkout process addressed the pain points identified during user research.
Next Steps & Considerations
Although the redesign significantly enhanced the user experience, there are several opportunities for future growth:
Future Improvements:
What I Learned from Leilo
In summary, the lessons learned from this project will continue to inform how we approach future design challenges, particularly in prioritizing user needs, leveraging research, and validating decisions through testing.