From Shopify dependency to workflow control
From Shopify dependency to workflow control
PROJECT
Virgio checkout
TIMELINE
2 Weeks
MY ROLE
Research+Design
TEAM
Solo designer. PM. Engineer
PROJECT
Virgio checkout
TIMELINE
2 Weeks
MY ROLE
Research+Design
TEAM
Solo designer. PM. Engineer
BEFORE
AFTER
BEFORE
AFTER
BEFORE
AFTER
+2.68%
conversion uplift
Reached 76.7% overall
25.7%
Faster Checkout
Avg time dropped to ~2 mins
94%
Address success
Normal flow, step completed
55.7%
Map recovery
Backed out then returned
THE PROBLEM
Platform limitations surfaced under peak load
During high-traffic events (specifically our sale event), the checkout had to make multiple API calls per user session.
Shopify’s rate limits surfaced which meant after a certain threshold, calls were throttled.
Resulting in slower responses and occasional instability during peak load.
It exposed a deeper constraint for business..
We were building on infrastructure we didn’t fully control and checkout is a performance-sensitive and a revenue critical touch point in a user’s journey, hence we chose checkout as the first migration step
OBSERVATIONS
But why shopify became a bottleneck?
SYSTEM
Rate Limits
Peak load . API throttled
Checkout slows+ destabalises
EXPERIENCE
Limited UI Control
No brand Alignment
Hard to iterate key flows
OBSERVABILITY
No Funnel Data
Drop-offs invisible
Cannot iterate without data
BUSINESS RISK
No Infrastructure Control
Revenue critical touchpoint
User Problem
Business problem
Users wanted a fast and seamless checkout experience, especially during high-traffic events. However, during peak demand, the flow felt slower and less responsive, creating hesitation at the most critical moment of purchase.
DESIGN DIRECTION
How I approached redesigning checkout..
GOALS
#1
Minimise drop-off at the most critical step in the purchase journey
#2
Reduce friction and cognitive load during payment selection
#3
Make the path from selection to confirmation as short as possible
We started with asking..
What actually matters to the users when they're at checkout
What's the total?
When will it arrive?
Are there any discounts?
So we had 2 essential parts of the checkout to look at
Address selection
Payment method selection
Address flow
After
Previous screen
The moment a user selects an address, estimated delivery updates, making the consequence of their selection visible instantly.
Addresses are presented as scannable cards which are prominent enough to read quickly
Adding new address
In most cases, user addresses are automatically fetched from Shiprocket after login. However, in rare cases any of the addresses might not be available at all
To handle this, we prompt users to add a new address before continuing, while keeping the payment payment CTA disabled until a valid address is added.
Improving accuracy with map-based address entry
Instead of relying entirely on manual typing, the new address flow uses map-based location selection.
Users can search for a location, place a pin, and the form is auto-filled with the detected address, reducing typing effort while capturing a more precise delivery location.
Designing safeguards for location accuracy
we accounted for scenarios where users might try to proceed without confirming their location.
Location Mismatch
When the map pin is moved away from the searched address, a nudge alerts the user to re-align the pin with the actual location before proceeding.
Location Unserviceable
If the selected location falls outside the delivery area, a nudge informs the user that delivery isn’t available for this address & CTA also becomes disabled.
Payments selection
Final Design
Exploration 3
Exploration 2
Exploration 1
The final one brought all together
The final structure builds on previous insight without adding extra steps.
A user could see what they were paying, how they were paying it,
confirms in one continuous glance downward.
Credits and gift cards appear first so users can adjust the payable amount before committing to a payment method.
That's a wrap!
As a result we saw the following
As a result we saw the following
+2.68% increase
+2.68% increase
In checkout conversion
In checkout conversion, which reached to 76.7%
25.7% faster
25.7% faster
checkout completion, average time to convert dropped to ~2 minutes
checkout completion, average time to convert dropped to ~2 minutes
94% address completion success
94% address completion success
Among users who followed the normal address flow, 94% successfully saved their address and continued checkout.
Among users who followed the normal address flow, 94% successfully saved their address and continued checkout.
55% recovery after drop-offs
55% recovery after drop-offs
Even when users backed out of the map step, 55.7% returned and completed the address form,
indicating the new map interface caused only temporary hesitation rather than a blocker.
Even when users backed out of the map step, 55.7% returned and completed the address form,
indicating the new map interface caused only temporary hesitation rather than a blocker.
THE PROBLEM
Platform limitations surfaced under peak load
During high-traffic events (specifically our sale event), the checkout had to make multiple API calls per user session.
Shopify’s rate limits surfaced which meant after a certain threshold, calls were throttled.
Resulting in slower responses and occasional instability during peak load.
You're seeing a preview👀!
You're seeing a preview👀!
For a better reading experience view it on desktop :)
For a better reading experience view it on desktop :)
As a result we saw the following
+2.68% increase in checkout conversion rate
Checkout conversion reached 76.7%
25.7% faster checkout completion
Average time to convert dropped to ~2 minutes, making the new checkout significantly faster
94% address completion success
Among users who followed the normal address flow, 94% successfully saved their address and continued checkout.
55% recovery after drop-offs
Even when users backed out of the map step, 55.7% returned and completed the address form,
indicating the new map interface caused only temporary hesitation rather than a blocker.
From Shopify dependency to workflow control
From Shopify dependency to workflow control
PROJECT
Virgio checkout
TIMELINE
2 Weeks
MY ROLE
Research+Design
TEAM
Solo designer. PM. Engineer
PROJECT
Virgio checkout
TIMELINE
2 Weeks
MY ROLE
Research+Design
TEAM
Solo designer. PM. Engineer
BEFORE
AFTER
BEFORE
AFTER
BEFORE
AFTER
+2.68%
conversion uplift
Reached 76.7% overall
25.7%
Faster Checkout
Avg time dropped to ~2 mins
94%
Address success
Normal flow, step completed
55.7%
Map recovery
Backed out then returned
THE PROBLEM
Platform limitations surfaced under peak load
During high-traffic events (specifically our sale event), the checkout had to make multiple API calls per user session.
Shopify’s rate limits surfaced which meant after a certain threshold, calls were throttled.
Resulting in slower responses and occasional instability during peak load.
It exposed a deeper constraint for business..
We were building on infrastructure we didn’t fully control and checkout is a performance-sensitive and a revenue critical touch point in a user’s journey, hence we chose checkout as the first migration step
OBSERVATIONS
But why shopify became a bottleneck?
SYSTEM
Rate Limits
Peak load . API throttled
Checkout slows+ destabalises
EXPERIENCE
Limited UI Control
No brand Alignment
Hard to iterate key flows
OBSERVABILITY
No Funnel Data
Drop-offs invisible
Cannot iterate without data
BUSINESS RISK
No Infrastructure Control
Revenue critical touchpoint
User Problem
Business problem
Users wanted a fast and seamless checkout experience, especially during high-traffic events. However, during peak demand, the flow felt slower and less responsive, creating hesitation at the most critical moment of purchase.
DESIGN DIRECTION
How I approached redesigning checkout..
GOALS
#1
Minimise drop-off at the most critical step in the purchase journey
#2
Reduce friction and cognitive load during payment selection
#3
Make the path from selection to confirmation as short as possible
We started with asking..
What actually matters to the users when they're at checkout
What's the total?
When will it arrive?
Are there any discounts?
So we had 2 essential parts of the checkout to look at
Address selection
Payment method selection
Address flow
After
Previous screen
The moment a user selects an address, estimated delivery updates, making the consequence of their selection visible instantly.
Addresses are presented as scannable cards which are prominent enough to read quickly
Adding new address
In most cases, user addresses are automatically fetched from Shiprocket after login. However, in rare cases any of the addresses might not be available at all
To handle this, we prompt users to add a new address before continuing, while keeping the payment payment CTA disabled until a valid address is added.
Improving accuracy with map-based address entry
Instead of relying entirely on manual typing, the new address flow uses map-based location selection.
Users can search for a location, place a pin, and the form is auto-filled with the detected address, reducing typing effort while capturing a more precise delivery location.
Designing safeguards for location accuracy
we accounted for scenarios where users might try to proceed without confirming their location.
Location Mismatch
When the map pin is moved away from the searched address, a nudge alerts the user to re-align the pin with the actual location before proceeding.
Location Unserviceable
If the selected location falls outside the delivery area, a nudge informs the user that delivery isn’t available for this address & CTA also becomes disabled.
Payments selection
Final Design
Exploration 3
Exploration 2
Exploration 1
The final one brought all together
The final structure builds on previous insight without adding extra steps.
A user could see what they were paying, how they were paying it,
confirms in one continuous glance downward.
Credits and gift cards appear first so users can adjust the payable amount before committing to a payment method.
That's a wrap!
As a result we saw the following
As a result we saw the following
+2.68% increase
+2.68% increase
In checkout conversion
In checkout conversion, which reached to 76.7%
25.7% faster
25.7% faster
checkout completion, average time to convert dropped to ~2 minutes
checkout completion, average time to convert dropped to ~2 minutes
94% address completion success
94% address completion success
Among users who followed the normal address flow, 94% successfully saved their address and continued checkout.
Among users who followed the normal address flow, 94% successfully saved their address and continued checkout.
55% recovery after drop-offs
55% recovery after drop-offs
Even when users backed out of the map step, 55.7% returned and completed the address form,
indicating the new map interface caused only temporary hesitation rather than a blocker.
Even when users backed out of the map step, 55.7% returned and completed the address form,
indicating the new map interface caused only temporary hesitation rather than a blocker.
THE PROBLEM
Platform limitations surfaced under peak load
During high-traffic events (specifically our sale event), the checkout had to make multiple API calls per user session.
Shopify’s rate limits surfaced which meant after a certain threshold, calls were throttled.
Resulting in slower responses and occasional instability during peak load.
You're seeing a preview👀!
You're seeing a preview👀!
For a better reading experience view it on desktop :)
For a better reading experience view it on desktop :)
As a result we saw the following
+2.68% increase in checkout conversion rate
Checkout conversion reached 76.7%
25.7% faster checkout completion
Average time to convert dropped to ~2 minutes, making the new checkout significantly faster
94% address completion success
Among users who followed the normal address flow, 94% successfully saved their address and continued checkout.
55% recovery after drop-offs
Even when users backed out of the map step, 55.7% returned and completed the address form,
indicating the new map interface caused only temporary hesitation rather than a blocker.