CLARITY
CLARITY
Enhancing the Sales Conversions from "Browsing to Checkout"
Enhancing the Sales Conversions from "Browsing to Checkout"
Context
Context
CLARITY is an e-commerce website for skin care, and it aims to enhance the conversion from browsing to checkout.
CLARITY is an e-commerce website for skin care, and it aims to enhance the conversion from browsing to checkout.
Problem
Problem
1- Product Selection Difficulty: 50% of users struggle to decide on skincare products due to the wide product variety.
2- Cart Abandonment: 70% of users leave their carts during checkout due to the mandatory account creation.
1- Product Selection Difficulty: 50% of users struggle to decide on skincare products due to the wide product variety.
2- Cart Abandonment: 70% of users leave their carts during checkout due to the mandatory account creation.
Project Overview
Project Overview
Timeline
Sep 2023 - Nov 2023
Timeline
Sep 2023 - Nov 2023
Timeline
Sep 2023 - Nov 2023
Team
Solo Project
Team
Solo Project
Team
Solo Project
Role
UX Designer/ UX Researcher
Role
UX Designer/ UX Researcher
Role
UX Designer/ UX Researcher
Tools
Figma
Tools
Figma
Tools
Figma
↓ Keep Scrolling to See the Design Process ↓
Keep scrolling to see the design process
Research | Why Do Users Abandon Their Cart?
Research | Why Do Users Abandon Their Cart?
To get started I did a desk research on cart abandonment reasons and interviewed 5 participants to understand their online shopping behaviors, where I learned these to be the main reasons for cart abandonments:
To get started I did a desk research on cart abandonment reasons and interviewed 5 participants to understand their online shopping behaviors, where I learned these to be the main reasons for cart abandonments:
How to Prevent Cart Abandonment?
How to Prevent Cart Abandonment?
I did a competitive analysis to see how top skincare brands like Clinique, Olay, and The Ordinary tackle cart abandonment and what strategies they're using to keep customers from dropping off. These are the main strategies I found:
I did a competitive analysis to see how top skincare brands like Clinique, Olay, and The Ordinary tackle cart abandonment and what strategies they're using to keep customers from dropping off. These are the main strategies I found:
Research Insights
Research Insights
Based on the data I gathered I found 3 main themes:
Based on the data I gathered I found 3 main themes:
Theme 1: Checkout and Cart Abandonment
Theme 2: Trusting a Website
Theme 3: Customer’s Decision Making Behavior
Ideation
Ideation
How Might we
How Might we
1- Streamline the checkout process for users to prevent cart abandonment?
2- Help users through product selection effectively, minimizing choice overload and decision fatigue?
1- Streamline the checkout process for users to prevent cart abandonment?
2- Help users through product selection effectively, minimizing choice overload and decision fatigue?
I created 2 main user flows:
I created 2 main user flows:
1- Finding the Right Product
Filtering products feature
Comparing products feature
Skin quiz
1- Finding the Right Product
Filtering products feature
Comparing products feature
Skin quiz
2- Checking Out the Product
Guest checkout/Create an account
Different payment methods
2- Checking Out the Product
Guest checkout/Create an account
Different payment methods
Finding the suitable product user flow
Finding the suitable product user flow
Low-Fidelity Exploration
Low-Fidelity Exploration
I created the skeletal structure of the interface based on my user flows.
The main challenge was translating a complex web of interactions and information into something that felt clear and intuitive. Finding the right balance between simplicity and essential detail was something I had to revisit throughout the process.
I created the skeletal structure of the interface based on my user flows.
The main challenge was translating a complex web of interactions and information into something that felt clear and intuitive. Finding the right balance between simplicity and essential detail was something I had to revisit throughout the process.
Testing in The Early Stages
Testing in The Early Stages
I decided to test my designs early on before going further into high fidelity designing. Once I had an interactive prototype of my wireframes, I conducted remote usability testing with 5 users over Zoom.
One of the primary sources of confusion for users was the presentation of regular checkout information with dropdown fields.
I decided to test my designs early on before going further into high fidelity designing. Once I had an interactive prototype of my wireframes, I conducted remote usability testing with 5 users over Zoom.
One of the primary sources of confusion for users was the presentation of regular checkout information with dropdown fields.
High-Fidelity Design
High-Fidelity Design
Another Round of Testing…
Another Round of Testing…
My main goal was to validate the design changes based on insights from the first usability test and check whether the initial pain points had been resolved. While improvements were made, this round also uncovered new issues that called for further design iteration.
My main goal was to validate the design changes based on insights from the first usability test and check whether the initial pain points had been resolved. While improvements were made, this round also uncovered new issues that called for further design iteration.
Issue | The Comparing Section Was Hard to Notice!
Issue | The Comparing Section Was Hard to Notice!
Inspired by Best Buy's Design, I iterated on the comparing section design to make it bigger and more noticeable.
Inspired by Best Buy's Design, I iterated on the comparing section design to make it bigger and more noticeable.
Issue | Is the Recommended Products Layout Scrollable?
Issue | Is the Recommended Products Layout Scrollable?
After finishing the Skin quiz users are directed to recommended products based on their skin type and skin needs. A few users were confused with how the recommended products were presented and did not understand they can scroll through the items.
After finishing the Skin quiz users are directed to recommended products based on their skin type and skin needs. A few users were confused with how the recommended products were presented and did not understand they can scroll through the items.
Final Solution
Final Solution
Addressed key issues like cart abandonment and analysis paralysis by introducing a personalized skin quiz, product comparison tool, guest checkout, and a fast, secure, transparent checkout process, resulting in a 20% success rate in usability tests.
Addressed key issues like cart abandonment and analysis paralysis by introducing a personalized skin quiz, product comparison tool, guest checkout, and a fast, secure, transparent checkout process, resulting in a 20% success rate in usability tests.
Reflection & Takeaways
Reflection & Takeaways
During the design process, I lost sight of the user and succumbed to personal preferences as a designer a few times which reminded me how important it is to continually remind myself that I am designing for the user.
A key takeaway from this project was the reminder not to reinvent the wheel. Instead of designing from scratch, I leaned on familiar design patterns that already existed and that users understood. This sped up the design process and let me focus on solving real user pain points.
During the design process, I lost sight of the user and succumbed to personal preferences as a designer a few times which reminded me how important it is to continually remind myself that I am designing for the user.
A key takeaway from this project was the reminder not to reinvent the wheel. Instead of designing from scratch, I leaned on familiar design patterns that already existed and that users understood. This sped up the design process and let me focus on solving real user pain points.
Thank You for Reading My Case Study!
Thank You for Reading My Case Study!
Want to work with me? Feel free to contact me!
Email: faranak.vn@gmail.com
LinkedIn: https://www.linkedin.com/in/faranak-vn/
* All illustrations were sourced from Storyset.com and were modified by me
Want to work with me? Feel free to contact me!
Email: faranak.vn@gmail.com
LinkedIn: https://www.linkedin.com/in/faranak-vn/
* All illustrations were sourced from Storyset.com and were modified by me
