Textile Museum of Canada
PROJECT OVERVIEW
The Problem
The Textile Museum of Canada is the only museum in Canada focused on exhibitions and programs related to textile arts. While the museum holds many educational programs and collections, it finds that users report that their website is hard to use and navigate. Therefore, the museum partnered with our course to seek a new website structure/navigation system while accommodating the museum's needs.
Project Information
- Group Project for course INF2170: Information Architecture, Faculty of Information, University of Toronto
- Group Members: Beibei Hu, Elize Khan, Shumira Ranjith, Xiaohan Hou (Me)
- Platform used: Figma, Miro, Excel, DynoMapper
- Conducted website crawling and generated the website's content list for content audit
- Conducted two card sorting sessions with users
- Completed desktop & mobile navigation wireframes/prototypes in Figma
- Redesign the information architecture and navigation of the Textile Museum of Canada's website to align with the museum's needs and goals
- Color-coded, comprehensive IA Diagram
- Mid-fidelity prototype for the redesign navigation system
NEEDS ASSESMENT
To generate recommendations for how to redesign the IA structure, we first need to understand their needs. The Textile Museum of Canada held an information session, which I and another group member attended and took notes for the groups. We found a few key insights:
What does our client want about the website?
Users should be able to navigate the website and get the information they need quickly
Increase the visibility of business-related areas such as donations, tickets, and tours
The website should be easily editable when more pages and hubs are added in the future
Increase public awareness of the effort in community programming
Who do our client want to target?
- Young folks who want to make Textile a career
- Students who enrolled in relevant programs
- For people who subscribe to museums, art exhibitions
- Indigenous communities
- ESL Communities
- Accessibility Communities
CONTENT AUDIT
Content Inventory
In order to rebuild the IA and Nav, we needed to get all the pages on the website. I used DynoMapper to crawl the website and got a list of all the pages. Later, I further cleaned up the list, excluding PDFs, images, and duplicated links to generate a final Excel list.
Content Audit
We also wanted to review the webpages to see if there are pages that needed to be removed/adjusted/added by the museum. Therefore, we decided to audit the representative pages of the website using the following criteria we generated together:
How actionable/relevant is the page related to the business-related items such as ticket sales, donations and shopping
Whether the page can appeal to a bigger audience, especially underrepresented people
How functional the page is to support the tasks of the users such as buying tickets and way-finding; If the page is accessible
When auditing the content, two team members independently assessed each audited page, assigning a score (1-5, 1 = less relevant, 5 = most relevant) based on the criteria outlined above. The mean score of the evaluations was used to inform our recommendation for the website's content.
Key Results from Content Audit
Through the audit, we identify the majority of the pages on the website are aligned with the museum's goals and strategies. Still, we provided a few recommendations for the museum regarding the content:
- Remove: "Cloth and Clay" page, which does not seem to be very consistent with the museum’s branding style, and it’s an
external page that doesn’t align with the goals of intended users. - Revise: Dividing up the Exhibits and Events into ‘current,’ ‘upcoming,’ and ‘previous’ to help the user easily navigate exhibits or events they’re interested in.
- Added: For example, a dedicated newsletter page to help individuals stay updated with the museum’s latest updates.
CARD SORTING
For the next step, we conducted 8 card sorting sessions with 8 individuals to use the insights from it to inform our redesign:
Cards used for card sorting
Through the content audit, we identified 57 cards representing crucial website categories.
Card Sorting Methodology
Open Card Sort with 8 Participants
Participants are presented with the cards above. They were instructed to create their own categories, as well as talk about any thoughts on their mind during the process.
Monitored Sessn
Participants are presented with the cards above. They were instructed to create their own categories, as well as talk about any thoughts on their mind during the process.
Followed up questions asked
- How many categories do you see at first glance?
- Do any of the cards not make sense to you?
- Are there any cards that you think are missing?
- Which card is the easiest/most difficult to sort?
Card Sorting Key Findings
1.General
- "About" and "Shop" (or the variations of them) are commonly identified grouping among participants
- Participants reported they saw a minimum of 3 categories at first glance of the cards
2.Content Related
- Participants unfamiliar with textiles seek informative content on the website rather than shopping
- ESL Participants reported they don't understand what "Textile" means
3.Navigation/Structure Related
- Participants reported a lack of easy access to admission ticket prices, as there is no current card indicating that
- Participants struggled with ambiguous page names (e.g., Collection, TXTilecity)
- Participants commented on a lot of cards/pages being overwhelming
IA Recommendations from Card Sorting
Users should be able to conveniently access essential information such as admission tickets, programmings, etc.
The museum should consider clarifying the language used for both navigation (e.g., ambiguous page names like TXTilecity) and content (e.g., the word Textile itself).
The museum might want to consider reducing the number of currently excessive categories and links on the website.
IA DIAGRAM
Diagram Overview
Our redesign IA diagram of the museum's website includes a few key components:
- Main Diagram: The level 0 category is Home, followed by Level 1 categories in dark blue, Level 2 categories in light blue and Level 3 categories in grey, followed by the content stack pages.
- Utility navigation (Top-Right): Provide users with quick access to essential functions on a website to improve overall efficiency, such as login, donate, checkout and search.
- Feature list (Bottom-Left): Highlight the key attributes of the site in a concise list to help the user with further exploring the site.
- Footer Navigation (Bottom-Right): Serves as a space for essential information that we aim to present to users without requiring them to navigate through a menu or actively search for specific details.
Diagram Design Process
Diagram Design Process
The design of our diagram is closely related to our objectives, which are developed through insights from content audit as well as card sorting:
Objectives
Examples
1. Mitigate overly complex site design to make user experience less overwhelming
- Only two additional levels after Level 1
- Limit Level 1 of the IA ("About," "Home") to only five categories to prevent information overload
2. Streamline navigation process and languages
- Make exhibitions, events and education programs into independent pages
- Use plain language for navigation (e.g., "Activities" compared to "What's On"
3. Clarify ambiguities concerning admission fees and ticket purchases
- Move up information about admission tickets into Level 2 of the hierarchy
NAVIGATION DESIGN
The team decided on the initial structure of navigation collectively. Using my proficiency in Figma gained from undergraduate education; I further designed and prototyped the navigation system in Figma.
Desktop: Key Transforms
1. Change hamburger menu into a 3-level drop-down menu
As we found during card-sorting, currently (Left Image), a lot of the museum's information is hidden in the hamburger menu in the top right corner. Therefore, in our new design (Right Image), we turned it into a drop-down menu that goes into up to three levels of hierarchy to ensure quick access to information while still maintaining scalability.
2. Add utility navigations into the header
The original website's header has minimal navigation items. In our new design, we added utility navigation items such as log/in and shopping cart to ensure quick access to ticket management. That helps to support the museum's business goal mentioned earlier (tickets, donations, etc.).
3. Simply the footer
The current footer contains a lot of information, which can overwhelm the users and hinder them from accessing information quickly - as they have to scroll down to the bottom page. In our redesigned navigation system, we simplified the footer, moving essential information into our dropdown menus.
Mobile: Key Transforms
Our redesign of mobile navigation mainly focused on reworking the workflow of the items inside the hamburger menu. In addition to reducing the links & categories, we implemented "progressive disclosure" by displaying more information to users by levels to avoid overloading users with a lot of information.
Revised Design
Original Design:
PRESENTATION
We wrapped up our project by presenting our redesigned IA and navigation system in the format of recommendations to the representatives from the Textile Museum of Canada, which they greatly appreciated!
Caitlin (Digital Marketing Coordinator): Great consideration of our concerns and brought up issues we hadn't thought of before that we'll now have to think about!
