Payment choices up front
This direction brought saved cards and individual payment methods into our checkout.
ConstraintThis required licensing and registration. We moved payment collection to the next step, using a third-party payment gateway.
Project 1:Faster Checkout Through an In-House Redesign
Overview
During the Econic 25 sale, our systems handled the traffic surge, but Shopify checkout became an ordering bottleneck we couldn’t directly scale. After the sale, we brought checkout in-house to control its capacity and speed.
Following the in-house migration and redesign, we saw 2.68% higher conversion and 25.7% less time to complete checkout.
Problem
Shopify limited our control over address entry and payment choices, and its default UI felt disconnected from the rest of VIRGIO.
Migration trigger
Capacity we couldn’t directly scale
Shopify checkout became a bottleneck even when our other systems handled the traffic, prompting the move in-house.
UX issue
Limited control over the experience
Shopify limited how we could tailor address entry, payment choices and checkout behaviour to VIRGIO.
UX issue
Inconsistent with VIRGIO’s design system
Checkout didn’t match VIRGIO’s new design system, making the final step feel disconnected.
Making checkout easier to complete
Reduce hesitation around delivery details, available credits and the final amount, so shoppers understand how their choices affect the order before committing to payment.
| Goals | Simpler address selection and payment, reliable checkout during peak traffic, and consistency with VIRGIO’s new design system. |
|---|---|
| Design scope | Address selection and entry, delivery information, serviceability states, payment choices, credits and gift cards, and the final order amount. |
| Success measures | Checkout completion time and conversion, with analytics to identify friction and evaluate future improvements. |
| Boundaries and constraints | Mobile and desktop checkout within VIRGIO’s design system, supporting saved and new addresses, delivery serviceability and payment eligibility. Payment required a valid address. |
How Might We help shoppers select an address and pay with less effort, while keeping checkout reliable during peak traffic and consistent with the rest of VIRGIO?
Explored · Not shipped
Rejected direction: checkout on one screen
This concept combined the shopping bag, delivery address and payment controls on one page. It aimed to reduce navigation between reviewing items and placing an order, especially with address and payment details already available.
Swipe to explore.
The final direction focused on verifying delivery details and completing payment.
Further explorations · Not shipped
Other directions along the way
Three alternatives for organising saved cards, payment modes and the order summary.
A payment-mode toggle
A “Pay now / Pay COD” switch separates payment modes before the individual methods.
Trade-offThis introduces another decision before choosing a payment method.
Summary before payment
The order breakdown moves above payment, while redemption treatments sit farther down.
Trade-offCredits could change an amount the shopper has already reviewed.
Final design
Fewer decision points for faster checkout
When Shiprocket address details were available, we prefilled them and selected a default for shoppers to verify. Delivery estimates, payment options and an order summary followed, reducing repeated entry and keeping decisions in sequence.
- Use credits before choosing how to pay
Shoppers can apply store credit and gift card balances before paying the remainder.
- See the amount before committing
The order breakdown explains the total. The payment button repeats it before shoppers commit.
- Review where and when
Delivery estimates sit below the selected address, keeping the destination and arrival dates together.
Swipe to explore.
A new address with less typing
Map search and a draggable pin helped shoppers locate a new delivery point and prefill address details. They could review, edit and complete the form before saving, with less manual entry.
Faster checkout and higher conversion
Following the in-house migration and checkout redesign, conversion increased by 2.68%, while average completion time fell by 25.7%. We could now measure how shoppers used checkout, find friction and guide future improvements.
+2.68%
Checkout conversion
−25.7%
Average completion time
Key learnings
Helping deliver checkout in-house reinforced the value of reducing competing decisions and reusing customer details. Next, I’d use the new analytics to identify friction and test whether the combined checkout concept could offer returning shoppers a simpler path to purchase.