I conducted several interviews in order to understand the needs of users I’m designing for. The primary user group identified through these interviews were people interested in adopting pets. There was a general consensus of most animal shelter websites not having good user interface, with confusing pet browsing or adoption processes. Rather than looking through multiple animal shelter, some preferred to use a singular website that compiled pets from many animal shelters.
The main user pain points I discovered from the interviews were that the overall user flow for trying to adopt a pet online was confusing and not straightforward; viewing a pet’s information takes you to a separate page, making it inconvenient to look at many pets back to back; and the websites often had outdated designs with too much text that’s difficult to take in.
Ava is a data analyst living alone who needs a website that can effectively show her pets that are up for adoption at the animal shelter and allow her to successfully adopt one because she wants to return home to a loving pet rather than an empty home.
Mapping out the personas' user journeys revealed improvement opportunities for the app.
I researched a variety of websites that helped users adopt a pet online, such as those from animal shelters and animal rescue organizations, and also websites that compiled available pets from different organizations. A few notable websites from this research include Petfinder, Humane Society Silicon Valley and Santa Cruz County Animal Shelter. Checking out these websites and the pros and cons of their site design inspired my own ideas for how to make a good user experience for my target users. This included ways to make a more accessible design as well.
Although I was not designing the entire website and focused on the adoption process, I made a sitemap to better visualize and understand the website’s structure.
After sketching out several drafts of the homepage, I decided on the one below and followed up with additional screens for the website. I prioritized the adoption flow by placing it at the top of the homepage for emphasis.
Next, I created digital wireframes according to the paper wireframes I decided on. I expanded on the user flow with pages for the adoption application and application submission confirmation.
Since this was to be a responsive website, I also made wireframes for the mobile version of the website.
I then completed the low-fidelity prototype of the pet adoption flow with the frames from the digital wireframe.
I conducted a usability study to test the low-fidelity prototype and fix any issues before I went ahead with the high-fidelity version.
Three possible areas of improvement were found through this usability study.
The section for ideal pet in the adoption application seemed unnecessary at that point in the user flow, when the user had already decided on a pet they wanted.
Users suggested the pet preference to be in the filter instead.
It would be easier for users if basic profile information could be autofilled in the application.
I altered my designs to fix the issues I found from the usability study and created mockups with a dark green palette.
Along with mockups for the mobile version.
After implementing the changes in the design, I ended up with this high-fidelity prototype.
This is the final result for the pet adoption flow for the mock animal shelter, Companion.
Homepage
Filter
Pet Profile
Adoption Application
And here is the mobile version of the website.
Homepage
Filter
Pet Profile
Adoption Application
While working on this website, I realized that the color palette of a design is very important, and also difficult to choose. As the only designer in this project, it took quite a bit of effort to select colors that were cohesive and looked good together. By working alone, I could feel the importance having a team to exchange ideas and opinions.
I also found that it was a lot easier to learn new design tools than I expected, having tried out Adobe XD for the first time after getting accustomed to Figma. There were pros and cons to both design tools and I could see why people would choose either one. It makes me look forward to trying out other design tools as well.
Overall, I really enjoyed working on this project, since I am quite passionate about the subject and wanted to do a good job on it. From choosing the color palette to making a simple logo for the mock animal shelter name I chose to making the website responsive by designing for different screen sizes, it was a great experience.
If I were to continue working on this project, I would conduct further usability testing on the app, identify areas of improvement, and continue iterating on the design for a better version.
