Genospace Style Guides

Problem: Genospace has many products, and they all look different.

Goal: Create a uniform UI library and rule set for the design and engineering team to abide by. 


I started by doing secondary research on other UI libraries to get a sense for which elements were necessary. I then decided that Google's material design was the most commonly understood & developed library, and should build my own library off of it.

Material design’s nature is spacious, minimal and driven by real life materials. Since Genospace’s UI is often content heavy, I adjusted material design elements to accommodate for this. Condensing buttons, text fields and main features fits Genospace’s needs. Getting rid of large drop shadows and simplifying interactions lends itself to Genospace’s values of simplicity and efficiency. Creating examples for design details that occur frequently like fail safes, dialogues and error messaging. 

Once I had a full set of features designed, I did user testing to confirm the style guide was thorough and matched the companies values. 

Today all of the designs at Genospace are created using this style guide and the engineering team uses these features with pre-set measurements in implementation.

© 2017 Genospace, LLC