Design System
Ideation
I led the creation and ongoing maintenance of a Design System created to solve two major challenges within the organization: inconsistent user interfaces across applications and the increasing number of AODA accessibility tickets during production launches.
One of the first challenges was gaining support from upper management, as the value of a design system was not yet understood internally. I researched industry best practices and presented how a centralized system could improve consistency, development efficiency, and accessibility compliance across teams.
Creation
Once approved, I designed and developed a centralized system containing reusable UI components, design standards, and implementation guidelines. The first version provided documented HTML and CSS components, while JavaScript was used to mimic expected functionality. This gave developers consistent styling and structural foundations without rebuilding common interface elements from scratch.
As adoption grew, it became clear that providing only HTML and CSS was not enough to consistently ensure AODA compliance across applications. To address this, the Design System evolved into a reusable code repository with fully developed and accessibility-tested React and Angular components. Developers could now implement approved, production-ready code directly into their applications while maintaining accessibility standards.
Results
The Design System improved collaboration between design and development teams by establishing a shared visual and technical language. It reduced development time, minimized inconsistencies between products, and significantly lowered accessibility-related issues during QA and production reviews.
Today, the Design System continues to evolve with new components, updated documentation, and accessibility-tested code libraries that allow teams to build scalable, consistent, and compliant applications more efficiently.
The accordion page is shown in a screenshot above. The component includes an overview with an example running in React as well as guidelines for use and things to be aware of for AODA. Users can click the link below the functional example to view the same example running in Angular. The next pages contain the code in React and Angular. Documentation provides detailed directions on how to implement the code along with details on how to tweak the code slightly.