Team
Yuet Ming Wong
Sheldon Chen
Alexandria Davis
Zixu Chang
Joyce Ng
Julia Gil
Min Lin
Yisu Hu
Tools
Figma
Balsamiq
G-suites
Content Auditor
Optimal Workshop
Duration
2 months
Oct - Dec 22
Sector
Tourism
Client
the City of
Kingston
Role
Content Inventory
Information
Architecture
Card Sorting
Prototyping
Visual Design
Platform
Website
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.
Website Overview
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 Problem
The website is redesigned to provide an efficient and direct website structure 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.
The Solution
Design Process
Context Analysis
In order to get a general understanding of BeautifulKingston.CA’s structure, content audit was performed using online crawling tools, Content Auditor and Screaming Frog SEO Spider.
It contains mainly images and text. According to the website crawling result from Screaming Frog SEO spider, it has 224 images (65.50%), 114 HTML (33.33%), 2 CSS (0.58%), and 2 JavaScript (0.58%). It does not contain any video, audio, or compressed content.
There are some animations in GIF format that act as a decoration with no practical use on the website. In addition, every single headline of the page is presented using a GIF. It creates unnecessary burden and lengthens the loading time for the website.
Content Audit
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.
The main navigation bar contains thirty-five (35) category links, placed on the same hierarchy. There are no secondary navigation links, from the top-down point of view, users navigate the website using either the side main menu or the bottom menu. From the bottom-up point of view, there are no breadcrumb trails to remind users which page they are currently on, except the headline of each page. The large number of category links on the main menu would also cause information overload.
Beside content audit, we briefly analyzed the navigation systems to understand how users find their information.
Navigation System
2 main problems are found:
1. Flat Information Hierarchy
The website has two long lists of global navigation bars, including a vertical one at the right side of the website and a horizontal bar at the bottom of the website. The two bars provide exact same tabs with different UI designs. Users might confused the horizontal bar with footer while it is just another navigation bar.
2. Duplicated Navigation Menu
1. Flat Information Hierarchy
2. Information Overload
3. Low Reading Score and Outdated Content
4. Inadequate UI Design
Problems Summary
The two main user groups for this website are 1. Small Business Owners and 2. Travelers. Small business owners in Kingston use this website to advertise and promote their business while travelers use this website to plan for their trip to Kingston.
The Users
To further understand the user groups, a 15 minute semi-structured interview with a business owner whose products/services have been or currently are advertised on a third party platform was conducted.
The participant provided key insights as to how businesses should be advertised on other platforms. Three key themes emerged from this primary research – detailed oriented content, features, and types of ads.
User Interview
Usability Test
Observation
Besides interviewing the business owner, a usability test with a student who plans to visit Kingston in near future and an observation with a landscape photographer casually browsing through the website were done to further investigate users’ attitude towards the website.
The student failed to complete both assigned tasks, 1. find the ferry schedules and 2. find out information about the main attractions in Kingston, while the photographer said “Every second, I want to close the website and go to Google Maps.” The result reconfirmed our problem analysis from the content audit and navigation system.
Redesign & Evaluation
Before
Information Architecture Schematic
To get a comprehensive understanding of the current website’s structure, an information architecture schematic was created through analyzing the content of each page of the website. (View the full IA diagram here)
As shown below, the current I.A. schematic is lengthy with a flat structure. There are a large amount of irrelevant, outdated pages, and pages with broken links. The global footer is just a duplication of the global navigation bar, which creates a serious information overload problem.
Starting from deleting the irrelevant pages in the before I.A. schematic, a closed Card Sorting test with 20 cards, 8 categories and 13 participants was conducted to evaluate the newly proposed cards and categories.
Card Sorting
By analyzing the similarity matrix from the card sorting test result, 2 more hybrid and closed card sorting tests were carried out to evaluate and adjust changes in cards and categories.
There are 2 main problems from the card sorting
1. Ambiguous labeling is misleading
While we didn’t specify who “Us” in the “About Us” category is, most participants were confused by the it and the “About City” category. Category and card name should be as concise as possible in terms of wording to avoid misunderstanding.
2. Cards belongs to multiple categories
Cards like “Kingston Park” and “Day Trips” can be easily categorized into both “Things to do” and “Main Attractions”. It is important to carefully evaluate the meaning of each category and make sure there is no overlapping issue.
20 Cards and 8 Categories for the 1st Card Sorting
After
Information Architecture Schematic
From analyzing the 3 card sorting results, a new I.A. Schematic was created. We grouped tier 2 pages under 5 main categories in the global navigation menu. The 5 categories of pages are “About Kingston” , “Things to do” , “Local Businesses” , “Getting Around Kingston” , and “Contact Us” . (View the full IA diagram here)
Besides, we have removed the duplicate pages in the global footer section. The new global footer section now does not link to tier 2 web pages, but instead acts as a secondary navigation with sites that are of secondary importance to the users. Tier 2 pages such as About us, Contact us”, “Privacy policy”, Cookie policy and Legal notice are added under the header Quick Links in the footer.
After the new I.A. schematic was created, tree testing was introduced to evaluate the usability of it.
Participants were assigned to complete 7 tasks:
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.
Tree Testing
The tree testings have a 90% average success rate, which means it is overall easy for the users to find information that they needed. However, task 4: Find information about Kingston’s museums and task 5: Find information about Kingston’s Park both have 50% or above indirect success rate. It is significantly higher than the rest of the tasks. By looking into where participants first clicked during the task, we found out they often went to “About Kingston” instead of “Things to do” first when they try to find places related to Kingston. From the results, we understood there is still confusions and overlapping issue for “About Kingston” and “Things to do” to a lot of users.
Final
Information Architecture Schematic Adjustment
After researching similar travel websites for Montreal and Toronto, we decided to change the label “About Kingston” to “Our Community”. We believe it can limit the conflation of subjects between information relating to anything at all about Kingston and Kingston based activities and maintain a space for Kingston’s history, photos, and introduction.
1st I.A. Iteration
2nd I.A. Iteration after Tree Test
Task Flow Redesign:
Find an Art Museum
With the finalization of I.A., a task flow of finding an art museum was redesigned to provide clear option, easy path, and concise information for the tourists to plan their trips to Kingston. Below you can find the different details between the 2 task flows.
Style Guide
Conclusion
Lessons Learned
1. Indirect Success Can Also Be a Success
During the tree test, I learned that depending on the nature of the website, indirect success can be a positive thing. For website that are heavily functional, like banking website, a high indirect success rate would frustrates the users. But for tourism website like BeautifulKingston.CA, the ultimate goal is to let users learn more about Kingston. A high indirect success rate might help the users to discover new activities and places that they would like to visit when they are planning for the trip to Kingston, which is not considered as a failure. I learned to zoom out and focus on the bigger goal to benefit the users instead of designing with only one specific goal in mind.
2. Same Wording, Different Meanings
By evaluating the newly designed navigation bar, I found out even the exact same wording can mean very different things to different users. Because different users come from different cultural backgrounds, which will varied their understanding in words and languages. For a tourism website, a user group from variety of cultural backgrounds is expected. Therefore, a deep dive into the user groups is crucial to further improve the navigation system of a website.
