Chicago Pet Rescue Website
Details
My Role: UX Researcher/UI Designer
Tools: Figma/Figjam, Invision, Trello, Zoom, Google, Slack, Canva
Time Frame: 4 weeks
The Challenge
The original site was visually cluttered which made finding what you are looking for very difficult. The images and scroll feature on the homepage was in desperate need of updating. The site needed to focus on adoption as its main goal versus fostering. The site needed to encourage more foot traffic on a daily basis.
The Solution
To create a streamlined site that is easier to navigate and find what the user is looking for. The site should be visually appealing which will draw the user in and make them confident they have selected the right animal rescue for them. We redesigned the site to clearly explain the adoption process step by step to make the process easy and reassuring for the users.
Our Design Process
User Interviews
We focused on users that have fostered as well as previously adopted pets from local rescues. We hoped by strategically selecting this category of user, we could confidently get an actual user insight into what they need and would like to see in the future.
Interview Key Findings
Move Adoption buttons before Foster buttons
Design a new/responsive hero image
Step-by-step adoption process
Add petfinder/filter feature (by Pet Type/Breed/Proximity)
Organize/redesign pets scrollable section
Reduce overall website copy
Add a proper footer button
Redesign buttons with state interactions
Update social media icons
Reduce application form length and divide into separate pages with a progress bar
Paper Prototype
Low-Fidelity Prototype
Design System
The original black, red and white color scheme was very jarring, did not convey trust, and was outdated. So we created a brand new logo for the site and used a more calming color palette that would intrigue users and build confidence in the site.
Usability Testing
Usability Testing Key Findings
Add more spacing or larger text to the About page
The next Step button (bio) should lead to the adoption form, not the adoption process
# shows the number of animals available.
Add temperament section to bio card
Add what pet you are interested into the adoption form
Show more diversity in images
Add a trigger to scroll down on the adoption page
Add additional info on pets (backstory/training)
Thinner footer?
Replace the foster button with donate
Larger text on the Adoption page or gets larger on hover
Put available animals in some sort of order
Iterations to Mid-Fidelity Prototype
We added the infographic section to the pet bio pages, which provided the users with all the pet’s demographics. By adding and changing the shape of the photos we provided visual interest to the bios and form. We also added a progress section, so the user would know how much of the form they had already completed.
Front End Prototype- Code
Our team used HTML and CSS to recreate the new site.
Homepage Redesign
The new site is much less cluttered, simplified, and visually appealing. We also made the pets the highlight of the site, to showcase their personalities and their need for a fur-ever home.
Next Steps
Add an interactive Events Calendar
Build out bio pages for each adoptable animal
Create email confirmation once adoption form is filled out
Design fully functioning donation page with payment system built in
Build out FAQ and Resources pages
