Product pattern library
A comprehensive omni-channel one-stop shop pattern library for order tracking delivery experience at Woolworths to increase productivity and consistency.
Problem
Design and development teams across Android, iOS, Web, and partner/fleet carrier platforms are working with fragmented and inconsistent order tracking components and patterns spread across three separate libraries. This leads to duplicated effort, slows down the design and development process, hinders consistency in the user experience, and makes it difficult to identify opportunities for improvement and alignment.
3 different teams
As mentioned above in the problem, here is a snapshot example of the 3 teams and their own individual organisation project filing.
3 different experiences
By bringing all the patterns together, we uncovered inconsistencies in components, patterns, features and content across different platforms and carriers. This allowed us to develop a strategy and roadmap to align and uplift, ensuring both an optimal design, development, user experience and a strong brand presence.
Solution
Create a unified order tracking product pattern library that consolidates components and patterns from all three existing libraries into a single source of truth. This master library will provide clear guidelines and reusable elements for Android, iOS, Web, and partner/fleet carrier delivery methods, thereby increasing design and development speed and consistency, fostering cross-platform alignment, and enabling the identification of areas for UX/UI uplift.
Organised patterns
Within a unified Figma file, I structured the patterns logically within pages, mirroring the on-screen flow (e.g., Header - Top, Order Status). For each pattern, I established specific, relevant properties. Universal properties included 'Platform' (Web, Android, iOS) and, for relevant patterns like 'Order Status', variations such as 'Order received', ‘Preparing order’ ‘Packed for delivery’ through to 'Delivered'. This setup enabled rapid design iteration for different platforms and states, accelerating the handoff to development.
Platform pattern sets
Web, Android, iOS pattern variations examples shown:
1. Order status
2. Delivery method
3. Status timeline
4. Proof of delivery
5. Delivery details
6. Header
Future
Set up for success, opportunity to adapt the existing components to accommodate other brands within the Woolworths group. Example shown, header.
Recent design projects
Explore my latest work and design solutions.
