B12 design system: 2021

Role

As the lead designer, I was responsible for driving this project from inception to completion. I provided heuristic evaluations, interviewed internal stakeholders, developed new processes, and migrated B12s design system from Sketch to Figma.

Problem

One of the first objectives laid out to me when I joined B12 was to help fix their design system. It was housed in Sketch and had fallen out of sync with the codebase. The lack of process around it meant new components were added on the fly. This resulted in a bloated codebase, inconsistent patterns throughout the product, and a disjointed visual language.

Approach

As with any design project, my first step started with gathering information. I scheduled a number of interviews with people from around the company. This helped me learn what challenges they were having and if anything was working well for them.

While I conducted interviews, I also audited our design system and product experience. I went through all the components in the Sketch library and compared them against our code based component library. Then I went screen by screen in the product to see what was being used and how. While I was at it, I put together an information architecture diagram mapping out our entire product. It was a great exercise as a new hire because it helped me get acquainted with the product. It also served as a touchpoint for many conversations we had afterwards.

After I completed the audit, I assembled the components I found in the product into a new design system right in Figma. I also worked with the engineering team to link them directly to the component library in the codebase. This helped us establish a direct relationship between our designs and our code.

One of the key issues that came up in my stakeholder interviews was that people weren’t sure how to make changes to the design system. Luckily for me, I had run into this problem before and leveraged my previous experience to develop a process. We used it as a starting point and then refined it as we used it on a regular basis.

In addition to the design system and process, I also set up a weekly ritual for any interested parties to work on our design system together. Whether they were designers, developers, or product managers — everyone was welcomed. We used that time to “jam” on design system challenges and came up with solutions that we presented back to the team.

Outcome

The design systems, and processes around it, helped the team collaborate better together. We were all able to make decisions quicker. We also reduced code bloat and built more consistent experiences. Some of my proudest contributions included:

• A new spatial system that standardized all our measurements. It noticeably sped up our design and development efforts because we didn’t have to guess about spacing anymore.
• A smaller and simpler design system. This led to less bugs, an easier codebase to maintain, and even performance improvements.
• New common sense patterns that simplified novel interactions and behaviours.
• New processes and the rituals that helped keep the design system top of mind and provided a structure for us to collaborate better.
• Lots of incremental updates that over time improved the overall quality of the product.

The work of a design system is never done but I was happy with what I accomplished during my time at B12. We made a lot of progress and established some good practices that live on today.