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.
Before jumping into redesigning the PugHearts website, we wanted to ensure the navigation reflected how real users think—not just how we assumed they would. That’s where card sorting came in.
Once we had a clear content inventory, we handed over the reins to our users. Through both open and closed card sorting exercises, we asked them to organize key pieces of the site’s content in a way that made sense to them.
What we discovered was eye-opening. A single card like "Our Dogs" meant different things to different people—some thought it belonged under Adopting, others under About, and a few weren’t even sure what it meant. These mixed interpretations showed us that what seemed obvious internally was not so clear to our users.
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.
After our third card sort, we were ready to begin the tree testing phase. This step was essential to validate the effectiveness of the revised site structure developed through our previous sorting exercises.
Tree testing allowed us to assess whether users could successfully navigate PugHearts' content hierarchy without the aid of visual design elements. By presenting users with specific tasks and tracking the paths they took, we gained insight into how intuitive and functional our navigation truly was.
Ultimately, it confirmed which category labels worked well and highlighted areas that still caused confusion, ensuring that our structure supported a smooth and user-friendly experience.
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.
Although the tree testing phase validated the overall structure, it also highlighted uncertainty in users’ first choices—particularly with categories like "Adoption Application" and "Becoming a Pug Owner." We initiated the first click test to assess whether users could confidently and correctly identify where to begin their journey on the site. For the first-click test, two tasks were made up to validate where users click.
Task 1: If you wanted to find pugs to adopt, where would you go?
Task 2: If you wanted to find information about fostering a pug, where would you go?
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.
The research and testing phase is complete!
After finalizing the names and structure of each page, we were ready to move forward with creating a visual sitemap and wireframes. Developing a sitemap at this stage was essential—it helped us clearly define the user flow and ensure that visitors could easily navigate PugHearts. This step served as a blueprint for the information architecture, guiding the layout and functionality of each page to support a smooth and intuitive user experience.
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
What I’ve learned 🤓
Through this project, I’ve come to truly understand the importance of clear and thoughtful information architecture. When content is organized in a way that aligns with users’ expectations, it reduces cognitive load and creates a more seamless experience. Clarity in structure isn’t just about aesthetics—it directly impacts usability and user satisfaction. Ultimately, strong information architecture empowers users to find what they need with ease, which is at the heart of good design.