top of page

City of Calgary:
Design System

Back to top: COC
Screenshot 2024-09-05 at 12.10.08 PM.png

Roles and responsibilities

My role:

Skillset:

Time line:

Work nature:

UX Architect- Individual Contributor

Research + Epics and Stories + User interviews + Information architecture + Wireframes + Governance

 

15 months

 

In house - City of Calgary

Context

All of us know what a huge lesson COVID has been.  It poked holes in our daily system of operations.

For us at the City of Calgary, amid lockdown & local state of emergencies, federal and local govt’s changing rules and regulations daily, COVID showed us that we could not pivot our web pages fast enough to reflect such changes. We were in a constant reactive state. This accelerated the need to come up with digital service space. We scrambled to update the pages to reflect the changes happening on the fly.

Challenges: consistency and scalability

Product Team

As the product scaled, inconsistencies in UI patterns became more apparent. Different teams were building components in silos, leading to a disjointed user experience and slower development cycles. The absence of a unified design system made it difficult to maintain visual coherence and efficiency.

Business Impact

Without a central design system, the product’s development became inefficient, resulting in a slower time-to-market and higher maintenance costs. The inconsistent UI also led to a fragmented user experience, affecting citizen satisfaction.

My Process

Approach
Process and Methodology

Research

User Interviews

Challenges
 
Designing the System
  • Information Architecture

  • Card sort

  • Design site architecture

  • Tree test​

  • Solution

Establishing and Leading the Governance of the Design System
 
Impact

Lessons Learnt

My Appraoch

As the lead UX designer, I initiated the development of a scalable design system from the ground up. I recognized the need for a unified solution that would not only improve design consistency but also streamline the workflow between designers and developers.

Leveraging the strategies of user interviews, research, and internal team-based architecture, I structured the design system around reusable components, ensuring findability and consistency. 

Process and Methodology

I needed to understand industry standards for design systems. The best practices, frameworks, and case studies from leading organizations, to identify key principles that drive successful design systems, such as consistency, scalability, and accessibility. So I began with research.

Research

Research provided me with knowledge of the solid foundation of a robust Design System. By examining industry-leading design systems, both in the private and public sectors, I also learned the importance of comprehensive documentation in fostering collaboration between teams and how established design systems effectively address user needs while streamlining workflows. This knowledge informed my work and empowered me to advocate for strategies that would enhance our design system’s impact.

Following WCAG 2.0 AA guidelines

At the City we strickly follow the WCAG 2.0 AA complaince.

Other Design Systems
  • Google: Material

  • Apple: Human Interface Guidelines

  • Shopify: Polaris

  • Salesforce: Lightening

  • Government of US: USWDS

  • Government of Canada: Aurora

  • Canada Post: Mercury

Challene and problem statements

Challenge # 1: Consistency

Adoption: To achieve one of the goals of 'consistency' on our pages, adopting this system as the only source of truth was critical. 

Designing and putting out a design system is not enough if people are not going to use it and make it part of their process.

Current Users of the Pattern Library

The current pattern library was very thin with content and hence did not have many users.

Pattern Library Owner

UX Architects

Developers

Solution: Adoption

Solution to the challenge
To make adoption happen: Solution # 1
Make a system that is useful for them.

"Why would anyone adopt a system that has nothing for them?!!"

To make adoption happen: Solution # 2
  • The intuitive role of the innovator is to have the idea and to push for change. But a MASTER of influence and innovation understands that through the process of co-design and co-ownership, we want people to commit themselves to these ideas to self-persuade. One has to create the conditions for self-persuasion. There are 2 critical steps to this:

    1. One fundamental position is to begin with positions of alignment instead of conflict: I identified the groups that needed to come in alignment and started by asking them about their experience of seeing 'inconsistency' on Calgary.ca.

    2. Stop telling people what to think instead I asked:  "What does consistency mean to their work?"

  • For self-persuasion: the power of co-design and co-creation. I applied this principle throughout my design at every step of the IA creation. 

Preparing for an extensive user interview

Working backwards on who needs to be using the Design System to achieve the Northstar of Consistency helped me understand the users of this system. So I prepared for extensive user interviews.

Content 

Strategists

IT

Accessibility 

Communicaors and Planners

Creative

UX_edited.jpg
Developers_edited.jpg
PL Owner_edited.jpg
Communication_edited.jpg
Planners_edited.jpg
Creative_edited.jpg
User Interviews
Problem Statements

Challenge # 2: Scalability

Solution: Fix Collaboration, Communication & Conflicting Processes

UX interviews uncovered significant challenges related to cross-functional collaboration, communication gaps between teams, and misalignment in their processes. This created scalability issues for the components as people made one-off requests to meet their projects' needs.

The solution we arrived at below was truly a collaborative effort. After gathering insights from my user interviews and identifying the core problem statements, I shared my findings with the Product Owner of the Pattern Library. Through our discussions, the idea of a three-pillar approach emerged. It was a real "aha" moment that came from working together.

Solution to the challenge

Three pillar appraoch
People
Process
System

Understanding the process of different teams and how and when they overlap is a key to the success of any Design System

This highlighted the need to view the design system not as an isolated entity, but as an integral part of the overall workflow. It had to be seamlessly embedded into daily processes to ensure adoption. Achieving this required strong communication between teams to foster effective collaboration.

Solution to the problem statements

Epics and User Stories 

797608233_ea592541ab6f4dc3ad5bf861cdbea9ec-050924-1609-92_Page_1_edited.jpg
797608233_ea592541ab6f4dc3ad5bf861cdbea9ec-050924-1609-92_Page_2_edited.jpg

User interviews helped our team formulate Epics and User stories based on different users. Which helped us understand:

  • Features Requirements

  • Needs of these features

  • Teams affected by these features

  • Helped establish MVP vs, High, Medium and Low-priority items

Designing the System

When structuring Information Architecture (IA), it's essential to align the IA with how teams function and interact. This involves mapping out the key workflows, communication patterns, and decision-making processes within each team. By understanding these dynamics, the IA can be organized to reflect their unique needs, ensuring that content is easily accessible, relevant, and structured in a way that supports collaboration. A well-aligned IA not only enhances usability but also promotes efficiency by streamlining how teams navigate and use information in their day-to-day tasks.

Information Architecture

Comparing the existing Pattern Library IA to industry standards
Pattern Library Exsiting IA.png
U.S. Web Design System (USWDS).png
Shopify.png
Gov.UK.png
Canada Post_edited.jpg

Trying to understand when it makes sense to have a narrow but deep IA vs a wide but shallow IA. Are they itemized or action-oriented?

How are items grouped? 

Card Sort and Tree test for the proposed IA

Card Sort

Conducted Card Sort sessions with each group who were identified as the potential users.

6 teams participated: UX, Content, Pattern Library owner, Developers, Accessibility and Creative.

DS- IA Card sorting- UX session_2024-09-05_22-34-18.png
I chose Hybrid card sort as I realized I wanted our IA to be reflective of the various teams using them yet I did not want to restrict people to the groups I had chosen. Card sort helped me understand how people naturally grouped the content yet create their own groups if they chose to. It narrowed me to 10 IA items, which still felt excessive.
DS_IA_version 1_Being tested.png

Post card sort, this is the IA we generated.

Tree Test

Conducted Tree test sessions with each of the same groups who were identified as potential users.

 

6 teams participated: UX, Content, Pattern Library owner, Developers, Accessibility and Creative.

Tree test_feedback_Page 1_Page_1.png
Tree test_feedback_Page 1_Page_2.png
The tree test confirmed my hypothesis as the success rate was only 50%. I knew we had too many menu items which confused the people. I narrowed it down to 6 from 10.

Post Tree test, this is the IA we generated.

DS_IA – V2.0_Being tested.png

Solution

Wireframes

Home Page- Design System Overview – V 1.1.png
Components V1.2 - Feedback indicator Loaders.png
Design thinking – V 1.1.png
Content V1.1.png
Jump to final design: COC

Establishing and Leading the Governance of the Design System

As the UX lead, I established the governance body for a design system. This body is crucial to ensuring its long-term success and consistency. A governance team acts as the gatekeeper, maintaining design standards, overseeing updates, and facilitating collaboration between designers, developers, and stakeholders. This structure ensures the system evolves in a controlled, scalable way while remaining aligned with the organization’s goals and user needs. Without governance, the design system risks fragmentation, inconsistency, and diminished adoption across teams.

Hybrid/ Federated/ Distributed Model of Governance

Such a committee is represented and empowered by subset of designers and leaders designated to collaborate on the system. They make design decisions collectively.

 

A federated team will:

  • broaden legitimate relevance to many platforms and lines of business

  • limit perceptions of bias by representing many perspectives

  • ease spreading the system across teams by equipping more evangelists

Hybrid model-ds_edited.jpg
Two-Way Communication Channel

I structured the design system as a two-way communication channel, facilitating continuous dialogue between designers, developers, and product teams. This approach promotes ongoing feedback and refinement, ensuring the design system evolves in alignment with user needs and business objectives while upholding rigorous UX standards.

This was achieved by:

  • Implemented bi-weekly and monthly department-wide newsletters as a critical communication tool, delivering key updates on the design system and disseminating essential knowledge and best practices for protecting the integrity of the brand and its identity. As a design system committee member, I set up regular times for them to meet and make collective decisions.

  • Established multiple, highly accessible channels for teams to engage with us—whether through service requests, emails, direct collaboration, or integrating us into their projects—ensuring seamless support and alignment across all functions.

  • Additionally, we introduced comprehensive component usage training for various teams working on the AEM platform, equipping them with the skills and guidelines needed to implement components effectively and consistently across the system.

  • Furthermore, we introduced anonymous feedback forms and surveys, providing an invaluable avenue for candid insights, essential for continuous improvement and fostering a culture of transparency.

Leading the Governance 

2 Years post launch of our Design system - I became the UX Lead on this interdisciplinary Design System governance committee. I am entrusted with setting and upholding the highest UX standards across our organization. I play a pivotal role in prioritizing which components are developed and driving strategic decisions to meet the organization's priorities in our two-week sprint cycles. Leading a team of 8 junior UX professionals, I ensure their contributions align with these standards by rigorously reviewing their work. Additionally, I proactively remove any roadblocks that hinder my team's progress, ensuring that their work not only meets our exacting standards but also has a significant impact on the system's evolution.

Impact

  •  Increased adoption of the Design System by 400% .

  • The time to put together a page is now 10 times faster.

  • The citizen satisfaction score for Calgary.ca has gone up to 84% compared to 66% before the design system.

  • We also calculate the ROI of implemented components annually.

Impact
Lessons learnt

Lessons Learnt

  • ​The initial scope of this project was much smaller. But my user interviews started touching on some issues that if not addressed, would have resulted in not as much success of this project. But the scope ballooned up to twice its size.

  • Design System is never finished. Even today the Summit design system is at a bare minimum MVP stage and it will take time to polish and get it to where I envisioned it. But the Design System is always a work in progress.

  • How the requests come to the Design system governance team, how we respond to it, and how the communications pieces are designed are integral to the success of any design system.
     

  • This design system does not allow for patterns just yet. Which is another layer up from the components. Components put together to form the patterns. And that is something we're working towards. If I could re-do it, I'd account for it in MVP.

bottom of page