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