City of Edmonton

Responsive website redesign

The City of Edmonton's logo with a skyline of the city in the background.
The City of Edmonton is one of Canada’s fastest growing cities, serving more than a million residents.

Since we started working with the City of Edmonton in 2008, the former “City of Champions” has evolved from the northern home of arts-loving, blue collar energy workers to a city celebrated for open data, architecture, entrepreneurs, foodies, and trade (but we still work hard and love the arts).

The City's website has evolved as well. When we first redesigned and took over the platform, Edmonton.ca had just north of 1 Million visitors per year. Now, the platform boasts nearly 1.5 Million visitors per month and has become central to how the City builds community, delivers services, and shares information.

We continue to manage and improve the site, but in 2015 we noticed that the lack of small screen or mobile support was starting to impact visitor traffic. For the first time since launch, Edmonton.ca growth had plateaued. So we met with the City and they agreed to go responsive.

Project background

Edmonton.ca runs on the OpenText WSM platform, an enterprise CMS platform with a 20-year history and most of the features one would expect from a modern CMS. When we first launched Edmonton.ca, we worked with Edmonton in their roll out of a new governance model and we helped to automate that model with well structured workflow and templates. But in 8 years, even with great management practices, a website this large grows beyond the original design.

The original set of templates had been “improved” so many times over the years that they no longer suited the original purpose, or content creators had found creative workarounds to extend the capabilities of the site design.

But more than anything, the site had just plain grown and had become difficult to navigate and use - especially on any device smaller than a desktop computer.

The challenge

By 2015, mobile traffic surpassed 50% of all users, but total traffic growth had plateaued, even though population in Edmonton continued to rise. It became clear to us that a gap was growing between citizens expectations and their use of the Edmonton.ca platform. We believe that a high traffic, heavily used website is the first and most important step to the long term digital service strategy for government, so we strive to keep visits, engagement, and return traffic to our customers websites high.

The City was determining their long term eServices strategy, so it was imperative that the Edmonton.ca platform continue to be the first stop for citizens seeking services. Having a unified starting point for online services and maintaining dominant positions in search results is key to helping citizens find what they need quickly. But once they get to a digital platform, they need clear wayfinding, an interface optimized to their technology platform, and readable text.

With more than 6,500 pages of content that had been created and edited by over 300 content authors across a span of 8 years, we had our work cut out for us.


The goals

The City of Edmonton wanted to provide its citizens with an outstanding digital experience through insightful design and compelling content that considered every user’s need across our beautiful and diverse city. The city had a number of goals for this project including:

  • Develop a mobile responsive site with an updated look and feel that reflects the vibrancy of our province’s capital city and its citizens.
  • Delivering an exceptional user experience that ensures inclusiveness and accessibility for a diverse audience.
  • Performing updates to the existing CMS to provide better tools for content authors to maintain the site, limiting the inefficiencies that came with too many templates and modules.
  • Give departments the tools they need to build custom layouts from pre-built template components so that they can create content that meets their business needs without breaking away from the design system.

Screenshots of the City of Edmonton's new website on multiple devices

The solution

Two of the constraints placed on us by the City was to complete the redesign were:

  1. Complete the redesign without changing the site map or URLs so that regular site users and staff would be able to find their content quickly and so that search ranking was not impacted.
  2. Complete the redesign without reaching out to business areas to rewrite content so that we could run the project quickly and efficiently.

Since our entire design philosophy is content-first we needed to find a new path. We decided to take an automated migration approach combined with an open, agile design process. We would build a migration script for the CMS platform to move all content into a new project with the new design templates. Because we’ve been working with Edmonton since the site was launched in 2008 we helped them to build a strong governance and content lifecycle management practice, so while there was some non-standard content on the site, there was very little if any outdated or redundant content.

We developed the new design system based on real content, and each time we would migrate content, we’d see how the design system was handling the content models. Where we found redundant CMS templates, we merged them in the original project, and where we found outlier content that was poorly authored or used inline hacks, we sent an editorial request back to the Edmonton team to resolve the content issue. By using this agile and open approach, we helped Edmonton to repair outlier content without disrupting the normal work of content authors, and the Edmonton web team got to see the design system evolve in real time meaning we could make collaborative, incremental decisions about how to handle the design system.

As we progressed through the project, Edmonton added a new requirement: to replace the existing site search with a modern and more helpful platform. So we added time to the end of the project to implement Apache Solr.

Discovery

One of our first and most impactful findings came from a deep dive into Edmonton’s Google Analytics. Our UX lead noticed a pattern, which is that most user sessions were initiated not from the home page, but from an external search. Those searches brought visitors deep into the site, ideally to a content landing page that introduced a topic or theme. Visitors then moved through a few pages related to that topic, and ended their session. The insight that we gained is that most public sector web projects spend a significant portion of the design time thinking about an ever-present wayfinding system designed to get visitors from the home page to a specific topic. However, that’s not how most visitors use a government site. They enter deep in the site based on a specific topic or task, they view (hopefully) several relevant pages, then they move on. Our insight: in an ideal scenario, most visitors to government websites don’t navigate, at least not in the way that we design navigation.

A set of wireframes compiled for the city of edmonton

Our second insight was looking at how the City had expanded modules and page templates in the CMS over 8 years. When we started, there were fewer than a dozen templates. By 2015 there were more than 25 and those templates contained more than 130 unique modules, many of which achieved similar tasks. Our constraint of not rewriting content became an advantage here, because it forced us to design for the real content tasks that authors were trying to accomplish, rather than the content tasks we assume they needed to complete. We also realized that most of the diversity on templates and modules came because the original module was designed for a single purpose and not for flexibility. Our insight: design content modules based on multiple use cases and test with many examples of real content. We also moved to a fully modular template system where we started with content modules first, and then planned how they would roll up into a system of master templates later. Content authors can mix and match modules within templates now to create the page layout their content demands rather than having to fit their content to the rules of the template.

Image showing several different aspects of the City's new style guide

Design

Our design process was open and iterative. We believe that a great user experience isn’t created in Photoshop or Sketch, it comes from a visual designer, a developer, and a content strategist working collaboratively to shape and refine code and pixels until the design system is both beautiful and fit to its purpose.

We worked in sprints, negotiating our approach and work to be done with the client, then reviewing and releasing work to the client for acceptance every week. We enabled the client to make decisions and shift priorities throughout, using our MoSCoW requirements management technique to help them to tell us what was most important.

As we grew the design system, we performed QA continuously to consider how the system would perform and how it would work on all possible browsers and devices. We took a mobile first design approach, solving problems for the most intense and compact screen size, then solving for large screen second.

Our insight that users don’t really navigate on a city website unless they are starting a new task helped us to rethink navigation entirely. We took a cue from reading-centric sites like Medium and we used larger font sizes, eliminated clutter and noise, and created a focussed reading experience for visitors. Once they are done reading and want to navigate elsewhere we provided a powerful and easy to use navigation system with unique patterns optimized for small screen and larger screen.

Our insight that we needed to design based on content module helped us to organize our work process, building highly useful modules, then testing them with all of the real content on the Edmonton.ca site to see whether we’d accounted for everything that a content author may need to do.

We used style tiles to workshop our approach to the Edmonton brand, and we workshopped these with Edmonton’s Communications department until they felt that we had captured the digital version of the brand.

Image showing early iterations of the style tiles

As we worked, we maintained a pattern library so that we had clear documentation of the design system and so that once we were done the City would have a design resource to guide the continuous improvement of Edmonton.ca, mobile apps, and third party applications. The pattern library was developed early in the project to establish a set of available modules and designs for content authors to use.

In our process, we separate style tiles from interaction, pattern, and content design. Style tiles allow us to work through branding and visual treatment questions in an isolated format, so that the client makes clear decisions about brand, tone, and creative direction without accidentally impacting structural or interaction decisions. Style tiles provide great clarity for every project stakeholder.

The iterative approach, with designers and developers working continuously throughout the project, allowed us to find small victories that improve the overall experience and performance of the site. Part of approach entailed customizing the OpenText CMS environment and how data was entered so that it was more effective and efficient. But we also standardized how images and icons were added, transitioning from using PNG’s to vectors for the preservation of image clarity, and creating a consistent appearance by regulating size and resolution with the use of auto optimization features.

We were able to pioneer new UX patterns around navigation and readability that we expect will be copied based on their success for Edmonton’s citizens.

Development

One of the unique features of this project was a prototype-driven approach. With each sprint, we would identify what content models and CMS modules we would deliver, then we worked to create a prototype of that module as quickly as possible so we could show it to the client for discussion and review. Because we were working on a continuously synced project copy with real content, we could also see how each module worked with the real content it would need to support and where outliers and “content hacks” might have to be accommodated or fixed at the source.

We work with a test suite of real devices and browsers, so we can simulate not just the display of the design, but also the interaction of actually moving through pages, scrolling through content pages, or engaging with some interactive component. Making sure our designs worked in the real world with real content was key to the success of the project.

Screenshots of edmonton.ca back-end modules being compared before and after the re-design

As we workshopped module requirements and templates, we were able to vastly simplify the volume of templates and consolidate more than 130 modules into 70 better designed, better engineered modules. We were also able to reduce the total number of templates from 25 down to 12, but with a more flexible, modular structure, content authors actually have more options and control over page layout than they did before.

We spent quite a bit of time on performance and accessibility. We wanted the site to provide a seamless experience for visitors on mobile devices with limited data plans, and for visitors using assistive technology. We adhered to WCAG standards and ARIA standards and included assistive technology in our test plans. We made sure to understand what the usability for the site would be for a visitor using a text reader to navigate and added navigation shortcuts to make moving through the site was as effortless as possible. We worked hard to minify our CSS and JavaScript throughout the site, and replace PNGs with vector images to reduce page load. The new Edmonton.ca provides a richer, more visually impactful experience, but at a fraction of the page size and load time. We worked hard to make sure mobile visitors only had to load the CSS, JavaScript, and image resolution that was important for them, leveraging the CMS ability to publish images at multiple resolutions.

Once the site was complete, Edmonton asked us to rebuild their search. Since the CMS platform, OpenText WSM, did not integrate well with Apache Solr, our recommended platform, we integrated the open source web crawling tool, Scrapy. We also built a browser-based management console so that non-technical site managers at Edmonton can configure collections, manage best bets, curate the keyword dictionary, and manage weighting and crawls. We were also able to deploy the powerful geo-location services in Solr so that where web content has location information attached (i.e. recreation centres, transit stations, or dog parks) search results can be sorted not just by relevance but by what is closest to where you are now.


Screenshot of edmonton.ca on a large screen monitor

The results

The most significant indicator of the success of this project was not that we completed it on time, on budget, and with all required features. It’s that at launch, we received zero complaints. And we mean zero. Not from city council, not from citizens, not on Twitter, and not even on Reddit. We scoured Reddit and no one complained. For a government website to receive unanimous acceptance from more than 1 Million users is unprecedented.

“It’s a beautiful piece of work and I wasn’t a bit surprised to see that Yellow Pencil worked on it.”

Karen McGrane

Because our approach included a pattern library to help us understand how to extend the design system for Edmonton.ca and for other digital properties, we’ve already planned to roll over the City’s OneCity Intranet and other web properties to the new design system, so that all visitors to Edmonton digital properties get a consistent experience aligned to their needs and to the City’s brand.

Screenshot of edmonton.ca pattern library

We work with public sector organizations because we understand government and how to get great work done. Both Yellow Pencil and Edmonton agreed that the success of this project came from the collaborative relationship we’ve established. Working as one team instead of two meant that “stakeholder management” took a backseat to open communication and collective brainstorming that bypassed a lot of unnecessary red tape, allowing for the creative juices to freely flow without regard for established roles or organizational barriers. This stemmed from a high level of trust from the city in our process, people and tools that we made available for this project.

Check out the city's website

Visit edmonton.ca