TORONTO HUMANE SOCIETY
A responsive website for an animal shelter
SUMMARY
I redesigned the Toronto Humane Society's branding and its responsive website.
Note: This is an uncommissioned project.
PROBLEM STATEMENT
The Toronto Humane Society is an animal shelter offering a variety of services including pet adoption, wellness services & dog training. They want to encourage more pet adoption as well as donations to keep this independent non-profit organization stay afloat.
The organization wants to undergo a complete rebrand and redesign their responsive website to better communicate their key objectives.
ROLE
UX/UI designer, researcher
TOOLS
Figma
Adobe Illustrator
Optimal Sort
Google Forms
Miro
TIME
4 weeks (20 hours / week)
Design Process
1. Empathize
Gathering facts to make informed design decisions.
MARKET RESEARCH
What challenges are shelters facing right now?
● In light of COVID 19, there has been a dramatic increase in the demand for pet adoption as well as the number of fostering applications. Shelters are also offering new online services such as animal training and consultation.
● The Toronto Humane Society (hereafter THS), much like most other Canadian animal shelters, has a no-kill philosophy and therefore the placement of animals in permanent homes is one of the main priorities.
● Pets are relinquished for a variety of reasons by a broad range of demographic, indicating continued efforts will be required to educate people on responsible pet ownership.
COMPETITIVE ANALYSIS
What are other shelters doing on their website?
I examined four animal shelters in the Greater Toronto Area:
None of the other shelters' websites are without flaw, which is unsurprising as they all operate on donations alone.
However, it did become apparent that the THS website structure falls short. The large volume of information needs to be re-organized & relabeled for better navigation.
In addition, there was some content on other shelters' sites that would be beneficial to the THS website:
- A breakdown of costs (Ex. how the donated money will be spent, what is included in the adoption fees) would increase the public's confidence in their decision to donate.
- Educational content on animals that are less likely to be adopted (Ex. "shadow" cats, special needs dogs, breeds with bias) to encourage more adoption.
SURVEY
How do people feel about animal shelters & donating/volunteering for their cause?
37 people participated in the survey.
RESEARCH SUMMARY:
My research revealed a common thread: it is critical that we restructure the THS website to improve the ease of navigation, as there is increased traffic on the site due to the effects of COVID 19.
Some key points to keep in mind are:
- To encourage people to adopt, more educational material should be provided to visitors.
- To encourage donations, there should be a breakdown of how the funds will be spent.
- To encourage people to volunteer, the site needs to elaborate on the expected level of commitment.
USER PERSONA
What do our users look like?
Taking the knowledge from my research, I visualized the personas that we would serve for the main goals of our website; encourage donation & adoption.
2. Define
Reorganizing content so users can achieve their goals faster.
CARD SORTING
How do users categorize & understand information on the site?
One of the shortcomings of the existing website was that the content was broken up into multiple small categories & they were labeled unclearly, leading to confusion.
In order to establish better information architecture, I conducted a card sorting exercise with 14 participants.
SITE MAP
How can we simplify the website's content & improve the ease of navigation?
Taking my learnings from the card sorting exercise, I created a site map to visualize the structure of content within the site.
BEFORE: Content was broken up into 8 major categories, many of which were labeled unclearly (Ex. there was no clear distinction between "support us" and "get involved").
AFTER: Content was streamlined into 5 clearly-defined categories, which are then organized into sub-categories for easy navigation.
3. Design
Refreshing the Toronto Humane Society brand
UI KIT
Nailing down the design details
The primary colour (green) was taken out of the existing logo and applied across the website in varying hues for a clean look that does not distract from the content.
The typography was chosen based on its legibility and the curved lines that convey a sense of approachability.
Overall, the design aims to appeal to a wide demographic and exude the organization's open, effective & humble nature.
LO-FI WIREFRAMES
Determining the most effective layout
I began by brainstorming the layout using pen and paper. I then digitized the design on Figma and created lo-fi wireframes for desktop, tablet & mobile sizes.
HI-FI WIREFRAMES
Bringing the design
to life
The lo-fi wireframes were brought to life by applying the newly-established brand identity and UI components.
4. Testing and iteration
PROTOTYPE
Simulating the user experience
I created a prototype within Figma and added functionality to allow users to complete the following tasks during usability testing:
- Locate "Mack the dog's" profile & find out his weight.
- Locate a section that explains how the donated money will be spent & find out what percentage goes towards animal care.
- Locate a section where users would expect to find rabbits for adoption.
USABILITY TESTING
Getting first-hand feedback from users
Usability testing was conducted with 3 participants to determine if users can successfully navigate through the site with ease & identify any pain points in their experience.
- 100% completion rate
- 100% error-free rate
- Average time to complete task: under 30 seconds
DESIGN REVISIONS
An endless pursuit to make a better product
I made the following changes based on the feedback given during the usability testing.
Final product
Say hello!
Let's have a conversation at ileneshioguchi@gmail.com or on LinkedIn.
© 2021 Ilene Shioguchi