A shelter where every cat deserves to be found
End-to-end design and development of a fully automated adoption platform for a Lisbon-based cat shelter — connecting the public to a live animal database via real-time API, with a warm, trustworthy digital presence built from zero.
From field research with shelter volunteers to a live, automated website — every phase grounded in user needs, not assumptions.
Amigatos da Milkinha had been caring for dozens of cats in Lisbon for years — with zero digital presence. The shelter used ASM3 internally to manage animals, but the public had no way to discover them, browse cats, or donate remotely.
The shelter existed only on Instagram. Potential adopters relied on DMs, phone calls, and word-of-mouth — creating a broken, unscalable process that turned away good-faith adopters.
The project needed to solve for the adopter, the supporter, and critically — the volunteer. The best solution was one that ran itself, requiring zero ongoing content work from an already stretched team.
Before designing, I benchmarked three comparable animal shelter websites to understand what made online adoption experiences trustworthy — and where they fell short.
Clear taxonomy and search by species/age. Strong emotional photography. However, the volunteer adoption process required a lengthy PDF form — high friction for a mobile user.
Institutional tone felt cold. Cat profiles were text-heavy with inconsistent photo quality. No live integration — listings updated manually, leading to outdated "already adopted" entries still visible.
Warm visual language and clear process steps built trust. Donation CTA prominent on every page. Weakness: no search or filter — hard to browse 80+ animals without pagination.
"The common failure across all three was a mismatch between emotional warmth in copy and cold friction in the actual adoption journey. The opportunity was a site that felt warm and worked frictionlessly — with live, accurate animal data."
I conducted volunteer interviews and shadowed the shelter's weekly operations. Four recurring insights shaped every design decision.
Volunteers fielded the same questions repeatedly — confirmation that the core problem was information asymmetry, not lack of interest. Adopters existed; the channel was broken.
Live API integration so every listing is always accurate. No stale "already adopted" profiles.
Over 80% of the shelter's audience arrived from Instagram Stories and Reels. Desktop was effectively irrelevant for first contact — mobile was the only device that mattered.
Mobile-first design, validated on small screens first. Grid, filters and donate flow all designed at 375px before desktop.
Volunteers are not marketers. Any solution requiring manual content updates would fail within weeks. Sustainability meant automation — the site had to run itself.
ASM3 API as the single source of truth. Cat listings update automatically when shelter staff update the internal system they already use.
The current donation flow required DM-ing the shelter, waiting for a reply, and manually entering bank details. Every step was an exit point. Supporters existed — the infrastructure didn't.
Dedicated donation page with IBAN + MB Way (Portugal's dominant mobile payment), zero friction path from homepage CTA.
From the field research, three distinct user types emerged — each with a different goal, a different level of digital confidence, and a different emotional relationship to the shelter.
"I want to adopt but I'm not sure I'm making the right choice — I need to feel like the shelter is trustworthy before I commit."
"I can't adopt but I want to help. If donating is complicated, I'll just move on — there are a hundred other shelters."
"I spend hours answering the same questions on Instagram. Any tool that reduces my admin work is a gift."
Mapping Sofia's experience from Instagram discovery to adoption request revealed three critical drop-off points — and three design opportunities.
Three pages, three jobs. The architecture is deliberately minimal — no sub-navigation, no dead ends. Every path leads to either adoption or donation.
The primary flow maps how a potential adopter moves through the site. Three distinct lanes: the user, the supporter, and the system — making the API role explicit.
Every design decision was tied to a specific user insight or constraint. This is how research shaped the final product.
Terra-cotta, cream and sand were chosen because they feel domestic and safe — not clinical. Playfair Display adds warmth and character without feeling childish. The goal: a site that feels like the shelter, not a municipal database.
Research finding: Sofia needed to trust the shelter before she'd commit. Visual warmth is the first signal of legitimacy for an NGO with no brand recognition.
Clicking a cat opens the ASM3 plain2 detail view directly on the page — no full reload, no navigation away from the grid. This keeps the adopter inside the browsing flow and dramatically reduces the back-button drop-off.
The API's iframe was explored first, but couldn't be controlled visually. The plain2 overlay gave the same data with full layout control.
By default, ASM3 returns cats in a fixed order — the same animals always appear at the top. A shuffle on load ensures every cat gets equal visibility. No cat gets permanently buried just because of their ID number.
Volunteer insight: "Some cats never get enquiries because they're always at the bottom." The shuffle is a fairness mechanism, not a feature.
IBAN bank transfer was the existing method — but it required copying details, opening a banking app, and manual entry. MB Way is Portugal's dominant mobile payment method and completes in under 10 seconds. It was the obvious choice for a mobile audience.
Persona: Pedro. He donates impulsively after seeing a post — any friction is an exit. MB Way removes every step between intent and action.
The cats grid is powered by the shelter's existing animal management system — ASM3. Integrating this API meant the site is permanently up-to-date with zero volunteer effort.
The API endpoint returns a script with every adoptable cat's data in real time. When a cat is adopted or a new cat arrives, the volunteer updates ASM3 — the website updates automatically. No content management needed.
ASM3 returns cats in fixed ID order — the same animals always appear first. A shuffle on each load distributes visibility fairly. Every cat gets seen, regardless of when they arrived.
The plain2 style renders the cat detail inline on the page. The iframe approach was tested first but offered no visual control. The overlay keeps users inside the adoption flow — no back-button, no lost context.
The ASM3 search filter had very limited API options — custom filtering parameters were not exposed. The design worked within this constraint: the shuffle feature compensated for what search couldn't solve.
A small but complete design system — tokens, typography and components — ensuring consistency across three pages built and maintained by one person.
Playfair Display
H1–H3 · Serif · Warmth
DM Sans
Body · UI · Labels
Each page has one job. Click any card to expand and see the full page.
Launching a public-facing website transformed how the shelter interacts with adopters and supporters — turning scattered social media reach into a consistent, trustworthy digital presence.
Senior design isn't just about what you built — it's about the decisions you made under constraints and why.
The API's search parameters were limited — custom filtering by breed, colour or temperament wasn't exposed. I couldn't build a faceted filter without scraping data in a way that wasn't sanctioned.
Accepted the constraint and used shuffle as the fairness mechanism. Documented the limitation clearly for the shelter so future developers know what's API-constrained vs custom-buildable.
A real payment integration (Stripe, PayPal) would require server infrastructure the shelter couldn't maintain. The static GitHub Pages deployment ruled out backend payment processing.
MB Way phone number + IBAN — the two methods adopters in Portugal already know and trust. Zero infrastructure, zero maintenance, handles 95% of the real donation use case.
ASM3 offered an iframe mode for cat profiles that would open over the current page. In testing, it was impossible to style or control — it clashed with the site's visual language completely.
Disabled the iframe, used plain2 style instead. This rendered the profile inline with full CSS control. The user stays on the page — better for flow, better visually.
There was no team — no QA, no copywriter, no back-end developer. Every decision had to be scoped to what one person could design, build, and test in 6 weeks while being genuinely useful.
Three pages, zero dependencies, one external API. Deliberately minimal scope so the system could be fully understood and maintained by anyone after handoff — including non-technical volunteers.
The ASM3 API's search limitations were frustrating at first. The shift was accepting the constraint and finding a better solution within it — the shuffle feature emerged from this. The best constraint response is usually creative, not combative.
Every design decision — the warm palette, the clear process steps, the plain language — was ultimately about making someone feel safe enough to adopt or donate. For a cause this personal, visual design isn't decorative. It's emotional infrastructure.
Volunteers don't have time to update a website. Connecting the site directly to the shelter's existing system meant zero long-term content burden. The best tool for a small team is one that runs itself — sustainability should be a design goal, not a nice-to-have.
The shelter's audience arrives via Instagram and Facebook — meaning most users land on mobile. Designing desktop-first would have left the majority with a broken experience. Mobile-first isn't a principle for its own sake — it's the reality of where NGO audiences live.