Design System Documentation

Design System Documentation

Helping designers and devs build better experiences.

Design System

The Problem

We needed to standardize our approach to UX/UI design at Mercer around a process, toolset, and component library to make practitioners more efficient and create better end-user experiences for our customers.

We were tasked with creating a new UX process, toolset, UI component guide, governance model, and training documentation that both practitioners and stakeholders could use and understand.

Designs

Design System documentation

We decided to use Figma to house all of our work, including the document itself, so there was a single source of truth. Figma made it easy to collaborate and iterate through ideas for our team, who was spread out all over the eastern US, with features like multiplayer design.

Design System governance

We created a governance model that allowed representation from branding, product design, development vendors, and business analysts on a review team to triage requests that came into the design system. This allowed us to validate, justify, better measure success, scope, and impact of future changes.

Design System UX methodology

We recommended each project follow a new UX design methodology which was broken into 3 faces that allowed a user-centric and iterative approach. We defined which project roles would be responsible for each phase to make sure steps weren’t being skipped and the design system was being leveraged properly.

We documented the entire design system and provided training for colleagues to try it out on new projects throughout 2019, using Figma as the backbone.

The Results

We achieved mixed results in 2019, but have seen more broader support throughout 2020. Asking professional to change their daily behaviors and the software they’ve grown use to with their work is challenging. We’ve taken the approach of having the heart of a teacher and sought to educate and provide context of why the design system is beneficial for the entire organization and its customers.

We also incorporated feedback from outside our organization, leveraging the growing community of design experts using Figma to add more flexibility to our UI component library and core design assets.