Case Study:
Improving Information Architecture and User Experience
Problem
The website suffers from poor information architecture, making it difficult for users to efficiently locate content aligned with their intent. The lack of a clear hierarchical structure and intuitive navigation contributes to cognitive overload. Additionally, the absence of a dedicated mobile experience forces users to interact with a desktop-optimized interface on smaller screens, leading to usability challenges and friction in task completion.
Solution
The goal of this redesign is to improve the website’s information architecture by creating a clear, intuitive navigation system and a well-structured content hierarchy. By optimizing the site for diverse visitor needs, we aim to enhance findability, reduce cognitive load, and ensure a seamless browsing experience.
Role
UX Researcher & Designer: Designed prototype, architecture flows, card sorting, and tree-testing.Tester for card sorting and tree-testing, and wireframing
Timeline
Overall: 13 weeks
Research: 6 weeks
Design & Testing: 7 weeks
Tools
Axure
Optimal Workshop
Zoom
Research
Content Inventory
The website consists of 18 pages (excluding the homepage) but lacks a clear structure, with pages seemingly added based on organizational needs rather than a cohesive hierarchy. Navigation is disorganized, making it difficult for users to locate essential content, particularly information that helps them achieve their goals on the site.
To address this, we:
Identified and grouped similar or duplicate content, leading to Version 2 of our Content Inventory.
Focused on improving usability by renaming pages and navigation titles to better reflect their purpose.
Refined naming conventions based on user feedback and testing results.
Card Sorting Insights
Card Sort 1 (Open) – 3 Participants
Goal: Understand how users perceive and group PugHearts' website content.
Findings: Participants had varied interpretations, with key discrepancies in categorization (e.g., Our Dogs was placed under Adopting (50%), About (13%), and Learn (25%), while 13% didn’t understand its meaning).
Closed Card Sorts
Participants struggled with certain categories, indicating unclear naming conventions.
In Closed Card Sort 2, while some cards were placed as expected, others remained inconsistently sorted.
Outcome
Users’ uncertainty highlighted a need to refine category names for clarity and alignment with user expectations.
Insights from card sorting and tree testing informed sitemap restructuring and future iterations.
Tree Testing Summary
Key Findings:
Adoption Process Confusion: 68% successfully found available Pugs, but others selected Adoption & Fostering Stories or Adoption Application. Renaming Adoption Application to Adoption Form may improve clarity.
Foster Information Navigation Issues: 68% success, but 42% took an indirect route. Users confused Becoming a Pug Owner with fostering.
Donation & FAQs: 75% found donations, but some expected it under Facebook or Events. 88% found FAQs, but Events was a common incorrect choice.
Pug Care & Merchandise Issues: 75% found pug care info, but some looked under Successful Adoptions or PugHearts Mission. Only 50% found merchandise, with confusion around Adoption Application and Events.
Recommendations:
Clarify navigation labels (Adoption Form, dedicated Merchandise tab).
Add contextual links for donations and FAQs in relevant sections.
Integrate pug care info into adoption resources.
Streamline navigation to better match user expectations.
First-click test
Task 1 (Finding available pugs): Success rate increased from 68% to 75%.
Task 2 (Finding foster information): Success rate increased from 68% to 88%.
Key improvement: Updated naming conventions and task-based navigation enhanced user recognition.
Sitemap
The first card sort revealed that the naming conventions were not as intuitive as needed. In V3, key changes were made to improve clarity, such as renaming categories to better reflect their purpose. A third card sort and first tree test using V3 content helped refine the final sitemap. Key adjustments included changing "Pug Owner" to "Pug Parent" to better encompass both adopters and fosters and renaming "How to Help" to "More Ways to Help" to highlight additional support options beyond fostering and adoption.
Wireframe
Two wireframes were selected to represent a key goal of PugHearts, aligning with user personas and task flows. These wireframes were crucial in shaping the final design. Both originated from the "Become a Pug Parent" section (2.0) of the sitemap, specifically "Find Your Pug" (2.2) and "Foster and Volunteer" (2.4). The tasks represented included viewing descriptions and photos of adoptable pugs and exploring fostering options.
UX Lessons & Improvements
We mistakenly allowed 30 participants in the first tree test instead of 8, affecting validation. Early task-based verbiage could have improved results, and consistent language is key for all users to understand PugHearts. Time constraints prevented usability testing, and outcomes may have differed with participants experienced in pet rescue.
What We Would Do Differently
Next time, we would set clear participant limits for each test to ensure balanced validation. We would establish task-based verbiage earlier to improve clarity and results. Additionally, we would prioritize usability testing and recruit participants with direct rescue experience for more relevant insights.
*click the button to access the prototype