Duplicate: City of Calgary:
Design System

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
-
Challenge
-
Solution to the challenge
-
User Interview
-
Problem Statements
-
Solution to the problem statement
-
Epics and Stories
Information Architecture​
-
Card sort
-
Design site architecture
-
Tree test​
Final Delivery
-
Wireframes
-
Governance models​
-
Communications and feedback loop
​
Impact
​
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.

Competitive research

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:

​
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:
-
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.
-
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.
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






User Interviews
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
Epics and User Stories


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

.png)



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.

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.

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.


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.

Solution
Wireframes




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