Simple’s Design System

 
 
block header.png
 

Simple is an online bank with budgeting tools built into one simple app. Simple will not profit from customer mistakes, and believes an organization that does good will do well.

The goal was to bring a consistent design system to the Simple Android, iOS, and web apps. This was approached as a cross-platform exercise, keeping visual elements in sync across clients. 

As began working across all 3 platforms, the inconsistency was clear. Often, these issues led to poor communication with engineering and undermined the relationships.

Knowing the scope of completing the system, an initial release was planned concentrating on the new color palette and new typeface. The spec work around color and typography was put to the test for Android and iOS in a two week development cycle. During this time, there was constant conversation and validation happening between design and development

 

An accessible palette

 
Colors.png
 

The existing color palette across Simple did not meet minimum contrast guidelines by WCAG. This work developed a typographic color palette based off a base color that worked within the guidelines. Rules were set in place when a color can and can’t be used on a background color. 

I did an audit of existing colors across all platforms, identified inconsistencies and a created conversion plan for engineers to implement.

 

Consistent Typography

 
Tyopgraphy.png
 

A restricted typographic size palette in a new font was introduced along-side the new colors. These initial guidelines were built out based on learnings from the implementation. Keeping naming and use consistent allowed a better conversation with developers. Read more of the documentation here

 

Going forward

 
Block header.png
 

Now the foundation work is complete, specific components are being documented. These are able to be worked on and implemented at a sustainable pace. 

Overall, this has improved and empowered the developers on the team allowing them to make smart decisions around what UI to use.