When I first started at the Toronto Police Service, we were at the onset of a digital transformation looking towards a modernization of organizational systems and methodologies. As teams grew and our product offerings expanded, we faced increasing challenges with duplicated efforts, inconsistent UI patterns, and misaligned experiences.
Wanting to create a consistent digital experience for users, designers, and developers alike, the UX team worked together to create a design system to help streamline collaboration, reduce redundancy, and deliver cohesive user and brand experiences.
My Role
I co-led the UX team for all user research, documentation, and design.
To prepare for this project I did a deep dive into all product guides used by the Toronto Police Service for social media and print (a digital guide did not exist at this point), design standards for government and policing agencies in Canada and abroad, and design systems for large corporations. After the deep dive, I spent time going over accessibility standards to understand requirements for colour contrast, font sizing, font types, button and field sizing, and more.
With this information in hand, the UX team began mocking up, testing, and iterating on components until they had the brand look and feel we were looking for while also being accessible and usable for all users.
For this project I reported directly to the digital program manager and project management office.
Tools Used
- Figma
- Azure Dev Ops
- SharePoint
- PowerPoint
User Research Approaches
User research and design steps used for this project:
- Competitive scans of design systems in government, public sector, and other policing agencies
- Deep research into accessibility including colour contrast, font sizing and families, field widths and lengths, button and link target sizes, radio and checkbox sizes, etc.
- Multiple rounds of user testing sessions for each component/artifact designed
- Iteration
- Creating of style guide and guidelines
GOALS & BENEFITS
Research Goals
- Understand how officers currently find and distribute community referrals and how that process could be improved
- Understand community needs and privacy issues
- Understand agency needs and how they currently work with officers and citizens and how that process could be improved
- Understand citizen needs, confidentiality concerns, their view of officers and how that could influence or impact a referral
- Understand accessibility issues and how to meet those needs through tech
- Find opportunities to help officers find and distribute referrals in an easy and intuitive way
Benefits of a Design System
- A single source of truth for design – designers and developers will always know where to view components, patterns, styles, and more
- New changes for projects can be redesigned and managed at scale through the design system and styles can cascade across projects
- Design resources can focus less on tweaking visual appearance and more on complex problems/solutions. This ensures that the project and designs are consistent visually and functionally
- Ability to replicate designs quickly by utilizing pre-made components and elements
- Reduces the need to reinvent the wheel and eliminates inconsistency
- Helps create consistent experiences and increases brand awareness
STRUCTURE
When structuring the design system the team focused on 4 things:
- Anchoring the new design system in core brand elements. Some of the things we looked at were typography, color palette, and tone—to ensure every component reflected our visual and experiential identity.
- Prioritizing configurability. By designing flexible tokens and modular components that could adapt across different products, platforms, and use cases we were able to ensure that the system could be configurable and adaptable for current and future projects.
- Consistency. The team and I established clear usage guidelines, naming conventions, and interaction patterns to align teams and reduce ambiguity. There’s nothing worse than creating a system that is confusing and ever changing.
- Component creation. Following a systematic approach, we started with foundational elements like buttons and inputs, then scaling to complex, reusable patterns that supported both design and development needs. This structure enabled faster iteration, reduced technical debt, and empowered teams to build with confidence.
HOW TO USE
TESTING
To ensure the design system met the needs of both users and internal teams, we conducted comprehensive UX and UI testing throughout its development. This included usability testing with designers and developers to evaluate how easily they could find, understand, and implement components, as well as interface testing to assess how end-users experienced consistency and clarity across products.
We also gathered feedback through surveys, design critiques, and live product audits. The results were highly favorable—teams reported increased efficiency, reduced rework, and greater confidence in using the system, while user feedback indicated improved clarity, coherence, and satisfaction with the overall interface experience.
RESULTS
The launch of the design system had a transformative impact across the organization. It enabled the rapid creation and reuse of standardized components, significantly accelerating design and development workflows. Teams are now able to build with greater consistency, reducing visual and functional discrepancies across products and platforms. The system has become a trusted source of truth, aligning cross-functional teams around a shared design language and reinforcing the brand’s identity at every touchpoint.
The design system is a living, breathing application that is always iterating and growing to fit the needs of our users.