My Role
Sr UX/UI (Product) Designer
Time Frame
Blue sky 10/2022 - 11/2022
MVP design 4/2023 - 5/2023
Target User
Herbalife Customers
Category
E-commerce (Desktop & Mobile)
This checkout experience design is a part of the E-commerce site - GoHerbalife.com redesign, which includes two phases: bluesky concept design and MVP detail design. The goal the checkout design is to deliver a ready-to-develop checkout experience that reach the goal:
"Improve the checkout efficiency for customers to secure the conversion rate"
1
"Work to Learn"
I adopted “Work to learn” method to help us navigate the uncertainty, since we are short of time for detailed research with a pressing launch deadline set by clients.
Therefore, even though we started drafting user goals via a quick UX audit against Baymard Guidelines, with following 3 rounds of concept iterations and 2 validation workshops with clients and customer representatives, I gradually refined the problems and landed on a well-received bluesky checkout design to move to detail design.
1
As a spec lead - I established the ways-of-working to secure the design system consistency and ensure the teams’ delivery of pixel-perfect, componentized, and comprehensively annotated design
2
Meanwhile, I actively collaborated with developers and product managers to help our team to explore the edge cases to deliver a well-thought, feasible, and high-quality design that meets every stakeholders’ expectation.
• The bluesky concept got approved to move into MVP detail design in Mar 2023.
• Make it real. The MVP design is under development now and expected to be released in early 2024.
• Everyone is happy - including developers, product managers from three key stakeholder companies, clients, and Dentsu leadership.
• Constantly helped team clarify the user goals to stay on the right track
• As a spec lead, established ways of working in detailed design phase to secure high-quality pixel-perfect deliverables.
• Provided solutions accounting for the edge cases caused by data transformation from old site to new site
• Ensured the interconnection of different features to form a user-centered experience
Checkout is a must have experience for Herbalife e-commerce redesign. This project kicked off when the redesign was initiated.
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.
Collaborating with other designers, I mapped out the current customer e-commerce journey and conducted current checkout experience audit to identify the initial user problem and design goals.
Current screens
There are 3 distinct customer personas. All of them mentioned their painpoints around the lengthy and complicated checkout process.
Key problem
"How to improve the checkout efficiency for customers to secure the conversion rate?"
• Customers struggle to navigate the flow independently due to the redundant checkout steps and its inconsistent design.
• No guest checkout. So customers easily abandon the checkout process.
• Current customer information will be migrated to the new platform. In the case, discrepancies in personal data such as addresses and payment details could result in errors related to delivery and payment transactions.
• Manual address and payment input methods are inefficient decrease the conversion rate.
My Highlights
"Work to learn" & "Pivot swiftly"
I always advocate for User-centered Design. In this project, despite the pressing deadline, I maintained a balance between user needs and rapid conceptualization by adopting "work to learn" working methods.
Even though we started drafting user goals via a quick UX audit against Baymard Guidelines, with following 3 rounds of concept iterations and 2 validation workshops with clients and customer representatives, I gradually refined the problems and landed on a well-received bluesky checkout design to move to detail design.
My Highlights
"Solve edge cases - collaborating with Dev & PM"
In the Detail Design phase, I worked closely with developers and product managers to address edge cases, such as personal data discrepancies during data migration from the old to the new platform.
"Lead the team to deliver pixel-perfect deliverables"
As the spec lead, I developed a workflow that improved efficiency for myself and other designers working on different features, ensuring delivery of componentized, pixel-perfect designs.
"Secure design system consistency"
I also collaborated with the master design system team and designers on other features to eliminate inconsistent or redundant components across multiple features.
• 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.
• 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.
• To avoid the possible post-checkout delivery issues caused by loss of detail in registered users' address info during data migration, user will be prompted to update their information by simply selecting an Experian-verified address provided by the system.
• User can select the correct address in the provided options to avoid manually entering the full address.
Feel free to take a closer view of the final design here.
