Simple 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.
Simple Finance – 2017-2018
Lead designer – Product design, Visual design, Strategy
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.
These were developed so aspects of the design system could all map to a shared source of truth. They are as follows:
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.
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.
Decisions need to be intentional around how we weigh Platform conventions vs Simple Design system conventions.
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.
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.
To supplement documentation, the design team utilized Sketch Libraries to ensure we were all using up-to-date components in our designs.