Standardising Digital Experience Across 5 Brands with a Unified Design System
Coles Group
Design System Vision | Multi-Platform Consistency | Design System Delivery | Cross-Functional Collaboration | Operational Discipline & Team Culture
Leading the design and build of a five-brand, platform-agnostic design system across Web, iOS, Android, and Xamarin—standardising UI components and accelerating design-to-development handoffs.
Overview & Context
Design at Coles was in a state of disarray—inconsistency ruled, documentation was lacking, and both designers and developers were struggling.
To support its ambitions for unified, efficient, and customer-centric digital experiences across its many brands, Coles needed a new UI foundation. The business decided to invest in creating a multi-brand, platform-agnostic design system—Rocket—to serve all digital channels (web, mobile, internal systems, and point-of-sale).
I was brought in as the Product & Design Lead to guide Rocket from concept to implementation, with a focus on streamlining workflows and enforcing consistency across Coles’ digital ecosystem.
1/4 Challenge & Problem
Coles Group was facing significant challenges in driving consistency across their diverse digital environments. The task was to establish a streamlined backbone of design and DevOps, anchored by core tokens and components, to create a unified design language across platforms. The opportunity was to build a system that not only solved these inconsistencies but also improved the efficiency of the design-to-development handoff.
2/4 My Role & Approach
As the product and design lead, I coordinated a multidisciplinary team—including brand designers, UXers, business analysts, FED & BED developers, and solution architects—and oversaw every phase of the Rocket Design System. My approach was built on three key principles: foundational analysis, detailed design, and solution architecture. These allowed me to establish the processes for creating and maintaining the system.
Driving Rocket forward required solving strategic, operational, and technical challenges in parallel—and executing in a way that built lasting momentum.
When I joined, the program lacked direction and leadership visibility. I initiated strategic alignment sessions to define a shared vision and roadmap. To keep leadership informed and build trust, I also introduced regular reporting with fortnightly updates and senior stakeholder overviews.
Operationally, the team lacked structure and cohesion. I co-developed a detailed program plan, introduced a fortnightly operating model, and implemented tools and rituals—such as Kanban boards, standups, and design jams—to improve collaboration, drive accountability, and foster a high-trust culture.
On the technology front, off-the-shelf solutions were inadequate for Coles Group’s complex needs. I led the decision to build a custom backend that managed design updates, compiled code, and centralized system hosting. To promote adoption and scalability, I also championed the creation of a public-facing documentation website, complete with components, templates, code samples, and usage guidelines.
3/4 Process & Execution
To bring Rocket to life, we moved through three tightly coordinated phases, each building on the previous to ensure a strong foundation and scalable execution.
Discovery: Conducted a gap analysis across iOS, Android, and Xamarin platforms, mapped native and custom components, consolidated brand elements into reusable assets, and defined the rollout and maintenance strategy.
Detailed Design: Developed a white-label component system anchored by design tokens, and laid the foundation for a comprehensive documentation ecosystem.
Development & Implementation: Partnered closely with platform teams to embed the design system into the dev pipeline, enabling real-time propagation of component updates across platforms and reducing manual effort.
Through this approach, Rocket evolved from an aspirational concept into a foundational system that unified digital experiences across Coles Group’s brands and platforms.
4/4 Results & Impact
Increased efficiency: Reduced design-to-development handoff times by establishing reusable component libraries and automating documentation workflows.
Enhanced consistency: Unified design languages across web, mobile, internal systems, and point-of-sale channels—supporting five distinct brands with a shared visual and functional foundation.
Improved delivery quality: Embedded component updates into the dev pipeline, ensuring real-time propagation across platforms with minimal manual intervention.
Strengthened team collaboration: Created a common language and culture of shared ownership between design, development, and product teams.
Positive executive visibility: Established regular program reporting, improving leadership engagement and securing ongoing investment for the design system initiative.
Learnings & Next Steps
Leading Rocket taught me invaluable lessons in building design systems from the ground up in a complex, multi-brand environment. Key takeaways included:
Stakeholder alignment is foundational: Early and ongoing alignment between design, development, product, and executive stakeholders was critical to breaking down silos and accelerating momentum.
Operational discipline drives culture change: Establishing ways of working—clear plans, workflows, ceremonies, and rituals—transformed a fragmented team into a high-performing one.
Adaptability in technology choices is crucial: When off-the-shelf solutions didn’t meet our needs, a custom-built platform enabled us to create a system fit for Coles’ scale and complexity.
Moving forward, I continue to focus on fostering strong team cultures, making pragmatic, scalable technology choices, and driving digital transformation efforts with strategic clarity and collaboration at the core. This experience fundamentally shaped how I lead multidisciplinary teams and steward large-scale design initiatives.