CAO UI Library
Designing a responsive UI library in Figma for a regulatory authority in Ontario advancing in design maturity and increasing development speed by 5%
Skills: Figma, design systems, cross-functional collaboration with software team
November 2023 - Present
Overview
I led the design of the Condominium Authority of Ontario’s UI library by auditing components from existing products, creating an extensive Figma library, and communicating requirements with the development team.
Problem Statement
After a quick rebrand, the CAO’s design assets were scattered and inconsistent across digital products. As the offerings grew, we needed to audit and consolidate them into a single library, and add new components to complete it.
Impact
📑 Improved consistency throughout CAO’s suite of digital offerings
🎉 Renewed management’s interest in strengthening the brand identity
👫 Effective collaboration between UX design and development teams
👩🏻💻 5% reduction in development time and 10% reduction in design time compared to projects before it
Core Work
Design Research: Conducted research to inform CAO’s design language by analyzing existing design patterns
Component Design: Created adaptable styles and components in Figma, ensuring they could be easily utilized across various projects and files
Documentation: Established change logs and version history to track assets and keep team informed about project progress
Stakeholder Engagement
Engaging the Development Team: Held discussions to gather insights on the implementation process and assess the feasibility of various components
Component Adaptation: Modified components to integrate with the Kendo Angular component library
Senior Management Approval: Presented a unified proposal to senior management, outlining timelines and benefits to secure buy-in across all levels of the organization
The Condominium Authority of Ontario is a regulatory body that provides consumer protection for condominium owners in Ontario, Canada.
CAO initially had to launch many products shortly after its inception and the organization didn’t have the chance to solidify its identity until 2023.
Over the last year, CAO has jumped into creating a more up-to-date digital presence, including designing and launching a new website.
How it’s going…
Development Progress: The development team is building the library and integrating it into ongoing projects
Cross-functional Collaboration: Maintaining regular communication with lead developer, strategizing on streamlining the process and minimizing the need for custom components.
Future Products: Created a shift in conversations with senior management to promoting consistency across the brand, including unifying designs across all products in development.
What I’ve learned…
Throughout the project, we've learned valuable lessons that have shaped our approach and direction. Delving into CAO’s short design history provided invaluable insights into the company’s evolution, guiding our current efforts and strengthening the future goals.
Leveraging Figma's robust features for component design has not only streamlined our workflows but also fostered greater collaboration and creativity within our teams.
Collaborating closely with the development team has been instrumental in improving my articulation of decisions and strategically prioritizing features, allowing the CAO to mature as a digital company. This collaboration demonstrates that CAO is dedicated to delivering user-friendly solutions and are crucial for our ongoing work, pushing us towards even more success and excellence.