Design System

Creating cross-platform UI conventions at Simple

 
sketch.jpg

About

On-going project 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. Work continues with elements being documented and implemented on the platform.

I was involved in the audit and organizing of existing elements, initial type and color implementation, and continued documentation and refinement to the design system. I also created a library for the work on our internal wiki.

 

Contrast accessible colors

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. 

 

Initial implementation

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 initial release went out in January 2017. Web followed in April 2017. This was the first step to a unified system. 

 

Documenting a Foundation

Tyopgraphy.png

During the initial implementation, a restricted typographic size palette 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

A suite of tools are being used for the library as decisions are made. Use of Dropbox Paper for documentation, Sketch Library for the designers, and growing pattern librarieson each platform have proved the right combination so far.

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