Calgary Animal Shelter
Tasked to design an app through the Google UX Design Certificate, I created a specialized app for a Calgary animal shelter to enable users to seamlessly view and adopt animals through an online process, minimizing wait times and allowing for more communication between foster families and potential adopters.
My Role
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs
Timeline
September to October 2023
Tools Used
Figma
Google Doc
Google Sheets
Overview
Problem
The adoption process is outdated and involves a lot of wait time on the user’s end. Unfortunately, it is just as time-consuming even for those who are not first-time adopters.
Goal
To streamline the application process to allow users to find their perfect match sooner.
01
User Research
Personas
Before delving into the design phase, research was conducted on the app's primary user group—adults interested in pet adoption. This demographic revealed issues arising from miscommunication and misinformation, causing frustration. Additionally, repeat adopters faced challenges navigating the inefficient process multiple times.
Candace
Age: 23
Education: Bachelor’s in Marketing
Hometown: Calgary, AB
Family: Single, lives alone
Occupation: Social Media Manager
Comments
I’ve been through this process twice and had to create a new application providing the same information I had already given in my previous application. It was a bit frustrating how repetitive it all felt.
I wish the application was easier to submit. I had to go in person to hand in the form, then wait for a phone call which I initially missed as I was in a meeting at the time.
More information should be listed clearly for each animal on the website. I previously met with a dog who was not friendly with kids, which would have been good to know beforehand as my niece visits often.
User Journey Map
Mapping the user journey exposed key pain points, further confirming the need for an online adoption process through a specialized app. These insights underscored the demand for a more straightforward digital platform to improve the adoption experience.
Pain Points
1
Time
The in-person application process takes too long and is even more time-consuming for those who are not adopting for the first time.
2
Communication
Users require status updates as soon as possible, as well as a method to inquire about pets before adopting them.
3
Personalization
Users want to be able to filter pets based on the pet’s basic characteristics to fit the user’s preferences and/or lifestyle.
02
Design
Paper Wireframes
After identifying the project's pain points and goals, I drafted five paper wireframes for each screen. This allowed me to assess and select the most effective elements from each version, establishing a clear content priority path. Additionally, I ensured that the user flow was naturally intuitive, enabling users to easily navigate to any necessary information.
Digital Wireframes
Subsequently, I translated these concepts into digital format, developing low-fidelity wireframes using Figma. This process provided a clearer understanding of the visual aesthetics, overall structural layout, and functionality of the app before dedicating additional time and resources to a high-fidelity version.
First Usability Study
Before creating a prototype from my wireframes, I conducted a usability study involving interviews with five users. The primary issue identified was confusion arising from unclear icons, particularly with the profile and applications icons. To address this, I enhanced user navigation by modifying the profile icon as well as incorporating labels for the bottom navigation bar, improving both identification and accessibility. Additionally, based on user feedback, I incorporated missing features such as a calendar view for meet and greet dates and a 'Forget Password' option to enhance the overall user experience.
Low-Fidelity Prototype
A low-fidelity prototype of the app was created in response to the received feedback, incorporating the updated changes. This preliminary version allowed me to assess the functionality and user experience before finalizing decisions on color schemes, text presentation, and the overall stylistic elements of the application.
03
Outcome
Style guide
Establishing a style guide, I selected the main background color to be purple, intending to impart a bright and inviting appearance for users navigating the app in search of a new pet companion. Additionally, a typography choice with high readability was adopted to strike a balance between clarity and a more playful, informal aesthetic.
Final Design
With the insights gained from the usability study guiding the design decisions, a final high-fidelity prototype was crafted. This iteration ensures an easy-to-navigate platform, catering to users searching for and applying to adopt pets with enhanced usability and visual appeal. The key features of the app are listed below.
Key Features
A simple and efficient sign-up process that saves account information for users that may adopt again in the future. This information can always be updated through their settings as well.
A home page that displays any news from the shelter, such as upcoming fundraisers or new pets added.
A search page that allows users to filter exactly what kind of pet they are looking for based on pet type, size, sex, age, and other traits (such as if they are dog-friendly, cat-friendly, kid-friendly, or hypoallergenic). Users are also able to sort their search by age or size.
An application page that displays ongoing pet applications, and a notification system that alerts users of any updates to these applications.
A messaging function to allow users to be able to ask the foster family any questions to avoid miscommunication and misinformation about the pet they are trying to adopt.
A side menu bar for the animal shelter to display their own site information, such as their about page, FAQ, and even a help option.
Takeaways
Creating an app for animal shelters to use can help them with the organization of applications, allow them to have an accurate digitized record, as well as help find the perfect families for their pets faster and more efficiently. I learned a lot about using Figma to create my first wireframes and prototypes, as well as the design process for an application from start to end. I also learned a lot about the usefulness of usability studies and gathering constructive feedback.
Choose Another Adventure
-
![]()
Data Intelligence For Health - ML Platform
Designed and developed the frontend of a machine learning application aimed at making ML methods accessible to users of all experience levels — with no coding required.
-
![]()
Truffle Time Inc.
Developed a childcare business application that streamlines the booking process, ultimately making childcare services more accessible and user-friendly.
