Simple Finance Design System

Work – Simple Finance

Design system

When I joined the Simple Product Design team, time and resources had yet to be set aside to develop a design system. This led to many inconsistencies throughout our apps and caused projects to take longer for our designers and developers. They lacked a sufficent library to pull from and documentation around how design components should work. As a result, one-off components were frequently built without reusability in mind.

Through all of this, our team realized we needed to invest much more time into building a design system. I'm responsibe for leading this effort.

Mission

To maintain and build upon a system of reusable components, guidelines and patterns that lead to unity throughout Simple’s products. In doing so, our teams would be empowered to focus on solving problems, work more efficiently, and unite around a shared visual language.

design-system-1.png

Guiding principles

These were developed so aspects of the design system could all map to a shared source of truth. They are as follows:

Adaptable

The system should perform well on all clients, and should have the ability to evolve over time without causing disruption. Components should be reusable across products and clients, but should also be scalable and flexible enough to adjust to new circumstances when necessary.

Autonomous

The design system as a whole is it’s own product and should be self-contained. Components, patterns, and thinking within it should not be constrained to a single client, Product team or use case.

Balanced

Decisions need to be intentional around how we weigh Platform conventions vs Simple Design system conventions.

Cohesive

Everything documented within the design system should follow similar patterns. A customer’s experience within Simple should feel consistent no matter what client they are using or where they are within the product. There should be shared, foundational items throughout our products, and nothing should stand alone.

Documentation

To make components easily resuable for designers and developers it became apparent that documenting them would be ncessary. This covered explanations of how and when the component should be used, visual specs, different variations, and tracking of where it's used in Simple's apps. To make sure all documentation followed a similar structure, I created a template to work from.

design-system-3.png

UI library

To supplement documentation, the design team utilized Sketch Libraries to ensure we were all using up-to-date components in our designs.

design-system-4.png