Gymshark- Reducing cart abandonment rate
Checkout Redesign: Reducing friction at address form, increasing confidence & cart icon mod
Gymshark- Reducing cart abandonment rate
Checkout Redesign: Reducing friction at address form, increasing confidence & cart icon mod
Gymshark- Reducing cart abandonment rate
Checkout Redesign: Reducing friction at address form, increasing confidence & cart icon mod
1.Context
2.UX Problems
3.Goals
4.Solutions & Design dcissions
5.Final UX Impact
1.Context
2.UX Problems
3.Goals
4.Solutions & Design dcissions
5.Final UX Impact
1.Context
2.UX Problems
3.Goals
4.Solutions & Design dcissions
5.Final UX Impact
1. Context
Checkout is the most critical part of the ecommerce funnel. Even small friction points — surprise costs, confusing forms, or lack of trust cues — can lead to high abandonment rates.
Gymshark’s checkout already addressed some issues (like free shipping thresholds), but friction remained: users were surprised by delivery fees if they returned to product pages, forms were cumbersome, and the flow lacked motivational cues.
Goal: Reduce friction, improve clarity, and guide users to complete checkout confidently.
1. Context
Checkout is the most critical part of the ecommerce funnel. Even small friction points — surprise costs, confusing forms, or lack of trust cues — can lead to high abandonment rates.
Gymshark’s checkout already addressed some issues (like free shipping thresholds), but friction remained: users were surprised by delivery fees if they returned to product pages, forms were cumbersome, and the flow lacked motivational cues.
Goal: Reduce friction, improve clarity, and guide users to complete checkout confidently.
1. Context
Checkout is the most critical part of the ecommerce funnel. Even small friction points — surprise costs, confusing forms, or lack of trust cues — can lead to high abandonment rates.
Gymshark’s checkout already addressed some issues (like free shipping thresholds), but friction remained: users were surprised by delivery fees if they returned to product pages, forms were cumbersome, and the flow lacked motivational cues.
Goal: Reduce friction, improve clarity, and guide users to complete checkout confidently.
2. UX Problem
Through analysis of checkout patterns and known pain points:
Unexpected delivery fees: Users saw free shipping thresholds initially, but the information disappeared after returning to the product page.
Cumbersome address entry: Multi-field forms overwhelm users, slowing checkout and increasing drop-off.
Lack of persuasive cues: Checkout lacked subtle nudges to reassure users and encourage completion.
Underlying UX issue:
Users face friction, uncertainty, and lack of motivation during checkout — directly contributing to cart abandonment.
2. UX Problem
Through analysis of checkout patterns and known pain points:
Unexpected delivery fees: Users saw free shipping thresholds initially, but the information disappeared after returning to the product page.
Cumbersome address entry: Multi-field forms overwhelm users, slowing checkout and increasing drop-off.
Lack of persuasive cues: Checkout lacked subtle nudges to reassure users and encourage completion.
Underlying UX issue:
Users face friction, uncertainty, and lack of motivation during checkout — directly contributing to cart abandonment.
2. UX Problem
Through analysis of checkout patterns and known pain points:
Unexpected delivery fees: Users saw free shipping thresholds initially, but the information disappeared after returning to the product page.
Cumbersome address entry: Multi-field forms overwhelm users, slowing checkout and increasing drop-off.
Lack of persuasive cues: Checkout lacked subtle nudges to reassure users and encourage completion.
Underlying UX issue:
Users face friction, uncertainty, and lack of motivation during checkout — directly contributing to cart abandonment.
3. Goals
Keep delivery cost info visible and actionable at all times.
Simplify form input to reduce cognitive load and speed up checkout.
Use behavioral nudges to increase confidence and drive action.
3. Goals
Keep delivery cost info visible and actionable at all times.
Simplify form input to reduce cognitive load and speed up checkout.
Use behavioral nudges to increase confidence and drive action.
3. Goals
Keep delivery cost info visible and actionable at all times.
Simplify form input to reduce cognitive load and speed up checkout.
Use behavioral nudges to increase confidence and drive action.
Before the revamp
Before the revamp
Before the revamp
After the revamp
After the revamp
After the revamp
DELIVERY
Start typing your address
First name
Phone
Last name
CONTACT
DELIVERY
Start typing your address
First name
Phone
Last name
CONTACT
DELIVERY
Start typing your address
First name
Phone
Last name
CONTACT
Hover over the cart Icon to see the modification
Women
Men
Accessories
What are you looking for tod...
2
4. Solutions & Design Decisions
A. Persistent Cart Info
Redesigned the cart icon with an animated hover tooltip showing how far the user is from free delivery.
Always visible → removes unpleasant surprises and builds trust.
B. Simplified Address Entry
Reduced initial address form to three fields with clear placeholders: “Start typing your address”.
Auto-expands for province, postal code, and city only after interaction.
Progressive disclosure reduces perceived complexity → faster completion and lower error rate.
C. Checkout Social Proof / Nudge
Added an announcement bar: “242 people successfully checked out in the past hour”.
Provides behavioral encouragement through social proof → lowers hesitation and abandonment.
D. Supporting UI Adjustments
Minor visual changes (animations, layout tweaks) serve UX goals, not aesthetic decoration:
Direct user attention to delivery info
Make form fields clear and approachable
Ensure eye flow from cart info → address → CTA
4. Solutions & Design Decisions
A. Persistent Cart Info
Redesigned the cart icon with an animated hover tooltip showing how far the user is from free delivery.
Always visible → removes unpleasant surprises and builds trust.
B. Simplified Address Entry
Reduced initial address form to three fields with clear placeholders: “Start typing your address”.
Auto-expands for province, postal code, and city only after interaction.
Progressive disclosure reduces perceived complexity → faster completion and lower error rate.
C. Checkout Social Proof / Nudge
Added an announcement bar: “242 people successfully checked out in the past hour”.
Provides behavioral encouragement through social proof → lowers hesitation and abandonment.
D. Supporting UI Adjustments
Minor visual changes (animations, layout tweaks) serve UX goals, not aesthetic decoration:
Direct user attention to delivery info
Make form fields clear and approachable
Ensure eye flow from cart info → address → CTA
4. Solutions & Design Decisions
A. Persistent Cart Info
Redesigned the cart icon with an animated hover tooltip showing how far the user is from free delivery.
Always visible → removes unpleasant surprises and builds trust.
B. Simplified Address Entry
Reduced initial address form to three fields with clear placeholders: “Start typing your address”.
Auto-expands for province, postal code, and city only after interaction.
Progressive disclosure reduces perceived complexity → faster completion and lower error rate.
C. Checkout Social Proof / Nudge
Added an announcement bar: “242 people successfully checked out in the past hour”.
Provides behavioral encouragement through social proof → lowers hesitation and abandonment.
D. Supporting UI Adjustments
Minor visual changes (animations, layout tweaks) serve UX goals, not aesthetic decoration:
Direct user attention to delivery info
Make form fields clear and approachable
Ensure eye flow from cart info → address → CTA
5. Final Outcome (UX Impact)
Delivery fee transparency: Users always know how close they are to free shipping → fewer surprises.
Faster, easier address entry: Reduced friction → quicker checkout.
Motivated users: Social proof nudges increase confidence → more conversions.
Overall experience: Checkout feels intuitive, informative, and persuasive.
Result: A friction-reduced, confidence-building checkout flow that is designed to increase conversions and reduce abandonment.
5. Final Outcome (UX Impact)
Delivery fee transparency: Users always know how close they are to free shipping → fewer surprises.
Faster, easier address entry: Reduced friction → quicker checkout.
Motivated users: Social proof nudges increase confidence → more conversions.
Overall experience: Checkout feels intuitive, informative, and persuasive.
Result: A friction-reduced, confidence-building checkout flow that is designed to increase conversions and reduce abandonment.
5. Final Outcome (UX Impact)
Delivery fee transparency: Users always know how close they are to free shipping → fewer surprises.
Faster, easier address entry: Reduced friction → quicker checkout.
Motivated users: Social proof nudges increase confidence → more conversions.
Overall experience: Checkout feels intuitive, informative, and persuasive.
Result: A friction-reduced, confidence-building checkout flow that is designed to increase conversions and reduce abandonment.
What are you looking for tod...
2
What are you looking for tod...
2
$7 more for free shipping
What are you looking for tod...
2
What are you looking for tod...
2
$7 more for free shipping
After the revamp
After the revamp
What are you looking for tod...
2
2
What are you looking for tod...
2
$7 more for free shipping
After the revamp
After the revamp