My Role: UX Researcher, UX Designer
Responsibilities: User Research, Wireframing, Mockups, Prototyping
The Problem: Limited and outdated options for pet adoption in the area.
The Goal: A simplified approach to pet adoption for an animal shelter website.
Project Duration: February 2022 - March 2022
Additional Note: This was a project that I did for Google's UX Designer certification program. While I am not new to creating websites or designing a UI, the UX process was quite new to me - so this has been a great learning experience.
I understand that the UX Design process can vary depending on who the company is and/or the size of the company. As this was a personal project, I wore all of the hats for this project, from UX Research to final UI design.
The Design Process: Empathize, Define, Ideate, Prototype, Test
Understanding the problem
My family really loves animals, and we do what we can to help animals that may need it in the area. It's an area that I know we really want to pursue more in the future, so this was a perfect opportunity to research the topic.
Being able to really dive deep into what seems to be working and not working for various pet adoption and animal shelter websites. I noticed that the options for local places seemed to be lacking in ways. So that being said, I started to instantly brainstorm about how to create a more up to date and simple solution that would be easy for local residents to use.
Researching the solution
Surveys | Competitive Audit Report | Empathy Maps | User Personas | User Stories | Problem Statement | Journey Maps
I started off by getting to know a few people of all ages and walks of life that were in the area that were also interested in animals and then interviewing them to get a better of idea of what was needed.
I performed a survey and online poll of more potential users, performed a competitive audit report, created user personas, problem statements, and user journey maps to better understand the future users and competition.
Competitive Audit Report
I did some searching on the Internet and found a few competitor companies. All of these options were different from one another and a bit different from what I was looking for as well, so that was great news. I wanted to see what these companies did right, and I also wanted to see what they were doing wrong. By comparing the "rights" and the "wrongs" I could get a better understanding of what I was trying to accomplish.
Key competitors:
“Pet Finder” was a website that came up a lot, so I decided to dig into it more. They offer adoption services for animals (cats and dogs as well as other pets such as rabbits and more). They also offer a library of articles and videos on how to care for animals – ranging from nutrition to grooming.
“Adopt a Pet” is another competitor website that is extremely similar to “Pet Finder”, although the website is set up differently, obviously.
They offer adoption services for animals as well as helpful articles on how to care for your animals, just like “Pet Finder”.
They also link to a pet supply shop, in which they are paid out as an affiliate for any purchases made.
“Rescue Me” is another competitor that offers pet adoption services. I could not find any articles or videos on their website for caring for animals. They seem to only offer adoption services for cats, dogs, and other animals.
Competitors’ Strengths:
All the competitors that I looked at offered similar services as far as pet adoption goes. The process is straightforward, and I couldn’t really ask for much else if I were looking for an animal to adopt.
“Pet Finder” and “Adopt a Pet” both stood out because they offered a plethora of helpful articles and videos to prepare you for adopting and caring for a pet. Even if one wasn’t looking to adopt a new pet, the articles would be super helpful for someone who already has an animal.
Competitors’ Weaknesses:
I felt like while all the websites that I investigated were solid choices, I did feel like the websites were a bit crowded. A little whitespace goes a long way.
“Rescue Me” is a great website too, but I did feel like the website looked a bit dated.
After digging into these websites for a while, I started thinking about how I could make the adoption process a little less… clunky. Sure, they aren’t bad – but everything can be improved, right?
Empathy Maps
After talking with residents in the area that were interested in owning pets, I tried to get a better understanding of what was going through their heads during my questions and conversations with them. I did my best to be empathic with them. I tried to summarize these thoughts into some empathy maps like the one below.
User Personas
Based on my research, I noticed a few different user types that would benefit from using the product I was creating. I decided to focus in on a few personas since their need felt like some of the strongest.
Defining Even Further
I further niched down with my research by defining a problem statement and goal statement based off of my User Personas to help me solidify the whole thing into something 'tangible'.
Starting the Design Process
Paper Wireframes | Digital Wireframes | Low Fidelity Prototypes | Usability Studies
Once I had what I felt was enough information, it was time to start working on a design.
I then created some paper wireframes first with old fashioned pen and paper. This was my second time putting pen to paper to brainstorm some designs, and they look a little simple to me - but I know that over time, I will get better at putting my ideas down.
Once I had some ideas on paper, I created some low fidelity digital wireframes to take my ideas further. Once those were done, I created prototypes of the design.
Once the low fidelity prototypes were working, I subjected a few local users to try it out in order to find out what they thought and to see how the app handled 'in person'.
Paper Wireframes
These paper wireframes were very early in the process, and I was a little intimidated by actually having to hold a pen and draw something on paper.
Some of the ideas made it to the final design, but still this was very high level at this point.
Digital Wireframes
I was pretty happy with the way some of my ideas came out on paper, so I took those ideas and moved forward into the digital world. I tried to keep my wireframes simple but polished - as best I could, am
I would like to note that I will be updating this case study over time as I update the app with many more screens.
Low Fidelity Prototype
https://tinyurl.com/msjzb4ct
Usability Studies
The results of my usability study weren't worthy of an epic tale, if I'm being honest. I'm still doing my best to dig deeper into the process.
Refining The Design
Mockups | Hi Fidelity Prototype | Accessibility
Mockups
I tried my best to 'paint a picture' that was clear, simple, and easy to understand once I started this process. Below are a few examples of high-fidelity wireframes of what the final site would look like. Examples below are for the home page, the search page, and search results page.
High Fidelity Prototype
Here's a nice high-fidelity version of the app prototype.
https://tinyurl.com/yc2f6s8b
Accessibility Considerations
There were concerns of the colors being too light in some areas for some people to see clearly.
Some sections of the site may be too small and/or crowded.
Media control options are missing on my video pages.
Going Forward
Takeaways | Next Steps
Takeaways
Impact:
The impact of this design should increase safe pet adoptions in the area, by putting an easy-to-use option for finding, researching, and adopting animals..
What I learned:
Even though I am no longer as "green" at this process, it was still a bit of a surprise seeing and experience just how much work goes into creating a great UX experience.
Next Steps
There are still more things that need to be done. My next steps are to work on the accessibility concerns that were brought to light. Once those are addressed, there are more screens that need to be built out.
I plan to update this case study as time goes on, as I work on these options.