back

guides – city of vancouver internship

A digital experience on vancouver.ca that streamlines flows of multiple pages and touchpoints from complex topics into a single platform

guides screens
 

City Guides

I had an opportunity to design and help launch and lead the design of the new "Guides " platform for the City of Vancouver.

  • Business Goal:
    Streamline the City’s most popular topics into one single page that points citizens to the right information
  • Success Metrics:
    Originally launched with 3 Guides in 2018, with 10 Guides launched as of 2021

    Average 90k visits per year, with an average 70% click conversion rate
  • Timeline + Scope:
    Designed and launched v1 within 3 months (2018), with multiple phases released after (2019+)
  • Role:
    Led the UX design strategy with development and content strategists
The Problem

Pages Upon Pages

With a government website, there are large amounts of information spanning multiple pages. Citizens could find themselves navigating multiple pages, while only trying to find the specific information they needed.

This is what some of the current navigation structure for the City website. From the current navigation, it shows popular topics, but within each page there are even more subtopics. With the abundance of content, it can easily be overwhelming. The design challenge was, how could we help to ease this process in a unified platform?

The opportunity was to create a “Guides” section. Working for a citizen-centric government, this provides an opportunity to make the process of finding information on a topic that spans multiple pages easier, reducing the cognitive load of searching through the website.

Research

Guiding The Direction

Typically, large government websites cater to the 80-20 use case, meaning 80% of people come for 20% of the content. Guides aims to help guide the ability to find that 20% of content more easily.

It was important to define that these guides enhance the content, but not replace the content on Vancouver.ca. With the abundance of potential topics, this was important to define what topics actually need guides from a strategy perspective. 

The following documentation showcases a Guide for a new business user.

This persona shaped the Small Business guide strategy as part of the original pitch for the platform. We chose the new business owner because opening a business in Vancouver involves multiple touchpoints across both web and in-person.

I then created a user journey. Looking at starting a small business, this use case helped me to illustrate the problem and need Guides aimed to tackle.

This topic is one of our top and prime examples of having to look through multiple pages of content for permits and paperwork. This case also involves both online and City Hall interaction, and at times external vendors.

An intervention was needed for this user type, and this is where Guides comes in – to help gain faster insight within specific topics the City can offer.

Brainstorm & Collaboration

I got to brainstorm and sketch out different iterations of how the Guide direction could look. Through the design process, I collaborated with our content strategists, as they would be one of the primary use cases for creating content with the new layout.

Final Design

Integrating Into the Current CMS

I helped to develop the final interface. This is a high-level overview of the interface strategy, and would integrate into the current CMS structure of the City for content strategists to create Guides.

Landing Page

The landing page of Guides features the current Guides that the City has implemented. A landing image, along with the title and quick description give quick and glanceable information.

Guide Intro

The Guide intro features the landing image, and “quick links” that showcase the 4 most important links of the Guide. This does also help with the 80-20 use case, showing the most important content. 

Guide Content

The Guide is broken down into topics. These topics are found in the “guide navigation” at the top, allowing users to quickly find the info they need within the Guide itself. The content allows for “image headers” and short pieces of content to focus on immediacy of the content. Supporting the 80-20 use case, short pieces of content allow for easier to consume information. 

  • Review candidates (before)
  • CMS

    Integration with Current CMS

    The Guide strategy also allows for integration of current widgets within the CMS system used for the City website. This allows for more flexibility and creativity of content strategists when designing the Guide.

    View the live "Guides" section on Vancouver.ca

    Impact + Results

    Since launching in 2018, Guides has grown from a 3 to 10 Guides as of 2021.

    Takeaways

    city of vancouver family

    This was my first UX internship, and was thankful for the opportunity to work at the City. Working for the City solidified my passion for creating meaningful products – and designing at a local level was rewarding to see the impacts it made.

    I would like to thank Julien, Sam, and Tadgh for their mentorship throughout my internship.

    All other work and future scope of projects showcased here is under an NDA, but I would be happy to discuss my experience and takeaways from this internship in-person or at an interview.

    The City of Vancouver is located on the unceded traditional territories of the Musqueam, Squamish, and Tsleil-Waututh peoples.

    View another project: