Austin History Center
Website Evaluation & Redesign
Overview
Ensured a notable 19% improvement in user navigation success by conducting an in-depth analysis of the website's information structure and delivering a redesigned prototype, which has been integrated into the latest version of the website.
Role
Team Leader, UX Designer
Tools
Figma, Miro, Optimal Workshop,
Screaming Frog SEO Spider
Time
6 weeks
– Introduction –
Background
The Austin History Center website plays a crucial role in AHC’s operation.
It is equipped with various functions, such as information preservation and exhibit registration.
Problem Statement
"How might we enhance the Austin History Center website to improve information clarity, streamline navigation, and make content more user-friendly?"
Process Overview
– Phase 01 - Research –
Content Audit
We conducted a Content Audit through Screaming Frog SEO Spider to gain a comprehensive understanding of the website and identify any issues or pain points.
↑ This is a screenshot of our work: a spreadsheet of the Content Inventory. Click on the image to zoom in.
Issues and pain points we found from Content Audit:
It's difficult to manage and update information.
There are too many PDF pages.
It's hard and complex to reach the information.
72% of URLs are more than 7 levels deep, requiring a minimum of 7 clicks to reach those URLs.
Most of the URLs are treated as errors and are not indexable.
Over 95% of URLs on the site have a “Non-200 Hreflang” status.
The website often leads users to leave the website.
There are 124 external links within the first 2 layers.
Important information is presented in images, therefore inaccessible via the search function.
Inconsistent page structure and design across pages.
Card Sort
Conducting a hybrid Card Sort allows us to observe what users think about the labels and categories for each page.
↑ This is a screenshot of me conducting a Card Sort with one of the participants. Click on the image to zoom in.
We analyze the results of the Card Sort by observing the Standardization Grid, the Similarity Matrix, and the Dendrograms.
↑ This is a screenshot of the dendrograms generated from our card sorting results. Click on the image to zoom in.
Issues and pain points we found from Content Audit:
Overuse of jargon and complex words
Employing commonly used language, which leads to confusion
– Phase 02 - Design –
📍 Pain Points of the Website
Based on the results from the research, the existing issues in the AHC website include:
Discoveries from Content Audit:
Existence of redundant pages
Disorganized site structure
Poor formatting leading to SEO issues
Discoveries from Card Sort & User Survey:
Confusing labels and categorization leading to low navigation efficiency
Jargon issues
Confusion regarding the purpose of various sections
💡 Design Goal
To provide users with a sense of direction and location throughout the website.
To minimize redundancy on the website, i.e., to make it more compact and easier to comprehend.
To make the website's information architecture more robust and adaptable to future content additions/changes.
Sitemap
Based on the results from the previous research, we designed a new organization system and a new labeling system for the website.
Then, based on these two systems, we created a new sitemap for the AHC website.
The following images are the original sitemap and the new sitemap we created.
↓ Before - the original sitemap from AHC website
Click on the image to zoom in
↓ After - the new sitemap we created
Click on the image to zoom in
Tree Test
To assess the practicality of the sitemap, we conducted 2 iterations of the Tree Test, with 34 participants completing 7 tasks on the AHC website.
Through this method, we observed users' reactions to our Sitemap and determined if it met their requirements.
↓ This video briefly demonstrates how we conducted a tree test through Optimal Workshop.
Tree Test Results:
First iteration's overall success rate: 55%
Second iteration's overall success rate: 74%
We fixed the label with the lowest success rate after the second iteration →
The overall success rate of the final sitemap would be > 74%.
↓ This is the final sitemap after 2 iterations of the Tree Test.
Click on the image to zoom in
Final Design and Prototype
After validating the new sitemap through tree testing, we developed a prototype to showcase our findings and 6 key design recommendations.
#1
Global Navigation
Kept the global navigation system but streamlined the 7 categories into 4 according to our final sitemap.
Added drop-down menus to each of the categories to help users navigate throughout the website
#2
Local Navigation
Deleted the left-side local navigation bar and provided breadcrumb navigation near the top of the page to enhance the clarity of the user's current location and the information structure.
#3
Historical Collection page
As the Historical Collection page includes many different categories of collections, we included all the entrances to these categories in this page with more clarity.
Embedded the search function for the Historical Collection page.
The search function can provide all the resources related to the keyword entered, let users know the location of the resources by directly showing them as a result, and lead the user to the page.
#4
Page Integration
According to our research, some of the pages share similar types of information, and participants could not tell the difference between these pages.
Therefore, we merged these pages together and embedded a search function for more specific searching between archives and documents.
We also divided the information on the page into sections and marked important information with color to increase clarity.
#5
Photographs Page
According to the results of card sorting, we merged pages that are related to photographs together and divided different information using sections and marked it with color.
In this way, the navigation will be more intuitive than before.
#6
Contextual Links
In each page, we turned contextual links into different forms.
For example, listing the links as bullet points allows users to find their required information more efficiently, and turning links into buttons can emphasize the existence of the link (such as the Donate button in the image).
