Visual Design Guide

Not just how to build... but WHY.
Image

Client / Organization: Neustar Security Services

Jump to writeup

 

I’m going to be honest, explaining this project is not easy. On the surface, the task was simple: Create a design guide that developers will use to create or refactor several products. 

But that doesn’t begin to approach the complexity of this particular challenge.

  • Four primary and several more second-level extremely data-dense products
  • A combination of dark and light theme UIs, with palettes that roughly (but not exactly) match each other and corporate branding
  • Resource and other constraints mean that the system will be guidance only, not requirement, so items built compliant with the guide must gracefully co-exist with things that don’t exactly match
  • Developers employing the guidance have widely varying levels of expertise in both design sense and UI development ability
  • Development velocity is crucial so the guidance can’t impact development speed significantly

And yet, from that, an actual system was created that improved velocity, enhanced consistency, increased usability, and raised customer satisfaction.

The system provides guidance for developers and designers on everything from base colors and typography through layout and spacing up to details and examples of data visualization. It even includes an icon dictionary to enforce consistency in iconographic usage. 

Challenges Overcome

  • Choosing type and color conventions that allow for several levels of visual hierarchy and increase the usability of data-dense components
  • Design that color and type scheme in a manner that is compliant with accessibility standards, even if the theme changes from dark to light
  • Creating and applying consistent visual coding for success, warning, etc. in a limited color palette where the primary brand color also has meaning (green)
  • Crafting form components that maximize usability and space considerations
  • Designing data visualizations that can accommodate substantial data sets of dozens of series
  • Reimagine data tables to improve the usability and presentation of data
  • Enable consistency across and within applications
  • Imagine and build a notification and alerting system that combines internal (application-based) and external (email, SMS, webhook) notification systems

Have questions? Want to learn more? Need advice? Let's talk!

Contact Me