JG
Work
About
Contact
UX/UI Design | UX research
Checkout Redesign
for a Pre-order E-commerce Platform
↓ 89 % failed purchase attempts(520 → ~60 per month)
A mobile-first redesign of DashBook’s checkout focused on reducing failed purchases and improving conversion during high-intent pre-order campaigns.
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
DashBook’s business model relied on time-bound pre-order campaigns led by content creators. Each campaign required reaching a minimum sales threshold within a limited window before a book could go to print. This created a high-pressure, high-intent purchase environment where conversion directly determined whether a book would go to print.
Problem
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 worked as UX/UI Designer and acted as Lead Designer on this initiative, owning the checkout redesign from problem definition to delivery. While the initial request focused on visual improvements, the scope quickly expanded to address structural conversion issues. I redefined the checkout flow architecture, established mobile-first UX principles, and prioritized high-impact friction points in collaboration with the Product Manager and engineering team. I was responsible for key UX decisions, balancing technical constraints with business goals to deliver a scalable solution implemented directly in production.
Challenges & Insights
Challenges
- Mobile-dominant traffic in a desktop-oriented flow The checkout had evolved without a mobile-first structure, despite most users purchasing from mobile devices.
- Mandatory authentication and rigid backend dependencies The flow relied on required registration and third-party payment integrations that limited step reduction.
- Technical debt and lack of design foundations The checkout had grown incrementally without a clear UX framework, leading to inconsistencies in hierarchy, states, and feedback.
- High-intent, low-frequency buyersUsers were highly motivated but unfamiliar with the platform, making predictability and clarity essential at the payment stage.
Insights
Insights were derived from:
- Recurring checkout-related support tickets.
- Failed payment patterns and repeated retries.
- Direct collaboration with the Product Manager and engineering team.
- Reviewing user behavior during active campaign peaks.
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.
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.
Impact
↓ 89% Failed Purchase Attempts
(~520 → ~60 per month)
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
Redesigning this checkout highlighted how fragile high-intent purchase moments truly are. What initially appeared as a conversion issue revealed deeper structural challenges that required thoughtful trade-offs and careful prioritization.
- 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
UX/UI Design | Product Design
Dashboard for content creators
View case study
UX/UI Design | Product Design
Pre-sales preparation tool for Editors (WIP)
View case study
JG
Jhair Guardia
Work
About
Contact
UX/UI Design | UX research
Checkout Redesign for a Pre-order E-commerce Platform
↓ 89 % failed purchase attempts (520 → ~60 per month)
A mobile-first redesign of DashBook’s checkout focused on reducing failed purchases and improving conversion during high-intent pre-order campaigns.
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
DashBook’s business model relied on time-bound pre-order campaigns led by content creators. Each campaign required reaching a minimum sales threshold within a limited window before a book could go to print. This created a high-pressure, high-intent purchase environment where conversion directly determined whether a book would go to print.
Problem
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 worked as UX/UI Designer and acted as Lead Designer on this initiative, owning the checkout redesign from problem definition to delivery. While the initial request focused on visual improvements, the scope quickly expanded to address structural conversion issues. I redefined the checkout flow architecture, established mobile-first UX principles, and prioritized high-impact friction points in collaboration with the Product Manager and engineering team. I was responsible for key UX decisions, balancing technical constraints with business goals to deliver a scalable solution implemented directly in production.
Challenges & Insights
Challenges
- Mobile-dominant traffic in a desktop-oriented flow The checkout had evolved without a mobile-first structure, despite most users purchasing from mobile devices.
- Mandatory authentication and rigid backend dependencies The flow relied on required registration and third-party payment integrations that limited step reduction.
- Technical debt and lack of design foundations The checkout had grown incrementally without a clear UX framework, leading to inconsistencies in hierarchy, states, and feedback.
- High-intent, low-frequency buyersUsers were highly motivated but unfamiliar with the platform, making predictability and clarity essential at the payment stage.
Insights
Insights were derived from:
- Recurring checkout-related support tickets.
- Failed payment patterns and repeated retries.
- Direct collaboration with the Product Manager and engineering team.
- Reviewing user behavior during active campaign peaks.
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.
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?
- Real-time input validation.
- Clear payment processing and success states.
- Immediate system feedback after key actions.
Constraint: Required coordination with engineering across payment integrations.
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.
Impact
↓ 89% Failed Purchase Attempts
(~520 → ~60 per month)
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
Redesigning this checkout highlighted how fragile high-intent purchase moments truly are. What initially appeared as a conversion issue revealed deeper structural challenges that required thoughtful trade-offs and careful prioritization.
- 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
UX/UI Design | Product Design
Dashboard for content creators
View case study
UX/UI Design | Product Design
Pre-sales preparation tool for Editors (WIP)
View case study
JG
Jhair Guardia
Work
About
Contact
UX/UI Design | UX research
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)
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
DashBook’s business model relied on time-bound pre-order campaigns led by content creators. Each campaign required reaching a minimum sales threshold within a limited window before a book could go to print. This created a high-pressure, high-intent purchase environment where conversion directly determined whether a book would go to print.
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.
Problem
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.
My Role
I worked as UX/UI Designer and acted as Lead Designer on this initiative, owning the checkout redesign from problem definition to delivery. While the initial request focused on visual improvements, the scope quickly expanded to address structural conversion issues. I redefined the checkout flow architecture, established mobile-first UX principles, and prioritized high-impact friction points in collaboration with the Product Manager and engineering team. I was responsible for key UX decisions, balancing technical constraints with business goals to deliver a scalable solution implemented directly in production.
Challenges & Insights
Challenges
- Mobile-dominant traffic in a desktop-oriented flow The checkout had evolved without a mobile-first structure, despite most users purchasing from mobile devices.
- Mandatory authentication and rigid backend dependencies The flow relied on required registration and third-party payment integrations that limited step reduction.
- Technical debt and lack of design foundations The checkout had grown incrementally without a clear UX framework, leading to inconsistencies in hierarchy, states, and feedback.
- High-intent, low-frequency buyersUsers were highly motivated but unfamiliar with the platform, making predictability and clarity essential at the payment stage.
Insights
Insights were derived from:
- Recurring checkout-related support tickets.
- Failed payment patterns and repeated retries.
- Direct collaboration with the Product Manager and engineering team.
- Reviewing user behavior during active campaign peaks.
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.
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?
- Real-time input validation.
- Clear payment processing and success states.
- Immediate system feedback after key actions.
Constraint: Required coordination with engineering across payment integrations.
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.
- A new user settings area allowing users to update delivery information.
- Improved visibility into order and shipping status.
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.
Impact
↓ 89% Failed Purchase Attempts
(~520 → ~60 per month)
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
Redesigning this checkout highlighted how fragile high-intent purchase moments truly are. What initially appeared as a conversion issue revealed deeper structural challenges that required thoughtful trade-offs and careful prioritization.
- 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
UX/UI Design | Product Design
Admin tool for
Editors (WIP)
View case study