saher ahmed
Menu
Close
A look at GWR’s new atomic design system, fully consolidated and streamlined.
BACKGROUND
Understanding the gaps before we built solutions
When I first reviewed GWR’s digital presence, it was clear that their design system was more of an ad-hoc collection of elements than a cohesive framework.
A snapshot of every colour I extracted from GWR’s web and app interfaces.
USER RESEARCH
Auditing the existing library to understand the problem
I began by analysing GWR’s existing web and mobile interfaces by conducting a UX audit of their component library and website. To benchmark, I explored other relevant design systems of Trainline, TFL and LNER to understand scalable structures in the industry.
THE STRATEGIC CHALLENGE
How to standardiSe without starting over
We selected Brad Frost’s atomic design methodology as the backbone by breaking the interface into atoms, molecules, organisms and templates. This approach helped us to leverage existing GWR components, reduce redundancy and provide a structured way to document and maintain the system.
Atomic Design, laid out in Frost’s book, proposes a system for managing complexity.
UPDATED HYPOTHESIS
Optimising, rebuilding existing systems instead
I chose and optimised colours by structuring the brand palette into Signature, Complementary, Warm, and Functional categories, then strategically applying the Signature (Corporate Green/White) and Functional (Red) colours in the UI to ensure brand consistency and guide user focus to key actions.
Design Approach
From atoms to templates: building a scalable system
I mapped all components, colours, and interactions into an atomic hierarchy. Following a library refresh, I reconstructed the ticket selection widget by revamping individual elements.
Atoms were standardised, Molecules combined into reusable patterns, and Organisms formed full-page sections. Templates showed real use cases, and workshops with designers and developers ensured the system was practical and well-documented.
A quick peek inside the Figma file powering GWR’s design system.
Results & Metrics
Measurable impact: faster workflows, fewer inconsistencies, big savings
The system delivered measurable impact:
Design-to-development handoff sped up by ~60%
Visual inconsistencies dropped ~45%
Internal audits showed a 25% decrease in duplicated work.
Developers reported that UI maintenance became simpler and the GWR digital product felt coherent and trustworthy to users. The system also laid the foundation for long-term scalability, making it easier to roll out new features or flows without breaking design consistency.
Reflection
Designing for scalability is important
The key takeaway is that a design system scales when teams feel ownership and confidence to shape it. Future-proofing isn’t about freezing components; it’s about clear governance, collaboration and rituals that keep the system alive. This experience showed me how to redesign visual systems that remain adaptable, consistent and resilient as products evolve.