Work Design System | Lottasandeback

Building a Design System for a rapidly growing company

Background / Problem

In 2019, we recognized the necessity of adapting to rapid and frequent design changes prompted by expanding teams of developers, designers, and product teams. Previously, with only one development team and myself as the sole designer, our approach was unsustainable for future growth.

To address this challenge, two other developers and I embarked on designing and implementing a unified design system. This initiative aimed to synchronize the design work done in Figma with the development work executed in Storybook.

Company:

Detectify

My role:

Product Designer / Product Manager

Team:

Product Designer/Product Manager, 2 Developers

Timeline:

1 year

Process

Planning & Inventory

I started the project by looking at other design systems, along with design trends. I then conducted a thorough review of the current design elements to pinpoint any areas of concern or inconsistencies requiring refinement.

Creation of components

We soon recruited a developer to join the team, as our existing developers had other obligations. Additionally, we temporarily enlisted another developer from a different team, dedicating approximately 50% of her time to assist us in building this design system.

We usually did one component at a time, and our process for this was the following:
- Building the component in Figma
- Identifying the locations of the component in the app
- Handing over the designed component with all states
- Building the component in Storybook
- Replacing the component within the app

Documentation

Comprehensive documentation was created, detailing design principles, guidelines for each component, and best practices for implementation. We used Material Designs guidelines as inspiration.

By implementing a design system, the company achieved greater consistency across the product. It reduced design and development time, and enhanced the overall user experience.

Struggles

I was the only designer within the company for the main product

Because of our limited number of designers— essentially, I was the sole designer — I needed to engage with every development team to provide design input for their respective products. Consequently, this project was consistently treated as secondary due to ongoing product development demands.

Complexity

Design systems can become overly complex, especially in large organizations with diverse products and platforms. To avoid this, it was important to us that we started small, one component at a time. This minimized the scope and made it managable.

Adaptation and Replacement

Most of our time was dedicated to replacing old components with new ones. Coordinating this effort with each team, which owned specific parts of the product/UI, posed significant challenges in synchronization.

Need of new components that didn’t exist

As the company expanded and accelerated its pace, there was a sudden demand for additional components that were not part of our existing design. This necessitated the design of new components to avoid relying on outdated designs.

Learnings

More collaboration and a clear ‘buy-in’ from the company

We made the mistake of not involving the current developers in this project. As a result, there were delays and miscommunications. Midway through, I realized that not all developers were comfortable with our decision to hire someone to lead the project without consulting them first. This was a significant oversight on our part.

Seniority is Key

We didn’t have that many struggles with this project, and I think it was because of how collaborative it was. The only problem was to get the developers to “finish” the design, after they’ve gotten an okay from the MVP we did. They wanted to continue with more features due to the high praise they got from customers.

Accomplishments

- Helped build a new brand
- Ensured consistency and alignment with the new brand throughout the product.
- Taught developers independence in how to use the components and spot designer’s and devs. mistakes
- Boosted designer productivity
- Reduced developing time building new features