Order tracking & the post-purchase experience
Woolworths Online's post-purchase screens were quietly doing far more jobs than anyone had designed for. I led a mission-led redesign of My Orders, Order Confirmation and Order Details - easing anxiety and building trust, without changing a single fulfilment process.
Executive summary
Woolworths South Africa's online platform had a quiet post-purchase problem. 'My Orders', 'Order Confirmation' and 'Order Details' served a far wider set of jobs than they were designed for - and across three fulfilment methods and three platforms, one static layout couldn't serve them all. As Lead UX Designer at MakeReign, I led a mission-led redesign that adapts to what the shopper is actually trying to do - easing anxiety and building trust, without changing a single fulfilment process.
Project context
This work formed part of a broader Woolworths digital transformation - a new design system and a redesign of the online experience. The order-tracking initiative grew out of a culmination of user complaints, Voice-of-Customer feedback and usability insights.
Fulfilment processes stayed exactly as they were - the opportunity was communication: easing friction without overhauling back-end logistics. The solution had to work across app, mobile web and desktop, and support three core fulfilment methods - Dash, Standard Delivery and Click & Collect.
Role & ownership
I was Lead UX Designer at MakeReign, working alongside designer Jared Van Wyk and a cross-functional product and engineering team.
- Owned the end-to-end design of My Orders, Order Confirmation and Order Details, across three platforms.
- Shaped the research plan and synthesised analytics, surveys, interviews and moderated usability testing into direction.
- Designed within - and contributed to - the evolving Woolworths design system.
- Held continuity through a mid-project Product Owner change with rigorous documentation and handover.
Problem
Users routinely told us Woolworths lacked order transparency - especially around tracking and delivery communication. Our early survey and research revealed that 'My Orders' and 'Order Details' quietly served a much wider set of jobs than we'd assumed: reviewing past purchases (55%), tracking delivery status (53%), reordering (38%), initiating returns or refunds (26%) and resolving issues with support (10%). Each fulfilment type carried its own behaviours and expectations - these screens were never one-size-fits-all. They needed to adapt to the user's mission.
"How might we create a flexible UI that responds to user intent - not just fulfilment type?"
Constraints
Complexity across variants. Each user could see a uniquely composed screen - driven by fulfilment method, status, content and platform. Three screens, but the system had to support hundreds of combinations without fracturing consistency or scalability.
Cognitive load and continuity. 'My Orders' risked becoming dense, so I prioritised recall-based information with clear hierarchy and modular design. And midway through, our Product Owner changed - so I invested heavily in documentation and handover to protect project fidelity.
Research & evidence
Our process combined analytics, surveys, stakeholder interviews and moderated usability testing on both iOS and Android. A CSAT survey surfaced clear pain points around information clarity, finding order history and inconsistent order status. Participants expected 'My Orders' under 'My Account' rather than 'Shop'; they valued filter chips but found terms like 'Refine' confusing; and they consistently reached for 'Help & Support' for missing items or substitutions - validating its placement.
“Once you get into Orders, it’s easy to use. It’s getting there that’s more difficult.”
Key decisions
Dash users expect real-time tracking and 'chat to shopper'; Click & Collect users want confirmation and pick-up instructions; Standard Delivery users care about timelines and refunds. The screen adapts to the goal - not just the order type.
A timeline-based order status and a cleaner visual hierarchy reduced cognitive load and supported quick scanning - so shoppers could trust where their order was without reading every line.
Delivery-specific CTAs ('Contact Support', 'Rate Shopper') plus contextual reordering, invoice access and returns meant the right action was always one tap away.
Design response
The result is a unified post-purchase experience that lets shoppers self-serve, trust their timeline and act with confidence. We stress-tested it across dozens of order-card variations - by fulfilment method, status, content and platform - and adapted it cleanly across app, mobile web and desktop, all within the evolving Woolworths design system.
Impact
The redesign is yet to go live, so I'd rather be honest than dress up numbers I don't have. The signals of success, though, were clear:
- Early stakeholder alignment across product, engineering and experience teams.
- High satisfaction from usability-test participants on both iOS and Android.
- Ready for development, with order-card patterns documented for the design system.
- A reusable, mission-led model for post-purchase that other streams can adopt.
Reflection
This project reminded me that 'small screens' can carry massive complexity - especially layered with platform, fulfilment and business logic. Three takeaways stuck: mission-led design beats static logic - show users what they need for their current goal, not everything. Communication is UX - even when fulfilment couldn't change, how we informed people had real impact. And consistency isn't sameness - scalable design needs variation, done with intent and clarity. With thanks to Jared Van Wyk and the Woolworths product and experience teams.
AI workflow note
This project ran before today's AI tooling. The models - and the workflows around them - weren't yet where they are now, and weren't ready to be embedded into a design process the way they can be today. This is how I used AI at the time: pragmatically, and within its limits.
I used a chat assistant as a design-to-development support tool - mostly to translate UX decisions into clear development and stakeholder language. Concretely, it helped me:
- Clarify complex cross-functional discussions - between UX, PO, dev and QA - in plain English.
- Interpret questions from developers and pinpoint where the confusion was coming from.
- Turn Figma designs into actionable dev guidance, and separate design intent from technical assumptions - especially when screenshots, tickets and live files were out of sync.
- Draft clear stakeholder responses and summarise meetings into decisions, questions and next steps.
- Surface gaps between the current design and the delivery scope, and document the rationale behind design changes.
This made the process more efficient: I could quickly turn messy comment threads and chat messages into structured summaries and clear next steps, reducing back-and-forth across dev, QA, PO and business. In one instance it helped me uncover and clearly explain a misunderstanding - a purely informational UI element had been misread as functional - so I could realign the team around the latest designs and correct the delivery scope.
The product judgement, the user evidence and the design response stayed firmly human-led. AI handled the translation and the admin; it didn't make the decisions.