Redesign of the
Toronto Humane Society Website

Website Redesign
Project Overview
In collaboration with the Toronto Humane Society, we embark on a transformative project to enhance their website's information architecture. The Toronto Humane Society plays a pivotal role in animal care, offering shelter services, veterinary care, and educational support for pet owners. Our project centers on optimizing the website's navigation system, ensuring users can effortlessly access critical information through an intuitive navigation bar. By improving user experience, we aim to foster stronger bonds between animals and their future caregivers, empowering the Society to better serve its mission and community.
My Contributions
  • Information Architecture Evaluation: Conducted user interviews and performed heuristic evaluations, utilizing methods such as card sorting and tree testing to unveil user needs and pain points related to website content.
  • Analyzed User Flow: Leveraged evaluation and testing outcomes to scrutinize primary tasks and behavioral pathways for diverse user groups when navigating pet adoption websites.
  • Drove Prototype Design: In response to identified user pain points concerning information distribution and architecture, initiated the creation of wireframes and prototypes aimed at enhancing website usability and clarity.
Design Approach
  • Heuristic Evaluation and Usability Testing
  • Information Architecture Schematic Diagram
  • Prototype and User Flows
  • Reflection
Our Solutions
  • Introduction of new website information architecture
  • Redesigned navigation system
  • Updated user flows for typical tasks on website

Heuristic Evaluation

An online content auditor​ is used to do a preliminary audit of the website. Some potential issues of the website were revealed in the results of the content auditor.

General Essentials
  • 13 duplicate content
  • 3 broken links
SEO (Search Engine Optimization)
  • 1 page misses the title
  • 49 pages miss the meta descriptions
Content Experience
  • Reading Grade: 9.1
  • Reading Ease Score: 53.1
Responsive Readiness
  • 393 inline styles
  • 101 iframes
Content Auditor Results Summary
  • For most of the users, the content is hard to understand because it is verbose and duplicated, which will create a large cognitive workload for users.
  • Missing meta descriptions prevent the content from being read by the accessibility tools and broken links and missing titles make the website less accessible.
  • A large number of inline styles would result in a low responsive readiness when users switch devices to view the website.

Usability Testing

Participants
The participants for usability testing are current or potential users of the website. For example, they have owned, are owning, or will own pets so that they are all included in the user group of the THS website.

Test Process
Participants were asked to complete four tasks of the website to get an overview of the current usability issues encountered by users on the website. During the tasks, participants' performance were observed, an post-interview was conducted after the test.

Most issues encountered by the participants are about the difficulties in navigating the website, finding the right information under the corresponding categories, and understanding the complicated terms.

  • Participants cannot notice the "Donate" button
  • Confusion between the sections "Ways to Give" and "Support Us"
  • The system responded slowly and lack of adoption options
  • Jargon brought difficulty for users to understand. For example, "feline" and "canine"
  • The content includes professional words that is hard to read and understand
  • No time slot is available
  • Confuison between "Ways to Give" and "Support Us"

Card Sorting Study

Since most of the participants encountered problems identifying the difference between sections and the content under each section. We conducted a card sorting study to investigate how the sections should be organized. We created 39 cards (including 8 global navigation categories and 29 second-and 2 third-level categories) for participants to sort out to further understand their difficulty when navigating the website.
For example, we found that:

  • Duplicate links in the navigation bar, for example, there are two “annual reports” tabs
  • Similar names and connotations of the categories, such as “Support Us” and “Ways to Give”
  • Jargon and abstract words are used on the names, such as “Stray Animals”, “Science and Advancement”

The level of similarity refers to how similar participants grouped the cards together under a certain global category. It shows that all the categories in the global navigation level have a relatively low level of similarity which means that over half of the participants would not find the correct information by looking at the categories’ names.

Taking into account the results and insights gleaned from the card sort study, we rearranged the information architecture of the website's navigation system. Secondary-level categories were shifted based on the outcomes of the card sorting exercise. However, whether this arrangement aligns best with users' expectations remains uncertain. The answer is not definitively concluded, prompting another round of research studies.

Tree Test Study

To delve deeper into whether the revised navigation system aligns with users' expectations and instincts, a tree test study was crafted. The study comprises five tasks, aiming to assess users' ability to successfully complete each task by selecting and navigating through the categories, ultimately reaching the intended destination.

Analyzing the treetest results, directness refers to participants achieving their goal through a single direct path. It became apparent from the results that participants encountered difficulties with task 4, which involved "participating in general events," and this task also yielded the lowest success rate. I recognized that participants tended to look for overlapping phrases between the tasks and the categories. However, there was no specific tab for "general events" for them to choose. This issue arose from the misleading phrasing of the task, highlighting the challenge of finding a way to participate in events using the current navigation system.

While participants struggled with the lower success rate of task 4 in the tree test, the overall high success rates of the other tasks and the observed directness suggest that the enhancements made to the navigation system following the card sorting exercise were effective. To refine the navigation system even further, taking into account the insights gained from task 4, we introduced an additional version of the information architecture diagram for the website.

Prototype

Make a donation

The global-level category "Ways to Give" has been rephrased as "Donate" to offer a more straightforward option for compassionate animal lovers looking to support the organization financially. Additionally, we have retained and highlighted the quick button "Donate Now" for a simple one-click action, addressing user feedback that it was inconspicuous during the initial round of usability testing.

Adopt a dog

Recognizing the paramount importance of adoption as the primary mission of both the organization and the website, we have elevated it to the first category in the navigation bar. This strategic placement aims to emphasize and streamline the adoption process, making it more transparent and straightforward for users seeking to contribute to the organization's mission of facilitating animal adoptions. This adjustment not only aligns with the core values of the organization but also enhances the user experience by prioritizing the primary goal of finding loving homes for animals.

Make an appointment

We have streamlined the steps for booking a pet service appointment, simplifying the process to enhance overall user-friendliness. Moreover, we have reworded the content using clear and straightforward language, avoiding jargon, to improve readability and ensure ease of understanding for all users. This adjustment is aimed at making the booking process more accessible and user-friendly, catering to a wider audience and ensuring that individuals can effortlessly navigate through the steps to secure pet services.

Apply for volunteer

Recognizing the challenges users faced in differentiating between the terms "Ways to Give" and "Support Us," we have revised the global navigation label from "Support Us" to "Join Us." This modification aims to provide a clearer and more intuitive pathway for users interested in volunteering with the organization, ensuring they can navigate to the appropriate section efficiently. By aligning the navigation labels with user expectations, we strive to enhance the overall user experience and facilitate seamless engagement for those eager to contribute through volunteer opportunities.

View full prototype

Reflections

1. Testing makes perfect

The iterative nature of testing contributes significantly to the intuitiveness of the navigation system. Throughout the entire project, we conducted three rounds of distinct user research studies, each unveiling valuable insights and highlighting significant aspects related to users' needs and potential enhancements. This experience emphasized the importance of ongoing testing and iteration in the design process. I've come to understand that, given sufficient time and a clear goal, multiple rounds of testing can serve as an effective strategy to uncover critical facts, allowing us to iteratively refine the existing product and strive for optimal performance.

2. Be careful about wordings of questions

A crucial takeaway from the tree test underscores the importance of carefully phrasing questions and tasks, as they significantly impact testing results. The unexpected variation in the outcome of task 4, despite relatively higher success rates in the other three tasks, highlighted the impact of misleading question descriptions. Participants were guided down the wrong path due to the wording of the question. This serves as a valuable lesson in research question design—questions should be concise, clear, and easily understood. Participants should not be left confused by the questions, as it can critically influence the test results. Moving forward, this insight will guide me to craft questions that minimize ambiguity and ensure accurate and meaningful responses in user testing scenarios.