Ontario Teachers' Pension Plan (OTPP)
2023 - 2025
Building and maintaining a design system
Design system components in use
Summary
A fragmented experience
Creation
A design system for the member portal
I championed the creation of a mobile-first design system to bring coherence across the public site and member portal. In a fast-paced team where project work always competed for time, carving out space for this was a challenge, but I structured it as a team investment rather than a side task. Each designer researched best practices for their assigned components and presented design options to the group. We collectively chose the final versions, ensuring coherence with the public site's existing styles, and finalized the components in Figma.
To support technical implementation, the team also produced sample code including HTML, CSS, and ARIA labels, giving developers reusable components to work from. We identified champions on the development team who helped drive adoption and ensure the components were integrated consistently across the codebase.
Governance
Maintaining an evolving system
Once the system was established, I oversaw its ongoing development. Designers who felt a new component or change was needed had to make their case, ensuring additions were genuinely necessary rather than one-off solutions. I often held the line on staying within what we had agreed, but remained open to updates when the need was clear, and we evolved the system together when it was.
The design system gave designers a clear guide to follow and developers a reliable source of truth, making collaboration faster and reducing the corrections needed at every implementation. It also built the team's capacity to think beyond individual screens and design for the system as a whole.
