Work
More workHide menu

City of Winnipeg

Design system

Find out how Res.im helped the City of Winnipeg enable faster and more consistent software design and development.

City of Winnipeg

Process

Our partnership with the City of Winnipeg team focused on a need for alignment and cohesive applications and websites. A straightforward goal, ‘to have users come to the design system not because they’re told to, but because it makes their life easier and provides confidence throughout their build’, was the guiding light.

It was important that we start our work with the City of Winnipeg by understanding current processes and their digital property landscape. To be successful, design systems must work within existing constraints and address real organizational challenges. Only with a solid understanding could we move forward and design and write guidelines for the necessary components, patterns, and templates.


Our role

1. Strategy and planning
  • Onsite kickoff session
  • Interface inventory
2. Design and content
  • Writing UX foundations based on City of Winnipeg needs and general UX guidelines
  • Designing individual UI components and patterns and writing UX guidelines for each
  • Designing 3–5 page templates
  • Designing the website intended to house the system
3. Development
  • Writing front-end code for each individual component
  • Developing example page templates and forms for use
  • Building the website to house the design system and writing related documentation for future updates

Project timeline

5 months


Team

Res.im’s project team consisted of project management, UX strategy and copywriting, interface design, and development team members.


The project

This was a critical project for the City of Winnipeg. They manage 50 public facing digital services and over 100 internal applications, that over time had become inconsistent, time-consuming to create, and difficult to use. Res.im was brought on board to create and consolidate a toolset and library of living UI assets that was on brand, could be easily maintained, and consistently used across all of the City of Winnipeg’s digital services.

City of Winnipeg website design screenshot City of Winnipeg website design screenshot City of Winnipeg website design screenshot

Stakeholder engagement

The project started with an onsite visit with key stakeholders to better understand the origins and realities of the current state. The City of Winnipeg provided Res.im with a comprehensive presentation of existing assets, their usage, and their history in order for us to understand how and why assets had become fragmented and decentralized over time.

City of Winnipeg website design screenshot City of Winnipeg website design screenshot

Audit and inventory

Our experience with large, multi-faceted organizations gives us the insight necessary to understand the challenges of design at scale. Starting this project with an inventory allowed us to focus on important components that the City used often while tailoring UX guidelines to issues that appear often.

City of Winnipeg design system UI elements City of Winnipeg design system UI elements

Creating the system

The audit helped prioritize where to start and allowed our design team to focus on the most important UX foundations and UI components and patterns. These components and patterns were informed and accompanied by UX guidelines, microcopy suggestions, and best practice examples. As a final step, we built out the entire component, pattern, and template library using Bootstrap. This framework is being used internally and will accelerate system adoption as it’s rolled out.

The City of Winnipeg has close to 50 public facing digital services with inconsistent branding, user interface design and user experience. Identifying the need of a centralized design system shows their commitment to providing accessible, functional and navigable information for their residents.

Ready to work together?

Reach out with questions or to get started on your next UX research or product design project. You’ll hear back from us within a day.


Contact us