E-commerce
E-commerce
Client Project
Client Project
desktop & mobile
Optimizing E-commerce UX to Enhance Conversion and User Retention
Optimizing E-commerce UX to Enhance Conversion and User Retention
Role
Role
DesignUser Research
Web Design
User Experience Design
User Research
Web Design
User Experience Design
Team
Team
1 Project Manager
1 Marketing Manager
1 UX/UI Designer
1 Developer
1 Project Manager
1 Marketing Manager
1 UX/UI Designer
1 Developer
Tools
Tools
Figma
Figma
Timeline
Timeline
Feb - Mar 2024
(3 weeks)
Feb - Mar 2024
(3 weeks)
Summary
Summary
I redesigned the eCommerce experience for a premium footwear brand to improve conversion and user retention by optimizing CTAs, simplifying user flows.
I redesigned the eCommerce experience for a premium footwear brand to improve conversion and user retention by optimizing CTAs, simplifying user flows.
Key Outcome
Key Outcome
• Projected to increase CTA click-through rate by 30%
• Expected to reduce bounce rate by 25%
• Anticipated to reduce scroll depth before CTA by 20%
• Projected to increase CTA click-through rate by 30%
• Expected to reduce bounce rate by 25%
• Anticipated to reduce scroll depth before CTA by 20%
Let’s take a quick look of the project first.
Let’s take a quick look of the project first.
Background
Background
Our client, Base London,
a premium men’s footwear brand
Our client, Base London,
a premium men’s footwear brand
Base London was one of the main clients of the marketing agency where I worked as a designer.
Base London was one of the main clients of the marketing agency where I worked as a designer.
The client aimed to boost conversion rates and retain more users through a refreshed digital experience.
The client aimed to boost conversion rates and retain more users through a refreshed digital experience.
problem
problem
High bounce rates indicated a disconnect between brand & customers
High bounce rates indicated a disconnect between brand & customers
The website struggled to engage visitors, with most leaving without interaction. This led our client to initiate their website revamping project.
The website struggled to engage visitors, with most leaving without interaction. This led our client to initiate their website revamping project.
📈 High bounce rates
📈 High bounce rates
68% > 40-55%
68% > 40-55%
Visitors leave quickly, indicating a lack of engagement.
Visitors leave quickly, indicating a lack of engagement.
Base London
The e-commerce average
📉 Low CTA click rates
📉 Low CTA click rates
1.2% < 2.5-3%
1.2% < 2.5-3%
Less than half the industry average, showing weak user interest.
Less than half the industry average, showing weak user interest.
Base London
The e-commerce average
Base London
The e-commerce average
💸
That means our client was losing their potential customers
That means our client was losing their potential customers
Problem Definition
Problem Definition
How might we enhance the user journey on the Base London website to create an engaging shopping experience that embodies the brand’s values?
How might we enhance the user journey on the Base London website to create an engaging shopping experience that embodies the brand’s values?
Solution
Solution
An unoptimized user journey with high early drop-off rates
→ Refined the user journey by enhancing engagement touch points to improve retention and conversion
An unoptimized user journey with high early drop-off rates
→ Refined the user journey by enhancing engagement touch points to improve retention and conversion
How to kick off the project?
How to kick off the project?
Stakeholder Interviews
Stakeholder Interviews
Stakeholders wanted more than just a website refresh
Stakeholders wanted more than just a website refresh
We begun the project having a interview with our clients.
Through stakeholder interviews, we uncovered three main objectives:
We begun the project having a interview with our clients.
Through stakeholder interviews, we uncovered three main objectives:
👀 Strengthen brand identity and create a premium feel
👀 Strengthen brand identity and create a premium feel
“We want our brand to feel premium and distinctive.”
“We want our brand to feel premium and distinctive.”
👞 Increase engagement by featuring best-selling products
👞 Increase engagement by featuring best-selling products
“We need to showcase what customers love.”
“We need to showcase what customers love.”
💸 Optimizing the user journey to drive conversions
💸 Optimizing the user journey to drive conversions
"Above all, we need to improve our conversion rates."
"Above all, we need to improve our conversion rates."
current websites audit & Competitive analysis
current websites audit & Competitive analysis
Us vs. Them: Missed engagement opportunities
Us vs. Them: Missed engagement opportunities
To uncover where engagement was falling short, we conducted a heuristic audit of Base London’s website and benchmarked it against leading competitors.
To uncover where engagement was falling short, we conducted a heuristic audit of Base London’s website and benchmarked it against leading competitors.
solutions
solutions
Translating audit insights into design strategy
Translating audit insights into design strategy
Based on our audit and stakeholder discussions, we identified core areas impacting engagement and conversion. These were translated into three strategic focus areas that guided our design decisions.
Based on our audit and stakeholder discussions, we identified core areas impacting engagement and conversion. These were translated into three strategic focus areas that guided our design decisions.
Unclear user actions & low CTA engagement
Unclear user actions & low CTA engagement
--> Optimized navigation & CTA to surface best-sellers and promotional items
--> Optimized navigation & CTA to surface best-sellers and promotional items
Lack of product clarity & weak differentiation
Lack of product clarity & weak differentiation
--> Enhanced brand storytelling to communicate craftsmanship and uniqueness
--> Enhanced brand storytelling to communicate craftsmanship and uniqueness
Inconsistent product display across pages
Inconsistent product display across pages
--> Standardized product cards for easier comparison and quicker decision-making
--> Standardized product cards for easier comparison and quicker decision-making
verations
verations
Finding the right balance between brand storytelling & efficiency
Finding the right balance between brand storytelling & efficiency
During the design process, I explored two variations—Option A and Option B—to address user concerns about value perception and product presentation. While both were strong contenders, I proposed an A/B test to determine which version best improves user confidence and engagement.
During the design process, I explored two variations—Option A and Option B—to address user concerns about value perception and product presentation. While both were strong contenders, I proposed an A/B test to determine which version best improves user confidence and engagement.
iteration
iteration
Refining the experience based on team and stakeholder insights
Refining the experience based on team and stakeholder insights
After reviewing both variations with the internal team, we gathered feedback from stakeholders across marketing and design. The feedback focused on improving clarity, reducing user friction, and making the product CTA more prominent. Based on these insights, we made targeted iterations on key sections of the site.
After reviewing both variations with the internal team, we gathered feedback from stakeholders across marketing and design. The feedback focused on improving clarity, reducing user friction, and making the product CTA more prominent. Based on these insights, we made targeted iterations on key sections of the site.
How can we solve this problem?
How can we solve this problem?
success metrics
success metrics
How to measure more engagement of our potential customers
How to measure more engagement of our potential customers
Based on the results of usability testing, we estimated the potential impact if the redesigned workflow were to be implemented in real store operations.
Based on the results of usability testing, we estimated the potential impact if the redesigned workflow were to be implemented in real store operations.
Reduce bounce rate
Reduce bounce rate
⬇️ 20–25%
(from ~45% → 33–36%)
⬇️ 20–25%
(from ~45% → 33–36%)
Benchmark: 26–40%
(avg. retail e-comm, Contentsquare 2024 / Shopify Plus 2023)
Increase CTA click rate
Increase CTA click rate
⬆️ 30–40%
(from ~45% → 33–36%)
⬆️ ~40% goal-check frequency
(3x → 5x per day avg.)
Benchmark: 50–60% (average CTA CTR: Nielsen Norman / Omniconvert 2023)
Reduce scroll depth
Reduce scroll depth
⬇️️ ~30%
⬇️️ ~67% tool usage
(6 tools → 2 tools)
⬇️️ ~67% tool usage
(6 tools → 2 tools)
Benchmark: Optimal PDP scroll depth: ~5000px (Baymard Institute 2023)
Design Solution
Design Solution
[Store manager] New tracking workflow
[Store manager] New tracking workflow
Key Takeaways
Key Takeaways
Data reveals what users won’t say.
Data reveals what users won’t say.
Usability data helped uncover pain points and refine assumptions around product discovery and bounce behavior, especially for mobile-first flows.
Usability data helped uncover pain points and refine assumptions around product discovery and bounce behavior, especially for mobile-first flows.
Designing with intent leads to results.
Designing with intent leads to results.
Applying UX heuristics and prioritizing content hierarchy boosted clarity and minimized user friction, aligning with both user expectations and business goals.
Applying UX heuristics and prioritizing content hierarchy boosted clarity and minimized user friction, aligning with both user expectations and business goals.
Business goals ≠ user needs, but they can align.
Business goals ≠ user needs, but they can align.
Design solutions that addressed usability also supported revenue drivers like promo visibility, category exploration, and conversion actions.
Design solutions that addressed usability also supported revenue drivers like promo visibility, category exploration, and conversion actions.
area for improvements
area for improvements
Prioritize early-stage validation through testing
Prioritize early-stage validation through testing
Integrating usability testing or A/B testing earlier in the design process could have uncovered conversion barriers sooner, allowing for faster iteration and reducing reliance on post-launch fixes.
Integrating usability testing or A/B testing earlier in the design process could have uncovered conversion barriers sooner, allowing for faster iteration and reducing reliance on post-launch fixes.
Strengthen data-informed iteration after launch
Strengthen data-informed iteration after launch
Setting up key post-launch metrics and dashboards ensures that design decisions remain accountable and continuously optimized based on real user behavior over time.
Setting up key post-launch metrics and dashboards ensures that design decisions remain accountable and continuously optimized based on real user behavior over time.