Problem
An eCommerce site without data-backed components or designs often faces a disjointed and frustrating customer journey. Without leveraging user behavior data, the site fails to streamline navigation, resulting in potential buyers abandoning the site or their carts due to unclear pathways and excessive steps.
Consequently, the site experiences lower conversion rates and diminished customer satisfaction, as it cannot adapt to the preferences and needs of its users effectively.
My Role
Lead UI Designer
UX Researcher
Project Manager
Solution
I would address this problem by implementing data-backed design strategies. Starting with conducting thorough user research and analyzing site analytics to identify pain points in the customer journey. Leveraging this data, I would create streamlined, user-friendly pathways with intuitive navigation and clearer information.
I would build a robust UI kit and component library to ensure consistency and efficiency in design updates during this evaluation and for use in future evaluations.
Through iterative A/B testing, I can help the business can continually refine elements to optimize conversion rates, enhancing the overall user experience and driving higher sales for the e-commerce site.
Identifying Areas For Improvement
The first step in solving this problem is identifying the site's issues. I identified many areas of improvement but for the purposed of this case study I will focus on three main KPIs: user flow and funneling, confusing navigation, and lack of visual hierarchy effecting product discovery.
By improving the identified areas items, I can enhance product discovery and make the purchase funnel easier to navigate for the customer.
Confusing Product Information
Lack of Visual Hierarchy
Confusing Site Navigation
Three Solutions
In this case study, I will highlight three successful solutions derived from iterative testing on a comparable eCommerce platform. These tests were instrumental in achieving an optimal user experience. I recommend implementing similar strategies on this site to enhance user satisfaction and performance.
Confusing Product Information
Lack of Visual Hierarchy
Confusing Site Navigation
Improve Regimen Builder
PLP Restructuring
Top Nav Restructuring
Improve Regimen Builder
Customers on this site can use a quiz to create a personalized skincare regimen tailored to their skin type. While testing has demonstrated its effectiveness in improving conversion rates, the site has yet to capitalize fully on this opportunity.
Enhancing the user experience by simplifying the maintenance and ordering process of this custom regimen could further boost engagement and sales.
PLP Restructuring
The current product landing pages lack visual hierarchy and information about the collection being viewed, making it easy for users to become disoriented and confused. In this test, I designed a more informative page with improved visual hierarchy to guide customers more effectively through product discovery.
Top Nav Restructuring
Site navigation is currently lackluster and confusing, with overly complex drop-down menus that offer minimal explanation for the customer.
The top navigation bar, as the central hub of an eCommerce site, is vital. Therefore, investing in a more intuitive and dynamic solution is crucial. Simplifying product discoverability is a key metric in the purchase funnel and essential for enhancing conversions.
Improve Existing Regimen Builder
This tool plays a crucial role in product discovery by guiding users to personalized recommendations.
By expanding and improving the regimen-building experience, the site can further engage customers, increase their confidence in their choices, and ultimately boost retention rates and conversions. Enhancing this tool not only helps users find products more suited to their needs but also fosters a more satisfying and seamless shopping experience, driving greater overall success for the business and the customer.
Suggested Improvement
A dedicated space within the users account where the user can save, edit and reorder their regimen
In the "Build Your Regimen" results page I've added an option to SAVE the regimen. Electing this option will prompt the user to sign in or sign up if they are not already. It will then save the quiz results as this users regimen.
Option to Save
User Account Updates
The user account is updated to include a Regimen section wherein the user can edit and reorder individual items or their whole this regimen.
This eliminates the need to reference back to old orders or emails to find previously used products from the regimen.
This option adds the clarity for the user in regards to how a regimen is built and what products fit into which step.
​
This helps the user easily bundle products they like for easier reordering in the future.
Expected Outcomes
The following results are derived from completed testing on a comparable eCommerce platform. I would expect a similar lift in conversion if implemented here as well. To measure incremental changes, a 5% control group was established at launch to continuously track differences in conversion metrics.
Increase in AOV
108%
Conversion Rate Change
+12.40%
Revenue Per Visitor Change
+9.36%
PLP Restructuring
The product landing page is a critical focal point of the e-commerce site, where customers typically spend the majority of their time.
These pages serve as a key space for customers to quickly gather information about products, compare options, and make informed decisions on which items to explore further. Therefore, having a well-designed and educational product landing page is essential for ensuring a seamless user journey. A well-structured page not only facilitates easier navigation and decision-making but also enhances user engagement and satisfaction, ultimately contributing to higher conversion rates and a more effective shopping experience.
Suggested Improvement
Restructure the layout of the product cards, quick view and overall PLP to create better visual hierarchy and to inform the customer about the products.
Product Card Clean Up
The first step in the process of restructuring a PLP is updating and correct the product cards.
​
I created a better visual hierarchy and added components to quickly inform the user about the products.
Adding colored step indicators will help the user identify what the use of the product is helping them to make a more informed decision about which products to investigate further.
Consolidated & Cleaned Up the Quick View
A well-designed quick view can boost conversion rates by simplifying the purchase process and minimizing drop-off points, ultimately driving more sales and fostering customer loyalty.
Creating Better Visual Hierarchy
I identified and removed unnecessary gaps, and designed components that more quickly communicate the product information, creating a cleaner and more efficient design.
These decisions help maintain a more visually appealing and user-friendly component.
Expected Outcomes
The following results are derived from completed testing on a comparable eCommerce platform. I would expect a similar lift in conversion if implemented here as well. To measure incremental changes, a 5% control group was established at launch to continuously track differences in conversion metrics.
Qualifying Sessions
40,289
Conversion Rate Change
+10.33%
Revenue Per Visitor Change
+10.91%
Top Navigation Restructuring
The top navigation bar acts as the roadmap for the entire site, guiding users through their shopping journey from any entry point.
By streamlining the number of options in the top navigation and leveraging the Product Landing Page (PLP) to provide more detailed product information, we can significantly enhance the user experience. This approach not only simplifies navigation but also ensures that users receive insights about products at key moments in their journey.
As a result, we can expect a more efficient funnel experience, leading to improved customer satisfaction and higher conversion rates.
Suggested Improvement
Restructure the layout of the top navigation, reducing the amount of confusing links the user has to choose from and creating broader options that inform better. Utilize existing white space to upsell and inform.
Current Navigation
Optimized Navigation
1.
2.
3.
Added a more accessible search bar option.
Updated the offerings menu to be more visible and clear.
Consolidated menu options into broader collection categories. The refined filtering by type, ingredient etc... can be held within the collection filters on the PLP.
4.
5.
Utilized the white space to create more informative and engaging nav tiles.
Added product cards to feature key or trending products within the nav menu.
Expected Outcomes
The following results are derived from completed testing on a comparable eCommerce platform. I would expect a similar lift in conversion if implemented here as well. To measure incremental changes, a 5% control group was established at launch to continuously track differences in conversion metrics.