Toronto Humane Society

Redesigned the THS website and its information architecture to support potential donors in meeting their information needs to build trust and establish urgency and impact.

My Role

User Research
Usability Testing
Prototyping

Team

Janice Cheung
Jenny Xue
Jihoon Park

Tools

Figma
Optimal Workshop

Timeline

3 months
// THE PROBLEM

financial sustainability

Toronto Humane Society’s (THS) 5 year strategic plan identified financial sustainability as a core issue, with ~70% of its revenue being donations. How can the current website play a strategic role in convincing potential donors to take action?
// USER RESEARCH

prioritizing donors

Through a content analysis of the current THS website we identified 4 user archetypes. Given our team's time constraints and the THS's concerns around financial sustainability, we decided to focus our redesign around potential donors.

what drives donations?

7 semi-structured interviews were conducted to understand the information needs of potential donors. These were the 3 core informational needs we identified:

Trust

7 out of 7 potential donors seek to establish trust before donating. Participants identify trust as the ability to ensure that their donations contribute to action-oriented initiatives instead of marketing or administrative tasks.

Impact

4 out of 7 potential donors favour smaller or grassroot organizations over large non-profits. Participants believed that their donations would have a higher impact on smaller organizations. The THS needs to emphasize that despite its large size, the impact of any donation is significant.

Urgency

4 out of 7 potential donors prefer to support time-sensitive issues. Recent donations were associated with causes like BLM, where urgency was elevated by time-sensitivity and cultural relevance.

evaluating the
information architecture

A closed card sort study was conducted remotely with 4 users to evaluate the effectiveness of the site’s current information architecture. Potential donors were asked to sort the site's existing secondary navigation labels into their respective primary headings.

The current IA is cluttered with non-differentiated labels which make it difficult for users to correctly identify where information should be located.
Key insights:
  • Global navigation is cluttered - The amount of labels used in primary and secondary navigation makes it difficult for users to know where information is found.
  • Labels are repetitive and too similar - Users frequently interchanged labels within the primary headers "Support Us" and "Get Involved", as well as within the headers "What We Do" and "Education & Advocacy".

how does the current site support its donors?

7 usability tests were conducted to evaluate how the current site supports donors in learning about the THS. During these usability tests, users were tasked with finding information regarding how their potential donations would be spent.

Users have difficulty finding information regarding how donations will be spent.
On average, when completing this task it took the following . . .
Key insights:
  • Critical information is inaccessible - information regarding the allocation of donation funding is only accessible through file downloads in "Annual Reports" under "About Us". This information should be integrated into on-site pages.
  • "About Us" is a key touchpoint for donors - Potential donors will often check the "About Us" to gauge the trustworthiness of the organization and the amount of urgency and impact of its initiatives.

identifying opportunities

  1. Develop a donor user flow.
    Currently, potential donors must piece together information regarding trust, urgency, and impact on their own. There is no existing user flow for this task.
  2. Declutter the global navigation.
    Cluttered and repetitive global navigation makes it difficult for users to efficiently meet their information needs.
  3. Redesign "About Us".
    The current "About Us" does not effectively convey the impact and urgency of THS's work.
  4. Create a "Why Donate?" page.
    THS needs a clear way to meet donor information needs; building trust and establishing the impact and urgency of their work.
// USER FLOWS
developing a
donor user flow

// KEY CHANGES

decluttering the
global navigation

Before
Cluttered global navigation with a total of 12 global navigation labels
Overwhelming amount of secondary navigation labels available
Top-most labels are not clearly visible
After
Decluttered global navigation by reducing number of headers from 12 to 6
Introduced tertiary navigation to reveal information as-needed
Moved similar secondary navigation labels into tertiary navigation
(iterations)
Introduced color to the global header to increase visibility

redesigning "About Us"

Before
Does not highlight achievements or statistics to build trust, impact, or urgency
Primarily links to other pages instead of communicating value
Lack of visual hierarchy within primary content
After
Created an "Our Accomplishments" section to build trust, impact, and urgency
Added a "Related Links" section for contextual links to relevant pages
Introduced visual hierarchy through content spacing and font weight
(iterations)
Created icons to quickly communicate value and meaning
Introduced quantifiable accomplishments

creating
"Why Donate?"

Before
Currently a popup that all usability test participants immediately closed without reading
Copy does not communicate direct impact of donations
Does not exist as a dedicated page
After
Dedicated page to attributing trust, impact, and urgency in the act of donating
Included "Related Links" that are relevant to donor's information needs
Introduced visual hierarchy to increase scannability of content
(iterations)
Introduced section headlines to increase scannability
Added a direct call to action for donations
// KEY TAKEAWAYS
lessons learned
  1. Balance the needs of the users with the needs of the organization.
    Design solutions should align goals of the organization with the goals of the users.
  2. Validate the problem.
    Before working towards designing solutions, it is essential to validate that the problem actually exists, understand how it is experienced, and why it is experienced.
  3. Recognize that there is often more than one user type.
    Products are often used by many different user types. When designing solutions it is important to either design solutions aligned with multiple user types or justify the prioritization of certain ones.