Problem

How can we help the development team build and ship scalable products?

Solution

We built from the ground up a design source for multiple platforms.

Impact

The team's productivity score is 200% higher than last year.

Case Study

Design Systems

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.

Design Questions

Initial Research

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.

Interface Inventory

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.

Color

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.

Color representation.

Iconography

I used open-source icons. This decision saved us time and let us implement a clear and minimal iconography.

Icon representation.

Typography

We implemented platform-specific typefaces that bring consistency across experiences and devices.

iOS: San Francisco Text & San Francisco Display.
Android: Roboto.
Web: Inter.

Typography representation.

Grids & Layout

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.

Grids representation.

Components

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.

Components representation.

Challenges & Outcomes

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.

What did I learn?

Resources

Next

Messaging