Three main users pain points about the money donations to the animal shelters.
Woof! mobile app to help animals in need
a project from the Google UX Design certificate program
Project overview
The product
Woof! is a new mobile application to support animal shelters. Woof! strives to be a secure and straightforward place to donate money, review foundations and schedule visits in shelters. The target users are people willing to help animals, regardless their age, economic status or gender.
The problem
Animal supporters want to donate and support animal shelters in a secure way.*
* The main problem solved in this project.
The goal
Design a mobile app that will create a safe and easy donations process.
My role and responsibilities
UX and UI designer from conception to delivery:
conducting interviews,
paper and digital wireframing,
low and high-fidelity prototyping,
conducting usability studies,
accounting for accessibility,
and iterating on designs.
Project duration
November 2022 - February 2023
Understanding users
User research
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was an adult with a stable income who donates to animal shelters regularly and shares information on social media. They care about animals, but are not willing to help them in shelters for various reasons.
This research confirmed initial assumptions about animal shelters supporters, but also revealed other problems included fundraising credibility, lack of feedback and limited access to shelters.
Personas
-
Adam - the primary persona.
-
Maya - secondary persona.
User Journey
Mapping for Adam’s user journey revealed how convenient for users would be to have a dedicated app to support animal shelters.
Start design
Home screen - view for a new user.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Paper wireframes
Taking the time to draft iterations of the main screens on paper ensured that the digital wireframes would address user pain points.
For the home screen, I focused on the discovery - how the app works and easy fundraising search.
Link to the interactive prototype in Figma.
Low-fidelity prototypes
During the initial design phase I made sure to base screens on feedback and findings from the user research.
The low-fidelity prototype connected the primary user flow of exploring fundraisings and donating so the prototype could be used in a usability study with users.
Usability Testing - round one
I created a functional, low-fidelity prototype using Figma. At the same time, I started recruiting subjects for the test who fit our criteria. I did 5 usability tests in the first round and the findings I’ve identified:
Users want easily place multiple donations in one checkout
Users need more meaningful and accessible language
Users want to access certificates in an intuitive way
issue 01: More than half participant didn’t know they can place a few donations at once
3 of 5 participant didn’t know there is an option to add many donations to a cart.
All of these participants were fine to go through the checkout again
solution 01: make it easier to place multiple donations in one checkout
Easy access to this functionality would increase the donations to animal shelter and save users time.
issue 01: More than half participant didn’t know they can place a few donations at once
issue 02: For some user the certificates functionality was difficult to understand.
It was observed that the most of participants didn’t understand the value of certificates or couldn't find them.
For majority of users such certificates would be beneficial for the tax deduction.
All participants agreed that the application should store such confirmations with the donations history.
solution 01: more intuitive way to access certificates
Users want to know how they can profit from certificates.
issue 02: For some user the certificates functionality was difficult to understand.
Refining designs
Home screen view for a new user.
UI Design
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the app's values to improve animals life. Also, I’ve checked the competition and took a deep dive into my catalog of references for inspiration.
I decided to go with 60-30-10 rule and chose as primary colours:
white #FFFFFF
black #151515
and green #007F5F
Usability Testing - round two
I created a functional, high-fidelity prototype of the new flows using Figma. Again, I did 5 usability tests in the second round and the findings I’ve identified:
Users need the accessibility option to use and read the app autonomically
Users need to find the reviews easily
Users need better cues about the filter and sorting option
issue 01
During the second round of usability studies, users struggled with the filter and sorting options.
solution 01
I decided to use the text labels with icons, and separate the sort option, to support the elderly and the less tech savvy groups.
issue 02
Users with low vision had problems reading the small texts and were unable to finish the tasks without assistance.
solution 02
Adding the text enlargement option increased the accessibility.
issue 03
The second usability study revealed an inability to easily find the shelter reviews.
solution 03
I added them to the fundraising detail page, altogether with the information about the foundation, at the bottom of the page, where most of the users were looking for it.
Final designs
Accessibility consideration
1.
Supporting the low vision users by allowing them to the texts enlargement in the Woof! app. The app will also allow the zoom in and out option upon the gesture.
2.
Adding the text labels next to the icons would support the elderly or not tech savvy groups, as well as people with cognitive impairments.
3.
Using the high contrast and differentiating the elements not only by color, provide the support for people with low colour vision.
Going forward
Impact
The Woof! app makes users feel confident that their money really help animals, in an easy and quick process.
One quote from the usability study:
"It's simple and clear, similar to other applications I use... it makes me comfortable"
What I learned
While designing the Woof! app, I learned that design is a truly iteration and coupled process. One small change can impact the user experience and give completely different outcome.
Next steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Extend the application functionalities by booking the visits at shelter, messaging and improving the reviews system.
Conduct more user research to determine any new areas of need or pain points.
6
Interviews
10
Usability Tests
2
Iterations