ELMO Design System

Company ELMO Software
Role Senior UX Designer
Platform SaaS
Date 2018 - 2020
Product (Q3 2020)

The ELMO Design System, built from the ground up, enables teams to create credible, inclusive, predictable, and delightful products at scale, adapting to the customer's ever changing needs in the HR space.

Opportunity

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 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.

Learn

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

Design

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.

ELMO React proof of concept prototype

ELMO React proof of concept prototype

Validate

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).

elmo-eds-logo

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.

elmo-eds-ux-typography

Colours were specifically selected to assist visual impaired users.

Customer Company Call-to-Action and Interaction

elmo-eds-ux-colours-main-1

Grayscale

elmo-eds-ux-colours-dark

Semantics

elmo-eds-ux-colours-semantic-1

Components were designed with touch in mind. W3C accessibility parameters were included for each component.

elmo-design-system-components

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.

elmo-learning-list-table
elmo-learning-grid

The true test for EDS occurred when I took on the opportunity to rapidly redesign our newly acquired roster, time & attendance product, Boxsuite.

Throughout the journey with our development team and Herobrands – our BoxSuite development team in the Ukraine – we enriched the ELMO Design System React Component Library, Elements, at scale, establishing new processes and guidelines.

elmo-eds-elements
elmo-design-system-elements-react-component-library
elmo-design-system-elements-react-component-library-2-1

EDS was able to adapt to BoxSuite's sitemap and information architecture successfully.

Weekly roster view

Weekly roster view

Daily roster view

Daily roster view

Because EDS's principle of inclusivity the roster system could be used on a mobile device, a rare feat in the roster, time & attendance space.

elmo-roster-time-attendance-mobile-weekly-roster
elmo-roster-time-attendance-mobile-roster-shirt

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. RTA/BoxSuite 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.

©  G A B S  2 0 2 0      Built with Semplice

Email      LinkedIn     Twitter