When I began my time at (ISC)², it was apparent that there was no design system in use. There had been two attempts by my predecessor to start one, but it came to nothing. The digital properties were inconsistent in design and had several accessibility issues.  

Component Audit

First, a content inventory needed to be taken. Running through each website we had, I took screenshot after screenshot of buttons, links, components, layouts, navigational items, and more.  This is a very small sample.

Accessibility Audit

 Just taking a quick look at the home page, several accessibility issues were found:

  1. Competing navigation.
  2. No language set.
  3. Contrast failures.
  4. All-caps reduces readability.
  5. Improper text hierarchy.
  6. Links to nowhere.
  7. Inconsistent text sizes.

Mobile Menu Issue

1

competing navigation

2

competing navigation

3

competing navigation

No language set.

Competing navigation. Even worse on mobile.

Improperly coded text hierarchy.

Improperly coded text hierarchy.

Improperly coded text hierarchy.

Contrast failures.

All caps for poor readability.

All caps for poor readability.

Contrast failures.

Improperly coded text hierarchy.

Contrast failures.

Contrast failures.

Contrast failures.

Contrast failures.

All caps for poor readability.

Contrast failures.

All caps for poor readability.

Inconsistent text sizes.

Contrast failures.

All caps for poor readability.

Contrast failures.

All caps for poor readability.

Color Usage Issues

The top image shows the brand palette and the contrast ratios for light and dark text on each chip. The second images shows the color combinations primarily used in components on the website. All of them fail WGAG2.0 standards.

An Evolution

Once the current state of the websites were documented (4 properties in all) and results were in from the accessibility audit, the corrections and standardizations could begin. The next phase of the project included:

  • 5 design system principles were decided upon
  • color palette correction to pass WCAG2.0 standards with AA contrast ratios
  • styles established and documented for a few dozen component categories
  • accessible code standards were established to implement the new styles properly
  • the system was designed for accessibility first and mobile responsiveness second

Benefits

  • Saving a lot of development and prototyping time
  • Ensuring UI consistency (often associated with increasing brand trust)
  • Reducing complexity and ambiguity
  • Enabling and facilitating collaboration and consensus
  • Creating a foundation for further improvement

In sum, we argued that creating a design system would make us faster, better, stronger.

The documentation of the UI elements was the most tedious and time-consuming phase next to the editing cycle. Some of the things we struggled with were:

  • Organization
  • Naming conventions
  • Capturing states
  • Tracking our progress
  • Creating dynamic, nested symbols
  • Adhering to Atomic Design Principles
  • Staying focused/motivated

Refreshed UI Samples

A sample of the updated button styles as well as a couple of shots of the updated home page.

Implementation

Implementation of the updated design system is an ongoing and slow project. Our agile teams are working on structural upgrades and improvements. Once that’s done, the updated UI should slowly be released into the public.

updated UI on desktop
updated UI on desktop