Textile Museum of Canada
In partnership with one of my classes at the University of Toronto, the Textile Museum of Canada sought ideas for a new website structure and design that would appeal to a wider audience and improve discoverability of current happenings.
Among general content improvements, our team proposed a dedicated section for community engagement that we profiled using effective navigation systems.
Sector/Client
GLAM
Academic project for University of Toronto
Timeline
20 hours
(Nov. - Dec. 2023)
Tools
Dynomapper
Miro
Optical Workshop
Figma
Team
Iqra Malek
Yingying Zhu
Saman Zubair
Client Overview
The Textile Museum of Canada is dedicated to presenting the textile arts and the stories held within them. Since updating their brand identity and website in 2020, the museum’s target audience also changed. They noticed that their average website visitor skewed younger and identified three main user groups based on museum visitors who fit that demographic:
Learners
Students or researchers interested in the history
Hobbyists
Crafty folks, such as costume designers or cosplayers
Underrepresented artists
Communities whose cultures are rich in textile production
How can the website better suit the needs of these target users?
Content Audit
Before we could improve the site's existing architecture, we had to first understand what sort of content lived on it. This would help us identify pages we could remove - if it contained inaccurate or outdated information - and should add - to help the target user complete their priority tasks on the website.
I used Dynomapper to quickly generate a list of the website's pages for the team to review. Since the exported list only contained 46 pages, I manually conducted a more thorough audit to capture any pages the tool missed. After careful consideration, we proposed a total of 60 pages to represent in our improved information architecture diagram.
Snapshot of spreadsheet documenting content recommendations
Card Sort
From the total set of pages, we selected 38 for the card sort activity. We recruited individuals who fit the updated user profile, and gave them each 15 minutes to complete the activity on Miro. Participants were also asked follow-up questions to probe for problematic pages that we may have missed during the analysis, i.e. cards that were interpreted as difficult to sort.
Methodology
1:1 open sort exercise
Participants recruited from personal networks
2 sessions per team member (8 total participants)
Conducted over one day (Nov. 20, 2023)
One day for analysis (Nov. 21, 2023)
Spreadsheet detailing aggregated data of categorizations
Miro board containing sticky notes with comments from participants, grouped by similarity
Information Architecture
We aggregated the results of our card sort activity and used the following insights to inform our IA diagram:
At least half (4) of our participants identified five cards that could represent a top-level category
We used these cards to represent Level 1 headers in our information architecture
Cards labeled using brand jargon, such as those representing specific exhibitions or projects, were thought of as unclear by at least half (4) of our participants
Appropriate pages (e.g. TXTile City) were contextualized under a new page that communicated its purpose in relation to the site hierarchy
Participants were divided on sorting cards into a "Give/Donate" category (4) or a "Join/Support" category (3)
Top-level pages were given distinct labels so that child pages had a definitive home
Zoom-in on a new section created around community collaborations for our proposed information architecture diagram built using Miro
Visitors want visibility
In reorganizing the hierarchy of pages, our team was focused on a key principle: information shouldn’t be hidden. We tried to limit the depth of the site to a maximum of five levels, in which most pages would be represented at either Level 2 or 3. This meant profiling relevant content – like ticket pricing or what’s going on – as early as possible, which we reflected in our selected navigation systems.
Navigation Design
We started to build out main screens from the information architecture diagram, such as the landing page, to depict how the new structure would be represented in refreshed a navigation system. Using Figma, I created the mid-fidelity desktop prototype.
Desktop
Mobile
See mobile prototype
Across the website, we also implemented the following navigation tools:
Utility bar
This secondary navigation allows users to access key features, like purchasing tickets. The bar sticks to the top of the screen to be visible while browsing.
Breadcrumbs
Breadcrumbs across all pages enable users to easily move up and down the site hierarchy, while orienting their location in relation to other pages.
Fat footer
We placed content beyond the user’s primary goals (such as corporate information or media pages) within the footer, making use of familiar patterns.
Task Flows
To clearly illustrate how people could interact not only with our recommended page inventory, but also our suggested list of features, we outlined task flows that involve specific tasks the target user may complete while on the website.
In these diagrams, the purple box indicates a page, while the red box indicates a change in what is displayed on the page.
Purchasing a ticket
Homepage
Tickets
Checkout
Filtering programming to find a specific event
Homepage
Events
Filtered list of programming
Event page
Bookmarking a video to account
Homepage
Demos & Videos
Feedback modal confirming action
Lessons Learned
Remember that stakeholders are users, too
Our team had a lot of back-and-forth discussion around whether past programming warranted its own page. While the client expressed interest in being able to easily access their past events or workshops, I couldn’t imagine how this could be useful to their target audience. Though not the target, they still use the website. In recognizing this, I could then rationalize the purpose.
Interrogate why a client likes or dislikes something
The current website makes use of anchor links to quickly jump to specific page content as needed. Using the logic of convenience, we were able to justify converting that content into their own pages as long as their contextual placement helped users accomplish the same thing: quick navigation.
