JG
Work
About
Contact
Checkout Redesign for a
Pre-order E-commerce Platform
A mobile-first redesign of DashBook’s checkout focused on reducing failed purchases and improving conversion during high-intent
pre-order campaigns.
↓ 89 % failed purchase attempts(520 → ~60 per month)
E-commerce
User Research
Mobile first
Project overview
Product: Content Creator Publishing Platform · Pre-order E-commerceCompany stage: Scale-upRole: UX/UI Designer — Lead DesignerPlatform: Mobile-first (Desktop supported)Status: Launched
Problem : A significant gap between purchase intent and completed purchases
Despite strong purchase intent and time-sensitive campaigns, the checkout had evolved without a clear mobile-first structure. The flow was desktop-oriented, required mandatory registration, and included inconsistent hierarchy, unclear payment states, and fragile error handling.
This resulted in:
- High rates of failed purchase attempts.
- Repeated retries from the same users.
- Increased support tickets related to payment issues.
- Revenue leakage during peak campaign moments.
These issues not only hurt conversion, but also prevented scalability, directly impacting presale goals, author success, and overall revenue growth. The issue wasn’t lack of demand it was friction at the most critical stage of the purchase journey.
Context
DashBook had transitioned from a startup to a scale-up, running dozens of simultaneous pre-order campaigns each month. The checkout represented the final and most critical step in this time-bound sales journey, where campaign success depended on reaching a minimum threshold within 44 days. Buyers were primarily followers of the creator—high-intent but low-frequency customers often making a one-time purchase during a limited window. With most traffic coming from mobile devices, clarity, speed, and predictability were essential at the moment of payment.
In this context, even small points of friction had an outsized impact on campaign performance and overall revenue.
My Role
I led the checkout redesign from problem definition to delivery, working closely with Product and Engineering.
The initial request focused on visual improvements, but analysis of the existing experience revealed deeper structural and conversion issues. I took ownership of redefining the checkout flow, establishing a mobile-first structure, and prioritizing the highest-impact friction points, balancing user needs with technical constraints.
User Behavior Snapshot
(May–July)
From May to July, analysis of user behavior revealed a critical breakdown in the checkout funnel:
- 520 failed purchase attempts per month
- 80,780 users added a product to cart
- 56,000 completed their purchase (69% checkout completion rate)
- +85% of traffic came from mobile devices
€495.6K Potential Unrealized Revenue
Based on 24,780 non-completing users × €20 average basket
Mobile Users
198,474
6.8% of total traffic
Added to Cart
80,780 users
39.4% conversion rate
Failed purchase
520 failed attempts / month
Checkout
56,000 orders
69.3% checkout completion
The Existing Checkout Experience
The existing checkout had evolved around a desktop-oriented structure, creating friction across authentication, navigation and purchase completion.
Research & Insights
Challenges
- Mobile-dominant traffic in a desktop-oriented flow
- Mandatory authentication and rigid backend dependencies
- Technical debt and lack of design foundations
- High-intent, low-frequency buyers
Key Insights
High-intent, low-frequency buyers
Even emotionally invested buyers abandon when checkout feels unclear or unstable.
Mobile-first is not a visual decision, but a structural one
Clear hierarchy, fewer decisions per screen,input states, error handling, and immediate feedback are critical under constrained conditions.
Checkout is a fragile system
Small UX inconsistencies can cascade into failed payments and revenue loss.
Emma
28 | Paris| Marketing Manager
Emma Laurent
Marketing Manager
Emma likes to follow every post and news of her favourite Influencer. She just found that the influencer just write a book and is on presales.
Goals
- See the influencer video post and know more about it.
- Go to DashBook’s web and see the book project.
- Buy the book on presales.
- Leave a support comment to the influencer.
Motivations
Emma wants to buy the book no matter what and wait for it to be published. She wants to support her favourite influencer.
Pain Points
- sHE Doesn’t trust websites that never heard about.
- She is used to buy things with her cellphone.
- She has to register several times.
- she can’t find where is her purchase on the website.
Purchase Journey
I mapped the purchase journey to identify where friction emerged between purchase intent and completion.
01
Discover
Finds the book through the author
02
Product Page
Evaluates the book and learns more
03
Add to Cart
Chooses format and adds to cart
04
Checkout
Enters shipping information
05
Payment
Completes the payment
06
Confirmation
Order confirmed and next steps
KEY FRICTION POINTS IDENTIFIED
01
Forced authentication
Requiring account creation before purchase disrupted the flow and added unnecessary friction for high-intent buyers.
02
Dense mobile structure
Information hierarchy, long forms and too many elements made key actions harder to find and understand on mobile.
03
Unclear payment states
Lack of real-time feedback during payment and after errors created uncertainty and led to repeated failed attempts.
The journey revealed that friction was concentrated around the transition from purchase intent to checkout completion. Despite strong purchase intent, users encountered unnecessary barriers in authentication, mobile structure, and payment feedback making the final step less predictable than it needed to be.
Design decisions
1. Progressive, Inline Authentication
Reframed authentication as a progressive step within the checkout rather than a blocking prerequisite.
Before
- Full registration required before continuing.
- Context switch.
- Redirect to the homepage after registration.
After
What changed?
- Email-first entry point to detect returning vs new users early.
- Routed users dynamically into sign-in or a lightweight registration
- Reduced required fields and removed unnecessary friction from the initial step
Constraint: Full guest checkout was not feasible due to backend dependencies.
2. Mobile-First Structural Hierarchy
Rebuilt the checkout structure around mobile behavior instead of desktop logic.
Before
- Dense layout
- Weak hierarchy
- CTA competing with other elements
After
What changed?
- Reorganized content hierarchy to prioritize order summary and key actions.
- Reduced visual density and improved grouping of form fields.
- Applied progressive disclosure to avoid overwhelming users.
Trade-off: Some secondary options were deprioritized to maintain clarity and speed.
3. Predictable Feedback & Error Handling
Standardized system states to reduce uncertainty during payment.
Inline validation prevents repeated failed attempts.
Clear processing state reduces uncertainty and double submissions.
Explicit confirmation reinforces completion.
What changed?
- Reorganized content hierarchy to prioritize order summary and key actions.
- Reduced visual density and improved grouping of form fields.
- Applied progressive disclosure to avoid overwhelming users.
Trade-off: Some secondary options were deprioritized to maintain clarity and speed.
Beyond the checkout
While the initial goal was to resolve critical friction points within the checkout flow, the redesign revealed inconsistencies beyond the payment step. The experience after confirmation lacked structure, clarity, and continuity. We expanded the scope to ensure the purchase experience didn’t end at payment. This led to:
- A redesigned confirmation page with clear purchase details and contextual creator messaging.
- A structured success state reinforcing completion and next steps.
Improved visibility into order and shipping status.
A new user settings area allowing users to update delivery information.
The checkout evolved from a fragile transactional step into a stable and cohesive purchase system.
Final Experience Overview
A cohesive, end-to-end purchase experience built to reduce friction and improve reliability.
From friction to flow
Checkout friction led to high drop-offs. The redesign improved clarity and flow, increasing completion rates.
Checkout funnel before redesign
PRODUCT PAGE
ADD TO CART
Checkout Start
CHECKOUT
PURCHASE
CRITICAL DROP-OFF ZONE
CHECKOUT FRICTION
Authentication friction
Payment confusion
Retry behavior
Failed Purchases
From friction-heavy checkout to a seamless purchase flow
Checkout funnel after redesign
PRODUCT PAGE
ADD TO CART
Checkout Start
PAYMENT
CONFIRMATION
SEAMLESS CHECKOUT
Simplified authentication
Clear payment states
Real-time feedback
Successful purchase
Impact
↓ 89% Failed Purchase Attempts
(~520 → ~60 per month)
↑ 20% Increase in Checkout Conversion
The checkout redesign removed critical friction in authentication and payment confirmation, turning the purchase flow from a high-failure step into a stable and reliable conversion system.
Operational Impact
- Significant reduction in repeated payment retries.
- Noticeable decrease in checkout-related support tickets.
- Improved stability during peak campaign periods.
- Reduced revenue leakage at the final purchase step.
Business Impact
- Shifted the checkout from a revenue bottleneck to a stable conversion system.
- Increased campaign reliability during limited-time pre-order windows.
- Reduced operational strain on product and support teams.
- Improved predictability of campaign performance.
Learnings
- Conversion failures are often structural, not behavioral — even highly motivated users abandon when systems feel unstable.
- Mobile-first design demands prioritization and clarity, especially in high-stakes transactional flows.
- Working within backend limitations sharpened decision-making and reinforced the importance of viable, not ideal, solutions.
From complex Dashboards to Checkout flows, see the breadth of my Design Projects.
More projects
Product Design | In-house software | AI Prototyping
Internal Tool for Content Operations
View case study
Checkout Redesign for a
Pre-order E-commerce Platform
A mobile-first redesign of DashBook’s checkout, addressing a significant drop-off between purchase intent and completed purchases.
↑ 20% checkout conversion↓ 89% failed purchase attempts
Mobile first
Project overview
Product: Content Creator Publishing Platform · Pre-order E-commerceCompany stage: Publishing scale-up
Company stage: 44-day pre-order campaignsRole: Lead UX/UI DesignerPlatform: Responsive web · Mobile-firstStatus: Shipped
Problem : A significant gap between purchase intent and completed purchases
Checkout was the final step in a time-sensitive pre-order journey, but a significant number of users who had already shown purchase intent were not completing their purchase. To determine whether this represented an isolated fluctuation or a recurring product issue, I analyzed a three-month sample of purchase behavior.
This resulted in:
- 80.8K users added a product to their cart, but only 56K completed their purchase.
- This meant 24.8K users did not complete their purchase, representing approximately €495.6K in potential unrealized revenue, based on a €20 average basket.
The question was: what was preventing users who had already shown purchase intent from completing checkout?
User Behavior Snapshot
(May–July)
A three-month sample of purchase behavior revealed a significant gap between users showing purchase intent and completed purchases.
- €20 average basket
- 96.8% mobile traffic
€495.6K Potential Unrealized Revenue
Based on 24,780 non-completing users × €20 average basket.
Operational-level problem
520 failed purchase attempts / month
Recurring failed attempts highlighted the operational impact of checkout friction.
Added to Cart
80,780 users
Checkout
69.3% Checkout Completion
Purchases
56,000 orders
No completed
24.800 users
The goal was not simply to make checkout look better. It was to recover part of the purchase intent already entering the funnel.
Context
DashBook had transitioned from a startup to a scale-up, running dozens of simultaneous pre-order campaigns each month. The business ran 44-day pre-order campaigns, with a minimum of 150 pre-orders required for a book to be published. Buyers were primarily social media followers of the author — high-intent, low-frequency customers making a one-time purchase within a limited campaign window.
With 96.8% of traffic coming from mobile, checkout needed to be fast, clear and predictable. Any friction at this stage could directly affect campaign performance.
The Existing Checkout Experience
The existing checkout had evolved around a desktop-oriented structure, creating friction across authentication, navigation and purchase completion.
My Role
I led the checkout redesign from problem definition to delivery, working closely with Product and Engineering.
The initial request focused on visual improvements, but analysis of the existing experience revealed deeper structural and conversion issues. I took ownership of redefining the checkout flow, establishing a mobile-first structure, and prioritizing the highest-impact friction points, balancing user needs with technical constraints.
Research & Insights
I combined funnel data, checkout behavior, support tickets, and recurring payment issues to identify where friction was affecting purchase completion.
Key Insights
High-intent, low-frequency buyers
Even highly motivated buyers abandoned when checkout felt unclear or unstable.
Mobile-first is not a visual decision, but a structural one
With 96.8% of traffic coming from mobile, hierarchy, input states, error handling and immediate feedback were critical.
Checkout is a fragile system
Small UX inconsistencies could cascade into failed payments, repeated attempts and unrealized revenue.
Purchase Journey
I mapped the purchase journey to identify where friction emerged between purchase intent and completion.
01
Discover
Finds the book through the author
02
Product Page
Evaluates the book and learns more
03
Add to Cart
Chooses format and adds to cart
04
Checkout
Enters shipping information
05
Payment
Completes the payment
06
Confirmation
Order confirmed and next steps
KEY FRICTION POINTS IDENTIFIED
01
Forced authentication
Requiring account creation before purchase disrupted the flow and added unnecessary friction for high-intent buyers.
02
Dense mobile structure
Information hierarchy, long forms and too many elements made key actions harder to find and understand on mobile.
03
Unclear payment states
Lack of real-time feedback during payment and after errors created uncertainty and led to repeated failed attempts.
The journey revealed that friction was concentrated around the transition from purchase intent to checkout completion. Despite strong purchase intent, users encountered unnecessary barriers in authentication, mobile structure, and payment feedback making the final step less predictable than it needed to be.
Design decisions
1. Progressive, Inline Authentication
Reframed authentication as a progressive step within the checkout rather than a blocking prerequisite.
Before
Problem
Forced account creation interrupted the purchase flow.
After
What changed?
I replaced the upfront registration with an email-first authentication flow that identified returning and new users progressively.
Constraint: Full guest checkout was not feasible due to backend dependencies.
2. Mobile-First Structural Hierarchy
Reorganized the checkout around a clearer hierarchy, reducing cognitive load and making key actions easier to find on mobile.
Before
Problem
The existing structure was dense and difficult to navigate on mobile.
After
What changed?
I introduced real-time validation, explicit processing states and clearer success/error feedback.
Trade-off: Some secondary options were deprioritized to maintain clarity and speed.
3. Predictable Feedback & Error Handling
Standardized system states to make payment progress, errors, and completion immediately understandable.
Inline validation prevents repeated failed attempts.
Clear processing state reduces uncertainty and double submissions.
Explicit confirmation reinforces completion.
What changed?
I introduced real-time validation, explicit processing states and clearer success/error feedback.
The goal was not only to improve checkout completion, but to make the entire purchase flow more predictable from payment to order management.
Beyond the Checkout
The redesign extended beyond the payment step to create a more coherent post-purchase experience.
- A redesigned confirmation page with clear purchase details and contextual creator messaging.
- A structured success state reinforcing completion and next steps.
Improved visibility into order and shipping status.
A new user settings area allowing users to update delivery information.
The goal was not only to improve checkout completion, but to make the entire purchase flow more predictable from payment to order management.
Final Experience Overview
A cohesive, end-to-end purchase experience built to reduce friction and improve reliability.
From friction to flow
The redesigned checkout turned a fragmented purchase journey into a clearer, more predictable path to completion.
Checkout funnel before redesign
PRODUCT PAGE
ADD TO CART
Checkout
PAYMENT
PURCHASE
CRITICAL DROP-OFF ZONE
CHECKOUT FRICTION
Authentication friction
Payment uncertainty
Retry behavior
Failed Purchases
From friction-heavy checkout to a seamless purchase flow
Checkout funnel after redesign
PRODUCT PAGE
ADD TO CART
Checkout Start
PAYMENT
CONFIRMATION
SEAMLESS CHECKOUT
Simplified authentication
Clearer hierarchy
Predictable feedback
Successful purchase
Impact
The redesign reduced critical checkout friction, improving purchase completion and checkout reliability.
↓ 89% Failed Purchase Attempts
(~520 → ~60 per month)
↑ 20% Increase in Checkout Conversion
Operational Impact
- Fewer repeated payment attempts
- Fewer checkout-related support issues
- More stable checkout during campaign peaks
- Reduced revenue leakage at the final purchase step.
Business Impact
The checkout shifted from a conversion bottleneck to a more reliable purchase system, improving the predictability of time-limited pre-order campaigns.
Learnings
- Improving conversion starts with understanding where and why intent is being lost.
- Mobile-first means designing the system, not shrinking the UI
- Small checkout failures can have disproportionate business impact
- Design decisions should be tied to evidence, not assumptions
The strongest design decisions came from connecting behavioral data with qualitative and operational signals rather than treating conversion as a design problem in isolation.
From complex Dashboards to Checkout flows, see the breadth of my Design Projects.
More projects
Product Design | In-house software | AI Prototyping
Internal Tool for Content Operations
View case study
JG
Work
About
Contact
JG
Work
About
Contact
Checkout Redesign for a
Pre-order E-commerce Platform
A mobile-first redesign of DashBook’s checkout, addressing a significant drop-off between purchase intent and completed purchases.
↑ 20% checkout conversion↓ 89% failed purchase attempts
E-commerce
User Research
Mobile first
Project overview
Product: Content Creator Publishing Platform · Pre-order E-commerceCompany stage: Publishing scale-up
Company stage: 44-day pre-order campaignsRole: Lead UX/UI DesignerPlatform: Responsive web · Mobile-firstStatus: Shipped
Problem : A significant gap between purchase intent and completed purchases
Checkout was the final step in a time-sensitive pre-order journey, but a significant number of users who had already shown purchase intent were not completing their purchase. To determine whether this represented an isolated fluctuation or a recurring product issue, I analyzed a three-month sample of purchase behavior.
This resulted in:
- 80.8K users added a product to their cart, but only 56K completed their purchase.
- This meant 24.8K users did not complete their purchase, representing approximately €495.6K in potential unrealized revenue, based on a €20 average basket.
The question was: what was preventing users who had already shown purchase intent from completing checkout?
User Behavior Snapshot
(May–July)
A three-month sample of purchase behavior revealed a significant gap between users showing purchase intent and completed purchases.
- €20 average basket
- 96.8% mobile traffic
€495.6K Potential Unrealized Revenue
Based on 24,780 non-completing users × €20 average basket
Operational-level problem
520 failed purchase attempts / month
Recurring failed attempts highlighted the operational impact of checkout friction.
Added to Cart
80,780 users
Checkout
69.3% Checkout Completion
Purchases
56,000 Completed Purchase
No completed
24.800 users
The goal was not simply to make checkout look better. It was to recover part of the purchase intent already entering the funnel.
Context
DashBook had transitioned from a startup to a scale-up, running dozens of simultaneous pre-order campaigns each month. The business ran 44-day pre-order campaigns, with a minimum of 150 pre-orders required for a book to be published. Buyers were primarily social media followers of the author — high-intent, low-frequency customers making a one-time purchase within a limited campaign window.
With 96.8% of traffic coming from mobile, checkout needed to be fast, clear and predictable. Any friction at this stage could directly affect campaign performance.
The Existing Checkout Experience
The existing checkout had evolved around a desktop-oriented structure, creating friction across authentication, navigation and purchase completion.
My Role
I led the checkout redesign from problem definition to delivery, working closely with Product and Engineering.
The initial request focused on visual improvements, but analysis of the existing experience revealed deeper structural and conversion issues. I took ownership of redefining the checkout flow, establishing a mobile-first structure, and prioritizing the highest-impact friction points, balancing user needs with technical constraints.
Research & Insights
I combined funnel data, checkout behavior, support tickets, and recurring payment issues to identify where friction was affecting purchase completion.
Key Insights
High-intent, low-frequency buyers
Even highly motivated buyers abandoned when checkout felt unclear or unstable.
Mobile-first is not a visual decision, but a structural one
With 96.8% of traffic coming from mobile, hierarchy, input states, error handling and immediate feedback were critical.
Checkout is a fragile system
Small UX inconsistencies could cascade into failed payments, repeated attempts and unrealized revenue.
Purchase Journey
I mapped the purchase journey to identify where friction emerged between purchase intent and completion.
01
Discover
Finds the book through the author
02
Product Page
Evaluates the book and learns more
03
Add to Cart
Chooses format and adds to cart
04
Checkout
Enters shipping information
05
Payment
Completes the payment
06
Confirmation
Order confirmed and next steps
KEY FRICTION POINTS IDENTIFIED
01
Forced authentication
Requiring account creation before purchase disrupted the flow and added unnecessary friction for high-intent buyers.
02
Dense mobile structure
Information hierarchy, long forms and too many elements made key actions harder to find and understand on mobile.
03
Unclear payment states
Lack of real-time feedback during payment and after errors created uncertainty and led to repeated failed attempts.
The journey revealed that friction was concentrated around the transition from purchase intent to checkout completion. Despite strong purchase intent, users encountered unnecessary barriers in authentication, mobile structure, and payment feedback making the final step less predictable than it needed to be.
Hypothesis / Design direction
If we reduce friction in authentication, mobile hierarchy and payment feedback, we should increase checkout completion and reduce failed purchase attempts.
Design decisions
The design strategy focused on reducing friction at critical moments, simplifying the checkout flow, and increasing clarity and trust throughout the purchase experience.
1. Progressive, Inline Authentication
Reframed authentication as a progressive step within the checkout rather than a blocking prerequisite.
Before
Problem
Forced account creation interrupted the purchase flow.
After
What changed?
I replaced the upfront registration with an email-first authentication flow that identified returning and new users progressively.
Why: This reduced the initial cognitive and interaction cost while maintaining the authentication requirements imposed by the backend.
2. Mobile-First Structural Hierarchy
Reorganized the checkout around a clearer hierarchy, reducing cognitive load and making key actions easier to find on mobile.
Before
Problem
The existing structure was dense and difficult to navigate on mobile.
After
What changed?
I reorganized the checkout around a clearer hierarchy, grouping related information and prioritizing the order summary and primary CTA.
Why: With 96.8% of traffic coming from mobile, the experience needed to reduce unnecessary decisions and make the next action immediately clear.
3. Predictable Feedback & Error Handling
Standardized system states to make payment progress, errors, and completion immediately understandable.
Inline validation prevents repeated failed attempts.
Clear processing state reduces uncertainty and double submissions.
Explicit confirmation reinforces completion.
What changed?
I introduced real-time validation, explicit processing states and clearer success/error feedback.
Why: Payment is the most sensitive point in the checkout. Clear system feedback reduced uncertainty and made each state of the transaction predictable.
Beyond the Checkout
The redesign extended beyond the payment step to create a more coherent post-purchase experience.
What changed?
- A redesigned confirmation page with clear purchase details and contextual creator messaging.
- A structured success state reinforcing completion and next steps.
- A new user settings area allowing users to update delivery information.
- Improved visibility into order and shipping status.
The goal was not only to improve checkout completion, but to make the entire purchase flow more predictable from payment to order management.
Final Experience Overview
A cohesive, end-to-end purchase experience built to reduce friction and improve reliability.
From friction to flow
The redesigned checkout turned a fragmented purchase journey into a clearer, more predictable path to completion.
Checkout funnel before redesign
PRODUCT PAGE
ADD TO CART
Checkout/Authentication
PAYMENT
PURCHASE
CRITICAL DROP-OFF ZONE
CHECKOUT FRICTION
Authentication friction
Payment uncertainty
Retry behavior
Failed Purchases
From friction-heavy checkout to a seamless purchase flow
Checkout funnel after redesign
PRODUCT PAGE
ADD TO CART
Checkout
PAYMENT
CONFIRMATION
SEAMLESS CHECKOUT
Simplified authentication
Clearer hierarchy
Predictable feedback
Successful purchase
The redesign removed unnecessary friction from the critical path, making the purchase experience clearer and more predictable from checkout to confirmation.
Impact
The redesign reduced critical checkout friction, improving purchase completion and checkout reliability.
↓ 89% Failed Purchase Attempts
(520 → 60 per month)
↑ 20% Increase in Checkout Conversion
Operational Impact
- Fewer repeated payment attempts
- Fewer checkout-related support issues
- More stable checkout during campaign peaks
- Reduced revenue leakage at the final purchase step.
Business Impact
The checkout shifted from a conversion bottleneck to a more reliable purchase system, improving the predictability of time-limited pre-order campaigns.
Learnings
- Improving conversion starts with understanding where and why intent is being lost.
- Mobile-first means designing the system, not shrinking the UI
- Small checkout failures can have disproportionate business impact
- Design decisions should be tied to evidence, not assumptions
The strongest design decisions came from connecting behavioral data with qualitative and operational signals rather than treating conversion as a design problem in isolation.
From complex Dashboards to Checkout flows, see the breadth of my Design Projects.
More projects
Product Design | In-house software | AI Prototyping
Internal Tool for Content Operations
View case study