The feedback from our existing and prospective customers was that ELMO’s solutions were outdated compared the modern wave of offerings in the market. Add to that, our developers were struggling to maintain a modern user experience within the current bloated Bootstrap framework.
The goal was to redesign ELMO's suite of HR products by establishing a new modern design system that would help teams build products at scale, providing a modern, consistent, accessible, and delightful user experience for our customers.
We sent system usability scale (SUS) surveys to customers for several of our products and conducted customer and stakeholder interviews to discover common pain points within the product suite.
Information architecture and site maps were studied and documented to understand how we could approach designing a new navigation system that could adapt to any information hierarchy.
We created mood boards, analysed competititors, and researched design systems to establish a design language.
We set out a four key principles.
Make it credible
Be honest and informative
Make it predictable
Maintain an intuitive and consistent experience
Make it inclusive
Accessible for all users from any device
Make it delightful
Easy, simple and pleasant to use
We created a component library within Sketch, designed prototypes, and conducted guerilla tests. To test our concepts usability further, and whether they were techinically feasible, I took the liberty to develop a prototype using React.
After several usability testing rounds, on mobile, tablet, and desktop, we refined our designs further and our new design system was born, which was simply called ELMO Design System (EDS).
EDS was designed from an atomic approach. Like atoms and molecules, there are components and patterns.
The System Font Stack was chosen as the default font with sizes and colours passing W3C AA/AAA. Iconography was inspired by Material Design.
Colours were specifically selected to assist visual impaired users.
Customer Company Call-to-Action and Interaction
Components were designed with touch in mind. W3C accessibility parameters were included for each component.
Existing products were revamped with EDS and presented to the organisation and our customers. The response was overwhelming positive. It ignited momentum within the organisation, laying the framework to create awesome and adaptable products at scale into the future.
The true test for EDS occurred when I took on the challenge to rapidly redesign our newly acquired roster, time & attendance product, Boxsuite.
Throughout the journey with our local development team and Herobrands – our BoxSuite development team in the Ukraine – we honed the ELMO Design System React Component Library, Elements, at scale, establishing new processes and guidelines.
EDS was able to adapt to BoxSuite's sitemap and information architecture successfully.
Because EDS's principle of inclusivity the roster system can be used on a mobile device, a rare feat in the roster, time & attendance space.
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
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
CTO Samuel Sun
General Manager - Product Greg Creighton
Senior Product Manager Peter Scott
Product Manager James Macdonald