Flexible Click & Collect Experience
Flexible Click & Collect Experience
Designing a flexible, split‑fulfilment solution that reduces customer frustration from low stock accuracy—without changing the underlying inventory systems.
Designing a flexible, split‑fulfilment solution that reduces customer frustration from low stock accuracy—without changing the underlying inventory systems.
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
Marketing Managers
Marketing Managers
Marketing Managers
Challenge
Williams lacked a Click & Collect (C&C) option and risked falling behind competitors. Customers actively requested C&C and the business saw it as a lever to reduce delivery costs. However, stock accuracy was ~70%—too low to promise reliable in‑store pickup—and improving stock accuracy was out of scope for this project.
Challenge
Williams lacked a Click & Collect (C&C) option and risked falling behind competitors. Customers actively requested C&C and the business saw it as a lever to reduce delivery costs. However, stock accuracy was ~70%—too low to promise reliable in‑store pickup—and improving stock accuracy was out of scope for this project.
Challenge
Williams lacked a Click & Collect (C&C) option and risked falling behind competitors. Customers actively requested C&C and the business saw it as a lever to reduce delivery costs. However, stock accuracy was ~70%—too low to promise reliable in‑store pickup—and improving stock accuracy was out of scope for this project.
👉 How do we design a C&C experience customers can trust within current technical and operational limits?
👉 How do we design a C&C experience customers can trust within current technical and operational limits?
👉 How do we design a C&C experience customers can trust within current technical and operational limits?
Project Goals
Business
• Introduce Click & Collect to remain competitive.
• Shift some fulfilment from delivery to in‑store pickup to reduce cost per item.
Customers
• Provide a smooth, reliable C&C option despite imperfect stock.
• Reduce frustration from out‑of‑stock surprises at the collection store.
Design Approach
Grounded in the Double Diamond. Discover real problems, define an MVP, explore feasible options, then deliver iteratively with validation at each step.
Project Goals
Business
• Introduce Click & Collect to remain competitive.
• Shift some fulfilment from delivery to in‑store pickup to reduce cost per item.
Customers
• Provide a smooth, reliable C&C option despite imperfect stock.
• Reduce frustration from out‑of‑stock surprises at the collection store.
Design Approach
Grounded in the Double Diamond. Discover real problems, define an MVP, explore feasible options, then deliver iteratively with validation at each step.
Project Goals
Business
• Introduce Click & Collect to match competitors.
• Reduce cost per item by shifting some fulfilment from delivery to store pickup.
Customers
• Provide a smooth and reliable Click & Collect experience.
• Reduce frustration caused by out-of-stock items at collection stores.
Design Approach
To ensure we’re solving the right problems in the right way, we ground our work in the Double Diamond process.
User Research
Field Research
Visited a store to observe workflows and speak with staff (briefly, during quieter moments)
User Research
Field Research
Visited a store to observe workflows and speak with staff (briefly, during quieter moments)
User Research
Field Research
Visited a store to observe workflows and speak with staff (briefly, during quieter moments)
Field Research Insights
After conducting interviews and brief on-site inspections (as staff were busy with their customers), we got several discoveries:
After conducting interviews and brief on-site inspections (as staff were busy with their customers), we got several discoveries:
After conducting interviews and brief on-site inspections (as staff were busy with their customers), we got several discoveries:
Customers often ask staff to hold items, but staff can’t guarantee due to walk‑in demand.
Only 2–3 staff per shift juggling walk‑ins, online orders and phone calls.
Missed calls during peaks are common.
Competitor Review & Service Safari
Analysed 5 online experiences and visited 3 stores to benchmark:
Analysed 5 online experiences and visited 3 stores to benchmark:
Analysed 5 online experiences and visited 3 stores to benchmark:
Competitor Research Insights
If any item is out of stock, checkout can become blocked—few alternative paths.
Some brands let users set a preferred store.
Status updates can be delayed or labelled in confusing ways.
Journey Map
Mapped the end‑to‑end C&C journey (browse → cart → checkout → pick/pack → notify → collection) to identify failure points with our current systems and opportunities to outperform competitors.
Mapped the end‑to‑end C&C journey (browse → cart → checkout → pick/pack → notify → collection) to identify failure points with our current systems and opportunities to outperform competitors.
Mapped the end‑to‑end C&C journey (browse → cart → checkout → pick/pack → notify → collection) to identify failure points with our current systems and opportunities to outperform competitors.
Key Painpoints
Painpoint
Painpoint
Painpoint
Single out‑of‑stock item blocks the whole order at checkout.
Single out‑of‑stock item blocks the whole order at checkout.
Single out‑of‑stock item blocks the whole order at checkout.
Painpoint
Painpoint
Painpoint
Insufficient pickup instructions & timeframes across the journey.
Insufficient pickup instructions & timeframes across the journey.
Insufficient pickup instructions & timeframes across the journey.
Painpoint
Painpoint
Painpoint
Nil pick (store unable to fulfil) with no clear recovery.
Nil pick (store unable to fulfil) with no clear recovery.
Nil pick (store unable to fulfil) with no clear recovery.
Painpoint
Painpoint
Painpoint
Users repeatedly re‑select a preferred store for each order.
Users repeatedly re‑select a preferred store for each order.
Users repeatedly re‑select a preferred store for each order.
Painpoint
Painpoint
Painpoint
Order status is unclear across the lifecycle, increasing anxiety.
Order status is unclear across the lifecycle, increasing anxiety.
Order status is unclear across the lifecycle, increasing anxiety.
Painpoint
Painpoint
Painpoint
Some customers lack time to collect within a short window.
Some customers lack time to collect within a short window.
Some customers lack time to collect within a short window.
Ideation
After prioritising MVP problems, we ideated solutions, clustered them by theme, and shortlisted the most promising options for an engineering feasibility check.
Ideation
After prioritising MVP problems, we ideated solutions, clustered them by theme, and shortlisted the most promising options for an engineering feasibility check.
Ideation
Once we prioritised what we should tackle first, we had multiple ideation session according to different touch points and pianpoints.
Impact vs Effort
After clustering ideas, we held a feasibility session with engineering to assess build complexity. High-appeal concepts—like cross-store pickup and ship-to-store—required heavy back-end work with uncertain demand, so we parked them as nice-to-haves.
Impact vs Effort
After clustering ideas, we held a feasibility session with engineering to assess build complexity. High-appeal concepts—like cross-store pickup and ship-to-store—required heavy back-end work with uncertain demand, so we parked them as nice-to-haves.
Painpoints vs Solution
Painpoint
Painpoint
Painpoint
Single out‑of‑stock item blocks the whole order at checkout.
Single out‑of‑stock item blocks the whole order at checkout.
Single out‑of‑stock item blocks the whole order at checkout.
Solution
Solution
Solution
Implementing split fulfilment.
• In-stock items would be reserved in-store.
• Out-of-stock items shipped to the customer.
• The free delivery threshold applied at the order level, balancing cost savings with customer satisfaction.
Implementing split fulfilment.
• In-stock items would be reserved in-store.
• Out-of-stock items shipped to the customer.
• The free delivery threshold applied at the order level, balancing cost savings with customer satisfaction.
Implementing split fulfilment.
• In-stock items would be reserved in-store.
• Out-of-stock items shipped to the customer.
• The free delivery threshold applied at the order level, balancing cost savings with customer satisfaction.
Painpoint
Painpoint
Painpoint
Nil pick (Fail to fulfil the order)
Nil pick (Fail to fulfil the order)
Nil pick (Fail to fulfil the order)
Solution
Solution
Solution
Proactive comms + make‑good
Email + SMS notifications with clear next steps.
Offer a $10 voucher for the next order.
Proactive comms + make‑good
Email + SMS notifications with clear next steps.
Offer a $10 voucher for the next order.
Proactive comms + make‑good
Email + SMS notifications with clear next steps.
Offer a $10 voucher for the next order.
Painpoint
Painpoint
Painpoint
Repeated store selection
Repeated store selection
Repeated store selection
Solution
Solution
Solution
Remember preferred store
Guest: remember until session ends.
Logged‑in: store on account for future orders.
Remember preferred store
Guest: remember until session ends.
Logged‑in: store on account for future orders.
Remember preferred store
Guest: remember until session ends.
Logged‑in: store on account for future orders.
Painpoint
Painpoint
Painpoint
Insufficient pickup guidance
Insufficient pickup guidance
Insufficient pickup guidance
Solution
Solution
Solution
Informative comms
Provide pickup instructions + timeframes throughout the journey (checkout, confirmation, reminder).
Informative comms
Provide pickup instructions + timeframes throughout the journey (checkout, confirmation, reminder).
Informative comms
Provide pickup instructions + timeframes throughout the journey (checkout, confirmation, reminder).
Painpoint
Painpoint
Painpoint
Limited collection window
Limited collection window
Limited collection window
Solution
Solution
Solution
More flexibility
Extend collection window to 14 days.
Allow customers to nominate a friend to collect on their behalf.
More flexibility
Extend collection window to 14 days.
Allow customers to nominate a friend to collect on their behalf.
More flexibility
Extend collection window to 14 days.
Allow customers to nominate a friend to collect on their behalf.
Additional Quick Wins
Additional Quick Wins
Additional Quick Wins
Consist the item status across the post-purchase journey
Consist the item status across the post-purchase journey
Consist the item status across the post-purchase journey
Create a "Click & Collect" area in store for faster collection
Create a "Click & Collect" area in store for faster collection
Create a "Click & Collect" area in store for faster collection
Concept Sketching
Translated concepts into sketches and lo‑fi wireframes for key touchpoints: PDP, cart, checkout and post‑purchase communications.
Concept Sketching
Translated concepts into sketches and lo‑fi wireframes for key touchpoints: PDP, cart, checkout and post‑purchase communications.
Concept Sketching
Translated concepts into sketches and lo‑fi wireframes for key touchpoints: PDP, cart, checkout and post‑purchase communications.
Lo-Fi Design Exploration
Bi‑weekly 30‑minute reviews with the Product Owner, Marketing and Engineering to align on direction and capture feedback for iteration.
Lo-Fi Design Exploration
Bi‑weekly 30‑minute reviews with the Product Owner, Marketing and Engineering to align on direction and capture feedback for iteration.
Lo-Fi Design Exploration
Bi‑weekly 30‑minute reviews with the Product Owner, Marketing and Engineering to align on direction and capture feedback for iteration.
HI-Fi Prototype & User Testing
Once aligned, I built high-fidelity Figma prototypes to test.
Try to find out:
Do customers understand split fulfilment?
Can they confidently change their preferred store?
Do they feel informed enough to complete purchase and collection?
HI-Fi Prototype & User Testing
Once aligned, I built high-fidelity Figma prototypes to test.
Try to find out:
Do customers understand split fulfilment?
Can they confidently change their preferred store?
Do they feel informed enough to complete purchase and collection?
HI-Fi Prototype & User Testing
Once aligned, I built high-fidelity Figma prototypes to test.
Try to find out:
Do customers understand split fulfilment?
Can they confidently change their preferred store?
Do they feel informed enough to complete purchase and collection?
User Testing Insights
All participants grasped the split-fulfilment concept without much efforts.
Confidence in order completion without much confusion.
Some detail interactions and copy needs to refine.
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.
Feedback
"I guess it's C&C stock information? yes, because it's a C&C test."
Users didn't realised that the promo code has been applied.
"I guess it's C&C stock information? yes, because it's a C&C test."
Users didn't realised that the promo code has been applied.
Design iterate
Design iterate
Design iterate
Design iterate
Provide both C&C and Home delivery stock information
Provide both C&C and Home delivery stock information
Provide both C&C and Home delivery stock information
Design iterate
Design iterate
Design iterate
Design iterate
Automactially allocate the item into different fulfilment method according to stock availability.
Automactially allocate the item into different fulfilment method according to stock availability.
Automactially allocate the item into different fulfilment method according to stock availability.
Feedback
"I am not sure why it not allowing me to checkout" (CTA disabled due to item out of stock)
Splitting detail inputs into multiple steps seems work better as user might miss some require input field from observation
Splitting detail inputs into multiple steps seems work better as user might miss some require input field from observation
Quick wins
Quick wins
Quick wins
Quick wins
Item status across the post-purchase journey
Item status across the post-purchase journey
Item status across the post-purchase journey
MVP
Design system contributions
Extended our multi-brand design system with 20+ reusable Click & Collect components and states to ensure consistency and speed.
Design system contributions
Extended our multi-brand design system with 20+ reusable Click & Collect components and states to ensure consistency and speed.
Design system contributions
Extended our multi-brand design system with 20+ reusable Click & Collect components and states to ensure consistency and speed.
Complex Unknowns → Small Tasks
We created a detailed user flow and listed every unanswered interaction question to prevent late-stage design changes or scope creep. After a walkthrough with Front-End, Back-End and QA, we surfaced several open questions that could impact the experience if left unresolved.
Complex Unknowns → Small Tasks
We created a detailed user flow and listed every unanswered interaction question to prevent late-stage design changes or scope creep. After a walkthrough with Front-End, Back-End and QA, we surfaced several open questions that could impact the experience if left unresolved.
Complex Unknowns → Small Tasks
We created a detailed user flow and listed every unanswered interaction question to prevent late-stage design changes or scope creep. After a walkthrough with Front-End, Back-End and QA, we surfaced several open questions that could impact the experience if left unresolved.
Treat each unanswered question as a small, actionable problem for a focused FE/BE/Design huddle. As we resolve them, we continuously refine the user flow.
Treat each unanswered question as a small, actionable problem for a focused FE/BE/Design huddle. As we resolve them, we continuously refine the user flow.
Treat each unanswered question as a small, actionable problem for a focused FE/BE/Design huddle. As we resolve them, we continuously refine the user flow.
Example Problem — Cart Merge (Guest → Logged-in)
When a guest signs in, the cart merge can change their preferred store, stock availability, and fulfilment options. We needed to make this transition seamless so customers weren’t confused or disrupted during checkout.
Example Problem — Cart Merge (Guest → Logged-in)
When a guest signs in, the cart merge can change their preferred store, stock availability, and fulfilment options. We needed to make this transition seamless so customers weren’t confused or disrupted during checkout.
Example Problem — Cart Merge (Guest → Logged-in)
When a guest signs in, the cart merge can change their preferred store, stock availability, and fulfilment options. We needed to make this transition seamless so customers weren’t confused or disrupted during checkout.
Solution
Solution
Solution
On login, the back-end merges the guest cart with the account cart, checks availability at the account’s preferred store, and assigns each line to the appropriate fulfilment option based on stock.
On login, the back-end merges the guest cart with the account cart, checks availability at the account’s preferred store, and assigns each line to the appropriate fulfilment option based on stock.
On login, the back-end merges the guest cart with the account cart, checks availability at the account’s preferred store, and assigns each line to the appropriate fulfilment option based on stock.
Designing Beyond the Screen
knew this wasn’t just a UI problem. So I tackled the service layer too:
Staff Process
Introduced a “Click & Collect ready area” in stores, so reserved items wouldn’t accidentally be sold to walk-ins.
Designing Beyond the Screen
knew this wasn’t just a UI problem. So I tackled the service layer too:
Staff Process
Introduced a “Click & Collect ready area” in stores, so reserved items wouldn’t accidentally be sold to walk-ins.
Designing Beyond the Screen
knew this wasn’t just a UI problem. So I tackled the service layer too:
Staff Process
Introduced a “Click & Collect ready area” in stores, so reserved items wouldn’t accidentally be sold to walk-ins.
Comms Journey
Designed new email/SMS reminders and failure recovery messages (e.g., voucher if fulfilment failed).
Comms Journey
Designed new email/SMS reminders and failure recovery messages (e.g., voucher if fulfilment failed).
Comms Journey
Designed new email/SMS reminders and failure recovery messages (e.g., voucher if fulfilment failed).
Comms Designs
Survey Insights
For clear picture of our painpoints, I've extracted the key frustrations based on our user surveys.
In checkout, ~18% of negative feedback relates to pricing and promo code issues.
Before checkout, ~30% negative feedback relates to filtering
In user portal, ≈ 20% negative feedback relates to order tracking & saved info management.
Competitor Review & Service Safari
Since this is a new product for us, it’s good to see how our competitors doing with this functionality.
I analysed 5 competitors online, conducted in-store visits at 3.
Competitor Research Insights
Checkout stuck if an item is out of stock, no alternative solution.
Some competitors allow user to set their pick up store to preferred store.
Order status are not up to date, some with confused headings.
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
Streamlining Checkout experience
A result‑driven redesign that lifted conversion and revenue while reducing friction at Williams.
View Project
+19.32% Revenue per user
+23.3% Conversion Rate
Record revenue at Click Frenzy ’24
Streamlining Checkout experience
A result‑driven redesign that lifted conversion and revenue while reducing friction at Williams.
View Project
+19.32% Revenue per user
+23.3% Conversion Rate
Record revenue at Click Frenzy ’24
Streamlining Checkout experience
A result‑driven redesign that lifted conversion and revenue while reducing friction at Williams.
View Project
+19.32% Revenue per user
+23.3% Conversion Rate
Record revenue at Click Frenzy ’24
Streamlining Checkout experience
A result‑driven redesign that lifted conversion and revenue while reducing friction at Williams.
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