Creating an Accessible Design System

ThreatConnect | 2020 - 2022 | Design Systems

ThreatConnect is a cyber security platform to help companies manage the entire security lifecycle with the main goal of reducing cyber risk. I was brought on as the first designer to help grow the design team, implement design processes into product development, and build an accessibility-first design system from scratch.

Problems with current system

• Most color combinations failed WCAG AA standards including our main CTA

• Both light and dark themes existed, where colors did not have a 1:1 relationship

• Roughly over 6 different CSS files with a variety of color classes

• No guidelines for information hierarchy, user focus, hover effects, etc.

• The colors and components had no guidelines for usage, which led to an inconsistent application (e.g. three colors of green for success states, inconsistent error messaging)

Process

• Audit our component library and the product to see what our needs were

• Research other design systems - number of unique hues per color, naming conventions, component guidelines etc.

• Stress test by applying colors to components and screens, test with users who have some form of color blindness

• Solicit feedback from designers and engineers and iterate accordingly

• Add colors to Figma library so other designers can use

Design documentation

Every component is documented in Figma with usages, specs, and styles for each state. I also put in place an accessibility checklist. This was a list of items for design and engineering to check before releasing a feature or product. It covered fundamental items like the color contrast of elements, testing the tab orders, and changing our type scale from px to rems to support scalability.

Iconography

Previously, we had icons all over the place in inconsistent styles. To streamline our icons, I created a set of pixel-aligned icons that worked well across the ThreatConnect platform. Every icon is set at a 2px stroke at 16x16 and 24x24 pixels.

Learnings and outcomes

• Accessible colors can be tricky! Some color combinations initially looked like they would pass, but their contrast ratios were far from AA compliant. Continual testing was needed.

• When we had every element passing AA, we tested it with real users who had some form of colorblindness. Based on feedback we made tweaks such as our toggle buttons and focus states.

• It was extremely difficult to get the one-to-one ratio between light and dark mode. If we changed one style in one system we had to make sure it made sense in the other theme.

• Having our library up and running immediately reduced the time it took for our team to design and prototype.

• Continual collaboration with our engineering teams was key. We set up a monthly alignment meeting to discuss and review components to make sure we are on the same page.