Led design system creation to improve UX consistency: mobile-first design system for the member portal

At OTPP, members experienced a jarring transition when they moved from the public site into their secure account portal. Sections of the member portal, designed at different times with varying degrees of alignment to the current brand, made the user experience inconsistent. Accessibility and usability issues, particularly on mobile, added further friction to an already disjointed experience.

I championed and led the creation of a design system that brought coherence across the public site and member portal, giving designers and developers a shared source of truth.

Design

Establishing a new design system

Without a design system, addressing the portal's UX debt was an uphill battle. As we improved one section at a time, designers lacked a shared reference to work from, making it easy to solve a problem in one area while inadvertently introducing inconsistencies elsewhere.

In a fast-paced environment 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 of the eight designers on the team 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.

Design system components in use

Coding

Collaborating with the development team

To support technical implementation, the design team also produced sample code including HTML, CSS, and ARIA labels to assist the front-end developers coding the reusable components. 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 were encouraged 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.

What the design system delivered

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.