cover images-08.png

UI Style Guide Library

Genospace Style Guide Library

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 began 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 their framework.

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 by condensing buttons, text fields and main features to fit 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 was necessary for a uniform library. 

Once I had a full set of features designed, I began user testing to confirm the style guide was thorough and matched the companies values. I tested with a huge range of users to ensure that the ui would be suitable for our current users and potential future users.

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 making both the design and the implementation process much more efficient and streamlined.

© 2017 Genospace, LLC