Building an award-winning design system at ELMO

The Results

• 45+ components shipped across ELMO's HR product suite, adopted by 50+ developers
• Won the ELMO Engineering Excellence Award, as voted by the Architecture Guild
• Successfully made the business case to bring in Thinkmill as a specialist front-end engineering partner
• Established a unified design language — tokens, content guidelines, interaction patterns — across a product serving 3,000+ organisations
• Designed future-state product screens to validate the system at scale
• Championed a culture shift toward cross-disciplinary collaboration between design and engineering

The challenge

ELMO is a well-established HR software provider, serving over 3,000 organisations and 2 million end users across Australia, New Zealand, and the UK. By the time I joined in mid-2021, the product had grown significantly — but the design and engineering infrastructure hadn't kept pace.

There was an existing styled component library that was doing the job, but it was disconnected from design intent. There were no design tokens, no shared Figma library that matched what engineering was actually building, and no documentation or governance to support adoption. Design consistency had eroded across the product suite, and teams were working from different conventions without a common reference point.

Recognising the gap — and doing something about it

One of the first things I assessed was whether ELMO had the in-house front-end engineering expertise to build a design system to the standard the product required. The honest answer was no. The appetite was there, but the specialisation wasn't — and a poorly built system would be worse than none at all.

Rather than working around this constraint, I made it visible. I built a case for senior stakeholders to invest in bringing in external expertise: the cost of continued inconsistency, the risk of building on weak foundations, and the opportunity to partner with a team who had done this at scale before.

Thinkmill — a Sydney-based front-end consultancy with deep experience in design systems and a roster that included Atlassian — was the right fit. I presented the case, gained alignment, and led the engagement from the design side throughout.

Laying the foundations

With Thinkmill onboarded and the direction set, I led the design work underpinning the entire system. This started with the foundations: a semantic design token system covering colour, typography, spacing, sizing, and theming. Tokens weren't just a design artefact — they were the connective tissue between Figma and the engineering implementation, and the thing that would eventually enable ELMO's customers to apply their own brand colours with accessible contrast out of the box.

From there I designed and built out the core component library in Figma — the single source of truth that would map directly to what Thinkmill were implementing in React, TypeScript, and Emotion. Every component was designed with accessibility and developer experience in mind, and validated against engineering constraints before being signed off. The risk of design and engineering diverging again was one we actively worked to prevent.

Documentation

A design system without documentation is just a library. One of the consistent failure modes of design systems is that components get built without clear guidance on when and how to use them — leaving teams to make their own interpretations, which quickly diverges from the original intent.

I worked to ensure that the design foundations, components, and usage guidelines were documented in a way that both designers and engineers could use without needing to chase down the original author. Thinkmill built this out into a world-class documentation site with live-editable code examples and automatically generated prop specifications. Together, the result was a system that teams could actually adopt independently.