Carrie Huot - UX Designer
Pet Help Responsive Website
Designed for Google's Course:
Designing a User Experience for Social Good using Adobe XD - 2023
The Product: A responsive website (one that changes to fit the size of your screen) created for people who are having trouble caring for their animals. The site gives advice on behavioral problems, shows were to find pet food pantries or vet clinics, and helps people find pet friendly rentals or domestic violence shelters. This project was made after the Pet Help App project.
My Role: Sole UX Designer conducting user research, wireframing, mockups as well as creating high & low fidelity prototypes.
Challenge: Creating a responsive website site for a people having trouble caring for their pets using Abobe XD. I choose this project because in my city a lot of people move and leave their pets behind or abandon them due to lack of money.
Goal: Creating a high-fidelity prototype for a pet help responsive website.
Starting the Project: Prior to creating the design, I created personas, identified pain points and created a user journey, focusing on empathizing with the user.
Creating the Design: After identifying problems that the users might need to have solved, I created a sitemap and low fidelity paper prototype for the app, before creating digital wireframes and low and high fidelity prototypes using Adobe XD.
Starting the Project
Problem Statement Personas & User Journey
Competitive Audit: Prior to starting the design, I completed a competitive audit of similar websites to determine how my website could stand out from competitors. You can view the full audit here.
Sitemap
Creating the Designs:
The Design: From the Pet Help app project, I had already come up with ideas for the responsive website and how it should be set up. I decided that a card design layout would work best for this responsive website, to maintain the same overall feel of the website regardless of the platform it was being viewed from. Three sizes were created, with a desktop, mobile, and tablet size.
Wireframes
Cell Site Wireframes
Desktop Wireframes
Low Fidelity Prototypes
Cell Site Prototype
Interactive low fidelity prototype can be seen here.
Desktop Low-Fidelity Prototype
Interactive prototype can be seen here.
Usability Study
Usability Study: I conducted two usability studies for this project. The first usability study was conducted after finishing the low-fidelity prototypes and a second was conducted after the high-fidelity prototypes were finished. Both studies were moderated studies of five participants, with each interview taking no more than 10 minutes.
Refining the Design
The text on the button was not high definition enough against the background to meet AIM guidelines, so I changed the text to black for easier reading.
In the original design, the design went directly from imputing donation payment information to a page confirming payment (left and right screens below). However, users wanted a page to check that their information was correct prior to payment. Therefore, another screen (middle screen below) was added.
High-Fidelity Mockups
Cell Site Mockups
Desktop Site Mockups
High-Fidelity Prototypes
Cell Site Prototype
Interactive prototype can be seen here.
Desktop Site High-Fidelity Prototype
Interactive desktop prototype can be seen here.
Accessibility Considerations
What I Learned
In this project, I learned how to make drop down menus. I also learned more about site mapping tools and website color pickers.
Next Steps
