Information Architecture Design
Textile Museum
of Canada
The only museum in Canada dedicated to exploring the human experience through textiles.
My role:
Team Leader.
Secondary Research, Content Inventory, Card Sorting, Information Architecture Design, Tree Testing, Navigation Design.
Duration:
November – December 2023
5 weeks.
Team:
Zhenbo Wu, Christy Li, Shaochenzi Wang, Yanxia Huang.
Platform:
Desktop, Mobile App
Tools:
Figma, Miro, Optimal Workshop, Screaming Frog, Lucid.
OVERVIEW
Textile Museum of Canada
Textile Museum of Canada’s website provides a platform for users to explore an extensive selection of exhibitions, collections, and educational resources. Offering insights into both historical and contemporary textiles, the site facilitates both online exploration and planning for in-person visits.
This project aims to redesign the website's information architecture and navigation design for Textile Museum of Canada.
THE PROBLEM
Textile Museum of Canada’s website struggles with poor navigation and disorganized content, impeding user engagement and education.
(Exhibits in the museum)
(Current website design)
NEEDS
01
Expanding Online Engagement
Since the pandemic, the Textile Museum of Canada has integrated more online activities and content. They aim to attract more users to participate in and learn about their activities.
02
Enhancing Digital Outreach & Preservation
As a unique institution focusing on textile arts, they seek to use their online platform to draw attention to textile arts, educate about their preservation, and enhance their branding.
03
Solving Navigation and Organization Issues
The existing website was challenging to navigate and had disorganized content and structure.
“How can we make activity information more attractive and informative to encourage participation in online and offline activities?”
“How can we integrate more background information on collections to enhance knowledge, preservation techniques, and museum branding?”
“How can we optimize the information architecture and navigation to better serve users and increase their engagement?”
THE SOLUTION
We re-designed the website based on user research findings and human-centered theories.
To solve the top three problems above and enhance the user experience for diverse users, we did secondary research as well as primary card sorting and tree testing to know users’ preferences. Then, we re-designed the information architecture and navigation design of the website, incorporating Social Proof Theory and Miller’s Law.
01
Add a Review System
Introduce a feature for visitors to post reviews of museum activities, which can increase both the persuasion of the information and user engagement.
02
Improve the Information Organization
Organize the structure of the information system and navigation model.
03
Add Conservation and Education-Related Content
Create content focused on textile art conservation. Increase both online and in-person activities and classes.
Project details starting from here! ⬇️
1️⃣
Secondary Research
Hear from other users
With time and resource constraints, secondary research is always a great starting point for designers to know about the current state of the problem.
As the project leader, I assigned each team member, including myself, to gather online reviews about the museum, focusing on users’ digital experience. We each collected 5 positive and 5 negative reviews from platforms like Google Maps and TripAdvisor.
(Some Sample Reviews)
Key Findings
From the reviews, key issues such as the lack of detailed information about collections and the perceived value of the visit have been identified. On the positive side, visitors appreciated the interactive activities and the opportunity to learn new things.
2️⃣
Content Inventory
Now, we know what users disliked and liked about their current experiences with the museum. It’s time to see what the website currently has and explore how we can edit it to meet users’ needs.
.jpeg)
(Screaming Frog Logo)
(Screenshot of Screaming Frog)
Utilizing Screaming Frog, we initially identified 471 pages. Our team collaborated together to refine the content by removing expired links, stacks, and irrelevant content. This process helped us focus on 32 essential pages.
(Raw Data)
⬇️
(Cleaned Data)
Let’s take a close look at the data and see what’s missing 👀
Right! Compared to user needs, the current content lacks user engagement features, and the information organization is messed up, making users have difficulties finding the information they are looking for. Even though there are only 32 essential pages… Also, users and the stakeholders of the museum are all inquiring about conservation and educational content, which are things that the current website lacks.
How are we going to deal with these? After thorough brainstorming sessions as well as incorporating theories such as Social Proof Theory. We proposed the three design strategies as follows:
01
Add a Review System
Introduce a feature for visitors to post reviews of museum activities:
Enable users to add content, increasing engagement.
Help others learn about activities, potentially attracting more visitors.
02
Improve the Information Organization
.png)
Organize the structure of the information system and navigation model:
A new information architecture for the website.
Comprehensive structured details about collections.
Filters for easier navigation.
03
Add Conservation and Education-Related Content
Create content focused on textile art conservation. Increase both online and in-person activities and classes:
Educational material on preserving textile arts.
Information on the museum’s conservation efforts, boosting branding and awareness.
More engagement options for visitors, enhancing learning and interaction.
3️⃣
Card Sorting
After extending the website content based on the three design strategies we proposed, the new website page number came to 78.
(Extended Content List)
To better know about users’ preferences with the information architecture, we selected 50 cards from the pool for card sorting purposes.
(50 Cards for Card Sorting)
I organized the team to conduct 2 open card sorting sessions each, resulting in 8 sets of user results.
(Card Sorting Results)
Through analyzing the data, we extracted the most commonly agreed-upon categories and content preferences.
(Card Sorting Analysis)
4️⃣
Information Architecture Diagram Draft
Now, we know what users prefer and their insights about the content organizations. Time to build the information architecture diagram.
We established 8 major categories and their corresponding content. I guided the team in layering each category’s content, culminating in a preliminary IA diagram crafted in Miro.
(IA Diagram Draft)
5️⃣
Tree Testing
Users are people who use our product. So how to determine whether the architecture structure is friendly to them?
Of course, using tree testing! Let them walk through the tasks we assigned for them and observe their navigation path.
We designed 8 tree testing tasks and recruited 8 participants.
(Tree Testing Data Collection)
By analyzing each participant’s navigation path, we identified areas for improvement and refined our IA diagram accordingly.
01
It is difficult for users to find What’s On Today (high-demand content).
Solution: Put What’s On Today in the associative navigation part (content)
on the Home page.
02
It is difficult for users to find Textile Art Care Tips and Trends.
Solution: Changed the label of Conservation Overview to Caring for Collections.
6️⃣
Information Architecture Diagram
After incorporating feedback from tree testing, we finalized the information architecture (IA) diagram using Lucid.
(Final IA Diagram)
(Footer & Utility Bar)
(Task Flow Samples)
(Feature List)
7️⃣
Navigation Design
The most effective way of designing is to learn things that work well from other designs. Holding this belief, I lead my team to do competitor research on other museums’ websites.
We discussed the strengths of these navigation designs, such as the use of icons and different font sizes in utility bars.
Drawing from these insights, we created a mid-fidelity prototype for both desktop and mobile/portrait responsive designs using Figma.
Let's look at our final deliverables! ⬇️
🎬
Final Deliverable
Before
The hamburger menu is not appropriate for the desktop version, embedding key information, such as menu options and the utility bar for users.
The menu contains jargon such as "Social Being", and the information layout is not user friendly.
The footer is too fat, increasing cognitive load for users.
The hamburger menu is not appropriate for the desktop version, embedding key information, such as menu options and the utility bar for users.
After
Desktop
Mobile/Portrait
📚
Key Takeaways
01
Creative Integration
🧩
Throughout the project, I learned the importance of not being confined by initial guidelines. By integrating additional research methods like secondary research, tree testing, and competitor analysis, I was able to enhance the quality and user-focus of our final design.
02
Leadership and Team Dynamics
🙌
This project was a significant opportunity for me to refine my leadership skills. I learned to balance detailed planning with effective team communication. By understanding and leveraging each team member’s strengths, I fostered a collaborative and efficient work environment.
03
Empathy Thinking
💖
Throughout the project, I consistently reminded the team to consider the perspectives of both stakeholders and users. This approach was crucial in making informed design decisions and creating a website that truly resonated with its audience. Additionally, I learned the value of empathizing with team members, which allowed me to maintain a positive relationship with them.
Thanks for reading!
Designed by: Zhenbo Wu
