Enter Password
Design System Resolved 75% of Accessibility Issues
And cut retheme time in half
For EdTech companies, accessibility is an existential requirement—not just an ethical consideration. When your revenue depends on schools with a legal mandate to meet accessibility standards, WCAG compliance becomes a top priority.
When I joined TestOut, we were receiving frequent requests from customers to demonstrate our accessibility compliance. In response, we hired a third-party auditor to assess our learning platform and identify gaps.
Working closely with Engineering, I created a design system that addressed 75% of our accessibility issues—and, as a side benefit, resolved 50% of our platform bugs. TestOut’s Vice President of Engineering called the design system and its resulting set of reusable React components “one of the most exciting things I've seen in years."
Short-Term Gains
When it was implemented in 2022, one unanticipated benefit of the design system was the resolution of half of the existing platform bug tickets. Putting the system in place took time, but that paid off in the short term by reducing our bug tickets by almost 50%.
Long-Term Gains
When CompTIA acquired TestOut in January 2023, the time invested to implement the design system paid off again, enabling us to efficiently update our platform’s style to match CompTIA’s existing brand. One engineer estimated that our previous work cut the retheme time in half.
Tab components were flexible for horizontal and vertical layouts, light and dark modes, and could include icons and numbers.
More than just a tool for achieving a consistent and professional UI, the design system prioritizes accessibility. When implemented in 2022, the design system addressed 75% of the accessibility issues identified by a third-party auditor.
Accessibility is both an ethical consideration and an existential business requirement for TestOut and CompTIA. Most of their B2B customers (schools and government entities) are required to conform to accessibility standards, making WCAG compliance a threshold requirement for our platform.
Colors were designed intentionally to comply with WCAG color contrast regulations.
Accessibility is just one of the underlying principles of the design system. Another is feasibility of implementation. I collaborated with our Engineering team to ensure that the design system components didn’t add an undue burden from an implementation standpoint. Inspired by Brad Frost’s Atomic Design methodology, I created design system elements as systematic building blocks (think atoms, molecules, etc.). The resulting set of reusable React components both accelerated development work and increased UI consistency.
At its heart, the design system also needed to match the ethos of TestOut, and later CompTIA. At TestOut, after interviewing several employees, I decided to focus on “the TestOut Way,” an unwritten ethos of down-to-earth customer service. I tried to reflect that with unobtrusive UI elements, and straightforward, helpful communication.
Even button border-radius was influenced by the underlying principles of the design system, with a focus on unobtrusive professionalism.
At CompTIA, with our focus on training for certifications, we distilled the core vision of the design system into one sentence: “Our platform is a virtual mentor for our customers.” Mentors are professional, knowledgeable, helpful and motivating — invested in helping trainees succeed. We strove to create an interface and experience that lived up to that description.
These core principles empowered us to make decisions in a consistent and informed way as needs for change arose. Rather than making a series of arbitrary, one-off decisions, we could go back to the core principles and ask, “What would a mentor do?”
Tables had unique styles for two distinct purposes: administrative and instructional.
These principles formed the basis for a design system which facilitated the transition to a new visual style when CompTIA acquired TestOut. It drastically reduced bugs and significantly improved our WCAG compliance. It improved efficiency and consistency in every-day design and implementation, and positioned us well for future changes through its flexible, principle-based foundation.
The design system's flexibility allowed for the addition of new components as needed, like status dots.