Beautiful Kingston
What is beautifulkingston.ca?
BeautifulKingston.ca was initially created in 2008 and updated in 2012 to help local merchants promote their businesses and provide tourists with information to plan their trips to Kingston, ON.
The key tasks for the website are 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 it.
↓ below is a screenshot of the original website ↓
The Problem
BeautifulKingston.ca intended to attract tourists and promote local businesses in Kingston Ontario. However, the below problems hindered users from getting relevant information about the city and thus fail to fulfill the intended purpose of the website:
1. Unfindable or Hard-to-find information
2. Information Overload
3. Inadequate User Interface Design
4. Broken Search Engine
The Solution
Through background user research and primary user research such as interviews, think-aloud observation, card sorting and tree testing, we redesigned the information architecture schema for the website based on user needs, especially one that fits the tourists of Kingston, ON, increasing the task success rate to 90%+ across user flows.
We also created a mid-fi prototype for the website based on a minimalistic design using the new categorization and labeling system we designed. As an individual work, I also created a visual / (hi-fi) UI design for the website.
All these resulted in a clearer navigation experience for the tourists who seek to learn more about Kingston’s sites and help local businesses amplify their presence online.
➜ Click here to view the hi-fi prototype
How we approached the problem
We approached the problem in an iterative manner and design decisions were heavily based on research data.
The Context
After identifying the website’s goal, it is also important to identify the website's stakeholders to inform our primary research, usability testing and further design decisions in later stages.
The stakeholders are:
1. local businesses of Kingston
2. Kingston City Council
3. government and local agencies.
Tourism is specifically important to a city because it increases city income, bolsters the local manufacturing industry, and provides necessary service jobs.
For this reason, we aim to make the website navigation predictable, reliable, and consistent.
The Content
The website’s content is problematic and it makes it hard to navigate. Problems are identified in the following four areas:
1. Duplicated Navigation Menus
2. Illogical information order
3. Lack of information hierarchy
4. Irrelevant and outdated information
These problems will be further explained below.
Global Navigation Menu
The website consists of a scrollable global navigation bar with more than 30 links to various pages. The content is not categorized using labels and grouped under a hierarchy, making it difficult to navigate and causing information overload.
Global Footer
The website also contains a global footer with again, more than 30 links to various pages. Upon closer look, it is found that these links are duplicates of the links on the global navigation bar. Thus, the footer fails to serve secondary navigation purposes to pages of lesser importance, such as “Privacy Policy”, “Legal Notice”, etc.
Website Content
From the content audit tool, we also found that the website contains lots of irrelevant and outdated information, resulting in distraction as users are trying to seek information on the site.
Secondary User Research
Based on the literature review and desktop research, below is what we know about the target audience of this website.
Primary User Research
Through primary user research, we wanted to find out: 1. Travelers’ task completion on the website and pain points and 2. Small business owners’ needs when advertising online.
We conducted primary user research with three groups of potential users:
➜ University Student who is planning to take a trip to Kingston. We did a think-aloud session asking them to find ferry schedules and Kingston's spot on the website.
➜ Travel Photographer who loves taking pictures of beautiful landscapes. We did an observation session asking them to casually browse and give comments on the website.
➜ Local Business Owner who has experience with online presence. We did a 15-minute semi-structured interview to ask them to explain their needs.
Key insights:
- Failure in completing tasks happened in almost every usability testing 🛑
- Unsafe warning messages and error everywhere on the website ✋
- Broken search engine 🔎
- Disorganized and irrelevant information ❓
- Confusing labelling 🤨
“Every second, I just want to close the website and go to Google Maps.”
— Participant 😔
Card Sorting
Card sorting is a way to find out how users would organize information. Participants will be given cards to be sorted under categories of their choice. Given the problematic labeling and categorization of information on the current website, this will justify the design of our new information architecture schema.
What we did:
3 card sorting activities with an iterative approach, using Optimal Workshop Card Sorting tool. The previous card sort results would inform how we modify cards and categories for the next card sort.
↓ Snippets from our first card sort results. We used Similarity Matrix to determine the potential grouping of different cards. ↓
Information Architecture Schematic
We made use of our card sorting data to create our new information architecture schema. Below is a comparison of the before and after schema.
Before IA Schematic:
❌ 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↓
After IA Schematic:
✅ 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↓
Tree Testing
After our first iteration of the IA schematic redesign, we made use of tree testing to validate our idea. Tree testing is a method to evaluate our information structure by asking people to attempt to find information from it.
What we did:
7 tree testing tasks using Optimal Workshop Treejack tool. The data from the tree tests will inform us if we need a second iteration for our IA schematic.
Key Insights from Tree Testing
📈 High Success Rate:
We have found that the success rates across all of our tasks are over 80%, which indicates that the labelling, hierarchy and categorizations are effective.
🤔 Direct vs Indirect Success:
For some tasks, such as task 4 & 5, despite the high success rate, indirect successes are noticeable. It means almost half of our participants find information by backtracking. Based on the result of the first click. We found users hesitated if ‘Walking Tour’ under ‘Things to Do’ or under ‘Getting Around Kingston’, or if ‘Museums’ are under ‘About Kingston’ or ‘Things to Do’.
💡Next steps:
Based on the nature of this website being a tourism site, with a goal to educate and inform tourists of the city of Kingston, although the indirect success rate is high, any information that the visitors stumble upon may still benefit their visit and achieve the site's goal to educate people on Kingston by providing them with relevant information.
However, it may still be ideal to review the labelings of the global navigation menu to improve the overall navigation experience and clear up confusion on some parts.
Information Architecture Schematic 2nd Iteration
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.
Storyboarding
We turned three tasks into storyboards using our new information architecture schematic. This step turns our schema into page layouts and screens.
Visual Design Guide & Prototyping
As an individual project, Yuet Ming (my teammate) and I took the website redesign prototype to high fidelity, modelling the user flow of “Finding an art museum in Kingston”, following a style guide I created that matches the official colour of Kingston, ON.
Taking into consideration the target audience when analyzing data
Indirect success isn’t always a bad thing. It all comes down to who the target audience of your website is, and the goal of the website. For instance, if the website you’re working on is a tourism site, it may even be good if your users wander a bit on your website, because ultimately they want to be informed about the city, provided that the website contains concise and relevant content.
Information architecture and UX are interdisciplinary
Information architecture and UX design have a lot of overlap with my previous experience in consumer goods sales and marketing. IA and UX of a website are sometimes about improving the wayfinding experience for the users, which is very similar to consumers’ in-store navigation. I found myself applying a lot of cross-disciplinary knowledge from my previous professional experience to this project, which incredibly broadened my horizons.