Evisort Design System

Design Lead • Design Ops 

Project overview

I was tasked with leading the improvement of the Evisort Design System. The goal of the system was to provide a single source for components, patterns, and styles. We also wanted to unify disjointed experiences so that they are visually cohesive and appear to be part of the same ecosystem.

My role

I was the design lead for this project. I worked with a lead engineer, a junior designer, and a junior engineer. We collaborated closely with the entire product team to get alignment and prioritize components for each feature team.

Problems

  • Huge gaps between design (Figma)  and code (Storybook)
  • Not all teams were using it because they didn't feel incentivized to use it which lead to developers hard-coding designs. 
  • No documentation for the previous design system
  • Accessibility wasn’t considered when the design system was built
  • No semantic tokens were used

As a result: 

  • Leadership started to question the value of having a design system.
  • Without a strong design system, the feature projects became overwhelming and things started to crumble as we built more features.

Our Success Metrics

We would know if the design system was successful if everyone started to use it as part of their design/implementation process.

How do we know if people are using it? They are:

  • Filing bugs
  • Giving feedback
  • Asking questions

We would know that we are very successful if…

  • External stakeholders start answering Design System-related questions in the Slack Channel.

Team Principles

  • “Feedback is a gift”
  • Make it fun
  • Knowledge sharers, not gatekeepers
  • Encourage everyone to contribute

Strategies

  • Focus on small wins rather than a huge goal
  • Ensure all the work is tracked properly
  • Host a daily work session to keep the momentum going and keep each other accountable
  • Host a weekly clean-up session with the broader team

Roadmap


Immediate Actions

Semantic tokens & Consolidation


Near Term

Building Fast 


Long Term

Design System Adoption Across all Feature Teams

Immediate Actions

Semantic tokens & Consolidation

Semantic tokens & Consolidation

Context/Problem:
Design tokens like colour and typography are named in a semantic and meaningful way. For example, a designer doesn’t know when to use gray 100 or gray 200 which makes the final outcome prone to inconsistencies and errors.

Actions:
Created a set of semantic tokens for colour, icon, spacing, elevations, radii, and sizes.

When we name the token semantically, we ensure each name is meaningful and leaves less room for interpretation. 

Result:
Massively reduce the inconsistencies and errors.

Less is More

Context/problem:
A lot of primitive tokens were created from the past with very similar styles.

It gave too much flexibility which made the system hard to maintain. For example: we had 23 typography tokens, while big companies like IBM and Google only have around 10 typography tokens.

Action:
Ensure we only have a limited set of tokens.

Reduce the number of tokens:

  • Typography 23 to 10
  • Spacing 21 to 8

Result:
The system became very easy to maintain.

Document Everything

Context/ Problem:
The design system wasn’t properly documented. As a result, there was a lot of inconsistency and misuse of the components.

Action:
Created a template/ checklist so every contributor knows the “bar” for contributing a component to the Design System. 

  • Everything was properly documented and included the following information:
  • How the component was built
  • That the component met the industry accessibility standard
  • Usage/behaviour of the component and edge cases 
  • Detail spec was also provided.

Result:

The team now had a clear direction on the usage of each component and can contribute to the system.

Near Term

Building Fast

We had a very strong foundation to build things smart and fast once we finalized the semantic tokens. 


Tokens


Components



Modules


Broadcasted each milestone to the Evisort Design System Channel to increase visibility and transparency.

Long Term

Design system adoption across all feature teams

Strategized a solid plan for each feature team to adopt the Design System and got rid of the "hard-coded monster"

The first feature that adopt the Design System launched in December 2021

Design System Ops


Built an internal tool to streamline the process.


Formalized the contribution process.


Every component work is tracked in Jira. A corresponding working-in-progress Figma file that includes Jira # was also created


Created educational Loom Videos to educate the designers on how to use the components.


Hosted recurring Bi-weekly Knowledge Sharing sessions to broadcast what the Design System team has done in each sprint.

All-hand Presentation


We have increased external eminence by broadcasting the Evisort Design System in a company-wide All-hand presentation. Our goal is to encourage everyone to contribute to the design system.

The Reactions

Wins

🎉 Design and implemented 20 components in 2 months. 

🎉 The first feature that adopt the Design System was launched in December 2021.

🎉 The Design System sets the foundation for rapidly building features. 

🎉 The Design System Slack channel is very engaged. We see team members doing the following:

  • Filing bugs
  • Giving feedback
  • Asking questions
  • External stakeholders start answering Design System-related questions in the Slack Channel

Other Wins

Positive cultural changes by branding our design system internally to get the team hyped up

Before the Evisort Design System was formalized, the Design, Product, and Development were working in silos and we needed something that indicated we'll work closely together moving forward. We decided to host a few hackathons to create a mascot that truly represent the essence of our design system.


Fun Hackathons

The Design, Product, and Eng did a few Hackathon to decide on the internal brand for the Evisort Design System. To contrast the serious product space (tool for lawyers) we chose the Mochi as our mascot, a playful reminder to stick together when solving hard problems. 


The Mochi

The symbol of mochi is also tied closely with the concept of a design system. The rice as token, mochi as the component, and the mochi doughnut as the pattern. 

We proceeded to create a mascot to bring awareness. After the mascot was created, we noticed that it really brought our fully-remote team together. People made mochi jokes and created a mochi-related hashtag.


The mochi mascot


This mochi theme was also carried forward throughout our internal tools

Next Step

Now that the Design System has a very strong foundation, it was time to move forward to another challenge.

I passed the ownership to my talented visual designer colleague, Chakwudi, who will continue to lead and take the Design System to a brighter and “more beautiful” future. I will continue to support the team as a contributor.


Using Format