CITY OF TORONTO

Website Navigation Redesign

ROLE

UX/UI Designer

Date

Sept - Dec 2023

CLIENT

Personal Project

TOOLS

Figma, Photoshop

How can we make city services easier to find?

BACKGROUND

After experiencing firsthand how difficult it was to navigate as a newcomer. Finding essential details—like community center locations, hours, services, and COVID-related restrictions—was frustrating due to poor discoverability.

A heuristic analysis confirmed major navigation issues, prompting a redesign of the site’s information architecture. The main challenge was restructuring the navigation into more intuitive, action-driven terms to help users quickly find what they need.

Understanding Users

TALKING TO PEOPLE

The user demographic for the Toronto City site is diverse, emphasizing the importance of prioritizing accessibility to meet the needs of everyone. According to the 2021 Census, 42.5% of Toronto residents reported a mother tongue other than English or French, while 4.5% did not know either official language.

Connecting Communities

Designing for Inclusivity

In particular, community centers play a vital role in serving predominantly elderly and lower-income households, positively impacting our city. Recognizing this, it is crucial for the services provided by the community centers to enhance communication and understanding within this diverse target audience, ensuring inclusivity and accessibility for all.


So how does Toronto compare?

Competitive Analysis

To understand this industry better, I aimed to examine how other global cities engage their communities and handle categorizing issues with a comparable range of services. I evaluated the strengths and weaknesses of both sites to gain insight in how to best restructure the navigation in a way that the users can identify easily.

Melbourne

Strengths
• Constructs the navigation by defining who the user is.
• Has a quick access panel to the most frequent actions
• Enables multiple ways of refining the users needs
Weaknesses
• Featured links placement can cloud more relevant information

Vancouver

Strengths
• Categorizes by action
• Minimal design and aesthetic
Weaknesses
• Hierarchy not maintained though the whole page

Is Poor Design Keeping Residents from Important Services?

Heuristic Evaluation

I conducted a heuristic analysis focused on navigating the journey to obtain specific information, including details about the nearest community center, operating hours, available services and pricing, as well as COVID-related restrictions and rules.

1

The navigation bar uses terminology that doesn’t align with how people naturally search for information. The categories could be clearer and more direct, especially since most visitors come to the site with a specific task in mind, like finding information or applying for permits.

2

The drop-down menu from the top bar is problematic for those with motor control issues as it is difficult to keep it in an active state with the mouse or trackpad. There are also two separate navigation bars and an "I want to" section for quick access to the most popular options. Using a sidebar here would help with both navigation by keeping everything in one centralised place.

3

I conducted a rapid and unofficial test of this site with 3 classmates and asked them to find a specific recreation site and there was a 100% fail rate in this straightforward task.

1

The site lacks consistency, especially while navigating long lists of options. This could be resolved by clustering relevant content together and then prioritizing essential information to aid scalability.

2

These long lists also require a significant mental load, which could be reduced by introducing icons and graphics which are more easily recognized.

3

Much of the information here is superfluous and could be better categorized to ensure a more aesthetic and minimal design. Here the visibility is seriously reduced by the lack of whitespace and unnecessary information.

From Ideas to Structure

System Map

The site faces significant navigation challenges due to unclear headings and a convoluted approach to finding specific information. Structural issues have resulted in a site that is challenging to navigate, particularly impacting the discovery of crucial details about the Community Centre's facilities and accessibility. The absence of overlap or circular navigation often leads users to dead ends, necessitating a return to the homepage.

The site's flat hierarchy and extensive list options, without effective grouping, create difficulties for users, especially those relying on screen readers who must navigate through lengthy lists.

In my proposed redesign, I draw inspiration from the user-centric approaches of Melbourne and Vancouver city pages. The new navigation focuses on user tasks, with a clear direction under the "find" category. Within the "sports and recreation" link, various branches facilitate facility search based on map location, activity, or accessibility. This approach guides users to the nearest center tailored to their specific needs.

In my proposed architecture I pivoted the language to be reflective of the user and/or the action. Defining the category in the main page to either “find” for someone looking to take a direct approach, or “community” where users can browse all of the resources and events within Toronto.

From there once they sought out the Sports & Recreation section it became easy to reduce the pathways by having all relevant details in one place. Locating a recreation centre became easy as you can now find this in multiple ways (By list, Map, Activity and by accessibility). This solved one of the main issues for newcomers to the city who would be lost in extensive lists due to unfamiliarity with Toronto and its neighbourhoods.

A User-First Approach

THE FINAL DESIGN

Starting with the homepage, I structured the content around user intent—first identifying who they are, then guiding them to what they might need. The primary categories were Residential, Business, and Community, as most of the site’s information naturally falls into one of these groups.

Additionally, I introduced a secondary section for quick-access links to essential actions like paying a parking ticket, applying for permits, or finding specific city services. These were categorized under clear, action-driven labels: Pay, Find, and Apply.By using more intuitive language and real-world logic, the site becomes more user-friendly, replacing vague labels like "Explore and Enjoy" with direct pathways that help users quickly access what they need.

Clean and consise navigation

OUTCOME

By implementing a sidebar with distinct colors for each navigation level, users can quickly understand their location within the site’s structure. This visual differentiation enhances clarity, making it easier to identify and access relevant information without getting lost in complex menus.

Categorizing for Better Navigation

OUTCOME

One of the biggest issues with the site was the overwhelming lists of information presented without a clear structure. By breaking this into two pages—one that categorizes content upfront and another that guides users to the relevant details—we significantly improve navigation. This approach reduces cognitive load and makes it easier for users to find what they need efficiently.

Finding the Right Recreation Center, Faster

OUTCOME

On the recreation center overview, I introduced multiple ways for users to find a center that suits their needs. Instead of navigating through a long, unstructured list, users can now search by activity, amenities, or accessibility features.

This streamlined approach eliminates the need to click into individual pages and backtrack repeatedly, making it significantly easier to locate the right facility.

Enhancing Facility Pages for Better Usability

OUTCOME

To improve accessibility and usability, I integrated pricing information directly into the facility pages, eliminating the need for users to search in separate sections. I also introduced an interactive map, helping those unfamiliar with the city visualize locations while offering quick links to nearby facilities. Additionally, I streamlined key details by clearly listing available amenities, timetables, and disabled access information.

How this project redefined my design thinking

PROJECT TAKEAWAYS

This was one of my first design projects at George Brown, and looking back, it provided valuable insights into how global cities engage their communities and structure vast amounts of information.

Allthough this was a small study within a much larger system, it reinforced the importance of balancing aesthetics with functionality and taking a holistic approach to organizing content.

FUSE

Branding
UX/UI

Unwrapit

UX/UI

City Of Toronto

UX/UI

Beatnik

Branding
web design
development

Saint Spore

Animation