City of Saskatoon

Transformation Through Engagement

Saskatoon is one of Canada’s fastest growing cities, and the City administration was running full speed to keep its infrastructure on par with an increasingly diverse and savvy citizenry. A robust digital presence was a big part of the City of Saskatoon’s growth plan, and to accomplish that, they enlisted zu to design a solution that engaged citizens and provided civic services in an accessible and user-friendly manner.

With over 12,000 existing pages of content and numerous complex online services, the challenge was a monster. Developing seamless design and functionality across users and devices was a priority, but user experience went deeper than that. As Saskatoon community members, zu understood the city, the administration, and the local community, but we didn’t presume to know what the people of Saskatoon wanted. Instead, we approached our client with a bold proposition: let the citizens decide.

Hey Public, We're Listening!

To do this, zu released an engagement site which would invite feedback from the public and involve them in the decision-making process for the new website build. Through surveys and polls, citizens were encouraged to contribute their ideas; from the development of information architecture to the selection of a design concept, we were listening.

Throughout this process, over 10,000 visits were recorded from 7,000 unique users, resulting in over 2,500 completed forms–a fantastic sample which allowed us to identify pain points and shape an action plan. Additional tools such as heat mapping, complex analytics, and focus groups were implemented in order to further inform user experience and ensure that every user could find exactly what they were looking for.

Features and highlights
  • One of the first open source civic sites in Canada
  • Engagement portal for citizen feedback and surveys
  • Streamlined and enhanced UX for complex service requirements
  • Adoption and compliance with WCAG 2.0 AA accessibility standards
  • Digital Program Documentation
  • Drupal site with 3rd Party integrations
  • Digital style guide

The results were informative; citizens prefered a utilitarian approach versus a stylized one, and were focused not on the design, but on the functionality. While these decisions were influenced by civic engagement, we also tested them with those same users to confirm that the concepts worked in execution. A preview site was launched, giving citizens a taste of what was to come, and resulting in several adjustments to our initial design that significantly improved upon user experience.

Informed engagement was a core philosophy to our approach, and we were among the first agencies in Canada to employ this strategy with a civic client.

Designing for Every User

Building a municipal government website meant that the audience could not be defined by simple demographics. Rather than differentiate residents of the city by age, sex or demographics, we thought about the audience based on the context in which they were visiting the site. Some were trying to complete specific actions, some wanted to search for information, and others wanted to contact someone within the city (among other things).

To develop information architecture for the site, we used these case archetypes to create a shortlist of pages, and asked citizens to group and label the pages based on a cross section of tasks. This exercise left us with an understanding of the citizens’ mental models regarding the city’s digital content, and their interactions with it.

This mental model, combined with in-depth content strategy and analytics, allowed us to draft a sitemap that reflected citizen needs and priorities. We were then able to test the effectiveness of this information architecture to see where gaps existed between user expectations and site structure. In some cases, these gaps were bridged by changing the sitemap itself, while in others, new features were designed to help users self-correct their navigation path.

In the design process, we also wanted to ensure that the new site was accessible to as many residents as possible. Knowing that mobile devices would make up a significant portion of the site’s traffic, we designed all of our wireframes and prototypes with mobile and desktop counterparts. By doing this, we were able to know early when our responsive framework could deliver device-optimized versions of content, and when we needed to design and build our own variations of a feature. To further maximize accessibility, all design elements–from type size to colour contrast ratios–were created to meet or exceed the WCAG 2.0 AA accessibility guidelines.

As proof of forward thinking, the City of Saskatoon partnered with zu to develop one of the first citizen-designed civic websites in Canada.
Ryan Lejbak, zu CEO

Expansive and Evolving Online Services

At the outset of the project, the City of Saskatoon identified nearly forty interactive services available online for evaluation against evolving digital standards. Online services, such as parking ticket payment, utility account information, tax assessment reports, and public transit, ranged from simple content publishing to complex business systems. zu audited each of these services, gauging ease of use, mobile friendliness, and architectural soundness, recommending improvements to some services and alternatives for others.

The evaluation process resulted in a number of changes to online service delivery. A large number of content-oriented services were migrated wholly onto the Drupal platform, decommissioning legacy applications. Several in-house, interactive business systems were modified to provide data services which were exposed to citizens via a Drupal interface.

Developers at zu met with City of Saskatoon IT staff in bi-weekly stand-up meetings to collaborate on emerging concerns such as data services integration, authentication, security, and establishment of the hosting environment.

Adding to the challenge of improving delivery of existing services, a number of new services were brought online throughout the duration of the project. zu worked with multiple stakeholders in an ever-evolving landscape to ensure that these services aligned with the parent project and functioned seamlessly with existing City services.

Along with direct collaboration, zu created an interactive HTML style guide to serve as a functional reference for implementing the new website design throughout the suite of services, both in-house and third party. The style guide outlines all fundamental elements of the Saskatoon.ca visual inventory and provides developers quick access to the code needed to implement those elements.

A Touchstone for All Things Digital

  • Web

  • API
    Integration

  • Web
    Application

  • Mobile

More Than a Website—A Complete Digital Strategy

The City’s new digital presence was delivered on time and on budget to the citizens of Saskatoon, with astounding results. Saskatoon.ca experienced its highest traffic and mobile engagement rates in history on Day 1 of launch, with 46% of users browsing via mobile devices. By placing so much value on citizen input and user experience throughout site development, there were few surprises, and feedback from the public was overwhelmingly positive.

Through an innovative strategy of public engagement, zu, together with the City of Saskatoon, was at the forefront of open source civic sites in Canada. This IAP2 approach became the governance touchstone for all things web and provided a cohesive vision for success. In addition to a website as an interactive business system, zu delivered a robust digital strategy that can serve as a philosophical blueprint for the city's ongoing digital presence.