As part of my Google UX Designer certification course I was tasked with creating a responsive website for an animal shelter in New York City. I worked on the project from conception to delivery.
The Product: New Leash on Life Shelter is an animal shelter located in New York, NY. The New Leash on Life Shelter seeks to find forever homes for stray and abandoned dogs and cats.
The Problem: We noticed that many potential adopters had issues visiting the animals in the shelters . They also do not have enough information about the animals prior to adoption, which could lead to poor animal/family placement.
The Goal: Design an app for the New Leash on Life shelter that will allow users to view animals that are available for adoption, schedule visits, and apply to adopt.
Time Frame: 6 Weeks
I initially conducted a competitive audit of 3 animal shelters located in the New York City area. I then proceeded to conduct user interviews with pet owners, previous adopters, and potential future adopters. Using their interviews, empathy maps were created to understand the users I’m designing for and their needs. The user group confirmed some of my initial assumptions. However, I was unaware of the issues of visiting specific animals in the shelters, as well as the lack of information regarding an animals temperament.
The Personas:
User Pain Points:
Transparency
Many users had issues with the information provided by other shelters that didn't address issues with the animal
Scheduling
Some users had issues visiting specific animals when they visited a shelter
Communication
Some users were frustrated by unclear adoption process
With the primary user tasks identified and a site map in mind, I began creating paper wireframes of the user journey through the New Leash on Life Shelter Website
Considering Responsive Design:
With responsive design in mind I created paper wireframes for each page as they would appear on tablet and mobile devices.
Low Fidelity Prototypes:
Low fidelity prototypes were created in Adobe XD based on the paper wireframing. These were meant to address some of the user pain points identified during the research portion of this project.
*The interactive low fidelity prototype can be viewed here.
I conducted two rounds of usability studies. The findings from the first study were used to guide my design from wireframe to mockup. The second study used a high fidelity prototype and revealed what aspects of the mockup needed refinement
Round 1 Findings
Users had difficulty finding how to adopt from the homepage
Users felt the call to action buttons were not easily identifiable.
Users were confused by the featured animals section on the homepage
Round 2 Findings
users found highlighting the shelters recommendation in red distracting in the animal story.
Refining the Prototype
From wireframe to mockup (usability study 1):
High Fidelity Prototype Refinement (usability study 2):
Responsive Design Comparison:
Next Steps
I would like to continue ideating on this design and finishing the user journey for the other branches of the sitemap that aren't part of the main user journey. After that I would like to run another usability study to discover issues with the more complete website.
