Project Overview
I worked with the Textile Museum of Canada to redesign their company webpage, improve their website structure and optimization their navigation system. Additionally, the museum wanted to shift the website to an educational platform that could be used for a research purposes.
Project Overview
I worked with the Textile Museum of Canada to redesign their company webpage, improve their website structure and optimization their navigation system. Additionally, the museum wanted to shift the website to an educational platform that could be used for a research purposes.
Project Overview
I worked with the Textile Museum of Canada to redesign their company webpage, improve their website structure and optimization their navigation system. Additionally, the museum wanted to shift the website to an educational platform that could be used for a research purposes.
Project Overview
I worked with the Textile Museum of Canada to redesign their company webpage, improve their website structure and optimization their navigation system. Additionally, the museum wanted to shift the website to an educational platform that could be used for a research purposes.
PROBLEM
The website’s structure made it hard for users to find key info like programs, tickets, and donations, leading to frequent complaints and support calls.
The website’s structure made it hard for users to find key info like programs, tickets, and donations, leading to frequent complaints and support calls.
The website’s structure made it hard for users to find key info like programs, tickets, and donations, leading to frequent complaints and support calls.
OUTCOME
I redesigned the museum’s website to highlight its collection, introduce search and filtering tools, and make key content easier to find. I restructured the navigation to match users’ mental models.
I redesigned the museum’s website to highlight its collection, introduce search and filtering tools, and make key content easier to find. I restructured the navigation to match users’ mental models.
I redesigned the museum’s website to highlight its collection, introduce search and filtering tools, and make key content easier to find. I restructured the navigation to match users’ mental models.
MY ROLE
I conducted card sorting sessions, developed an information architecture, and crafted a mobile & web navigation.
TEAM
3 Designers
3 Designers
SKILLS
Card Sorting
Card Sorting
Card Sorting
Navigation Design
Navigation Design
Navigation Design
Prototyping
Prototyping
Prototyping
Information Architecture
Information Architecture
Information Architecture
MY ROLE
I conducted card sorting sessions, developed an information architecture, and crafted a mobile & web navigation.
MY ROLE
I conducted card sorting sessions, developed an information architecture, and crafted a mobile & web navigation.
Target User Groups
Target User Groups
Target User Groups
User Goals
User Goals
User Goals
Research
Research
Research
CONTENT AUDIT
I began by conducting a content audit using Dynomapper, which identified approximately 1,000 links, including pages, sections, external resources, PDFs, and videos. I reviewed the content for relevance, accessibility, and opportunities to address gaps. I removed duplicates, inaccuracies, and repaired any broken links.
I began by conducting a content audit using Dynomapper, which identified approximately 1,000 links, including pages, sections, external resources, PDFs, and videos. I reviewed the content for relevance, accessibility, and opportunities to address gaps. I removed duplicates, inaccuracies, and repaired any broken links.
I began by conducting a content audit using Dynomapper, which identified approximately 1,000 links, including pages, sections, external resources, PDFs, and videos. I reviewed the content for relevance, accessibility, and opportunities to address gaps. I removed duplicates, inaccuracies, and repaired any broken links.
The goals of my evaluation were to:
Identify relevant content to highlight
Spot opportunities for new content and gaps
Remove duplicates or inaccuracies
Eliminate broken links
The goals of my evaluation were to:
Identify relevant content to highlight
Spot opportunities for new content and gaps
Remove duplicates or inaccuracies
Eliminate broken links
The goals of my evaluation were to:
Identify relevant content to highlight
Spot opportunities for new content and gaps
Remove duplicates or inaccuracies
Eliminate broken links
CARD SORT
To understand our users' mental models, I selected 50 pieces of content from the audit for a card sorting activity with 10 participants in 30-minute intervals on Miro. During the activity, participants were encouraged to “think out loud” as they sorted and categorized the cards.
To understand our users' mental models, I selected 50 pieces of content from the audit for a card sorting activity with 10 participants in 30-minute intervals on Miro. During the activity, participants were encouraged to “think out loud” as they sorted and categorized the cards.
To understand our users' mental models, I selected 50 pieces of content from the audit for a card sorting activity with 10 participants in 30-minute intervals on Miro. During the activity, participants were encouraged to “think out loud” as they sorted and categorized the cards.
FINDINGS & RESULTS
7 of 10
Expect to purchase tickets under “Visit.”
9 of 10
Believe “Visit” should be a main category.
10 of 10
Expected to find “Jobs” under “Get Involved.”
5 of 10
Were confused with the labeling of “Gatherings.”
7 of 10
Expected the museums address to be in the footer.
Information Architecture
Based on our research, we designed the information architecture to meet both user expectations and the museum’s goals. I kept the navigation objectives. I limited the hierarchy to four levels to ensure everything was easy to find without feeling overwhelming, balancing depth and discoverability.
Information Architecture
Based on our research, we designed the information architecture to meet both user expectations and the museum’s goals. I kept the navigation objectives. I limited the hierarchy to four levels to ensure everything was easy to find without feeling overwhelming, balancing depth and discoverability.
Information Architecture
Based on our research, we designed the information architecture to meet both user expectations and the museum’s goals. I kept the navigation objectives. I limited the hierarchy to four levels to ensure everything was easy to find without feeling overwhelming, balancing depth and discoverability.
Information Architecture
Based on our research, we designed the information architecture to meet both user expectations and the museum’s goals. I kept the navigation objectives. I limited the hierarchy to four levels to ensure everything was easy to find without feeling overwhelming, balancing depth and discoverability.
First Level: Primary Navigation - General labelling for intuitive exploration.
Second Level: Specific categories under the primary section.
Third and Fourth Levels: Deeper content accessible through second-level categories.
First Level: Primary Navigation - General labelling for intuitive exploration.
Second Level: Specific categories under the primary section.
Third and Fourth Levels: Deeper content accessible through second-level categories.
First Level: Primary Navigation - General labelling for intuitive exploration.
Second Level: Specific categories under the primary section.
Third and Fourth Levels: Deeper content accessible through second-level categories.
Navigation
Navigation
Navigation
PRIMARY NAVIGATION
BEFORE
The museum’s hamburger menu is hard to find, and when it’s open, it covers the main page, making navigation clunky and confusing.
AFTER
I replaced the hamburger menu with a horizontal menu bar at the top of the page, featuring seven main categories for easy access. The menu remains visible as users scroll, and a dropdown lets them quickly navigate through the hierarchy
FACETED NAVIGATION
To keep users engaged and improve accessibility, we recommend embedding videos directly on the "Digital Collections" and "Tutorials and Demos" pages. Adding a filtering system will also make it easier for users to find the content they're looking for
FACETED NAVIGATION
To keep users engaged and improve accessibility, we recommend embedding videos directly on the "Digital Collections" and "Tutorials and Demos" pages. Adding a filtering system will also make it easier for users to find the content they're looking for
FACETED NAVIGATION
To keep users engaged and improve accessibility, we recommend embedding videos directly on the "Digital Collections" and "Tutorials and Demos" pages. Adding a filtering system will also make it easier for users to find the content they're looking for
FACETED NAVIGATION
To keep users engaged and improve accessibility, we recommend embedding videos directly on the "Digital Collections" and "Tutorials and Demos" pages. Adding a filtering system will also make it easier for users to find the content they're looking for.
FACETED NAVIGATION
To keep users engaged and improve accessibility, we recommend embedding videos directly on the "Digital Collections" and "Tutorials and Demos" pages. Adding a filtering system will also make it easier for users to find the content they're looking for.
Filters are integrated into the Digital Collection and Video Tutorials/Demos pages as a persistent side panel, remaining visible to users as they refine their search.
FOOTER
BEFORE
The footer feels cluttered, with too much information shown at once and no clear hierarchy to guide users to what they need
AFTER
Font weight is used to categorize items, and the footer is simplified to provide quick access to key information and resources.
Responsive Design
I created a mobile version of our website to provide a smooth, user-friendly experience on smaller screens, making sure users can easily navigate and access key content on the go
Responsive Design
I created a mobile version of our website to provide a smooth, user-friendly experience on smaller screens, making sure users can easily navigate and access key content on the go
Responsive Design
I created a mobile version of our website to provide a smooth, user-friendly experience on smaller screens, making sure users can easily navigate and access key content on the go
Responsive Design
I created a mobile version of our website to provide a smooth, user-friendly experience on smaller screens, making sure users can easily navigate and access key content on the go
PRIMARY NAVIGATION
In my redesign, I incorporated a space-efficient hamburger menu. Tapping a downward arrow reveals the second level of the hierarchy in an accordion-style section, making content easy to scan while keeping the page length manageable
In my redesign, I incorporated a space-efficient hamburger menu. Tapping a downward arrow reveals the second level of the hierarchy in an accordion-style section, making content easy to scan while keeping the page length manageable
In my redesign, I incorporated a space-efficient hamburger menu. Tapping a downward arrow reveals the second level of the hierarchy in an accordion-style section, making content easy to scan while keeping the page length manageable
The accordion allows users to get an overview of available sections while quickly expanding and collapsing different levels of the hierarchy to explore the content.
UTILITY NAVIGATION
I moved the utility bar to the bottom of the hamburger menu, using icons to represent each function. This saves space while making it clear and easy for users to understand what each utility does
I moved the utility bar to the bottom of the hamburger menu, using icons to represent each function. This saves space while making it clear and easy for users to understand what each utility does
I moved the utility bar to the bottom of the hamburger menu, using icons to represent each function. This saves space while making it clear and easy for users to understand what each utility does.
FACETED NAVIGATION
Users can now filter content by "current," "future," and "past" options. To optimize screen space, I replaced the tab system with a filter that takes users to a dedicated screen for easy selection
FACETED NAVIGATION
Users can now filter content by "current," "future," and "past" options. To optimize screen space, I replaced the tab system with a filter that takes users to a dedicated screen for easy selection
FACETED NAVIGATION
Users can now filter content by "current," "future," and "past" options. To optimize screen space, I replaced the tab system with a filter that takes users to a dedicated screen for easy selection
FACETED NAVIGATION
Users can now filter content by "current," "future," and "past" options. To optimize screen space, I replaced the tab system with a filter that takes users to a dedicated screen for easy selection
