HOME PLAY BIO


Role: UX and Visual Designer

Time to read: 5-7 mins

Duration: 4 months

Others: Team Lead and stakeholders

Building an accessible design system for online tools for Mercer's career team

Disclaimer: Due to confidentiality and as this was an internal project, I can't really share exact data points, links, or images that are being used in the design system.

mercer design system cover image
Mercer design system: Cover image

Problem

We already had Invision's Mercer Style guide (for the whole overall site) and Marsh's old design system in the system that was previously being used. But the problems were that there were no accessibility guidelines, no exact dimensions, and as these tools were even sold as separate products, that made the consistency hazy.

Also, the digital design debt was huge as for years the team focused more on selling offline deliverables in form of catalogues, pamphlets, etc.

I saw this problem and approached my team-lead with the idea and a possible solution of building a design system for our growing team of more than 100 members that focused on the career (including hiring, employability factors, vacations, etc.) domain's digital tools.


Approach

Although we had the already available style guide and the old design system, we decided to build this project from scratch and got an approval on it from my stakeholders (team-lead, managers, and senior colleagues) as well. This was purely because it made more sense. With Figma's variants and components, the power of templatising for designers was very tempting.

The next part was to understand that a design system is template guide for better use of the components and to maintain consistency.

Bussiness goals

  1. We wanted to achieve consistency in all the products from future and eventually, lead to a better user experience.
  2. Improved velocity in designing/developing new features and shorter time to market
  3. A simplified, more efficient (and less error-prone) process for both the designers and the developers. Creating a template for future designers to use the atoms in the system to build new products. This will reduce the time effort and will increase creativity.
  4. To achieve maximum possible accessibility in our future designs and products. This was being pushed in the whole organisation.

Design goals

  1. Lower the design debt and make the tools more functional and easy to use. The thought behind this was that most of the users were using these tools as an easier and fast method. Going for new visual trends was not the right approach for the scope of the system.
  2. Create an Accessible color combination guide for designers and developers going forward.

Constraints

  1. Reducing learnability: As TAAP already had X number of subscribers, we didn't want them to have different experience for the digital tools from the website.
  2. Less color options: As no designers were currently working on the digital tools, the developers were solely working on them with the analysts. This created a lack of creativity when choosing the right color combinations for the target audience.
  3. Accessibility debt: This is growing issue in designs all over and needs to be addressed from the foundations. There was no accessibility guidelines being used.
  4. Digital products illiteracy: The team had great designers but all of them were focused on print media and the digital side of design was very new to them.

Inspiration

The previously used design system and Invision's mercer style guide were seen as references. More inspiration was taken from Google's Material Design System.

We already had Mercer's Brighter Guidelines, which was the design language being used in all the products. This includes the Design principles, Typography, and Colors. This guide was used in all the Mercer publications.

Mercer already has a pretty large icon library and changing that would make the whole process redundant. So, we just used all the functional icons available to us.

A brighter palette
A Brighter Color Palette - 1

Building the MVP

Speaking in terms of the Atomic design system, the atoms and molecules for the design system were defined beforehand.

Thanks to the Brighter design guidelines, we already had:

  1. Design principles
  2. typography
  3. Color palette
  4. Icons
A brighter palette
A Brighter Color Palette - 2
Brighter typography
A Brighter typography - 2
icons
Brighter icons

But the digital tools needed a lot more than this. So, after careful thinking, inspirations, and brainstorming with the developers and designers, the possible atoms were set to be included:

  1. Input fields
  2. Buttons
  3. Selection controls
  4. Table
  5. Dropdown
  6. Seperators

The possible molecules and guides in the system were:

  1. Data visualisation (for color inspiration)
  2. Accordions and tabs
  3. Alerts
  4. CTA Cards
  5. Accessible color combination guide
  6. Styles and types

For all the components in the Figma file, there were easy variants created for better usability and templatisation.

template example
Variant template

Atoms

Input field

  1. Added different forms, states and types for input fields
  2. Ideal Height, Width percentage added for developers
  3. Labels of the components of the input fields added for better understanding
input field
Input field

Buttons

  1. Added different forms, states and types for buttons
  2. Created an accessibility check sheet with the Contrast ratio, Large text ratio, and small text ratio
  3. Different sizes of buttons were selected for better usability
button
Buttons

Selection controls

  1. Added different forms, states and types for selection controls
  2. Added Do's and dont's for accessibility based on the colors on how to use the controls in the tools
  3. Added Radio and checkbox
selection controls
Selection controls

tables

  1. Created cells for rows and columns
  2. Added different styles of tables
  3. Added variation of colors to show how to use color in tables
Table
Table
  1. Added sizes of different dropdowns
  2. Added color combinations and variations on how to use dropdowns
Dropdown
Dropdown

Molecules

Accordions and Tabs

  1. Added styles and states
  2. Added labels and different sizes
Accordions and tabs
Accordions and Tabs

Alerts

  1. Added variations and styles of alerts
  2. Keeping in check the color contrast
alerts
Alerts

Data Visualization

As we already had a subscription with a tool that was helping us in the development of data charts, we created this section just for the color combinations usage and inspiration.

data visualization
Data visualization

Accessible Color Combination Guide

This was created to give developers, analysts, and designers to take a look before creating.

color combination guide
Color combination guide

Points to be noted for this section:

  1. The combinations were divided into Monotones, duotones, and tritones.
  2. AAA accessibility was maintained.
  3. Insights like #XXXXX color is the best to use in this case, was presented and shown in this section.
  4. Do's and dont's with reasoning was provided.
  5. A darker Theme UI, for better contrast ratios, was presented.
Dark UI combination
Dark UI theme

Styles and types

For the use and creation of calculators and dashboards, the main focus of the system, we created a section which showed use cases of how to use column and row structures.

This section gave an overview on how to view and create the more complex tools while using our design language.

Calculator styles
Calculator styles

Testing

The next step to test the first iteration of our design system was by designing and developing it at real time.

The important metric to analyse here was the time saving hours.

Calculator tool blurred image
Calculator tool (image blurred intentionally)

Outcomes

  1. As we built a previously designed product using the system, it helped save us 67% of the our time. This even also included color variation options and selections.
  2. Another great outcome was that the sanity of the code across all verticals will potentially be back. The current UI had many small differences.
  3. The new designs were WCAG compliant.
  4. The documentation of this project was loved by the global team as well, and it is in the possible process of being merging with Mercer's TAAP's global design system.

Learnings and challenges

  1. While building this, I had the privilege of organizing some knowledge sharing sessions around user interfaces, style guides, and design systems with the team and leaders. This helped me learn more about the design impacts.
  2. Always keep creating a possible deliverable simultaneously. This will help you get the right direction and the system to be error proof.
  3. One initial challenge I faced while building this was convincing the leaders the value of the system. I had to explain it through a presentation and fortunately, my team-lead was on my side.

That’s all, folks!

If you’re reading this, then thank you so much for sticking to the end. I really enjoyed working on this project.