Problem
Adopting is hard, even with so many animals waiting
Information from small shelters is scattered across Instagram and WhatsApp, replies are slow or never come, and adopters don’t know which pet fits their home.
← Projects / Case study · Mobile app and web
An app for finding the pet that fits your life.
- Role
- UX/UI design Solo project
- Duration
- 5 days October 7–11, 2026
- Context
- Social good Google UX Design Certificate
- Tools
- Figma
App screens · Swipe to explore
Solution
One place, with a match that explains itself
An app, with a web version, that brings shelters together, recommends pets based on lifestyle, and lets people apply to adopt and schedule a visit in a few steps.
Outcome
38 of 40 attempts completed without help
Five people tested the app and the website. Both were rated highly (4.6 and 4.5 out of 5), and what they asked to improve was solved in a second version.
01 · Research
People want to adopt, but the process holds them back
Desk research, without live interviews: shelter reports, published surveys, Petfinder user reviews and official data from Colombia.
767
animals at La Perla shelter in Medellín have been waiting between 5 and over 10 years for a family.
Medellín City Hall
67.6%
of people who didn’t adopt were looking for specific traits in a pet.
Faunalytics
86%
of 123 Petfinder reviews are one-star: shelters that don’t reply and outdated listings.
Trustpilot
10.5%
of adoptions fail within six months, mostly because of behavior, housing or time.
American Humane
Scattered information
Pets are spread across Instagram, WhatsApp and many small shelters.
Not knowing which one fits
Fear of choosing an animal with too much energy, or one that won’t get along with the family.
Shelters that don’t reply
Outdated listings: the animal has already been adopted, or nobody answers.
Long, intrusive applications
They repeat at every shelter and don’t explain why they ask for each detail.
Some of the data comes from the United States and a few surveys are old; the figures for Colombia come from official sources and the press.
02 · Personas
Two people, one broken journey
Valentina is adopting for the first time; Andrés already has a pet and a family. Both get stuck at the same three moments: searching, knowing whether the animal is still available, and applying.
Valentina
First-time adopter · 27 · Laureles, Medellín
“I want a dog, but I don’t know which one suits my apartment and my schedule.”
Goals
An apartment-friendly pet, with clear steps, costs and requirements, and a quick reply.
Frustrations
Information scattered across social media, fear of behavior problems, and intrusive forms.
Andrés
Experienced dad · 41 · Envigado
“We already have a cat. I need to know the new dog will get along with her and with the kids.”
Goals
Filter for kids and cats, know whether the animal is still available, and book the visit without phone calls.
Frustrations
Repeated applications, listings for animals already adopted, and little information about temperament.
- 01
Decide to adopt
Excited but unsure
OpportunityLifestyle quiz
- 02
Search
Overwhelmed
OpportunityOne catalog with filters
- 03
Choose
Hesitant
OpportunityAvailability and verified tags
- 04
Apply and visit
Frustrated and ignored
OpportunityReusable profile and in-app scheduling
- 05
Bring the pet home
Nervous and happy
OpportunityFirst-days guide (future version)
03 · From journey to design
Four flows, first in gray and then in color
The journeys defined four flows for the first version. From them I built seven wireframes and then the high-fidelity design, using Material Design 3.
Flow 1
Start with a match
Pick a city and answer a short quiz about your home.
Flow 2
Search and filter
One catalog with compatibility and availability tags.
Flow 3
Meet the pet
Photos, story, temperament and a compatibility percentage.
Flow 4
Apply and schedule
A reusable adopter profile, a short application and a shelter visit.
Low fidelity
Seven wireframes that follow Valentina’s journey, linked as a prototype.
High fidelity
The same screens with the design system applied. The final prototype has 17 interactive screens.
The app comes first because people look for pets on their phones, and notifications solve the “they never got back to me” problem. Post-adoption follow-up was left out of this version.
04 · Decisions
Three decisions behind the app
Decision 01
A match that explains itself
The quiz asks about your home, your lifestyle and your ideal pet. Each pet shows a compatibility percentage, and a separate screen explains where it comes from: what matches and what lowers it.
Addresses
Not knowing which one fits
Decision 02
One catalog, with availability in plain sight
Pets from several shelters live in one place, with filters, tags such as “good with kids,” and their availability shown on the profile.
Addresses
Scattered information and outdated listings
Decision 03
A short application and the visit booked in the same app
The adopter profile is filled in once and reused. A note explains why each detail is requested, and the shelter visit is booked without phone calls.
Addresses
Long applications and shelters that don’t reply
05 · Web version
The same adoption, on desktop
Nine screens at 1920 px that reuse the app’s components: a change in the design system shows up in both versions.
Home
Catalog with sidebar filters
Pet profile with a gallery
Filters
In a sidebar instead of a horizontal row.
Photos
A gallery with thumbnails instead of a carousel.
Application
Application and visit on a single page, with the summary alongside.
Notifications
A drop-down panel under the bell, not a separate screen.
06 · Visual identity
Warm, clear and accessible
The visual direction came from a mood board generated with Google Stitch: friendly, built on Material Design 3, with rounded icons.
Final logo
The “u” becomes a paw print: a pad with a U-shaped notch and four toes in an arc. It was redrawn twice until it looked like a real print.
Exploration
Other directions that came out of hand sketches. The names Parce, Mi Llave, Huellita and Match Peludo were also tried.
Logo variations
All of them come from the final logo: with the paw print as a symbol, in a single color, on the brand colors, and as the app icon.
- #2A9D8FTealBrand color
- #1B665DDark tealPrimary actions
- #E8743BOrangeDecoration only
- #B3592CDeep orangeButtons and favorites
- #FFF8F1CreamBackground
- #2B2B2BNeutralText
Typography
- Nunito Sans
- Headings
- Inter
- Body and labels
Design system
Figma variables, styles and components shared by the app and the website. Every piece of interface text uses one of the 10 styles.
- 18base colors in use
- 20color roles in use
- 10text styles
Accessibility
The orange was adjusted until it met AA contrast
4.31 : 1→4.79 : 1
Button orange with white text, from #BE5F30 to #B3592C.
1.56 : 1→3.98 : 1
Text field borders, to clear the 3 : 1 minimum for controls.
3.0 : 1→4.79 : 1
Unselected favorite heart. The light orange is kept for decoration only.
Components
Buttons in five styles, chips, compatibility badges, favorite, pet card and bottom navigation.
07 · Usability testing
Five participants, four tasks, on the app and the website
Using both high-fidelity prototypes. Three people started with the app and two with the website; at the end they rated five statements from 1 to 5 and answered two open questions per platform.
Success rate
38/40
attempts completed without help, across the app and the website.
App
4.6/5
average rating for the app across the five questionnaire statements.
Web
4.5/5
average rating for the website across the same five statements.
Trust
5/5
for “I felt safe using TuHuella,” on both the app and the website.
The tasks
From the quiz to the application status
- T1
Answer the quiz until reaching the catalog.
App 5 of 5Web 5 of 5 - T2
Open Luna’s profile.
App 5 of 5Web 5 of 5 - T3
Send the application and schedule the visit.
App 4 of 5Web 4 of 5 - T4
Check the application status.
App 5 of 5Web 5 of 5
Since each prototype has a single connected path, what sets the app apart from the website is hesitation, not the success rate. Times are estimates, and the prototype fields don’t accept typing.
The most important findings
- 01The quiz should start empty: answers that were already selected, left over from the mockups, made the result feel like it wasn’t theirs.
- 02Choices should be reflected back: single-answer questions must be mutually exclusive, and the visit summary must show the chosen day and time.
- 03The percentage needs its explanation everywhere: on the website, four out of five looked for “See why,” and it wasn’t in the prototype.
What worked
- All five understood the “Under review” status and its timeline.
- Nobody hesitated over “Step 1 of 3” or the a.m./p.m. times.
- The form’s “Why we ask for this” note was appreciated.
Iteration after testing
The match now reflects exactly what each person chose
I solved the three most serious findings, and almost all the others, in a second version saved separately so the before and after can be compared.
Quiz
It used to arrive with answers already selected. Now it starts empty, and each single-answer question clears the previous option.
Why it’s a match
The explanation used to be generic. Now it’s built from the quiz answers and says what the missing 8% is.
“See why” on the web
The link used to be unconnected in the web prototype. Now it opens a panel with the quiz criteria, how the pet gets along with other dogs, and what the missing 8% is.
Who you live with
“Alone,” “With a partner” and “With family or other adults,” plus a question about kids and pets.
No repeated questions
The type of home comes from the quiz and is no longer asked again in the application.
A visit with a real date
The summary shows the chosen day and time, and days include the month.
A clearer website
“Send” at the end of the step, “My applications” in the menu, and no percentage before the quiz.
08 · Wrap-up
What I learned and what’s next
What I learned
A percentage without an explanation breeds distrust.
Calling it “compatible” and showing why makes it useful. Next time I’d also test with users from the wireframe stage, to catch earlier the serious problems that only surfaced in high fidelity.
Next steps
- Disable “Next” and “Send” until the required questions are answered.
- Design the shelter dashboard on the web.
- Adapt the website to tablet and mobile.
- Post-adoption follow-up: a first-days guide and contact with the shelter.
Next case study
Lecto