I had an opportunity to design and help launch and lead the design of the new "Guides " platform for the City of Vancouver.
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.
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.
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.
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.
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.
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.
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.
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.
Since launching in 2018, Guides has grown from a 3 to 10 Guides as of 2021.
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.