Design systems have become a necessity in recent years, as they help companies achieve a cohesive look and feel throughout their increasingly complex products.
I had the opportunity to create and maintain the design system at Simbi, with support from other team members. In this post, we’re going through my experience and lessons learnt while working on the Simbi Design System.
Why create a design system?
I noticed a need for a design system at Simbi as the company and the product were both growing in size and complexity.
Each team member would bring their unique design ideas to their work, which would often not match or fit well together. Even when certain design choices were agreed upon, they might need to be changed, and it was difficult to notify everyone about changes.
Designers, developers, illustrators and other stakeholders all needed a unified design language to work with.
To address these challenges, I worked with the team to create a shared library of reusable components, with the two main objectives being:
To provide a centralized repository of elements for the design team to choose from while creating new designs.
To ensure that changes made to a component in one place would automatically apply to every design project where it was used.
Creating the Design System
I started by identifying repeated components in design files we already worked on, and extracted them into a shared team library.
Based on usage patterns and feedback from the team, I then tweaked these components to support as many use cases as possible.
The design system consisted of reusable components created in a Figma library that everyone had access to.
Some of the key categories of components included:
Challenges and Solutions
As with any new project, there were challenges faced while creating and maintaining the design system.
One of the main challenges was getting others to become comfortable with using the system. Since they were not used to working with components, it took some time for them to adjust.
Another challenge was that emergent use cases would result in people breaking components to make the necessary changes.
To tackle these challenges, I focused on getting feedback from the team and adding more flexibility to the components. This involved adding responsive layouts, different shape options for book covers and card elements, options for icons on either sides of buttons, and other changes.
Benefits of the Design System
The design system saved a lot of time for the design team, and created cohesion throughout the Simbi app user interface. The shared components were used throughout the app, resulting in a pleasing continuity.
Management could easily browse components and approve or suggest changes, and changes made to a component while working on a certain project would automatically apply to other projects where it was used.
The developer team also benefited from the design system, as they could use these components while programming for new features. This helped them to see all the possible variants of a component, such as hover states, selected states, elements that only certain types of users might see, and more.
Lessons Learned
My experience working on the design system at Simbi taught me several valuable lessons, including the importance of getting feedback from the team and adjusting the design system accordingly, the importance of having a flexible design system that can adapt to changing needs, and the benefits of having a shared library of reusable components.