Woof! mobile app to help animals in need

a project from the Google UX Design certificate program

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 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
Woof! mobile app to help animals in need

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 shelters supporters, but also revealed other problems included fundraising credibility, lack of feedback and limited access to shelters.



Personas

Woof! mobile app to help animals in need

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
Woof! mobile app to help animals in need

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.

Woof! mobile app to help animals in need

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

Woof! mobile app to help animals in need

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.

Woof! mobile app to help animals in need

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

Refining designs
Woof! mobile app to help animals in need

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:

  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

Woof! mobile app to help animals in need

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.

Woof! mobile app to help animals in need

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.

Woof! mobile app to help animals in need

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

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