Ola.org | Pattern Library Redesign

Crafting consistency.

I led the redesign of the pattern library for Ola.org, the website for the Legislative Assembly of Ontario. The goal of this project was to create a cohesive, scalable, and user-friendly design system that would streamline the development process, ensure consistency across the platform, and enhance the overall user experience.

My Role

Research, Prototyping, Testing, Interaction Design,
Visual Design,
Stakeholder

Duration

In progress

Tools

Figma, Drupal

Team

Developers,
Business Analysts, Stakeholders

The Challenge

Ola.org’s existing pattern library was outdated, inconsistent, and difficult to maintain. Key pain points included:

  • Inconsistent UI components: Buttons, forms, and other elements varied across pages, leading to a disjointed user experience.

  • Lack of scalability: The existing library wasn’t designed to accommodate new features or pages, making updates time-consuming.

  • Poor developer handoff: Without clear documentation, developers often had to recreate components, resulting in inefficiencies and inconsistencies.

  • Accessibility gaps: Many components didn’t meet WCAG accessibility standards, limiting inclusivity.

The challenge was to create a modern, accessible, and scalable pattern library that would serve as the foundation for Ola.org’s digital presence.

My Role

As the lead designer, I was responsible for:

  • Conducting a comprehensive audit of the existing UI components.

  • Collaborating with stakeholders to define design principles and goals.

  • Redesigning and documenting UI components in the pattern library.

  • Ensuring accessibility and responsiveness across all components.

  • Working closely with developers to ensure seamless implementation.

Process

Research and Audit

  • Conducted a thorough audit of the existing UI components, identifying inconsistencies and accessibility issues.

  • Analyzed user feedback and analytics to understand pain points in the current design.

  • Benchmarked against industry standards and public service pattern libraries to identify best practices.

Implementation of Design Tokens

  • To enhance scalability and consistency, I introduced design tokens into the pattern library. This allowed for:

    • Centralized control of UI styles – Tokens defined colors, typography, spacing, and component states, ensuring consistency across all digital services.

    • Increased efficiency – Developers could apply standardized variables instead of hardcoded values, reducing redundancy and maintenance efforts.

    • Scalability & flexibility – The system could adapt to future branding updates or accessibility improvements with minimal disruption.

Documentation and Handoff

  • Developed comprehensive documentation for each component, including usage guidelines, best practices, and accessibility requirements.

  • Used Figma to create a living library that designers and developers could easily reference.

  • Socialized changes with the development team to ensure a smooth adoption of the new pattern library.

Redesigning Components

  • Redesigned core UI components (e.g., buttons, cards, navigation) with a focus on usability and accessibility.

  • Created reusable variants for each component to accommodate different use cases (e.g., primary, secondary, and tertiary buttons).

  • Ensured all components were responsive and met WCAG 2.1 AA standards.

Ola.org homepage | Before

Ola.org homepage | After

Testing and Iteration

  • Conducted usability testing to validate the redesigned components.

  • Gathered feedback from designers, developers, and end-users to refine the library.

  • Iterated on components to address edge cases and improve performance.

Impact

  • Faster Development: Developers could now reuse components, reducing development time.

  • Enhanced Accessibility: The platform became more inclusive, reaching a wider audience.

  • Positive User Feedback: Users reported a more intuitive and seamless experience when navigating the site.

  • Scalability: The library was designed to accommodate future growth, ensuring long-term sustainability.