Overview
UX Design
User Research
Persona
Usability Test
User Flow
Card Sorting
Context
Single Project
Design in 4 weeks
No Dogs Left Behind is a leading global dog rescue with a focus on government advocacy, education, emergency rescue response, and shelter operations protocol.
UI Design
Wireframing
Prototyping
Iteration
Tools
Figma
Miro
Invision
Zoom
Trello
My Role
UX/UI Designer
Heuristic Evaluation
To help optimize usability by minimizing design deficiencies, my team decided to conduct a heuristic evaluation. We were able to check the effectiveness of the interface, as well as identify any problems regarding accessibility and contrast.
Competitor Analysis
Mattie’s Place
Strength
Very aesthetically pleasing with a great loading page and graphics.
The photos chosen pull the user in.
Outlines information in a way that is easy to understand (ex. adoption process).
Outlines that they reply to contact messages quickly.
Weakness
Lots of repeated images and content.
Menu bar is squished together
Pet Finder
Strength
A lot of dogs on main page all 1 mile away.
Little background story for each dog.
Health tab for each dog to see vaccination and spayed/neutered status.
Weakness
Some dogs don’t have a photo.
Redemption Paws
Strength
Clean design.
FAQ page.
Outlines all information a potential dog owner would need.
Weakness
Menu appears under the hero image.
Page layout and design are inconistent.
To better understand the current designs for similar pet adoption sites, I selected 3 major competitor apps in the market. Through this research, I found that if No Dogs Left Behind could provide intuitive interface for users, and provide information to users on where donations go, they can differentiate themselves and succeed in the market. I also found that most of the sites lack visuals, including proper hero images, icons, photos of dogs.
User Observations
A lot of the users say this website looks like a scam and it feels scary.
Very hard to navigate the site
Users would scroll through the home page before looking in the nav bar.
Off-put by the images of the Yulin dog festival.
User Interviews
Objective 1
As a user researcher, I want to understand our user’s steps take to start their search for a rescue pet.
Objective 2
As a user researcher, I want to understand why a user might choose to rescue instead of adoption.
Objective 3
As a user researcher, I want to understand our different reasons behind what is stopping the user from getting involved in the rescue pet journey, whether that may be volunteering, donating, fostering, or rescuing a pet.
To understand and articulate customer expectations and needs, I conducted a variety of interviews. I recruited people who have adopted animals who are interested in adopting another pet. This audience ideally care about animals in general and want to know how they can make a change to save more animals. I noticed that there are still potential opportunities to solve customer problems by changing the site’s overall aesthetic to be more soft and inviting, rather than to scare customers to provide donations.
I interviewed 10 participants and collected more than 100 pieces of feedback from people across North America. The participants average age was 30; out of 10 participants , 5 identified as females and 5 as males.
Survey
Results
Reasons people choose not to rescue their pet:
Temperament, health issues, not knowing the bloodline.
How social/comfortable it would be around people
Don’t have full/all the information on their back story.
8/10 participants aren’t just interested in adopting a dog, they want to as many dogs as they can. Either through adoption, volunteer work or donations.
6/10 of the participants browse pet adoption websites during their free time.
All of the participants are worried that if they adopt another pet, it might not get along with their current pets, or won’t interact well with their living environment. They would like to have an on site visit to see how the dog is in person.
Since the start of the pandemic, people have been looking at pets as a new companion.
All of them replied positively when asked would they use a website that can provide a clean aesthetic and well as up front information about how to help more animals.
Joy Granderson
“Often times, I don’t know if my animals saved me or I saved them”
About
Joy is a part-time student and part-time nurse who enjoys spending her free time reading, doing yoga, and spending time with her pets. She deeply cares for living things like animals, plants, and people. Joy's favourite thing about living alone is that she can bring home as many pets as she wants.
Age
Occupation
Status
Location
27 years old
Part-time nurse & student
Single
Newmarket, ON
Needs
Have enough space to allow for more pets.
Make a high income to support and adopt more animals.
Wants to save as many dogs as possible.
Needs to make sure all of her animals get along with each other.
Needs the unconditional love the animals give her.
Frustrations
Doesn't always know how her donations to animal rescue organizations are being allocated.
Rescue websites don't always include enough information about what treatments the animals have already had.
Feels guilty when organizations euthanize the animals that don't get adopted.
Current Feelings
Anxious that there are so many pets without homes
Loved by her pets
Busy at work and in her home life
User Persona
After synthesizing the user research from the 10 participants, a Persona was developed to represent a typical user’s personality to understand their problems, motivations, personality, goals, frustrations and how No Dogs Left Behind could fill in those pain-points.
Affinity Diagram
As a team, using Miro, we organized all the data from the user interviews and categorized them. They were categorized into, research, appearance, financial, reputation, behavior and emotions. This allows us to look at how our user interacts with our site, and understand their pain-points and frustrations.
Empathy Map
Creating an empathy map allows us to gain a deeper insight into our customers. It helps us as designers to immerse ourselves in the user’s environment.
The Problem
Our user, who has a soft spot for animals, needs to feel reassured and comfortable when rescuing a pet because they want to ensure they are making the right decision when adopting a new member of the family.
The Solution
Ensure that users feel as though they can trust a rescue site and feel informed about current events, donations, fostering, and rescuing.
UX Scenario
Joy wants to rescue a new dog that will get along with the dog she already owns. She has some criteria including that the dog must be medium size, comfortable with other dogs, has all of their shots, and can be comfortable in an apartment. Joy does not know of any rescues yet and wants to find a reputable one where she feels taken care of during the whole process.
Name: Joy Granderson
Age: 27 years old
Occupation: Part-time nurse & student
Location: Newmarket, ON
MOtivation: Single but has a dog she calls her son
The Experience
1) Joy feels the need to
rescue a dog and have a new family member.
2) She googles local dog rescues.
3) She gets overwhelmed by so many different sites.
4) She stumbles across No Dogs Left Behind.
5) She sees all the good this charity is doing for dogs around the world.
6) She reads about the horrific activities that occur during the Yulin Dog Festival.
7) Decides to rescue a dog from the Yulin Dog Festival.
8) She checks for vaccination statuses and other health concerns.
9) She fills out the adoption application form.
Opportunities
Tour of the facilities
Bookmark/ save different dogs
Add an appointment page under contact us
User Journey Map
To better understand how I can help joy with No Dogs Left Behind and its features and functionality. We created a user journey map that put our user, Joy, into a UX scenario to have a visual representaion of the customer experience
Card Sorting
The original No Dogs Left Behind site had way too many pages. We performed card sorting using Miro to create organized categories for users to make everything easily accessible.
Site Map
After outling the features and priorities of No Dogs Left Behind, we created a site map. This helped me in visualizing how each page would be connected, and how users could potentially navigate through the site.
User Flow
We created a user flow to better understand the efficiency of No Dogs Left Behind. Below you can see whole process of adopting a pet and learning about the Yulin festival.
Low Fidelity Wireframes
Home Page
Adopt Page
Stop Yulin Page
Shop Page
We created digital sketches to visualize the hierarchy and structure of elements for the initial screens.
Mood Board
Creating the mood board helped us come up with creative solutions for the redesign and encouraged us to start the style guide. We also created a UI Pattern mood board to help us decide on these features as well.
UI Style Guide
We wanted our website redesign to have more of a welcoming tone rather than using fear to entice the user.
Because of this, we decided to use images that we felt would invoke an emotional response from users.
After going through a variety of different typefaces and colour palettes, we used the dot voting method to help us choose what suited our web redesign best.
UI Testings
We gathered seven participants to complete usability tests on our high fidelity prototype. The main issue we ran into was that it was difficult for the users to find the Stop Yulin page, which is a page the original site stressed often. We decided to add a button on the homepage to make the flow easier for the user.
finding the Stop Yulin Page at a 78.57% success rate.
Finding the Shop Page had a 92.86% success rate.
Final Thoughts and the Following Steps
Through this project, learned how to create smooth animations using Figma, and I now have a better understanding on implanting different types of animation in a prototype.
My team struggled with time management, we often found ourselves falling behind, but with the help of Trello, we were able to get back on track to finish on time.
For the following steps, I would like to continue testing, and conduct A/B testing to get more insight on a wider range of designs. I would also like to create mobile and tablet friendly prototypes.