Intro

When I joined Emitwise’s Design team there were already two Product Designers working. They were using some style guides and UI packs that allowed them to keep improving the product. It wasn’t very clear to me which files I could check or what guidelines should I follow. I was missing more direction on what to use considering multiple designers were working on the same product. If we continued working like this for more time we would have had a big consistency problem in the future.

The straw that broke the camel's back was that some of the new features were developed over screenshots. It’s hard to understand how, but it was working and more or less similar to what was designed. Mindblowing in a bad way. That was a clear sign we needed to implement something to share a common language between designers that allow us to work with engineers and keep consistency and speed across all parts of the product.

1. General audit

First, we started auditing all existing screens in the product, marketing website and all the different assets the company designed and quickly we realised that the product was not evolving at the same speed that the branding was doing and that there were quite big inconsistencies between the product and the marketing assets.

After discovering these red flags we decided to discuss the options we had with the Engineering team. It was quite obvious that because of time and resources, we were not going to implement a design system from scratch. The viable solution was to adopt an existing design system and make it ours.

Then, we decided to split forces and research and scored the most popular design systems from a design and coding perspective. The winner because of its accessibility efforts and data visualisation focus was Carbon from IBM. A good coincidence that we were calculating carbon emissions.

2. Implementation

After finding the design system we were going to adopt we defined what were going to be the principles that were going to rule all the design system decisions:

FAST: It needs to save us time developing the product.
SIMPLE: It needs to be easy to use, recognise, and don’t overcomplicate the components used.
SHARED KNOWLEDGE: It needs to be easy to access and use its documentation.

These principles were complementary and also related to the goals we established for the project:

Efficiency: increase Design and Engineering speed.
Consistency: manage standard components across different areas of the product.
Clarity: have a common language across other teams and avoid duplicated work.

After this, we created a roadmap to adopt and implement the design system on Figma and Storybooks in different steps. We decided to start with the most common components to the less frequently used ones.

Something that helped us a lot during the process of creating the design system on Figma was duplicating the Figma Carbon file and creating our design system from it. Molecule, the name of our design system, will follow our branding guidelines so we needed to update all the colours and text styles on this file. After doing that, we have a ready-to-use design system that matches perfectly with our branding.

3. Adoption

Advocating for a design system in a start-up environment is definitely a big challenge. The resources are usually focused on product development and the only foundational work that could happen is dedicated to refactoring or solving bugs so is not easy to sell this project across the company as nobody will see the benefits till is fully implemented.

This project started thanks to some volunteers that decided to invest extra time to make it a reality. Even when it was a reality, it was constantly questioned by Product Managers or other teams that didn’t see very clearly the benefits of investing in that area. So my recommendation here is to be patient and keep advocating everywhere to make sure everyone understands the goals and the benefits of using a design system. Sooner than later they will become advocates like you.

4. Maintenance

We started using Molecule on Figma we discovered that any design system is perfect.

From the Design perspective, the components were outdated with the official documentation as there wasn’t an official version of Carbon in Figma yet. Now there is finally. Also, some properties like Autolayout or Variants were not available on them so we had to update manually many components we needed to use.

We defined some rituals where the Design team could sit down regularly and review issues found on Molecule, present proposals to solve those issues and keep moving on.

Before long the Engineering team joined us too as they discovered the coding documentation was not very complete so we started having regular catch-ups to talk about problems we found using the design system on Figma or Storybooks. The design team was unforeseen formed.

5. Learnings

Working on a design system project for the first time was an amazing experience for me as a Product Designer. I highly recommend it if you haven’t done it yet. These are a few lessons I learned through the journey.

This is not a side project: it will require extra time for everyone in the project so make sure is visible and everyone is aware of this before you start working in the darkness.

Advocate always: never stop promoting the benefits of using a design system because it’s not easy to keep alive and as soon your baby will grow it will demand more and more food.
Involve the Engineering team: this a collaboration project where both sides need to work in parallel. One without the other is not going to work so make sure you involve them and there is a representative, champion or whatever you want to call it from their side.
Deep research: double check that the design system you are going to adopt is the right one before is too late. Go deeper, reviewing the documentation on both sides to confirm you won’t find any future surprises that could mine the project.
Read a lot: this is quite obvious when you work on something for the first time. Going through 300 articles about design systems on Medium could give you the perspective, tools, tricks and good practices you want to use in your project.

Emitwise Design System: Molecule