My Role
UXUI Design Lead
Time Frame
3/2024 - 6/2024
Category
E-commerce
Platform
Desktop & Mobile
Made it real: Successfully delivered the design, which was released in 2024.
Boosted conversion: Improved checkout conversion rate by approximately 20%.
Faster checkout: Reduced checkout time by ~25%,bringing it down to ~3 minutes.
User-centered improvements: Conducted UX research in collaboration with researchers, leveraging insights to drive 3+ rounds of iterations in sprints.
Clearer requirements: Defined requirements with PMs, clarifying use cases and eliminating redundant user stories.
Efficient design: Created new reusable components, reducing manual data entry in checkout and other workflows.
Spec leadership: As a spec lead, established structured workflows during the detailed design phase to ensure high-quality, pixel-perfect deliverables.
Customers must first connect with a distributor to buy Herbalife products. The checkout process takes place on an online storefront powered by Herbalife, yet managed individually by each distributor. This platform, known as GoHerbalife, differs from the main brand site, Herbalife.com. Each distributor operates their own GoHerbalife site.
I collaborated with PMs and subject matter experts to uncover potential pain points through journey mapping, UX audits, and competitor analysis.
To validate these findings, I worked with researchers to conduct surveys and user interviews. Additionally, I facilitated stakeholder workshops to better understand business needs and technical constraints, ensuring alignment between user experience and feasibility.
Current checkout experience
Login/Registration not only adds more steps to the process but also creates an additional mental barrier for users to complete checkout.
Users spend lots of time to navigate the checkout independently due to unclear navigation cues and the need for excessive back and forth action to stay on top of key information and possible changes.
Users have to manually input address and payment info Every Time, which is one the critical reason leads to low conversion rate.
• Users only need to focus on one step per time. And when user is ready, the next section will show up on the same page. User can have a quick expectation of the checkout steps, while not being overwhelmed/confused by information.
• It also increased click times for user to increase efficiency.
Prioritizing the distributor and making the summary total sticky saves users time and reduces unnecessary clicks.
• Customers don't have to create an account for checkout so they can save time, and we will explain benefits of having an account at the beginning/end of the flow.
• When the system detected user has an existing account by email, user's saved information would be auto-populated into the checkout form to make the process shorter.
• Registered users can save multiple addresses and payment methods, streamlining their checkout experience across all Herbalife platforms. They can effortlessly select from their saved details, eliminating the need for manual entry and reducing time and effort during checkout.
• This feature not only benefit checkout experience, but also the account management experience.
The case study focuses on mobile, as it accounts for over 65% of traffic. However, we designed for both mobile and desktop to ensure a consistent experience across devices.4o
The goal is to streamline the process to enable users to navigate the checkout flow independently.
Goal Breakdown:
1)Improve navigation so users can easily orient themselves and see next steps
2)Enable users to keep track of key information (Total price / Summary, Bag content, and Distributor.) without excessive back and forth interactions.
To streamline the checkout process, I began by collaborating with product managers to refine its information structure from business perspective and usability perspective.
To enhance navigation, I implemented progressive disclosure, allowing users to focus on one step at a time while maintaining a clear overview of the entire flow.Additionally, I used a single-page layout that consolidates all necessary checkout information and steps in one place:
With help from researchers, I conducted unmoderated testing to quickly validate the design's usability
However, based on our the usability test during the sprint, the design still needs improvement—especially for mobile.
1) The key information is overwhelming which slow users down - "Lots of things happen at the beginning of the page"
2) Distributor=Summary Total>Bag (Users prioritize the key info differently).
To address this, I explored two versions to determine the best way to display these key details on mobile.
In the final layout and navigation design, distributor information is now a dedicated step in the checkout flow. The order total summary is attached to the place order button, which remains fixed at the bottom of the screen.This allows users to easily track changes to the order total while reducing navigation time, especially for returning users.
1) Prioritize the distributor information, which is now a dedicated step in the checkout flow
2) The order total summary is attached to the place order button, which remains fixed at the bottom of the screen.
Find a way to let users save and reuse address and card info instead of entering it manually each time.
To I ensure the solution cover all potential scenarios, I collaborated with the PM and developers to outline and define key JTBD/User stories for all user types.
I started with existing components—dropdown and flyout—exploring both to determine which best meets the diverse user needs we outlined, especially the error state mentioned by developers.
When PMs and developers asked why we used a flyout with new components instead of the existing dropdown, I used prototypes to illustrate the pros and cons.
The flyout with the new component not only improves usability in checkout but is also reusable across features like My Account and Card Management. This reduces implementation effort, ensures design consistency, and streamlines future iterations by minimizing redundant design work.
The checkout now includes an address and card management feature that slides out as a flyout when needed.
The address/card flyout streamlines data entry with a simplified layout and ample space for easy interaction, reduces distractions by enhancing focus and clarity, and minimizes errors through clear error management.
Feel free to take a closer view of the final design here.
