What I Learned from Implementing a Design System
Feb 2019 - Jan 2020
Role: UI/Product Designer
In early 2019, I had the opportunity to work on the initial implementation of the design system for a project. The design team convinced our product manager, tech lead, and CEO to invest in resources to build and implement a design system. While there were hundreds of resources out there that walked through the steps of how to get your company on board and high-level tips on how to build on your own design system, there weren’t too many resources that spoke about the specific challenges one might face during implementation. Thinking back to the start of the project, there were a few things I wish we did differently. Here’s what I learned.
Before any code implementation, outline the structure of how to organize your components
Our first mistake was organizing the components in Storybook using these categories: atoms, molecules, and organisms. Don’t get me wrong, the design team lived by Brad Frost's atomic design principle when creating components in our design files; we always built on top of design tokens, atoms, etc. However, once the designs were ready to be coded, the developers and I would have lots of discussion about whether a component was considered a molecule or an organism. These discussions took up a lot of time and it didn’t get us very far. After looking at existing design systems and speaking with other designers and developers who’ve had much more success than us, it was clear that the best way to organize components was based on the most basic functions, such as buttons, checkboxes, input fields, etc. With this solution, there was less ambiguity in terms of categorizing components.