Streamlining Checkout experience
Streamlining Checkout experience
A result‑driven redesign that lifted conversion and revenue while reducing friction at Williams.
A result‑driven redesign that lifted conversion and revenue while reducing friction at Williams.
My Role
My Role
Product Designer
Product Designer
Product Designer
The Team
The Team
Product Owner
Product Owner
Product Owner
Front-End Developers
Front-End Developers
Front-End Developers
Digital Data Analyst
Digital Data Analyst
Digital Data Analyst
Back-End Developers
Back-End Developers
Back-End Developers
QAs
QAs
QAs
Loyalty Managers
Loyalty Managers
Loyalty Managers
Challenge
Williams’ e-commerce conversion rate has been steadily declining due to an outdated and frustrating user experience during checkout. Early research uncovered several usability issues that were detracting from conversion.
Results
The redesigned Checkout experience outperformed the existing flow in with revenue per user improved by 19.32%, conversion rate increased by 23.3% and record revenue at Click Frenzy.
Challenge
Williams’ e-commerce conversion rate has been steadily declining due to an outdated and frustrating user experience during checkout. Early research uncovered several usability issues that were detracting from conversion.
Results
The redesigned Checkout experience outperformed the existing flow in with revenue per user improved by 19.32%, conversion rate increased by 23.3% and record revenue at Click Frenzy.
Challenge
Williams’ e-commerce conversion rate has been steadily declining due to an outdated and frustrating user experience during checkout. Early research uncovered several usability issues that were detracting from conversion.
Results
The redesigned Checkout experience outperformed the existing flow in with revenue per user improved by 19.32%, conversion rate increased by 23.3% and record revenue at Click Frenzy.
+19.32%
Revenue Per User (A/B Test)
Revenue Per User (A/B Test)
+23.3%
Conversion Rate (A/B Test)
Conversion Rate (A/B Test)
Highest
Revenue at Click Frenzy ’24
Revenue at Click Frenzy ’24
Project Goals
1): Reverse the conversion decline and grow revenue by simplifying checkout.
2): Design once, roll out across brands to accelerate impact.
Design Approach
We followed the Double Diamond: discover the real problems, define priorities, explore options, then deliver measurable improvements. Each exploration was validated with analytics, usability testing, and stakeholder feedback, with changes shipped iteratively for speed.
Project Goals
1): Reverse the conversion decline and grow revenue by simplifying checkout.
2): Design once, roll out across brands to accelerate impact.
Design Approach
We followed the Double Diamond: discover the real problems, define priorities, explore options, then deliver measurable improvements. Each exploration was validated with analytics, usability testing, and stakeholder feedback, with changes shipped iteratively for speed.
Project Goals
1): Reverse the conversion decline and grow revenue by simplifying checkout.
2): Design once, roll out across brands to accelerate impact.
Design Approach
We followed the Double Diamond: discover the real problems, define priorities, explore options, then deliver measurable improvements. Each exploration was validated with analytics, usability testing, and stakeholder feedback, with changes shipped iteratively for speed.
User Research
User Survey
Curious about our users' thoughts on our current filtering experience, I set up a Hotjar survey on our site.
User Research
User Survey
Curious about our users' thoughts on our current filtering experience, I set up a Hotjar survey on our site.
User Research
User Survey
Curious about our users' thoughts on our current filtering experience, I set up a Hotjar survey on our site.
Survey Insights
For clear picture of our painpoints, I've extracted the key frustrations based on our user surveys.
For clear picture of our painpoints, I've extracted the key frustrations based on our user surveys.
For clear picture of our painpoints, I've extracted the key frustrations based on our user surveys.
Frequent complaints about promo code friction.
Users reported getting stuck due to unclear or easily missed errors.
Some wanted to edit product details without leaving checkout.
GA data Insights
I've also work with our digital data analyst to extract the data from google analytics for better understanding our user pattern
I've also work with our digital data analyst to extract the data from google analytics for better understanding our user pattern
I've also work with our digital data analyst to extract the data from google analytics for better understanding our user pattern
Over 70% of users come from mobile devices (mostly iPhones).
Over 70% of users come from mobile devices (mostly iPhones).
Over 70% of users come from mobile devices (mostly iPhones).
Checkout completion rate was around 30%, versus ~40% industry average.
Checkout completion rate was around 30%, versus ~40% industry average.
Checkout completion rate was around 30%, versus ~40% industry average.
Only ~60% applied the signature “half-price promo code”.
Only ~60% applied the signature “half-price promo code”.
Only ~60% applied the signature “half-price promo code”.
Credit card was the most used payment method, followed by PayPal.
Credit card was the most used payment method, followed by PayPal.
Credit card was the most used payment method, followed by PayPal.
Heuristic Evaluation
Based on the complaints and GA data, it's good to do a cognitive walkthrough to understand what is happening to our users.
Based on the complaints and GA data, it's good to do a cognitive walkthrough to understand what is happening to our users.
Based on the complaints and GA data, it's good to do a cognitive walkthrough to understand what is happening to our users.
Heuristic Evaluation Findings
Poor mobile layout; interface elements were cramped.
Promo code field hidden or positioned badly.
User have to go back to PDP to get the code, and the code is image format.
Users couldn’t proceed due to error messages triggered by lower-case promo codes.
long forms increased abandonment risk.
Identifying Painpoints
Combining the insights of previous research, I quickly map out the checkout flow and painpoints with the team.
Identifying Painpoints
Combining the insights of previous research, I quickly map out the checkout flow and painpoints with the team.
Identifying Painpoints
Combining the insights of previous research, I quickly map out the checkout flow and painpoints with the team.
Painpoints & Prioritisation
After identifying the pain points, I had a workshop session with the stakeholder to see if any missing painpoints and prioritise it according to the impact of conversion rate and technical feasibility.
Painpoints & Prioritisation
After identifying the pain points, I had a workshop session with the stakeholder to see if any missing painpoints and prioritise it according to the impact of conversion rate and technical feasibility.
Painpoints & Prioritisation
After identifying the pain points, I had a workshop session with the stakeholder to see if any missing painpoints and prioritise it according to the impact of conversion rate and technical feasibility.
Painpoint
Painpoint
Promo codes are easy to miss and hard to enter
Promo codes are easy to miss and hard to enter
Promo codes are easy to miss and hard to enter
Painpoint
Painpoint
Vague/subtle errors block progress
Vague/subtle errors block progress
Vague/subtle errors block progress
Painpoint
Painpoint
Long, overwhelming forms
Long, overwhelming forms
Long, overwhelming forms
Painpoint
Painpoint
Can’t edit items in checkout
Can’t edit items in checkout
Can’t edit items in checkout
Ideation
Once we prioritised what we should tackle first, we had multiple ideation session according to different touch points and pianpoint.
Ideation
Once we prioritised what we should tackle first, we had multiple ideation session according to different touch points and pianpoint.
Ideation
Once we prioritised what we should tackle first, we had multiple ideation session according to different touch points and pianpoints.
Painpoints vs Solution
Painpoint
Painpoint
Painpoint
Promo codes are easy to miss and hard to enter
Promo codes are easy to miss and hard to enter
Promo codes are easy to miss and hard to enter
Solution
Solution
Solution
Auto‑apply eligible promos and surface line‑level savings (not just in the order total) so value is obvious.
Auto‑apply eligible promos and surface line‑level savings (not just in the order total) so value is obvious.
Auto‑apply eligible promos and surface line‑level savings (not just in the order total) so value is obvious.
Painpoint
Painpoint
Painpoint
Vague/subtle errors block progress
Vague/subtle errors block progress
Vague/subtle errors block progress
Solution
Solution
Solution
Auto‑format inputs (postcode/phone), scroll to first error, and add clear, actionable microcopy.
Auto‑format inputs (postcode/phone), scroll to first error, and add clear, actionable microcopy.
Auto‑format inputs (postcode/phone), scroll to first error, and add clear, actionable microcopy.
Painpoint
Painpoint
Painpoint
Can’t edit items in checkout
Can’t edit items in checkout
Can’t edit items in checkout
Solution
Solution
Solution
Split into three focused steps—Name & Address → Delivery → Payment—reducing cognitive load and missed required fields.
Split into three focused steps—Name & Address → Delivery → Payment—reducing cognitive load and missed required fields.
Split into three focused steps—Name & Address → Delivery → Payment—reducing cognitive load and missed required fields.
Painpoint
Painpoint
Painpoint
User can't edit their product detail during checkout.
User can't edit their product detail during checkout.
User can't edit their product detail during checkout.
Solution
Solution
Solution
Allow inline edit of size, colour, and quantity without losing context.
Allow inline edit of size, colour, and quantity without losing context.
Allow inline edit of size, colour, and quantity without losing context.
Additional Quick Wins
Additional Quick Wins
Additional Quick Wins
Reorder payment options based on usage (Credit Card first, then PayPal).
Reorder payment options based on usage (Credit Card first, then PayPal).
Reorder payment options based on usage ( Card first, then PayPal).
Address Finder to reduce keystrokes and errors.
Address Finder to reduce keystrokes and errors.
Address Finder to reduce keystrokes and errors.
Lo-Fi Design Exploration
Rapid flows and sketches to converge on the smallest set of changes with the highest impact and Bi‑weekly, 30‑minute design reviews with stakeholders to align on scope, feasibility and next steps
Lo-Fi Design Exploration
Rapid flows and sketches to converge on the smallest set of changes with the highest impact and Bi‑weekly, 30‑minute design reviews with stakeholders to align on scope, feasibility and next steps
Lo-Fi Design Exploration
Rapid flows and sketches to converge on the smallest set of changes with the highest impact and Bi‑weekly, 30‑minute design reviews with stakeholders to align on scope, feasibility and next steps
HI-Fi Prototype & User Testing
During design review and iteration with stakeholder, there was an ambiguity about separating the detail input into multiple steps. I think it's a good idea to let the user testing result speak itself.
HI-Fi Prototype & User Testing
During design review and iteration with stakeholder, there was an ambiguity about separating the detail input into multiple steps. I think it's a good idea to let the user testing result speak itself.
HI-Fi Prototype & User Testing
During design review and iteration with stakeholder, there was an ambiguity about separating the detail input into multiple steps. I think it's a good idea to let the user testing result speak itself.
User Testing Insights
All user prefer the redesigned flow over the current flow.
Some users didn’t realise discounts had been auto‑applied.
Multi‑step checkout outperformed single‑page flows; users completed required fields more reliably.
Consolidating & Iterating
Based on the user testing insight, we have a clear direction of how we can iterate the designs.
Consolidating & Iterating
Based on the user testing insight, we have a clear direction of how we can iterate the designs.
Consolidating & Iterating
Based on the user testing insight, we have a clear direction of how we can iterate the designs.
Insights
Some users didn’t realise discounts had been auto‑applied.
Users didn't realised that the promo code has been applied.
Some users didn’t realise discounts had been auto‑applied.
Design iterate
Savings at line level with clear before/after prices and an explanatory label.
Savings at line level with clear before/after prices and an explanatory label.
Savings at line level with clear before/after prices and an explanatory label.
Design iterate
Three‑step flow (Name & Address → Delivery → Payment) with progress guidance to reduce cognitive load.
Three‑step flow (Name & Address → Delivery → Payment) with progress guidance to reduce cognitive load.
Three‑step flow (Name & Address → Delivery → Payment) with progress guidance to reduce cognitive load.
Insights
Multi‑step checkout outperformed single‑page flows; users completed required fields more reliably.
Multi‑step checkout outperformed single‑page flows; users completed required fields more reliably.
Multi‑step checkout outperformed single‑page flows; users completed required fields more reliably.
Quick wins
Reorder payment options based on usage (Credit Card first, then PayPal).
Reordered the filter list so that high-value options—identified through GA data, customer interviews, and user testing—are positioned within easy reach for right-handed users, reflecting that around 90% of Australians are right-handed.
Reorder payment options based on usage (Credit Card first, then PayPal).
MVP
Future Opportunities
Future Opportunities
Future Opportunities
Auspost collection point
Give customers the option to collect orders from Australia Post Parcel Collect locations (lockers & collection points) for more flexible delivery.
Give customers the option to collect orders from Australia Post Parcel Collect locations (lockers & collection points) for more flexible delivery.
Express checkout
Integrate express checkout to remove form friction (e.g., Apple Pay / Google Pay / PayPal Express where appropriate).
Integrate express checkout to remove form friction (e.g., Apple Pay / Google Pay / PayPal Express where appropriate).
A/B Testing
Because checkout is critical to revenue, we avoided a hard cutover. Instead, we A/B-tested against the existing flow and progressively increased exposure (30% → 50% → 70% → 100%) once metrics met our thresholds.
A/B Testing
Because checkout is critical to revenue, we avoided a hard cutover. Instead, we A/B-tested against the existing flow and progressively increased exposure (30% → 50% → 70% → 100%) once metrics met our thresholds.
A/B Testing
Because checkout is critical to revenue, we avoided a hard cutover. Instead, we A/B-tested against the existing flow and progressively increased exposure (30% → 50% → 70% → 100%) once metrics met our thresholds.
Impact
In A/B testing, the redesign produced statistically significant uplifts: +23.3% conversion rate and +19.32% revenue per user.
In A/B testing, the redesign produced statistically significant uplifts: +23.3% conversion rate and +19.32% revenue per user.
In A/B testing, the redesign produced statistically significant uplifts: +23.3% conversion rate and +19.32% revenue per user.
During A/B testing, users who saw the redesigned checkout converted more—64.35% vs 58.29%—and abandoned less (35.65% vs 41.71%)
During A/B testing, users who saw the redesigned checkout converted more—64.35% vs 58.29%—and abandoned less (35.65% vs 41.71%)
During A/B testing, users who saw the redesigned checkout converted more—64.35% vs 58.29%—and abandoned less (35.65% vs 41.71%)
Checkout completion improved from 30.0% to 48.83% versus the historical baseline
Checkout completion improved from 30.0% to 48.83% versus the historical baseline
Checkout completion improved from 30.0% to 48.83% versus the historical baseline
Highest revenue in history during Click Frenzy 24
Highest revenue in history during Click Frenzy 24
Highest revenue in history during Click Frenzy 24
Survey Insights
For clear picture of our painpoints, I've extracted the key frustrations based on our user surveys.
Frequent complaints about promo code friction.
Users reported getting stuck due to unclear or easily missed errors.
Some wanted to edit product details without leaving checkout.
GA data Insights
I've also work with our digital data analyst to extract the data from google analytics for better understanding our user pattern
The checkout completion rate is around 30%, and the average industry completion rate is around 40%.
Only around 60% of user applied 1/2 pair half price promo code which is the iconic discount of Williams.
Credit Card is the most used payment method, follow up by PayPal.
More than 70% of our user coming from Mobile and mostly iPhone user
Impact
In A/B testing, the redesign produced statistically significant uplifts: +23.3% conversion rate and +19.32% revenue per user.
During A/B testing, users who saw the redesigned checkout converted more—64.35% vs 58.29%—and abandoned less (35.65% vs 41.71%)
Checkout completion improved from 30.0% to 48.83% versus the historical baseline
Highest revenue in history during Click Frenzy 24
Identifying Painpoints
Combining the insights of previous research, I quickly map out the checkout flow and painpoints with the team.
Heuristic Evaluation
Based on the complaints and GA data, it's good to do a cognitive walkthrough to understand what is happening to our users.
Heuristic Evaluation Findings
Not mobile friendly UI, element squeezed on mobile device
Promo code position is hidden below every element of the page.
User have to go back to PDP to get the code, and the code is image format.
If user type in the code in lower case, error message trigger.
Long list of details make the checkout overwhelmed
Featured works
Featured works
Enhancing product filtering and finablity
Using customer insights and data analysis to enhance the filtering system and improve product findability.
View Project
+20% user satisfaction
+2x daily usage
Enhancing product filtering and finablity
Using customer insights and data analysis to enhance the filtering system and improve product findability.
View Project
+20% user satisfaction
+2x daily usage
Enhancing product filtering and finablity
Using customer insights and data analysis to enhance the filtering system and improve product findability.
View Project
+20% user satisfaction
+2x daily usage
Enhancing product filtering and finablity
Using customer insights and data analysis to enhance the filtering system and improve product findability.
View Project
Flexible Click & Collect
Designing a flexible, split fulfilment solution that alleviate customerfrustration due to low stock accuracy
View Project
End to end UI/UX Design
Service Design
User Research
Flexible Click & Collect
Designing a flexible, split fulfilment solution that alleviate customerfrustration due to low stock accuracy
View Project
End to end UI/UX Design
Service Design
User Research
Flexible Click & Collect
Designing a flexible, split fulfilment solution that alleviate customerfrustration due to low stock accuracy
View Project
End to end UI/UX Design
Service Design
User Research
Flexible Click & Collect
Designing a flexible, split fulfilment solution that alleviate customerfrustration due to low stock accuracy
View Project
Multi-Brand Design System
Designing a scalable system that improves consistency, efficiency, and speed‑to‑market across 10+ brands.
View Project
Improved Design Efficiency
Multi-brand supported
Reduced Time to Market
Multi-Brand Design System
Designing a scalable system that improves consistency, efficiency, and speed‑to‑market across 10+ brands.
View Project
Improved Design Efficiency
Multi-brand supported
Reduced Time to Market
Multi-Brand Design System
Designing a scalable system that improves consistency, efficiency, and speed‑to‑market across 10+ brands.
View Project
Improved Design Efficiency
Multi-brand supported
Reduced Time to Market
Multi-Brand Design System
Designing a scalable system that improves consistency, efficiency, and speed‑to‑market across 10+ brands.
View Project
White label child sponsor solution for our partners
Providing a simple, universal, customisable child sponsor platform that other businesses can use on their customer
View Project
User Research
UX/UI Design
User Testing
White label child sponsor solution for our partners
Providing a simple, universal, customisable child sponsor platform that other businesses can use on their customer
View Project
User Research
UX/UI Design
User Testing
White label child sponsor solution for our partners
Providing a simple, universal, customisable child sponsor platform that other businesses can use on their customer
View Project
User Research
UX/UI Design
User Testing
White label child sponsor solution for our partners
Providing a simple, universal, customisable child sponsor platform that other businesses can use on their customer
View Project
User Testing Insights
All user prefer the redesigned flow over the current flow.
Some users didn’t realise discounts had been auto‑applied.
Multi‑step checkout outperformed single‑page flows; users completed required fields more reliably.