Project Overview
The problem: Users today have to go through inconsistent pet adoption processes depending on the shelter organization and the type of animal they want. Users need a delightful, consistent, and easy user experience to complement this huge change in their lives.
The challenge: To create an intuitive, responsive website that helps people easily find adoptable pets in their area.
Project duration: September 2021 to October 2021
My role: Product Designer
Responsibilities: User research, competitive research, wireframing, UX/UI, branding, usability testing.
Tools used: Sketch, Figma, and Procreate (for paper wireframing)
Framework
For this project, I chose to use the design thinking process. This process allowed me to carefully understand my users' needs, what existed in the pet adoption space, and how I could craft an improved experience for the pet adoption process. I personally enjoy this process as everything builds on itself and, provided you have a strong foundation, you have a strong outcome.
User research: Discovery Phase
To better empathize with my users, I had no better place to start: interviewing real people who have adopted pets in the past. I had expected to hear an even balance of pain points vs. things that went well. However, to my surprise, most of my participants reflected on their adoption experience positively, sometimes straining to find out what went wrong in the process. I suspected that due to the outcome of this user experience being so positive (adopting a new pet) it would likely overshadow any small hiccups. However, I was still able to walk away with some actionable insights into how to make the experience better.
"It costs a lot of money, you don’t really realize...”
“It’s overwhelming with the amount of pets that there are… I just want to take them all home.”
"We had to act quickly to get him..."
"I remember that some dogs were off-limits if you had a family... because some dogs were more well behaved than others."
User Interviews: Takeaways
Process: Users reported inconsistent processes for adopting their pets.
Cost: Users reported that they were often caught off guard by the true cost of adopting a pet from a shelter.
Powerful Filters: Users reported that advanced search filters were helpful when searching shelter websites for their future pets.
Personas
Once I had completed the initial user interviews, I synthesized my participants and their desires into personas. These personas served as a north star for my design decisions.
User Journey Map
Based on my persona, Dana, I mapped the journey to cat ownership. The process enhanced my ability to empathize with the user and find solutions that would meet their needs.
Competitive Audit
Findings:
1) Make the website a one-stop-shop, where the adoption journey is universal among participating shelters and can be completed primarily online.
.2) Make pricing apparent and uniform.
3) Make pet info organized and easy to scan.
Paper Wireframes
I began the design process by sketching iterations of each key page. This helped me find the best solution before even opening Sketch.
Paper wireframes for the home page
Paper wireframes for the animal detail page
Profile page
Search results page
Once I felt I had everything laid out everything and was happy with the final result, I transitioned to Sketch to begin creating a low-fi prototype that I could test out on real users.
A unique challenge I faced was how to effectively layout the mobile version of the website so that the experiences would be relatively seamless, without a loss in quality.
Low-fi Usability Study
I took a much leaner approach for this usability study, only having two users review my designs in an unmoderated format. This was partially due to scheduling conflicts and a tighter timeline. Still, I was able to get some actionable feedback to improve my wireframes and move into higher fidelity.
Findings:
1) Frontload "the basics" section for the pet profiles
2) In the personal profile section, make the "favorites" section more prominent
Progressing to High Fidelity
Armed with feedback from the usability study and my wireframes, I moved to higher fidelity prototypes and a simple design system to keep my work consistent.
Takeaways
What I learned: When progressing to higher fidelity and getting feedback from a senior designer, I discovered the importance of an 8px. grid to effectively space elements and ensure the designs are fit for production. I also learned how to effectively translate my designs for a desktop to a mobile device.
Next steps:
- Conduct the second round of usability studies on the high fidelity prototype and make necessary changes to enhance usability and accessibility.
- Build out the entire user flow on mobile.
- Check to ensure my color contrast meets WCAG AA standards.