How can we help the development team build and ship scalable products?
We built from the ground up a design source for multiple platforms.
The team's productivity score is 200% higher than last year.
Great design systems help teams spend less time on rote, repetitive tasks while providing a comprehensive reference of guidelines and reusable components.
As a product designer at SOSAFE, I came up with a design source to create memorable experiences. With an interface kit built for a growing team, I included color themes, icons, text styles, and components to allow designers and developers to work faster while maintaining a solid consistency.
Historically, design systems emerged from large companies. At scale, with teams of hundreds of designers and engineers, it would be practically impossible to avoid mistakes. Therefore, design systems became a necessity.
A design system helps to design, develop, and ship products faster. Designers and engineers could collaborate effectively and dedicate more time to solve new problems. This premise applies to both small and large companies.
I conducted an interface inventory to compile all components created by other designers.
iOS: There was a file that compiled the components used in the apps.
Android: There was not a file for Android components.
Web: The company uses AntDesign as a web framework.
Observations: There was no definition for the text styles; color themes did not match the components between iOS, Android, and the web; components' files were generally incomplete.
Design language represents essential design properties. In our case, design language spans over color, iconography, and typography.
As a work-in-progress, I made various color themes constituted of gray and semantic colors. Our main priority was to design clear and accessible colors.
I used open-source icons. This decision saved us time and let us implement a clear and minimal iconography.
We implemented platform-specific typefaces that bring consistency across experiences and devices.
iOS: San Francisco Text & San Francisco Display.
It is crucial to establish which initiatives bring the most impact to a design system. In our case, grids, layout, and spacing were essential.
An 8-pixel responsive grid allows a layout to adapt based on the size of the screen. This definition also guarantees consistent experiences across the products.
Components are building blocks for creating user interfaces and include a system to communicate states. I made these libraries available for Android, iOS, and the web.
One of the challenges while building a design system is to demonstrate its intrinsic value to the company. I think this happens because measuring impact is a little bit subjective. Should we measure success or failure based on the number of components? Or in the complexity of the structure?
In our first months using it, improving it, our engineers started to talk about the design system in the sprint reviews. They realized how fast we could design and build when the product's foundations are consistent across platforms. We became 2x quicker after this project.
Then, our CTO gave me a space in the company's year review to talk about how I implemented our design system. They considered this project a significant milestone worth a mention to all the company.