Rescue House
Instructor: Google
UX Design Professional Certificate
Individual
Year: 2022
Project Goals
Rescue House is a non-profit organization in the Twin Cities that strives to find happy homes for each and every one of our animals. They work hard to create a great environment where each and every one of their animals can thrive. The goal of this project was to create a pet adoption website for an animal shelter that allows users to access pet profiles on web and mobile interfaces.
Rescue House
Creating a website to help users connect with their future pet
Challenges
Create a website that can be viewed on web and mobile
Design an interface that allows users to get to know each dog available for adoption
Provide a way for users to schedule a meeting with an animal
Research
The user research for Rescue House was used to help meet the needs of the users I am designing for. The primary user group that I focused on are people who have a deep love for animals and are looking to adopt a rescue animal.
I asked this user group about their pain points and research revealed their primary focus was being able to view the pet profiles on both web and mobile interfaces. Users also wanted the ability to schedule a meeting with the pet that they wanted to adopt.
User Personas
Angela Toms
Angela is a retired librarian who wants a way to view adoptable dogs on their phone so that Angela can find a companion animal to keep them company. They would love to have a dog as a companion since they are feeling lonely ever since their partner passed away. They want to find a dog that does not shed and is a large breed. They want a dog that does well on walks and gets Angela out of the house.
Toni Andrews
Toni is a nurse who wants to adopt a dog that is a good fit for their family. The dog would need to be a small or medium sized dog and would need to be great with kid because they just had a baby. They want a dog that will be able to sit on the couch and cuddle, but still has energy to play with them.
Competitive Analysis
I researched several competitors similar to Rescue House and compared the user experience of their products. Some gaps I found are that the competitors do not offer a responsive website design. Some opportunities I identified include:
Offer an easy and intuitive website that allows users to schedule a meet with a dog
Create a responsive web design that allows users to navigate easily on web and mobile devices
Site Map
I outlined the Rescue House website with a site map to illustrate the paths a user can take when visiting the site. The site map helps to guide the design process and allows me to see how the website needs to be designed in order for the user to reach each of these parts of the site.
Paper Wireframes
I went through 5 iterations of each page of the main user flow of the Rescue House Website. Wireframes include Homepage, Navigation, Animal Profiles, Scheduling and Events
Digital Wireframes
After sketching out the initial paper wireframes, I brought my paper wireframes into Adobe XD. I worked through the design of each page of the website and got feedback on this step before moving on to the final design.
Iterations
After completing the digital wireframes, I conducted a usability study in order asses how easy it is for users to navigate the website and complete the task of selecting a dog to adopt and scheduling a time to meet the dog. I used the insights from this study to make improvements on the design:
Users want to be able to return to the homepage by clicking on the logo
Users want to be able to filter the pets based on breed, size, age and gender
Users want to view the calendar larger
Users need to easily fill out the donation information
Accessibility Considerations
Hierarchical Headings
The text elements are ordered on each page based on importance.
Annotations
Indicate the traversal order that a screen reader moves through the form.
Accessibility Label
Add descriptive language to the interactive element on the web page.
Challenge 1
Web and Mobile
Rescue House wanted to create a website that can be viewed both on web and mobile interfaces. It was important to create a responsive web design that allows the website to change automatically depending on the size of the device the user is viewing the site on. I designed multiple versions of the website to fit a computer screen and a mobile phone.
Challenge 2
Get to know Dogs
Another challenge was to design an interface that allows users to get to know each dog available for adoption. I created a design that allows users to have a preview of each dog on the homepage. Then I designed a filtering system that allowed users to search for adoptable dogs that meet their specific needs. Then I added an information page that gives users a full description of the dog.
​​
Challenge 3
Schedule a Meet
Finally, I needed to provide a way for users to schedule a meeting with an animal that they were interested in adopting. After users chose a dog they want to meet, they are able to pick a date and time that works for them and schedule a meeting with the dog. Users receive a confirmation of their scheduled appointment after they book their appointment.
Style Guide
The Rescue House color palette is centered around a cool, moss green color that creates a calm and natural look for the website. I used other neutral colors to accent the green. The main typography of the site is an easy to read font and I used bold text for the headings and buttons.
 |  |
|---|
Takeaways
This project helps an animal adoption center to connect their dogs with people looking to adopt. The website works on both web and mobile versions, which makes it easier for users to navigate through the website. The Rescue House is now able to reach a wider audience and give homes to pets in need. Throughout this project I learned how responsive design is so important to ensure that people are able to use a website on multiple devices.