Design thinking approach for credible donations

Woof! mobile app to support animal shelters

Image alt tag
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
Design thinking approach for credible donations

Three main users pain points about the money donations to the animal shelters.

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

Design thinking approach for credible donations

Adam - the primary persona.

Design thinking approach for credible donations

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
Design thinking approach for credible donations

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.

Design thinking approach for credible donations

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:

  1. Users want easily place multiple donations in one checkout

  2. Users need more meaningful and accessible language

  3. 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.

Design thinking approach for credible donations

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.

Design thinking approach for credible donations

issue 02: For some user the certificates functionality was difficult to understand.

Refining designs
Design thinking approach for credible donations

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:

  1. Users need the accessibility option to use and read the app autonomically

  2. Users need to find the reviews easily

  3. Users need better cues about the filter and sorting option

Design thinking approach for credible donations

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.

Design thinking approach for credible donations

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.

Design thinking approach for credible donations

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

  1. Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

  2. Extend the application functionalities by booking the visits at the shelter, messaging and improving the reviews system.

  3. Conduct more user research to determine any new areas of need or pain points.

6
Interviews
10
Usability Tests
2
Iterations