ELMO Design System
Built from the ground up, the ELMO Design System empowers teams to efficiently create consistent, inclusive, and delightful HR products at scale, readily adapting to evolving customer needs.
Overview
Key Contributions
User Research & Synthesis (Heuristics, Interviews, Surveys, Competitive Analysis)
Information Architecture & Interaction Design
(Sitemaps, User Journeys, Wireframes, Prototyping)Visual Design & System Development
(Mood Boards, Component Library, Accessibility Standards)Technical Prototyping
(ReactJS POC)Usability Testing & Iteration
The Challenge
Existing and prospective customers viewed ELMO's HR solutions as outdated, struggling to compete with modern market offerings. Concurrently, developers faced significant challenges maintaining a modern user experience within a bloated Bootstrap framework.
Our objective was clear: Redesign ELMO's entire HR product suite. This required establishing a new, modern design system to enable teams to build products at scale, delivering a consistent, accessible, and delightful user experience for our customers.
Research & Strategy
We initiated the process by distributing System Usability Scale (SUS) surveys across multiple products and conducting extensive customer and stakeholder interviews. This deep dive revealed common pain points throughout the product suite.
To inform a flexible new navigation system, we meticulously studied and documented existing information architecture and sitemaps.
Concurrently, we developed mood boards, analyzed competitor offerings, and researched leading design systems to establish a robust design language. This foundational research led to four core design principles:
Credible
Be honest and informative.
Predictable
Maintain an intuitive and consistent experience.
Inclusive
Accessible for all users, on any device.
Delightful
Easy, simple, and pleasant to use.
Design & Prototyping
We developed a comprehensive component library in Sketch, crafted prototypes, and conducted guerrilla usability tests. To further validate our concepts' usability and technical feasibility, I independently developed a functional prototype using ReactJS.
Validation & Refinement
Through multiple rounds of usability testing across mobile, tablet, and desktop, we rigorously refined our designs. This iterative process culminated in the birth of the ELMO Design System (EDS).
ELMO Design System (EDS)
EDS was built upon an atomic design methodology, establishing a foundational structure of components and patterns.
Typography: The System Font Stack was selected for its versatility, with font sizes and colours rigorously tested to meet W3C AA/AAA accessibility standards. Iconography drew inspiration from Material Design principles.
Colour Palette: Colours were meticulously chosen to maximise accessibility, particularly for visually impaired users.
Customer Brand Call-to-Action and Interaction
Grayscale
Semantics
Components: All components were designed with touch interactions in mind and rigorously adhered to W3C accessibility parameters.
Impact & Adoption
The rollout of EDS led to a complete revamp of existing ELMO products, which were met with overwhelmingly positive feedback from both the organisation and our customers. This extensive effort resulted in up to a 66% reduction in build times.
This success ignited significant momentum, establishing a robust framework for developing scalable and adaptable products well into the future.
Case Study: Breathe Rota (formally BoxSuite)
The true litmus test for EDS came with the rapid redesign of BoxSuite, now known as Breathe Rota, ELMO's newly acquired roster, time, and attendance product.
Collaborating closely with our local development team and Herobrands (the BoxSuite development team in Ukraine), we honed the ELMO Design System React Component Library, "Elements", at scale. This integration also established new processes and guidelines for system expansion.
EDS successfully adapted to Breathe Rota's complex sitemap and information architecture, demonstrating its versatility.
Leveraging EDS's principle of inclusivity, Breathe Rota became fully functional on mobile devices – a significant differentiator in the roster, time, and attendance market.
Business Impact
Breathe Rota's successful integration and user-centric design made it one of the initial cross-selling modules, contributing to a 20% increase in customer acquisitions for ELMO in 2021.
The Team
Senior UX Designer Verica Nikolic
UI Designer John Rattanachaya
Tech Lead Saman Shafigh
Frontend Web Developer Brandon Choi
Software Engineer Gillian Ng
Software Engineer Raymond Ho
Product Owner Asha Nair
Post Contributions
UI/UX Designer Parimal Chauhan
UX Designer Oscar Marulanda
UX Designer Annette Erickson
Senior Software Engineer Viktor Shlapkin
Software Engineer Joanna Mangahas
Fullstack Developer Frank Liardet
Product Manager Chi Pham
RTA/BoxSuite Engineering Team Herobrands
Special Thanks
CTO Samuel Sun
General Manager - Product Greg Creighton
Senior Product Manager Peter Scott
Product Manager James Macdonald
Other works
Domain Skylight (Soon)Live Project
Sage ESSLive Project
Sage ESS TimesheetsValidated Concept
ELMO Custom Reporting Tool (CRT)Validated Concept
ELMO Report SchedulerValidated Concept
ELMO SurveyValidated Concept
© 2025 Gabs.io
