"Drafty" Design System

Senior UX / UI Designer

During my time at Mercer, I created a design system called Drafty. It was initially built in Sketch and featured a 3 tier "fidelity" based system.


This design system took into account Mercer's branding guidelines and development patterns into account when building components for Sketch.

During my time at Mercer, I created a design system called Drafty. It was initially built in Sketch and featured a 3 tier "fidelity" based system.


This design system took into account Mercer's branding guidelines and development patterns into account when building components for Sketch.

Origin Story

Origin Story

When I started at Mercer, I worked with a team of designers and developers at a remote office in Massachusetts. We worked together for a couple of weeks and went fully remote from there.


Over the course of the years we worked on separate projects with varying levels of crossover with each other. We created standalone webapps, sites and some for the main site (www.mercer.com).

When I started at Mercer, I worked with a team of designers and developers at a remote office in Massachusetts. We worked together for a couple of weeks and went fully remote from there.


Over the course of the years we worked on separate projects with varying levels of crossover with each other. We created standalone webapps, sites and some for the main site (www.mercer.com).

What we needed?

What we needed?

As a remote design team, we needed a way to maintain visual consistency across our personal work and the teams we worked with.


We also wanted to be efficient in the way that we approached designing our solutions.

As a remote design team, we needed a way to maintain visual consistency across our personal work and the teams we worked with.


We also wanted to be efficient in the way that we approached designing our solutions.

I came up with a solution of my own

I came up with a solution of my own

For a long time, I studied CSS and HTML. CSS Zen Garden was an inspiration during my early career. The more I learned about it the more I wanted to learn about frameworks then design systems from there.


I decided I would create a design system utilizing our brand guidelines and components that enabled the designer to choose which fidelity they wanted to work in with the flip of a switch.

For a long time, I studied CSS and HTML. CSS Zen Garden was an inspiration during my early career. The more I learned about it the more I wanted to learn about frameworks then design systems from there.


I decided I would create a design system utilizing our brand guidelines and components that enabled the designer to choose which fidelity they wanted to work in with the flip of a switch.

Challenges

Challenges

  • Development teams not directly part of the design system team

  • Learning curve for using design system components as first time users

  • Teammates we're not collocated, which at times made training and collaboration difficult

  • Source of truth located in different places

  • Development teams not directly part of the design system team

  • Learning curve for using design system components as first time users

  • Teammates we're not collocated, which at times made training and collaboration difficult

  • Source of truth located in different places

Metrics

Metrics

Want to talk about this a bit more?

Want to talk about this a bit more?

I'm happy to share more in a 1:1 conversation about this project, my role and how I worked with on this system and distributed it throughout the organization.

I'm happy to share more in a 1:1 conversation about this project, my role and how I worked with on this system and distributed it throughout the organization.

Drop me a line