Three main users pain points about the money donations to the animal shelters.
Design thinking approach for credible donations
Woof! mobile app to support animal shelters
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 of their age, economic status or gender.
*The project was created during the Google UX Design certificate program. And the first attempt to build UI from scratch ;)
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 donation 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. Roughly 8h per week.
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 shelter supporters but also revealed other problems including fundraising credibility, lack of feedback and limited access to shelters.
Personas
Adam - the primary persona.
User Journey
Mapping for Adam’s user journey revealed how convenient it would be for users 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 participants didn’t know they can place a few donations at once
3 of 5 participants 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 donations to animal shelters 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 users the certificate 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 the majority of users, such certificates would be beneficial for a tax deduction.
All participants agreed that the application should store such confirmations with the history of the donation.
solution 01: a 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 aligned with the app's values to improve animals' life. Also, I’ve checked the competition and taken a deep dive into my catalogue of references for inspiration.
I decided to go with the 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 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 text enlargement in the Woof! app. The app will also allow the zoom-in and out option upon a 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 high contrast and differentiating the elements not only by colour, provide support for people with low colour vision.
Going forward
Impact
The Woof! app makes users feel confident that their money really helps 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! application, I learned how challenging it is to work alone. I think that many of the issues discovered during the usability studies could have been fixed beforehand by my teammates. In consequence, the usability studies and final designs could have had a complete 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 the 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