This project was an academic case study for a user interface design course at University of Toronto School of Continuing Studies. I was tasked with choosing a non-profit organization, Toronto Humane Society, and redesigned its homepage and adoption pages with the aim of improving overall usability and simplifying the adoption process with 3 other team members.
Research, Wireframing,
User testing, Prototyping
2 weeks
Figma, Miro, Trello,
Artboard Studio
The current Toronto Humane Society website makes it difficult to learn what they do and what kind of services they provide with a confusing navigation system which overcomplicates a simple process, especially their adoption process. While their homepage conveys a lot of information, it is not well-organized with not enough white space between elements, which distracts users from locating information of their interest.
We believe that by reorganizing a navigation system and redesigning the homepage and adoption pages will improve overall usability and make it easier for users to enrich their life with a perfect animal companion. We will know we have reached our goal when our navigation makes the adoption process simpler and there is an increase in adoption applications.
This project was divided into three different parts: dissecting the existing website, redesigning the website, and validating our design decisions. Each part followed the 5 elements of design thinking (empathize, define, ideate, prototype, and test) to determine user's unmet needs and pain points. We began with initial research by thoroughly reviewing the existing website, and it was clear from the outset that their messages were being lost in the clutter of their homepage.
Toronto Humane Society (THS) is a non-profit organization, working for a compassionate society where all animals are respected and valued without any cruelty and suffering. They aspires to be a best-in-class animal shelter working in partnership with the community, offering different types of services for all animals, such as adoption, pet training, vet clinic, and pet insurance. The following images show their current website design.
.png)
We planned a user interview/testing on the existing website, focusing primarily on 3 elements: what they do/what kind of services they provide, volunteering, and adopting a pet. We conducted 4 remote 1:1 interviews via Zoom to ask participants to complete 3 different tasks on the existing website, and then analyzed the data.
We decided to reorganize their navigation system which overcomplicates a simple process requiring redundant clicks for users. While users had no issue finding volunteering opportunities, they had trouble with understanding the adoption process with illegible and unnecessarily long paragraphs. We chose to focus on their homepage along with adoption pages so that people could better learn who they are, what they offer for the community, and what to expect from their adoption process. We were able to pinpoint the following pain points from user research and analysis.
Main Pain Points
•
No clear call to action for adopting a pet
•
Too many options in a navigation bar
•
Too many clickable areas in a slider form on the homepage
•
Too much texts with not enough white space makes everything look cluttered and disorganized
•
Hard to learn their adoption process, which is only shown in a form of small plain text
Originally we believed the Toronto Humane Society needed a volunteer page redesign. However, upon conducting user testing on the current website, we found that redesigning their adoption pages would have a greater impact, since existing adoption pages were text heavy, which confused people in understanding the adoption process. We updated our persona Diane accordingly with our new approach gained from user research.
We then conducted a card sorting with existing THS website contents, so that we could reorganize and clean up repetitive or redundant items for cohesive and intuitive navigation.
We set aside a 30-minute session to each draft homepage and adoption pages, which were then dot-voted to prioritize our favourite design ideas from our brainstorming sessions and our sketches.
We then built digital low to high fidelity wireframes which were decided through dot-voting.
Two rounds of remote 1:1 usability tests with a total of 10 participants were carried out, and user's feedback helped us iterate our V1 prototype. All test participants were successfully able to learn what THS does and main services they provide based solely on the homepage contents, which validated our design decisions, setting the tone for the THS website. Also, all participants appreciated new adoption pages which allowed them educate themselves the adoption process and what to expect along the way effortlessly.
Wonder if he could filter adoptable pets by pet's temperament (e.g. good with kids or other animals)
•
Added "Temperament" and reorganized existing terms
•
Rearranged the order of adoption filters based on a quick survey, asking people how they would rate the relevance of each filter option in their adoption process
Unsure where to click for more info on "Pet Insurance" except brief description written on the "Our Services" section of the homepage
"What We Do" divided into two different menus, "About Us" and "Our Services", for a clearer path to their services; "About Us" being a stand-alone page
Majority of test participants unsure what to expect under the “Social Program” menu
"Social Program" nested under "Get Involved" with a new heading "Campaign"
"Our Services" section expected to be clickable, directing them to each respective service
•
Minimal “Learn More” CTAs for each service added at the bottom
•
Redefined “Vet Clinic” and “Adoption” cards to educate users on terms such as “animal intake” and to include specific services such as vaccinations and spaying/neutering
•
Onboarding: implementing a proper onboarding process, including Sign Up and Log In, would familiarize users with all of the available services provided by Toronto Humane Society.
•
Adoption process tracking: once users sign up and start adoption process with THS, they could monitor their adoption process through their profile.
•
Favourite pet of interest: people who have an account could set a certain pet as their "Favourite", so that they could easily revisit its information without going through search process later on.
