top of page

Duplicate: 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: Scalability and Consistency

​

Problem statement: 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.

​

Problem statement: 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

Research
  • How can we make a design system that works for our organization

  • Understand where the current pattern library lacks

  • Conduct user interviews

  • Industry analysis

  • WCAG 2.0 AA compliance

​​

Challenge and Problem Statements
 
Information Architecture​
  • Card sort

  • Design site architecture

  • Tree test​

 
Final Delivery
  • Wireframes

  • Governance models​

  • Communications and feedback loop

​

Impact

​

​Lessons Learnt

Research 

What is a Design System? What can it do?

To understand what a system can do, I set out to do a deep dive research into understanding what does it do? It helped me understand:

​

  • Everything in one place

  • Efficiency and speed

  • Consistency and user experience

  • Creating stronger brands

  • They free us to focus on what matters

  • Speaking the same language

  • Single source of truth

  • Team integration

  • Scalling

"An important function of any system is to ensure its own perpetuation" ~Thinking in Systems by Donella Meadows.

Following WCAG 2.0 AA guidelines

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

Screenshot 2024-09-05 at 1.26.39 PM.png
Competitive research
Desktop - 1.png

To understand their Information architecture and navigation pattern, I researched the market to understand all the major organizations in the private and public sector.

​

​

​

​

Private sector:

Public sector:

Desktop - 2.png
Challene and problem statements
​

Challenge

Adoption: The number # 1 challenge I had was the adoption of this system to achieve consistency on our web pages.

​

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 to the challenge

Solution # 1
"Why would anyone adopt a system that has nothing for them?!!"
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. 

Solution to the challenge

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

Problem Statements

Statement #1

​

We have observed that different teams aren't constantly collaborating with different teams when building our digital spaces which is causing:

  • rework

  • inefficiency in process

  • inconsistent user experience

Statement #2

​

We have observed that different teams are not receiving regular communications about updates development of new components and patterns, which is causing:

  • lack of relationship-building and trust

  • lack of emotional involvement

  • project timelines delayed

  • rework

  • inefficiency in process

  • fragmented experiences on our digital spaces

Statement #3

​

We have observed that different teams have conflicting, outdated or lack adequate process(es) being shared across stakeholders when building our digital spaces, which is causing the failure of the system.

Statement #4

​

We have observed that the users of the pattern library lack clear and detailed guidelines when building our digital spaces, which is causing:

  • repeated efforts are being made

  • starting work from scratch each time

  • rework

  • inconsistency

Statement #5

​

We have observed that our current documentation, standards and guidelines are scattered across different sites and aren't meeting the need to have resources at your fingertips, which is causing 

  • people to jump around different resources to learn and understand the standards

  • having potentially inconsistent information 

The below solution was not mine alone. I decided to share the findings of my user interviews and the problem statements with my Product owner of the Pattern Library then. And the 3 pillar approach was born out of the discussion. It was a moment of epiphany!

Solution to the problem statements

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

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

This 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

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
Some of the things I actively worked on but not shown here are:

​

  • Trying to understand the versioning of components vs of the system

  • Epics and Stories to establish problem statements to establish the needs and wants of different user groups. This helped us get a sense of what the MVP should look like.

  • I also conducted in-depth research on different types of Governance models of a design system and proposed a model that worked for us- our system and our organization.

  • The communication plan and to make design system a 2 ways street, I put a lot of emphasis on that back-and-forth conversation.

Here's the link to the live site which was the final output of this effort:

Impact

  •  Increased adoption of the Design System by 400% .

  • The consistency on our web pages has gone up by 300%.

  • 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.

bottom of page