_edited.jpg)
The Current Situation
This Los Angeles-based rescue organization had been around for the last 25 years, saving over 9800 dogs. In all that time, their website had never been modernized.
The Challenge
How might we make a more modern website that streamlines the search and adoption process to get more dogs into loving homes?
The Proposal
The Solution
Based on customer research and competitive analysis, develop a website that is modern and responsive to user needs. Make it easy to use, with the adoption application, the dog listings, and the store all situated within the site. Integrate website with social media platforms to increase cross promotion.
My Tools
Figma
Wix
Photoshop
Canva
Google Forms
My Role
Researcher and Designer
My Target Audience
People looking for a rescue pet in the Los Angeles area
My Timeline
January 2023 - May 2023
Research
Questionnaire
25 dog owners completed an online questionnaire asking about the features they expected to find in a dog rescue website.
80% of dog owners used either Facebook or Instagram as their primary social media platform.
Competitive Analysis
Looking at other dog rescue websites, it became clear how Ace of Hearts needed to keep up with the times to make sure potential adopters stayed on their site.
Personas
Based on the questionnaire, there emerged two main types of dog owners: young adults looking to get their first pet, and middle-aged adults who wanted a family dog. The biggest concern for the younger dog lovers was in getting their roommates and landlords on board. For the older adults, the concern was what to do with their dog during works hours.
Sketches
I incorporated my findings and began to visualize the new version of the website with sketches.
Design System
Logo
The logo had already been created by artist Shepard Fairey, and was being used on the Instagram and Facebook pages, but not on the website.
Fonts
Headings:
Avenir
Body:
Avenir Light
Colors
The color palette was generated based on the preexisting logo.
.png)
Buttons
Regular:
Hovered:
Usability
Testing
Testing was conducted to find out how users were interacting with the current website, and if they were able to use the site as expected.
Type of Testing
quantitative and qualitative
Location
in-person using researcher's laptop​
Type of Moderation
moderated by the researcher​
Participants
dog-owners ranging from 23-73 years old
Objectives
-
identify strengths and weaknesses of UI navigation and structure
-
identify whether users can complete common dog adoption website tasks
Findings
Problems
There were many issues with the existing website. Users described it as:
Unhelpful
0% were able to find the price for an adoption.
Difficult
80% of users described the website as "difficult."
Broken
Over 50% of the links were broken.
Intrusive
60% said the questionnaire was intrusive/offensive.
Frustrating
100% were frustrated at the length of the questionnaire.
Time-Intensive
The questionnaire took over seven minutes to complete.
Confusing
100% attempted (unsuccessfully) to use the logo to go to Home.
Strengths
Despite some severe usability issues, testers were able to perform 100% of critical tasks such as:
browsing for dogs
submitting an application
learning about adoption fairs
learning about fostering
learning about volunteering
In addition, Ace of Hearts Dog Rescue was ranked number one when performing Google searches!
.png)
Solutions
Based on the research above, I made the following changes: ​
​​
-
Organize - remove clutter, focus on the most used parts of the website
-
Schedule - make it easy to know the date of the next adoption fair
-
Stay in Site - have all interactions take place within the website
-
Improve Content - streamline adoption process, particularly in the form
-
Provide Answers - make it easy to get answers within the site
-
Be Consistent - help users find information by being consistent
Organize
A poor organizational structure caused confusion and frustration, and could lead the user to abandon the website.
Organizational Solutions
-
Streamlined menu from 14 choices to 6 choices
-
Made logo into a clickable button to return to homepage
-
Emphasized DONATE button
-
Provided links to social media
-
Removed broken links and other clutter
-
Emphasized adoptable dogs with a prominent button
Organization Before
Organization After
Schedule
Inaccurate information reduced overall trust in the website. The adoption fair information needed to be easily accessed to increase potential dog adoptions.
Scheduling Solutions
-
made sure information was accurate information
-
included Google Maps
-
made a visual calendar
Scheduling Before
wrong year!
Scheduling After
Stay in Site
When people clicked on a button within a website, they expected to stay within the website. If they left, they might start searching on Adopt-a-Pet's third party website, and never return to Ace of Hearts.
Stay in Site Solutions
-
created a dynamic link between the Adopt-a-Pet database and Ace of Hearts so potential dog owner would have all the information and have no reason to leave the site
Stay in Site Before
Stay in Site After
Improve Content
An over-long or disrespectful questionnaire might cause the user to leave the site. If a user was unsure if the application had been submitted successfully, they might lose confidence in the site or give up. If a user was "trapped" on the application page after submitting, they might not chose to return to the site.
Content Solutions
-
Created an application within Wix rather than using a third party form generator
-
Removed non-essential questions
-
Reworded questions to ensure they were respectful to the user
-
Divided questions by category
-
Numbered pages to users help visualize progress
-
Alerted user when application was submitted successfully and then returned them to the main website
Content Before
Endless questions!
Content After
Provide Answers
If a user felt that their question cannot be answered easily, they might leave the website and find a different organization.
Answer Solutions
-
Made a FAQ page to answer common questions
-
Put contact information on every page, allowing potential dog adopters to resolve any questions they may have
Answers Before
There is only one place on the website to find the contact information
(on the Contact Page).
Answers After
There is an FAQ section to answer common questions
The address is listed on the footer of every page
Be Consistent
A poorly styled website would reduce user confidence and could cause them to leave the website.
Consistency Solutions
-
Made fonts and colors consistent throughout the website
-
Created a color scheme based on a more modern logo that was being used on the Instagram and Facebook site
Consistency Before
Consistency After
User Flow
Adoption
Select each screen to see the user flow for dog adoption.
tap Menu
select Adoptable Dogs
select dog qualities
choose your dog
fill out application
confirm submission
Next Steps
-
Make a Dog-of-the-Week section to highlight dogs who have been waiting a long time for a home
-
Create a newsletter to keep people in the loop for adoption and fundraising opportunities
-
Make a monthly blog to share wisdom and increase website traffic
-
Improve integration with Facebook and Instagram to cross-promote all platforms
-
Sell merchandise within the website so customers don't need to leave to shop
Conclusion
People have a variety of options when it comes to choosing a dog. They can go to breeders, Craigslist, the animal shelter, or another dog rescue organization.
If Ace of Hearts prioritizes having a functional and attractive website, potential adopters will be encouraged to stay, browse, and recommend the site to their friends.
_edited.jpg)
