Sector
GLAM
Client
Textile Museum of Canada
Timeline
4 weeks
Tools
Dynomapper, Miro, Optimal Workshop, Figma
PROBLEM
GOAL
Restructure the website to improve discoverability of events and programming, including community engagement opportunities.
PROCESS
DISCOVER
In a kick-off meeting with the client, we learned that there were 3 main user groups the website should be optimized for:
Learners
Students or researchers interested in the history of textiles
Hobbyists
Crafty folks, such as costume designers or cosplayers
Underrepresented artists
Communities whose cultures are rich in textile production
Audited web content
Before we could improve how the site was organized, we had to first understand what sort of content lived on it. 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 content the tool missed, such as modals or microsites. After careful consideration, we proposed a total of 60 pages to represent in our improved information architecture diagram.
I used the following notations throughout the audit to describe rationale:
Add: Noted for content that either filled a gap, or necessitated an independent page where the content was hidden
Remove: Noted for outdated, broken, or redundant content, where another page contained similar information
Relocate: Noted for content that had a more appropriate location within the proposed information architecture
Create as an independent page: Noted for content that was only accessible through filters, where an independent page would improve navigation
Combine into another page: Noted for content that did not necessitate an independent page
Facilitated 2 open card sort exercises
From the total set of pages, we selected 38 for the card sort activity. We recruited individuals who fit at least one user group, 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.
DEFINE
Updated information architecture
I aggregated the results of our card sort activity and used the following insights to guide labelling conventions as well as the high level structure:
Insight from card sort
Action for IA diagram
At least half (4) of our participants identified five cards that could be 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 unclear to at least half (4) of our participants
We contextualized these pages under a new page using familiar terminology
We gave top-level pages distinct labels so that child pages had a definitive home
Regarding the actual placement of individual pages within the diagram, we considered the following guidelines to align on decisions:
Balanced depth and breadth
All pages were contained within 7 sections to minimize cognitive load while browsing navigation options. At the same time, we made sure that the structure was not too deep, capped at 5 levels. Most pages were represented at either Level 2 or 3 so that they could be easier to find.
Industry standards and patterns
Card sort participants referenced their familiarity with other museum websites to guide their organization method. We looked at other museums in Toronto to identify patterns that visitors may recognize, such as a "What's on" page that housed all programming.
Prioritized touchpoints
Pages on the same level that were related to the museum's business goals were listed first within the diagram. For example, within "Visit", "Tickets" is listed first as a major source of revenue for the museum, and conversion is a project priority.
Organized tree testing
It was important that we tested our design decisions with potential users, so I designed a tree testing activity on Optimal Workshop. We recruited a group of 10 participants to complete a 5-minute exercise in which they were asked to select a page in the information architecture based on a given task.
60% success
You volunteered with an organization that was part of the museum's Community Makers program. Where do you look for your project?
Our response: The correct page was deep within the site structure, so we anticipated a lower success rate. For any incorrect destinations selected by more than one participant, we added an associative navigation system on the page to direct users to the intended page.
50% success
You want to see what's going on at the museum, as well as events or programs they've done in the past. Where do you go to find it?
Our response: While the correct page was only selected by half the participants, 3 others selected a page within the same section. This could suggest that the top-level label was being correctly interpreted by users. To aid discovery, we added a shortcut in our navigation design.
Overcoming challenges
Due to platform membership limitations, this activity was capped at a maximum of 10 participants and 2 tasks each. We would have ideally planned tasks related to the primary goals of our user groups, and recruited at least 20 participants to reach saturation.
With this constraint in mind, I suggested designing the tasks around pages whose location in the IA was generally more contested within the team. This would either validate its current location or provide insight into how to mitigate unexpected user behaviours. Our findings helped us ideate how to best translate the information architecture to our navigation design.
REFINE
Designed mid-fidelity desktop navigation
We started to build out main screens from the IA, 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 wireframe. Key design components include:
Horizontal global menu bar
I replaced the hamburger menu with a menu bar to always show navigation. It also contains shortcuts to key points of conversion, such as tickets and tours.
Utility menu
This secondary navigation allows users to access key features, like search or checkout. 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 outside the user’s primary goals (such as corporate information or media pages) within the footer, making use of familiar patterns.
LESSONS LEARNED
Don't forget about secondary, tertiary, and other users
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 primary user groups. After a long-winded debate, it finally occurred to me what should have been obvious: though not the target, the client still uses the website. They would be able to use a dedicated page on past programming for convenient tracking purposes. I was painfully reminded how easy it is to get stuck in one perspective.