Textile Museum Website Redesign

PROBLEM

The Textile Museum's website is difficult to navigate

The Textile Museum, located in downtown Toronto, is the only museum in Canada specializing in textile-related collections, exhibitions and programming. In November 2023, we were approached by Textile Museum stakeholders to provide ideas for the redesign of their desktop website (https://textilemuseum.ca/).

The primary issues they identified with the website was the current navigation design – visitors were having difficulty finding the information they were seeking. The aim of this redesign was to improve the visibility and discoverability of content to make it easier for users to navigate to the content they are looking for.

Timeline

November 2023 (20 hours)

Project Info

Project for Information Architecture course

Tools

Figma, Optimal Sort, Dyno Mapper

Team members

Grace Yip, Faith Dong, Bryan Zhu

SOLUTION

We replaced the hamburger menu with a navigation bar

Before

Key content sought out by visitors to the website could only be accessed through the hamburger menu. In addition, this content was buried deep within the website's hierarchy, making it difficult to find.

After

Our redesign improved the visibility and discoverability of the website content by replacing the hamburger menu with a persistent global navigation bar, and by bringing key content to a higher level of the site hierarchy to make it easier to navigate to.

Jump to final design

My role

I took notes during our meeting with Textile Museum stakeholders to understand what their goals were for this redesign project. I planned and ran all benchmarking and usability testing sessions. I also contributed to content inventory and analysis, recruited two participants for the card sorting activity and analyzed the data, worked on the Information Architecture Diagram, and developed the mid-fidelity wireframes. After the group project, I independently created the high-fidelity mockups.

Our process

We followed the below process for our project. Letting user research be our guide, we brainstormed and designed solutions, which we then evaluated using usability tests.

Use the links below to jump to a section of the project.

Research & Define

Ideate

Design

Evaluate

Final Design

Reflect

TAKEAWAYS FROM MEETING THE STAKEHOLDERS

Who are we redesigning for?

The Textile Museum stakeholders identified 2 major user groups that they wanted us to focus on for this redesign:

The casual enjoyer

People who visit the museum occasionally to view in-person exhibitions. They want to plan their visit in advance by going to the website to book their ticket and/or book a tour.

The emerging textile person

People who are engaged in the textile arts as a hobby or as a craftsperson. They want to participate in programs and workshops offered at the museum and learn more about textiles.

Main objectives

We identified the following main objectives of the website to guide our redesign:

1. Provide easier website navigation

Due to global navigation being contained within the hamburger menu, key areas of the website were not immediately visible upon landing on the home page. In addition, content sought out by users was buried deep within the website's hierarchy.

The home page of the current Textile Museum website is pictured. Global navigation is accessed via the hamburger menu.

2. Promote visitor information and ticket sales

The museum relies heavily on monetary support from donations and ticket sales to maintain its operations. However, the link to buy tickets was in the footer of the website, which made it difficult for users to find it.

Clicking on the hamburger menu expands the menu to full page. Note that while there is a "Visit" category, there is no link to purchase tickets here.

3. Make programming and educational content easier to navigate to

The museum wanted to promote its programming and workshops to support the goals of users such as the "emerging textile person". Links to programming on the existing website could only be accessed by clicking "Learning" in the menu, then scrolling over halfway down a long page.

Links to programming and educational content could only be accessed by clicking "Learning" in the hamburger menu, then scrolling over halfway down a long page.

BENCHMARK TESTING AND RESULTS

Evaluating the existing website

I raised a concern during one of our team meetings – how would we know whether our redesign was an improvement compared to the existing design? We decided to conduct benchmark testing to obtain a baseline measurement against which we could assess our redesign, as well as to better understand how users interacted with the existing website.

Benchmark testing was conducted in-person with 5 individuals who were not part of a UX/UI university program. I instructed them to complete a series of tasks while thinking aloud and then conducted a semi-structured post-test interview.
‍

Task list

Go to the "Buy tickets" page
Go to the "Book a tour" page
Identify what current exhibitions are on
Find the current programs offered by the museum
Go to the "Collections" page and browse the woven textile collection

Main post-test interview questions

What did you think of the website overall?
What did you like the most/least about this website? Why?
How would you describe your experience with this website?
‍

Benchmark testing reveals major issues

The results showed glaring issues with the current website. Only 52% of tasks were completed successfully.

User #1

User #2

User #3

User #4

User #5

Buy tickets

Book a tour

Identify current exhibitions

Find current programs

Browse woven textile collection

Why were only 52% of tasks completed successfully?

Based on the benchmark tests and follow-up interviews, the following key issues were identified:
‍

Poor discoverability: All participants experienced difficulty finding the pages assigned to them in the task. Many hesitated when determining where to click from the initial home screen to begin their task.
Deep hierarchy: Multiple participants commented on how long it took to navigate to the content needed to complete the tasks. One user commented that each task took “too many clicks” to complete and was “frustrating”.
Excessive scrolling: The excessive scrolling needed to reach content on the website’s pages were noted as a pain point by several participants. One participant shared regarding the task to find current programs: “The [learning] page is too long, so navigating to the section I was looking for was annoying”.

CONTENT INVENTORY AND ANALYSIS

Organizing the content

We performed a manual curation of content inventory using Dyno Mapper, and then conducted a qualitative audit to analyze and organize the content based on which user needs it supported:

Visitor information and ticket sales
Programming and educational content

This process, although tedious, allowed us to understand just how many pages there were on the Textile Museum’s original website. This was essential in helping us to see the big picture of the website’s problems.

CARD SORTING METHOD AND ANALYSIS

Card sort method

To understand our users' mental model for the structure of the content on the website, we conducted 8 open card sort sessions with 50 content items using Optimal Workshop’s Optimal Sort. Participants were individuals not part of a UX/UI university program.

As we were tight on time, the card sorts were conducted remotely, with participants using a link that directed them to Optimal Sort’s online card sorting tool.
‍

See detailed breakdown of our card sorting method

Methodology

We selected 50 content items that we felt would be most representative of the total content on the website and relevant to the user and organizational needs highlighted during the meeting with the stakeholders. Items that were redundant or repetitive were removed; for instance, we included one of the annual reports as part of the 50 content items rather than all nine currently on the website.

These 50 content items were used for our card sort that we conducted via Optimal Workshop’s Optimal Sort. Our card sorts were given to participants using a link that would direct them to Optimal Sort’s online card sorting tool. Participants were given this set of 50 cards with instructions to group content together based on similarity, and then name the groups that they created. Card sorting was done with one level of grouping without any subcategories, and users had unlimited time to conduct their sorting. It was emphasized that there were no “right” answers and that users were to sort cards in whatever way they best saw fit.

Participant instructions

Hello, thank you for agreeing to participate in this study. I am a graduate student at the Faculty of Information at the University of Toronto, and I am conducting this study for the course INF2170 (Information Architecture). The activity shouldn't take longer than 10 to 15 minutes to complete. Your response will help us to organize the content on our website. We want to understand how you group things and what you would name those groups.

First, take a quick look at the list of items to the left. We'd like you to organize them into groups that make sense to you. There is no right or wrong answer. Just do what comes naturally.
Second, drag an item from the left into this area to create your first group.
Third, click the title to rename your new group.
Finally, add more items to this group by dropping them on top of it. Make more groups by dropping them in unused spaces. When you're done click "Finished" at the top right. Thank you!

Card sort analysis and key takeaways

Data from the 8 card sorting sessions were analyzed in Optimal Sort using the best merge method, which determines the extent of agreement of category placements and titles among the participants.

We used the best merge method to identify the cards that were most commonly grouped together in the card sorts.

Identifying the main categories: The major level 1 categories that emerged from the card sorts were Visitor Information, About us, Exhibitions and Events, Collections, Support, Learn, and Programs/Workshops.
‍

See detailed breakdown per category

Visitor information: Participants grouped together items relating to general visitor information, tickets, memberships, and tour booking into one category. This informed our decision to create a level 1 category, “Visit”, to encompass tasks and information related to visiting the museum.
Exhibitions and Events: Participants categorized items related to exhibitions and events into one category. These items include “Gathering”, “Exhibitions”, “What’s On”, and “Events”. These results informed our decision to create the level 1 category “Exhibitions and Events” to encompass content relating to exhibitions and events.
Collections: Participants categorized items related to collections in one group. This informed our decision to form a level 1 category “Collections” to showcase tasks and information related to the museum’s collections.
Support: Participants grouped items related to donations and involvement together in one group. We thus created a level 1 category “Join & Support”.
Learn: Many participants grouped items relating to learning and reading about textiles in one group, titled “Education/learn.” This led to our decision to create a category, “Learn,” for these content items.
Programs/workshops: For cards such as “Square by Square Community Quilt Drop-In Sessions” and “Explore Wellbeing, Health & Healing Programming”, participants made the decision to group them alongside “Programs” and “Workshops”. This category included event-like occurrences that the Textile Museum hosts, typically in a group setting. With all of these individual programs and workshops requiring users to sign up before attending, the most intuitive choice was to pair them together.
Commonly uncategorized items: The most commonly uncategorized items from the card sorts were “FAQ” and “Artist spotlights”. Following common practices, we decided to place “FAQ” in the footer. We felt that “Artist spotlights” could have found inclusion in multiple categories, but we ultimately included it under “Exhibition & Events” to showcase artists alongside exhibitions currently taking place.

Solution: Flatten the hierarchy

Using the insights gathered from the card sorting sessions as well as our ideation session, we created an Information Architecture diagram for our redesigned website.
‍