How citizens navigate city websites

Our team at Yellow Pencil recently launched a new website for the City of Edmonton. It was a major project for Canada’s 6th largest metropolitan region. While the primary objectives were going responsive, making content management more modular, and improving search, we also collected a few insights along the way that helped us to improve the design system.

Our biggest learning on the project had to do with navigation. We’ve accepted that most users start their visit at a search box not at the home page, but we also learned that most users don’t navigate in the way that we used to think.

Reading is reading and navigating is navigating; mixing the two makes everything harder for citizens trying to accomplish a task.

How they move

One of our first and most impactful findings came from a deep dive into Edmonton’s analytics (we’ve been managing the site with them since 2008 so we have LOTS of historical data). Our UX lead identified a familiar pattern: 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. What surprised us was that most visitors ended the session after completing their one task, and that was a successful visit.

Up until 2016, in almost every government project we spent a significant amount of time thinking about wayfinding. I’ve personally given countless speeches about how >60% of visitors land deep into your site from an external search and need a highly visible, ever-present wayfinding system to provide immediate context for where they are in your site. We’ve spent days and weeks designing highly exposed, ever-present navigation systems specifically so that users can understand exactly where they are so they can move to other parts of the site easily once they complete their first task.

But the problem is, citizens seldom attempt to solve multiple problems on a single visit. At least not according to 7+ years of analytics.

The insight

Most visitors to a government site have come with a single purpose. They enter deep in the site based on a specific topic or task. They view several highly related pages, then they move on. Our insight: in an ideal scenario, most visitors to government websites don’t navigate globally once they have found what they want, they just end their session.

When a visitor is reading they are reading. When they are navigating, they are navigating. The two don’t happen at the same time.

The design response

How did we respond? We defocussed navigation.

It’s a common pattern for small screen design to move navigation off canvas to enable a more focussed reading experience. For Edmonton, we also applied that pattern to large screen breakpoints. Once you begin to read (scroll), the navigation disappears allowing you to focus on content without distractions.

Edmonton.ca website with navigation visible (initial page load)
Edmonton.ca with navigation off screen to create a focussed reading experience.

For large screen visitors, we also used a split global/local navigation pattern. The local navigation is presented in line with content because that matches how visitors actual use the site — moving around a small set of highly interconnected content pages but not accessing the global navigation.

For small screen visitors, we used a mobile-optimized navigation system (works on any small screen but is optimized for compact touch interfaces) that allows a visitor to pull the off canvas menu into focus and see where they are in the site, then browse the entire site structure. They don’t have to continually click through the structure and load landing pages in order to browse.

Navigating Edmonton.ca on a small screen — visitors can browse the entire tree structure from this view without having to continually load pages to move forward and backward on their path.

For all screen sizes, the guiding principle behind our design decisions was focus — when a visitor is reading, let them read and when they are navigating give them powerful, useful navigation tools.

User testing and actual performance for visitors has been off the charts. For a municipal region with more than 1M citizens, we received zero complaints at launch. No ALL CAPS E-MAIL SUBJECT LINES, no tweets to the mayor, no angry calls to 311, and no passive aggressive threads on reddit.

Supporting design patterns

Two supporting design patterns we employed were a mega-breadcrumb and highly readable text.

We created a breadcrumb that provided wayfinding and contextual information, and also allowed a visitor to move around the site. While mega menu is an established pattern, we haven’t seen a lot of mega breadcrumb. We’re very pleased with the results based on user testing of this new feature.

Text on the Edmonton.ca site uses large type with reasonable column widths, and is surrounded by negative space to be easy on the eye. Sites like Medium have led the charge for readability and the success of Edmonton.ca proves that government and institutional customers should consider adopting this pattern.

Credit and such

When I say “we” throughout this article I mean the Yellow Pencil team, with particular kudos to Phil Kneer, Sam Jiang, Tracey Vantyghem, Graeme Duckett, and Dylan Rogowsky.

Ethan and Karen at the Responsive Web Design Podcast featured this project in a recent episode if you’d like to hear our client Paul Strandlund and our development lead Dylan talk about some of the technical challenges that we overcame on the project.

This is just a small slice of what we learned on the project, I’m happy to talk about other lessons we’re learning from our many public sector clients about digital government, from identity management to playbooks to governance to accessibility.

Check out what we think a City website should be like at Edmonton.ca.