UX design for an animal shelter app

from research to ideation, wireframing and final mockups

ROLE: UX-researcher/writer/designer - part of Google UX Design Certificate Course, 2021

RESPONSIBILITIES: concept and user research, wireframing, two usability studies, prototyping, mockups

PROJECT VISION

This project is part of the Google Certificate Program with the goal of developing a mobile app.

The theme for my project was determined by a platform called "sharpen" that generates random projects. I chose: "Design a specialized mobile app for an animal shelter".

Although the application was to be developed for only one shelter, my vision was to develop an app that could be used by many different shelters to find pet owners that truly fit the animal. This approach and design thinking should support lasting relationships between pet and owner.

The goal was to establish an app that allows finding a pet that matches the searcher's personality, lifestyle and expectations.

Animals waiting in animal shelters for someone to take care of them should get a chance for a new and better life.

CHALLENGES

Besides getting more comfortable with my first project in UX design and using Figma, the biggest challenge of the project was to find a simple and intuitive user flow. Users should specify their personality, lifestyle and expectations to find a suitable pet, and not be distracted by beautiful images.

Thus, an easily access and intuitive way to add personality, lifestyle and expectations was needed.

Another challenge was providing a calendar tool for scheduling pet meetings and interacting with the pet shelter. For ease of use, notifications of upcoming meetings are important to avoid frustration.

THE DESIGN PROCESS

Empathize, Define, Ideate, Prototype, Test

RESEARCH

5 interviews

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. One main user group identified through the research was working adults who have no previous experience with pet ownership but want to help and support animals from shelters.

“People should not get distracted by beautiful pictures, but focus on animals really matching with their personality.”

Missing experience

When you get an animal from a shelter, you have to find an animal that fits your experience. But usually it is not clear which animals fit this requirement.

Missing guidance

Many future pet owners want to pre-select those animals from shelters that match their lifestyle and personality.

Smooth get-to-know

Future pet owners do not want to immediately make a decision on adaptation, but first get to know the animal step by step. For many, it is important to slowly get used to such a new friendship.

TARGET USER

IDEATION

I took the time to design iterations of each screen of the app 'on paper' to ensure that the elements that made it into the digital wireframes were well suited to solve users' problems. For the home screen, I emphasized a quick overview of available pets, while providing profile information to improve results.

SITEMAP

USABILITY STUDY I

5 participants were asked to perform tasks in a low-fidelity prototype. I wanted to find out if the main user experience, providing personal information and scheduling a meeting with a favourite animal, is easy for users to complete.

"I am a little confused about the calendar functionality."

"I want to find a pet close to my house to schedule a meeting easier."

Make main feature visible

It is not easy to find where to add personal informations.

Calendar functionality

Calendar is not consistently editable.

Find pet close to you

The ability to specify a search area on a map is necessary to enable the search for pets near the place of residence.

● ● ●

GRANÒ - Homepage.

The Profile Identity is improved with a clear Profile picture and an information statement when first opening the app. The profile can now also be accessed via the Menu.

USABILITY STUDY II

Again, 5 participants were asked to perform tasks in a high-fidelity prototype.

"I do not know where I have to click. There are so many possibilities."

Confusing homepage

The homepage is confusing since there are too many clickable icons.

Calendar functionality

The calendar shall show the confirmation-state of the scheduled meetings.

Clear Pet Profiles

It would be great to show the pets as pet cards that can be selected.

● ● ●

Users shall provide personal information to improve the pet match results. Therefore the start-screen was changed to a SPLASH - screen that informs about the functionalities of the app and already defines the next step: fill in the users' profile.

● ● ●

Previously, the home screen was full of options (filter, favourites, view calendar and the profile). Now, these options can be found only within the menu.

Moreover, the filter options are added to the profile settings, where users define their personality, lifestyle and expectations.

● ● ●

Pet-Cards display pet-information (Mockups)

By creating pet cards, the overview of possible pet partners is improved. Clicking brings up more information about each pet. By dragging upwards, the pet cards can be removed from the results. By sliding left and right, the user can view the different pet cards. This is indicated by a small icon at the bottom.

● ● ●

The calendar has been improved by adding an option to switch between months and providing clear information about the day and date. When adding a new session request, available times are highlighted in bright color.

Moreover, a two-color system informs about pending and confirmed pet walks.

DESIGN KIT

PROTOTYPE - WORK FLOW

REFLECTION

For this particular project, it was important to focus on three user groups: future pet owners (searchers), shelter organizations, and the animals themselves. I learned that something can be simpler and more intuitive than you think possible. It was important for me to conduct various usability studies and interviews. This project was very exciting for me. Certainly there is still a lot of potential to improve my designs and user flows, but I really enjoyed learning Figma and the whole UX design process. This was my first UX project.