Above, Style Guide for light-colored VQL. Click to expand.

Though our leadership voted for a dark interface, the UX team advocated for a variant for those who struggle with high contrast text. I designed a light-color style guide and interface in greys, beige and blue. The idea was to evoke an old school paper spreadsheet, lending familiarity to what might feel like an intimidating data set.

Above, the light-colored VQL interface with highlights, pop-up boxes and applied styles.


Below, design variations for the "Level Set-up" screen. (Please use arrows to advance).


Above, the original "Levels Set-up" screen.  

The Brief

A fellow UX/UI team member asked me if I had any suggestions for making the original "Levels Set-up" design feel less boxy.  How could we subdue the look and retain function? 

The Solution

Without changing the basic design or concept, I used color and design theory to soften the boxiness and shift color schemes with our engineer audience in mind. Presented are five variations.