Foster Paws
Mobile App and Responsive Website
This marked the third and final project for the "Design a User Experience for Social Good" course within the Google UX Design Professional Certificate. It utilizes all of the skills I learned throughout the course to create a design that meets the needs of a diverse set of users, starting with designing a mobile app and a responsive website focused on social good. Designing for social good is a great way for UX designers to address issues within their community.
Project duration: August 2022 - October 2022
My role: UX designer carrying Foster Paws from conception to delivery.
Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The Product
Foster Paws is a community organization focused on helping pet-foster parents with supplies. It offers a platform that allows communication between foster parents in need of supplies and people that have a surplus of supplies and would like to donate/repurpose to them.
Project Overview
The problem: Shelters and big adoption centers reject used and opened donations, but these supplies can still be used by foster parents in their private homes.
The goal: Design an app that allows foster and pet parents to easily interact with their local community to have access to or donate pet supplies.
User Research
I conducted interviews and created empathy maps to understand the user for whom I am designing and their needs. A primary user group identified through research was young, working adults who own pets. They also have issues donating their used or opened food, toys, and cleaning supplies that are in good condition.
Research also revealed that another user group owns pets and likes to foster pets in need from their local shelter. Sometimes, they receive sufficient supplies from the shelter. However, sometimes they’d like access to more toys, better quality food, or the supplies they are missing.
Pain Points
Navigation
Shopping website designs are often busy, which results in confusing navigation
Interaction
Small buttons on shopping websites make item-selection difficult, which can cause users to make mistakes
Experience
Online shopping websites don’t provide an engaging browsing experience
Personas
Problem Statement:
Jessica is a young adult that loves animals and is looking for a way to donate pet supplies to foster parents because she’s unaware of any easy way to do so.
User journey map
Goal: Mapping Jessica’s user journey revealed how helpful it would be for users to have easy access to more pet or foster parents in her area.
Problem Statement:
Benjamin is a foster parent who could use easy access to pet supplies because he needs help taking care of his three-week foster pets
User journey map
Goal: Mapping Benjamin’s user journey revealed the need for users to have access to a dedicated app for pet supplies up for donation.
Starting the Design
Ideation
I did a quick ideation exercise called "Crazy Eights" to develop fast ideas for the app. My focus was directed toward connecting foster parents who need supplies to people who have extra supplies and would like to donate.
Paper wireframes
Taking time to draft iterations of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy search and location function within the community to help users save time.
Digital Wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Foster Paws. These designs focused on searching for the needed supplies on a map using filters and sorting.
Low-fidelity Prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
View Foster Paws' low-fidelity prototype
Findings
These were the main findings uncovered by the usability study.
Condition
People preferred clear indications of the condition of the supplies being offered
Donations
People wanted to have a page where they could keep track of all of their listings.
Hide location
People wanted to hide their location from the app for security purposes
Refining the Design
Style Guide
Mockups
Based on the insights from the usability studies, I applied design changes such as providing a clear section from the home screen and hiding users' locations from others.
Additional design changes included adding a new category for the condition of the supplies. I also created a new page called “My Donations” to keep track of users' donation listings.
.png)
Before usability study
After usability study
.png)
Before usability study
After usability study
High-fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, incorporating the design changes made after the usability study.
View Foster Paws' high-fidelity prototype
Accessibility Considerations
Focusing the home screen on personalized recommendations helps define the primary task or action for the user.
Color considerations and contrast ratios checked in the Web Content Accessibility Guidelines (WCAG)
Responsive Website
Sitemap
With the app designs completed, I started designing the responsive website. I used the Foster Paws sitemap to guide the organizational structure of each screen’s design ensuring a cohesive and consistent experience across devices.
I added more pages to the website structure, such as “My Community” and “About Us,” to add value and differentiate from the dedicated mobile app.
Responsive Designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit the specific user needs of each device and screen size.
I started the design from the smallest screen to the largest screen. Using the progressive enhancement approach allowed for highlighting the most important content from the start and developed a clear vision of how the website should appear on all device sizes and types.
Mobile
Tablet
.png)
Website
Going forward
Impact:
Users shared that the app made it easy to connect to their community and their needs. It also made it easier to donate and reduce the waste of pet supplies.
One quote from peer feedback stated “This app is going to be so useful! I love the idea of donating extra pets supplies to foster parents that are temporarily taking care of animals by choice”
What I learned:
I learned the importance of circling back to the final user to ensure that their needs have been addressed. I also learned how to apply responsive design to existing plans and design for different experiences.
Next steps
1.
Conduct research measuring the app's rate of success in reaching the goal of reducing pets supplies
2.
Add more educational resources for users to learn about fostering pets and volunteering at local shelters
3.
Provide incentives and rewards to users for successfully reducing pet supplies waist