Client / Organization: Neustar Security Services
Jump to writeup
Example of from-scratch Design system developer focused doc page

Design System documentation page explaining guidance for using tables within the Design System

Design System documentation page explaining guidance for using form elements within the Design System

Design System documentation page explaining guidance for using DataViz within the Design System

Design System documentation for Buttons, Toggles, and Indicators

Design System documentation page explaining guidance for expanding the color palette

NSR Design Guide - Data Viz

NSR Design Guide - A Light Mode Alternative

NSR Design Guide - Buttons and Toggles

NSR Design Guide - Forms

NSR Design Guide - Tables

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

