Accessible Design System

UI, UX

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:

Competing navigation.
No language set.
Contrast failures.
All-caps reduces readability.
Improper text hierarchy.
Links to nowhere.
Inconsistent text sizes.

Mobile Menu Issue

1

2

3



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.