PROBLEM & GOAL
Save-a-pet is a not-for-profit animal shelter that heavily relies on donations and volunteers for its operation. The current website contains redundant pages and circuitous navigation, making it difficult for volunteers and donors to find the information they need.
Through six rounds of usability testing, my team redesigned the information architecture to facilitate a more intuitive and enjoyable navigation experience for users so that more people will engage with Save-A-Pet.
SCOPE
Timeline: 10 weeks
My role: UX researcher/designer
Team: 3 members
Tools: Figma, Miro, Optimal Workshop
My role: UX researcher/designer
Team: 3 members
Tools: Figma, Miro, Optimal Workshop
MY CONTRIBUTIONS
Usability Testing (Card Sort, Tree Test,
First-Click Analysis)
Hi-Fidelity Wireframes
Sitemap Organization
Report of Findings
First-Click Analysis)
Hi-Fidelity Wireframes
Sitemap Organization
Report of Findings
DESIGN PROCESS
CONTENT INVENTORY
"What information is currently on the website and where is it?"
Our team began the research process by conducting a content inventory audit of the existing website pages to gain a full understanding of the current site navigation and content.
KEY PROBLEMS
- Content doesn't match page names
- Redundant and hard-to-find information
- Circuitous navigation patterns
- Content doesn't match page names
- Redundant and hard-to-find information
- Circuitous navigation patterns
Excerpt of Save-A-Pet's content inventory
PERSONAS
"Who is our user and what do they need?"
Our team identified three groups of stakeholders: adopters, volunteers, and donors and made a persona for each. If we had more time, I would have liked to conduct interviews with users from each group to better understand their perspective.
TASK FLOWS
"What is the simplest way to do make a donation?
Our team defined two key task flows based on Save-A-Pet personas, making a donation and adopting a pet. The flows formed the basis for our information architecture testing and redesign.
"Adopting a pet" wireframes based on the key task flow
RESEARCH
"What works best for users?"
3 rounds of card sorts to determine the information architecture
3 rounds of tree tests to resolve navigation issues and finalize the sitemap
2 rounds of first-click tests on wireframes to test what users expect features to do
75+ participants across all tests
3 rounds of tree tests to resolve navigation issues and finalize the sitemap
2 rounds of first-click tests on wireframes to test what users expect features to do
75+ participants across all tests
RESULTS
Our team defined success = when at least 60% of test subjects complete the task or sort the cards the same way. We the initial sitemap four times, renaming pages and reconfiguring the top-level and secondary navigation levels until each item achieved at least a 60% success rate.
Our team defined success = when at least 60% of test subjects complete the task or sort the cards the same way. We the initial sitemap four times, renaming pages and reconfiguring the top-level and secondary navigation levels until each item achieved at least a 60% success rate.
Below is one example of the tree test analysis. Only 17% of users succeeded during the first test. After analyzing the reasons why, we realized the page had a niche name that confused t After renaming the page, 100% of users passed during the second tree test.
FINAL SITEMAP
Our team created four iterations of the sitemap based on test results. The final version is the one that had the highest navigational success.
SITEMAP HIGHLIGHTS
- Uniform task based top-level navigation topic based pages
- Ensure the top-level navigation granularity is consistent
- Page name changes based on tree tests and card sorts
- Uniform task based top-level navigation topic based pages
- Ensure the top-level navigation granularity is consistent
- Page name changes based on tree tests and card sorts
REFLECTIONS
It might have been better to create a sitemap from scratch based on card sort data instead of trying to alter the original.
Asynchronous collaboration works best when the whole team sets clear deadlines and responds to messages quickly.
Making sense of test results is an art and skill I want to continue to develop.
Tell a compelling story in the final report. Put the details in the appendix.
