Beautiful Kingston

Information Architecture
Website Redesign
UX/UI Design
BeautifulKingston.ca is a website designed to provide tourists with information about the city of Kingston, Ontario. The website serves as a key resource for visitors planning their trips and for local merchants connecting with potential customers.
A UI and information architecture redesign was implemented to improve the site’s information searching capabilities and provide a more intuitive and efficient user experience for both tourists and local businesses. As a result, the task success rate increased from 30% to over 90%, significantly enhancing the website’s overall effectiveness in serving its diverse audience.

Timeline

12 weeks (2022)

Tools

Figma, Figjam, Miro, Optimal Workshop

Role

• Information Architecture Analyst
• Mid & Hi-Fi Prototyping

Team

Julia Gil, Joyce Ng, Yisu Hu, Min Lin, Myself

00 - Background

Website Overview

BeautifulKingston.ca was initially created in 2008 and updated in 2012. The website is used for tourists to discover and learn about Kingston's history and culture to gain a basic understanding of the city and to pique their interest in visiting. In addition, the website is also used to help local merchants promote their businesses.

The Problem

While attracting tourists and finding related information is important to Kingston’s city income, the current website hinders that goal by displaying cluttered, congested, and unreliable information. The current information architecture and interface design is discouraging tourists from understanding and visiting Kingston. Through an improved UX of BeautifulKingston.CA, Kingston’s tourism industry could gain a chance to bolster.

The Solution

The website is redesigned to provide an efficient and direct information architecture and a simple and concise interface design for users to find the information they needed to plan a well-informed trip to the city of Kingston, as well as learn more about the city’s basic information and local businesses.

Design Approach

The problem was approached in an iterative manner, with design decisions driven primarily by research data.

01 - Context Analysis

The Context

After identifying the website’s goals, it was essential to also define the stakeholders to guide our primary research, usability testing, and inform design decisions in later stages.
The stakeholders are:

1. local businesses of Kingston
2. Kingston City Council
3. government and local agencies.

Tourism plays a crucial role in a city’s economy by increasing revenue, supporting the local manufacturing industry, and creating essential service jobs. With this in mind, the goal was to make the website's navigation predictable, reliable, and consistent to enhance the user experience.

Content Audit

A content audit of BeautifulKingston.CA using Content Auditor and Screaming Frog SEO Spider revealed a structure primarily composed of images and text. The site contains 224 images (65.50%), 114 HTML files (33.33%), and minimal CSS and JavaScript (0.58% each). GIFs are used for decoration and headlines, adding unnecessary load, accessibility issues, and increasing page load times.
On the text content part, according to the crawling result on On Point Content Auditor for this site, the reading grade score was only 14.6, indicating that the content on the site may not be easy to understand. 
In addition, the average content age is 3084 days, which means the content on this website is around 8 years old. Outdated content may frustrate the purpose of providing up-to-date tourist information to users.

Navigation System

In addition to the content audit, a brief analysis of the navigation systems was conducted to better understand how users locate the information they need.
2 main problems are found:
1. Flat Information Hierarchy in Navigation Menu
The website features a scrollable global navigation bar with over 30 links to various pages. The lack of categorization and hierarchical grouping makes navigation difficult and leads to information overload.
2. Duplication in Footer
The website includes a global footer with over 30 links, many of which are duplicates of those found in the global navigation bar. As a result, the footer fails to serve its intended purpose of providing secondary navigation to less critical pages, such as the Privacy Policy and Legal Notice.

02 - Research

Secondary User Research

Based on the literature review and desktop research, the following insights were gathered regarding the target audience of the website:

Primary User Research

Through primary user research, the goal was to uncover: 

1. Travelers’ task completion on the website and pain points
2.  Small business owners’ needs when advertising online.

Primary user research was conducted with three distinct groups of potential users:
• University Student who is planning to take a trip to Kingston. A think-aloud session was conducted, where they were asked to find the ferry schedules and Kingston's spot on the website.
• Travel Photographer who loves taking pictures of beautiful landscapes. An observation session was conducted, where they were asked to browse the website casually and provide feedback.
• Local Business Owner who has experience with online presence. A 15-minute semi-structured interview was conducted to understand their specific needs.

Key Insights

Failure in completing tasks happened in almost every usability testing

1. Unsafe warning messages and frequent errors across the website.
2. A broken search engine that hindered users' ability to find information.
3. Disorganized and irrelevant information that caused confusion.
4. Confusing labeling that made navigation difficult.

" Every second, I just want to close the website and go to Google Maps. "

— Interview Participant

03 - Redesign

Card Sorting

Card sorting is a method used to understand how users would organize information. Participants are provided with cards to sort into categories of their choice. Given the problematic labeling and categorization of information on the current website, this exercise will help justify the design of the new information architecture schema.
3 card sorting activities were conducted using an iterative approach and the Optimal Workshop Card Sorting tool. Results from each round of card sorting informed modifications to the cards and categories for subsequent sessions.
↓ Snippets from our first card sort results
20 Cards and 8 Categories for the 1st Card Sorting Test
Similarity Matrix was used to determine the potential grouping of different cards.

Information Architecture Schematic

The card sorting data was used to develop the new information architecture (IA) schema. Below is a comparison of the before and after schemas.
*Before
❌ Over 30 category links in the global navigation menu
❌ Duplicated links in the global footer with the global navigation menu
❌ Ambiguous labels such as “Visitor Guide 2012”
❌ Lack of hierarchy and use of secondary navigation
❌ Too many irrelevant external links
↓ Take a look at the Before IA Schematic below (View the full IA diagram here)
*After
✅ Streamlined global navigation menu into 5 categories only
✅ Removed outdated or irrelevant content
✅ Removed external links
✅ Clearer label wordings
✅ Utilized global footer as secondary navigation, for links that are of secondary importance
↓ Take a look at the After IA Schematic below (View the full IA diagram here)

04 - Iteration

Tree Testing

After the first iteration of the IA schematic redesign, tree testing was conducted to validate the new structure. Tree testing is a method used to evaluate an information architecture by asking participants to locate specific information within the structure.
7 tree testing tasks were created using Optimal Workshop Treejack tool. The data from the tree tests will inform us if there is need for a second iteration for the IA schematic.
The 7 Tasks included:
Task 1: Find the ferry schedules for Wolfe Island.
Task 2: Find information about Kingston’s museums.
Task 3: Find information about the parking lot.
Task 4: Find information about Kingston’s museums.
Task 5: Find information about Kingston’s Park.
Task 6: Find information about Kingston’s Transit.
Task 7: Find photos of Kingston.
↓ Below is an example of how Tree Testing was conducted

Key Insights

1. High Success Rate
The success rates for all tasks exceeded 80%, indicating that the labeling, hierarchy, and categorization are effective.
2. Direct vs Indirect Success:
For tasks 4 and 5, despite high success rates, indirect successes were noticeable. This means that nearly half of the participants had to backtrack to find the information. Based on the first click results, users hesitated when deciding whether 'Walking Tour' should be under 'Things to Do' or 'Getting Around Kingston', or if 'Museums' should be listed under 'About Kingston' or 'Things to Do'.
3. Next steps
Given that the website's primary goal is to educate and inform tourists about the city of Kingston, the indirect success rate, though high, still contributes to the site's objective. Even if visitors stumble upon information, it can still enhance their experience and provide relevant insights. However, it would be beneficial to review the labeling in the global navigation menu to improve the overall navigation experience and reduce confusion in certain areas.
↓ The Tree Testing result indicating direct and indirect success rate

2nd Iteration of Information Architecture Schematic

From our tree tests, we have found that participants have confusion between the labels “About Kingston” and “Things to do”, through our indirect success data.We would like to make it clearer that “About Kingston” is for general information about the city, whereas “Things to do” contains information about specific tourist spots.

05 - Medium Fidelity Prototype

Storyboarding

Three tasks were translated into storyboards using the new information architecture schema. This step transformed the schema into page layouts and screen designs.

06 - High Fidelity Prototype

Visual Design Guide & Prototyping

As part of the individual project, the website redesign prototype was taken to high fidelity, focusing on the user flow of "Finding an art museum in Kingston." The design followed a style guide created to match the official colors of Kingston, ON.

07 - Reflection

Lesson Learned

1. Understanding the Target Audience in Data Analysis
Indirect success isn’t necessarily a negative outcome. The key lies in understanding the target audience and the website’s goals. For example, on a tourism site, user exploration can be beneficial if it helps users gather information about the city, as long as the website provides concise and relevant content.
2. The Interdisciplinary Nature of Information Architecture and UX
Both information architecture and UX design are closely related fields that focus on improving the user experience. Enhancing wayfinding on a website is similar to guiding users through a physical space, ensuring that they can easily navigate and find what they are looking for. This understanding of user flow and navigation is essential to creating a seamless and intuitive experience for users.

Like what you see :-) ? Let's talk!

ming.ym.design@gmail.com
Navigation
HomePlayAbout
Case Study
WorkorbUber HealthFlockBeautiful KingstonParkedIn
YUETMING WONG
© YuetMingWong 2025.