Project Type: Information Architecture, Usability Testing, Redesign, UX, UX Research
Project Overview
In this project my team set out to assess and improve the information architecture of the Treehouse Humane Society website. Using a combination of card sorting, IA testing, and first-click testing we restructured the website to increase conversion rates for adoptions, donations, and volunteering.
Timeline & Process
Our team had a total of nine weeks to dedicate to this project. The weeks were divided between five phases: (1) Research & Problem Definition, (2) Content Inventory, (3) Card Sort Testing, (4) Information Architecture Testing, and (5) First-Click Testing.
Roles
Research
Data synthesis
User testing
Prototyping
Tools
Optimal Workshop
Google Office Suite
Axure PR
Lucid Charts
Zoom with screen sharing
About the Website
Treehouse Humane Society is a Chicago based organization dedicated to the care and rehabilitation of sick, injured and stray cats. Treehouse Humane Society has a large social media presence that increases client traffic on the website. However, once on the website users are tasked with navigating through misleading navigation labels, unclear information, confusing organizational structures, and inaccessible Call-to-Action links.
We believe that simplifying the Treehouse Humane Society's website navigation and verbiage, have the potential to positively impact the website’s conversion rates for adoptions, donations, and volunteering.
Problem Statement
Misleading navigation labels and an unclear organizational structure make finding information on the Treehouse website time consuming and difficult for users.
Phase 1: Research & Define
Personas
During the first phase of our project, we used brief secondary research to create two user profiles and scenarios that represent potential users of the Treehouse website.
Each persona had distinct goals and concerns relating to the two user flow we focused on: adopting a cat and finding volunteer opportunities.
Primary Persona: Dina
We chose this as the primary user profile because Dina’s main goal of adopting a cat aligns with the organization’s business priorities.
Dina wants to search for the following content:
Where can Dina find the cat adoption costs on the website?
How can Dina learn about behavior she can expect from a new cat?
How can Dina see which cats are available for adoption?
Where can Dina find the adoption center hours of operation?
Secondary Persona: Alexis
We chose this as the secondary user profile because Alexis’ main goal of comparing the volunteer programs at Treehouse is important to the business, but not as crucial in terms of business priorities.
Alexis wants to find the following content from the website:
Where can Alexis find information about the volunteer programs?
How can Alexis compare the different volunteer programs?
How can she submit an application to volunteer?
Phase 2: Content Inventory
We started the second phase by analyzing the amount of content and the number of navigation levels on the website. We used an excel sheet and coded the content items.
Goal
The goal of the content inventory was to get a “lay of the land” of the website’s content and descriptions of all the featured content before any changes were made.
Scope
We catalogued all content in the main navigation menu, header, footer, and utility menu on the Treehouse website. We included all content within four navigation levels, which totaled 92 items.
Findings
1. Critical information is nested within multiple levels.
Many key call-to-action items and links were buried within multiple nested pages. Specifically, all of the information on volunteer programs were buried three navigation levels deep.
This requires users to put in more work into finding information and increases the likelihood of users getting lost on the site, distracted, or frustrated and leaving the website without completing tasks.
2. Unclear distinction between the services Treehouse offers and information about Treehouse organization.
The website features a wide range of services, programs, events, and educational information. Different content types are currently mixed together, with no clear distinctions or organization. This lack of organization makes it difficult for users to know what to expect when searching for specific information, or how to navigate the website most efficiently.
3. Redundant links clutter the screens.
Lots of screen space is filled with redundant links. Including this many links in multiple locations takes up valuable screen space, and requires users to wade through unnecessary information to complete tasks.
User Testing Overview
We conducted multiple rounds of testing on our restructured Treehouse Animals website navigation and content.
We began the process with 2 rounds of virtual Hybrid Card Sorts. We then completed 3 rounds of IA Testing for 5 tasks. We finalized testing with 1 First Click test that covered 3 tasks.
Phase 3: Card Sort
The third phase focused on multiple rounds of card sorting the newly edited website information. Card Sorting is a user testing method that analyzes how potential users organize information on a website. These results allow us to restructure the website fit users’ mental models.
Card Sort – Round One
We recruited 6 participants who were cat or dog owners for a moderated virtual Hybrid Card Sort, utilizing Optimal Sort and screen sharing through Zoom. Participants were asked to organize 34 cards that represented second level navigation items from treehouseanimals.org, and place them under the following 10 categories:
About Us
Adopt
Cat Cafe
Cat Health
Donate
Employment
Foster
Services
Volunteer
I Don’t Know
The cards we used represented items we felt were most important to include in our navigation, based on our evaluation of the content inventory, and the tasks we created for our personas. Some card and category names were modified from those in the original content inventory, to make content more easily accessible and eliminate unnecessary third and fourth level navigation.
After the Card Sort was completed, we asked each participant a series of questions, to gain additional insight into the choices they made during the cardsort. We adjusted the questions we asked, based on their relevance to the participant’s results
Results & Analysis
1. Catalyst Magazine, Cat Intake and Blog cards presented the greatest range of categorizations.
They were split into 5 and 4 categories respectively. This indicated participants felt these cards could be placed in multiple categories, or they were unclear on the meaning or context of the cards.
2. Three participants created new categories, including Events, Media and Socials.
100% agreement was only reached in the Foster category, followed by 92% agreement in the Employment category. Cat Health had the lowest agreement rating, at 40%. The average agreement rating was 67%.
3. Catalyst Magazine was split between 5 categories.
2 of 6 participants placed this card under About Us, and 1 of 6 participants each placed this card under I Don’t Know, Cat Health, and the participant created Socials and Media categories. The About Us navigation the Catalyst Magazine is currently nested under on Treehouseanimals.org, was only selected by 1 participant, showing that navigation updates are necessary. The range of categories participants placed Catalyst Magazine under, and the post-Card Sort questions we asked, indicated that participants lacked context about the magazine. This made it challenging for them to categorize.
4. Cat Intake was split between 4 categories.
3 of 6 participants placed this under Services, and 1 of 6 participants each placed this card under Adopt, Cat Heath, and I Don’t Know. Cat Intake is currently called Intake Criteria, and is nested under the About Us navigation on Treehouseanimals.org, but none of the participants selected the About Us category to look for this information. This indicates that navigation updates are necessary. Participants indicated that they were unclear on the meaning of the Cat Intake card, and needed more context.
Results Summary
We learned that unfamiliar words and lack of context were barriers to agreement amongst participants, and decided that we needed to focus on refining card names for our next Card Sort.
Card Sort – Round Two
We recruited 16 participants for an unmoderated virtual Hybrid Card Sort with Optimal Sort. Participants were asked to organize 32 cards that represented second level navigation items from treehouseanimals.org, and place them under the following 9 categories.
Round Two Updates
Based on the results of our first card sort, we combined Adopt and Foster into one category. We also updated the names of several cards, to make the language more understandable. We changed Treehouse History to Our Story, Business Partnerships to Our Business Partners, Food Pantry to Food Pantry Fund and Cat Intake to Shelter Admissions.
The goal of this Card Sort was to see how the changes we made to the category and card names impacted participant agreement. We analyzed the results to build our first IA Test. We used the following categories:
About Us
Adopt & Foster
Cat Cafe
Cat Health
Donate
Employment
Services
Volunteer
Don’t Know
Results & Analysis
1. Educational Programs, Fundraising Events, Lost Cat Help, Shelter Admissions, Shelter Practices, Sponsor a Cat and Blog cards had the greatest diversity in categorization.
The highest agreement reached was 74% in the Donate category. Volunteer had the lowest agreement rating, at 19%. The average agreement rating was 39%. Participants disagreed on the categorization of all 32 cards.
Results Summary
The most challenging aspect of this Card Sort was that 5 new cards emerged with categorization across 5 or 4 categories, including Educational Programs, Fundraising Events, Lost Cat Help, Shelter Practices, and Sponsor a Cat cards.
Shelter Admissions and Blog also showed categorization diversity in 5 and 4 categories, respectively, as they did in the first Card Sort. The dramatic differences between our first and second Card Sorts made it difficult to pinpoint the changes we should implement in our IA Testing.
Sitemap
During the content inventory process we noticed the need to relocate many of the menu navigation items. After two rounds of Card Sorting, we created our first sitemap draft. On the sitemap we were able to minimize the number of navigation levels from the original four levels to three.
Additionally, we reworded many of the site’s original navigation items, because their content was unclear. We changed:
Leadership to Our Staff
Intake Criteria to Shelter Admissions
Ways to Give to Donations
Humane Educational to Educational Programs
During this process, one of our major challenges, was that the original website uses Resources as a navigation item that contains unrelated second and third level navigation items. This required us to rename this category to redistribute these navigation items under Services and the newly created category, Cat Health.
Phase 4: Information Architecture (IA) Testing
In phase four we tested the restructured information architecture by asking potential users to complete tasks. This phase helped us refine the website’s information architecture further.
IA Testing – Round One
We recruited 7 participants for the first round of IA Testing using TreeJack. We asked participants to complete 5 tasks focused on adopting, volunteering, reading the online magazine, taking a cat to the shelter, and making a vet appointment.
Our goal with the first IA Test was to see how successful participants were in completing the tasks we provided.
Results & Analysis
Task 1: Find cats that are available for adoption.
6 of 7 participants successfully completed this task, and all navigated directly to Adoption & Fostering > Adoptable Cats.
Task 2: Find a volunteer opportunity.
All 7 participants successfully completed this task, and 6 of 7 participants navigated directly to Volunteer Programs and selected 1 of the 3 programs.
Task 3: Read an article in the Treehouse online magazine.
1 of 7 participants successfully completed this task, and navigated directly to About Us > Media > Publications.
Based on the low success rate, we decided the original task scenario was too long and confusing for participants, and decided to simplify it for the next round of IA testing.
Task 4: Find out if Treehouse will accept the sick cat you found, and cannot keep.
2 of 7 participants successfully completed this task, but both navigated indirectly to About Us > Our Shelter Practices > Shelter Admissions.
4 of 7 participants began their search to accomplish this task at Services, instead of About Us, so we felt it was worth considering changing the navigation to better match the mental model of the majority of our participants. Based on the low success rate, we decided the original task scenario was still too long and confusing, and needed to be simplified for the next round of IA Testing.
Task 5: Make an appointment with the vet at Treehouse.
5 of 7 participants successfully completed this task. 1 participant navigated directly to Services > Veterinary Care, and the other 4 participants navigated indirectly. 6 of 7 participants began their search to accomplish this task at Cat Health, instead of Services.
We felt it was worth considering changing the navigation to better match the mental model of the majority of our participants.
Results Summary
Based on the lower success rates for the tasks of reading a magazine article and taking a cat that was found to the shelter, we decided to simplify our tasks and change some of the verbiage for our next round of IA Testing.
We also considered reorganizing the navigation of some menu items, based on the paths participants chose when trying to complete these two tasks.
IA Testing – Round Two
We recruited 10 participants for the second round of IA Testing using TreeJack. We asked participants to complete the same 5 tasks used in the first IA Test. These focused on adopting, volunteering, reading the online magazine, taking a cat to the shelter, and making a vet appointment.
Our primary goal with this IA Test was to gain additional data on the tasks that we updated, since they presented the greatest challenges for our participants during the first round of testing.
Round Two Updates
We simplified the tasks of reading a magazine article and taking a cat to the shelter.
We moved Shelter Admissions under the first level Services navigation.
We moved Veterinary Care under the first level Cat Health navigation.
Results & Analysis
Task 1: Find cats that are available for adoption.
9 of 10 participants successfully completed this task, and 8 of 9 participants navigated directly to Adoption & Fostering > Adoptable Cats.
Task 2: Find a volunteer opportunity.
9 of 10 participants successfully completed this task, and 8 of 9 participants navigated directly to Volunteer Programs and selected 1 of the 3 programs.
Task 3: Read an article in the Treehouse online magazine.
None of the 10 participants successfully completed this task. All failed to navigate to About Us > Media > Publications. Based on the drop in success from the first round of IA Testing, we decided the original task scenario was still confusing for participants. We also questioned whether Media was the correct navigation label.
Task 4: Find out if Treehouse will accept the sick cat you found, and cannot keep.
2 of 10 participants successfully completed this task, and only 1 of these participants navigated directly to Services > Shelter Admissions.
Based on the low success rate, we decided the original task scenario was too long and needed to be reworded so that task goal was clearer to participants.
Task 5: Make an appointment with the vet at Treehouse.
7 of 10 participants successfully completed this task. 5 participants navigated directly to Cat Health > Veterinary Care, and the other 2 participants navigated indirectly.
Results Summary
The success rates were already low in the first round of IA testing, for the tasks of reading a magazine article and taking a cat that was found to the shelter. We were surprised and disappointed that the success rates for these tasks dropped even further in our second round of IA Testing.
We felt that we had too many unanswered questions around these two tasks, and a third round of IA testing was necessary before we could move on to creating a new sitemap.
IA Testing – Round Three
We recruited 5 participants for the third round of IA Testing using TreeJack. We asked participants to complete the same 5 tasks used in the first two IA tests. These focused on adopting, volunteering, reading the online magazine, taking a cat to the shelter, and making a vet appointment.
Our primary goal for the third round of IA Testing, was to see if the changes we made based on the results of the second round of IA Testing, increased participant success. We were most concerned with the tasks of finding a magazine article to read and taking a cat to the shelter.
Round Three Updates
We changed the second level Media navigation to News, because we thought this label would be more understandable for participants.
We moved Shelter Admissions back under the About Us navigation, as a second level navigation item, rather than a third level navigation item. We thought this would make it easier for participants to find.
Results & Analysis
Task 1: Find cats that are available for adoption.
All 5 participants successfully completed this task, and all navigated directly to Adoption & Fostering > Adoptable Cats.
Task 2: Find a volunteer opportunity.
All 5 participants successfully completed this task, and 4 of 5 participants navigated directly to Volunteer Programs and selected 1 of the 3 programs.
Task 3: Read an article in the Treehouse online magazine.
2 of 5 participants successfully completed this task, but both navigated indirectly to About Us > News > Magazine.
Though this task was only accomplished by 2 of the 5 participants, we felt the restructured navigation was a positive change. We believed the lack of context around the magazine made this task more challenging, and discussed including this our first click testing for further clarity.
Task 4: Find out if Treehouse will accept the sick cat you found, and cannot keep.
None of the participants successfully completed this task by navigating to About Us > Shelter Admissions. 4 of 5 participants began their search to accomplish this task at Adoption & Fostering, instead of About US.
This led us to consider changing the navigation to better match the mental model of the majority of our participants
Task 5: Make an appointment with the vet at Treehouse.
4 of 5 participants successfully completed this task. Half of participants navigated directly to Cat Health > Veterinary Care, and the other half navigated indirectly.
Results Summary
Though our success rates for the tasks of reading a magazine article and taking a cat to the shelter were lower than we anticipated, round 3 of IA Testing was beneficial. By examining the paths that participants took to complete the task of taking a cat to the shelter, we felt prepared enough to move forward with a new sitemap.
The increased success rate from 0% in round 2 to 40% in round 3 of IA Testing for the task of finding a magazine article, also increased our confidence. Ideally, we would have preferred 10 to 15 participants for this round of IA Testing, and higher success rates for some tasks. Because we had not originally built a third round of IA Testing into our timeline, and had not anticipated such low success rates in round 2, we were too tight on time to recruit more participants.
Wireframes
We ended the IA Testing phase by sketching some of the screens related to the tasks our participants found difficult in the third round of IA Testing. The screens we focused on were: the Catalyst Magazine, Veterinary Care and Shelter Admissions. These screens related to the following tasks:
Task: Find Catalyst Magazine.
Scenario: “You want to read an article in the Treehouse Humane Society's online magazine. Where would you look for this?”Task: Make an appointment at the Veterinary Care Clinic
Scenario: “You find a cat that you cannot keep, and you want to know if the Treehouse Humane Society will accept the cat. Where would you look for this?”
Task: Find Shelter Admissions Protocol
Scenario: “The cat you adopted from the Treehouse Humane Society last year isn't feeling well. You want to make an appointment with the vet at Treehouse Humane Society sometime this week. Where would you look for this?”
The sketching process helped our team communicate new design ideas and propose changes to the current mobile website. We focused on utilizing familiar design elements and patterns to simplify website navigation for users. These included: carousels (with hyperlinks), wide horizontal buttons with clickable images and call-to-action buttons.
Mid Fi Wireframes
Link to wireframe: https://1a725p.axshare.com
We then created digital mid-fidelity wireframes from our sketches and launched a live version in Axure. We developed a clear user flow across the wireframe screens, to accomplish each of the three tasks. All tasks started from the Home Page, which contained multiple points of entry to the website.
Phase 5: First Click Testing
The First Click Testing was the final stage in our testing process. Our goal was to further test the tasks we still had concerns about after our final IA Testing.
We recruited a total of 10 participants through our family and friends network. Our team identified three paths for completing each task including a primary path accessed by a direct link button to specific content, and two secondary paths; the search bar and hamburger menu. The average time taken to complete the test was 5:16 minutes.
During the First Click Tests, the participants were prompted to complete three separate tasks on different screens: Home, Services, and Adoptable Cats . Each task was followed by two questions to gain qualitative data:
Why do you think you would find this information here?
Are there any other areas on this screen where you would expect to find this information?
Results & Analysis
Task 1: Find Catalyst Magazine.
8 of 10 participants successfully completed the task by clicking directly on the “Magazine” link in the carousel. Of the two participants that failed to complete the task, one participant clicked on the “Blog” link, and the other clicked the “Next” arrow in the carousel. The two participants who failed to complete the task appeared to either be confused by the task itself, or said they believed the “Blog” could also include magazine articles.
The average time to complete the task was 11.9 seconds, which suggests that the content is easily found in the redesigned wireframes. Another participant (P6) stated: “My first choice would have been the menu again, except the word “magazine” was big and bolded so it was the obvious choice, easier than the menu”.
Task 2: Make an Appointment at the Veterinary Care.
All 10 participants successfully completed the task. 7 participants clicked on the “Veterinary Care” horizontal button (a primary path for solving the task). The other 3 participants clicked on the “hamburger menu” icon. The average time for completing the task was 17 seconds, which indicates the layouts and themes presented in the wireframes were familiar for the participants and they knew how to interact with the UI elements found on the screen.
Task 3: Read an article in the Treehouse online magazine.
All 10 participants successfully completed the task by clicking directly on the “Shelter Admissions” horizontal button, with an average time of 26.1 seconds. Results indicate that users did not have any difficulties finding the correct information and that they are satisfied with the current wireframe designs.
Lessons Learned
1. Participants' mental models do not always match ours.
Participants thought certain navigation items would be found under first level navigation items that we didn't initially consider. We adjusted our navigation, based on the paths they chose in the IA tests, even when they did not successfully complete tasks. This showed us where they expected information to be located.
2. It’s difficult to anticipate test results, especially when different participants are used across tests.
Changes we thought would increase participant success in accomplishing tasks, based on test results, actually produced lower success rates. We had to look at the paths people chose to try to better understand whether these changes made sense, and decide how to move forward.
3. Language is important.
We initially made our tasks too long and detailed, which confused participants. We should have kept tasks short and straightforward, so participants were not distracted, and focused only on the tasks.
4. Adding an additional testing round is worth it.
Though we didn’t originally include a third round of IA Testing in our schedule, we felt it was worth the extra work and time to run this test. It allowed us to identify actionable feedback and achieve higher rates of participant consensus.
Future Directions
Due to our limited time frame, we were only able to focus our testing efforts on a limited number of tasks. Because we made significant updates from the original website, including restructured navigation and renamed navigation items, we believe more testing is necessary. This will ensure that the changes we implemented will improve the overall usability of the website, and justify the time and expense of making these updates.
We would like to conduct additional rounds of IA and First Click Testing for the tasks of donating to the Treehouse Humane Society, and purchasing tickets to events. Because these are both important tasks that contribute to the fundraising efforts of the organization, they are a high priority. Ideally, we would like to create wireframes for all key tasks, and eventually develop an interactive prototype for further usability testing.