Colony Cats and Dogs
Colony Cats & Dogs is a non profit organization that specializes in rescuing feral, stray abandoned cats and dogs. They have a cage-free cat adoption center and a network of foster homes for friendly, adoptable cats and kittens (as well as dogs/puppies we encounter while assisting cats) that have been rescued. They are also in partnership with area pet supply stores that help us by showcasing our adoptable cats at offsite locations throughout central Ohio.
Problem:
Pet owners usually choose the animal that they want to adopt through a website more often than not. Colony Cats and Dogs currently has an outdated web design with a lot of information which can cause potential customer to leave and go to another website. Visitors are often overwhelmed with the amount of information as well as the lack of information hierarchy.
Solution:
Reformatting the website while prioritizing the responsive design can guarantee that it will be usable across both web and mobile. By updating the adoption process and consolidating information, this promotes a better user experience which can turn into more user engagement.
Research
The research for Colony Cats and Dogs were to identify user needs and pain points through user interviews and usability testing. By collecting information on competitor websites and combining the data that was collected from the participants, the redesigning of this website was focused on improving the usability, responsiveness and most importantly user experience.
Goals
User: Adopt/foster a pet
Business: Increase adoption rates and user engagement
Product: Enhance user experience across multiple devices
Competitor Analysis
Client: Colony Cats and Dogs
Competitor: Franklin County Dog Shelter and Adoption Center
By looking at competitors and their websites, it was clear to see that the current website Colony Cats and Dogs use is out of date. Just by looking at the home section of Franklin County Dog Shelter, visual hierarchy helps lead the user to the adopt page as where in Colony Cats and Dogs’ website, the user can get overwhelmed with the amount of text.
User Interviews
To better understand the pain points of users when looking for a pet to adopt, I interviewed 5 participants by first having them let me know what their thoughts are on the existing site. After having them view the home page, about section, petfinder list, TNR resources page and adoption page, the common points that I found was that there was too much text and that there was no visual hierarchy which confused the participants on how to navigate the site.
Define
Affinity Mapping
I synthesized multiple root problems and potential solutions through affinity mapping, condensing the information to gain a clearer idea on the redesign.
Current Webpages
Based on the user interviews, the main concern was the amount of text that was in each of the pages they had visited. There was also no visual hierarchy which confused them on how to navigate the website. I decided on only including the text that was important, creating a hero section and CTA and organizing the information so that if the user wanted to read more, they had the option to.
User Flow
Design
Now that a plan had been set with which features was going to be included for the updated website, the user flow made sure to cover all the decisions a user could make before adopting a pet.
Low Fidelity Wireframes
Because the goal of the shelter is to get animals adopted, I wanted to prioritize that flow when first starting my low fidelity wireframes. I wanted to still keep certain elements of the site, like the sponsors and showcasing the volunteer of the month on the homepage, while also minimizing the amount of steps that a user would have to go through in order to get to the adoption form.
After receiving feedback from my peers, there was input on reordering the navigation menu to alphabetical order, and removing the “Are you interested in adopting a cat or dog?” because it seemed repetitive. These were kept in mind when the high fidelity wireframes were created.
Branding
Existing Website Header/Logo
Top: Mobile Version // Bottom: Website Version
Because the redesign was going to be responsive, I decided to create a simple text logo so that it can scale well when switching between mobile and web versions.
High Fidelity Wireframes
Test
Once I knew the order for how the screens were going to be created, I converted my sketches into high fidelity wireframes using Figma. Following this, 7 participants were interviewed through Maze. The tasks were to:
Task 1: Put in an application to adopt Dave
Task 2: Where would you go to find more information about Colony Cats and Dogs?
Task 3: Where would you go to find more information about the trapping and neutering of animals?
**These screens were sized for a Samsung Z Fold 3**
Test Results
**These screens were sized for a Samsung Z Fold 3**
Task 1: Most of the participants were able to complete this task. They liked the fact that there were multiple ways to get to the adoption page. Some did not realize that the carousel was a horizontal scroll and was looking for some sort of direction. One participant also suggested that the text was a little hard to read in the background.
Task 2: Every participant completed this task. They thought that it was straightforward.
Task 3: Most of the participants were able to complete this task. Some of them had trouble finding the page and did not think that it should have been under “Resources”
Next Steps
Revisions
Mobile Version of Colony Cats and Dogs - Adoption Process
**These screens were sized for a Samsung Z Fold 3**
Some screens that I would like to work on next are the Donations, Volunteer, Events and Contact screens. I believe that this can create a better community for Colony Cats and Dogs but also generate more traffic for them.
Web Version of Colony Cats and Dogs - Adoption Process
Reflections
Based on the feedback that I got from user testing, I decided to go with a lighter color as the background to help make it easier to read the text. I also added words under the indicator for the adoption process to let the user know what step they are on, and what else they would have to fill out.
Conclusion
This project has helped me grow in terms of working with a “real” client. I enjoyed the fact that I was able to choose a company that I would gladly help represent. Because Colony Cats and Dogs does not have a responsive website, I decided to create the redesign from mobile to web, so I would like to see what it’s like the other way around.