Consumer · Mobile App · Marketplace · Localisation

Doggio — Designing Trust Signals into a Service Marketplace

How do you get someone to hand their dog to a stranger? That was the whole brief. Doggio is one app for Lisbon with two sides to it: owners can see a walker’s verifications before they tap anything, and follow the walk on a map while it happens. Walkers get the same app, turned around.

Role
UI/UX Designer (Sole Designer)
Type
End-to-End Product Design
Timeline
12 Weeks · 2025–2026
Tools
Figma · React/Next.js · Tailwind · shadcn/ui
Outcomes
80+
Screens designed and delivered as sole designer in 12 weeks
40+
Reusable Figma components with matching React implementation
2 roles
Complete Owner + Walker flows unified in a single app with role switching
5
Languages supported — localised for Lisbon's multilingual user base
100%
Of the trust signals, visible while browsing. No profile tap needed
React
A prototype you can click through (Next.js + Tailwind), not a set of static screens
The Challenge

Trust is the conversion barrier

Nobody hands over a dog casually. It’s a living thing going off with someone you met in a list. The platforms already running in Lisbon didn’t make that easier: listings scattered, vetting you had to take on faith, and no idea what was happening once the walk started. So owners browsed, bounced, and asked a neighbour instead.

That left me three problems. (1) Get the trust signals in front of people before they give up. (2) Fit two very different users, owners and walkers, into one app without either of them feeling like an afterthought. (3) Make it read as Lisbon, not as a US app with the currency swapped: EUR pricing, Portuguese names, distance-based discovery, and enough languages for a city with as many expats as this one.

My Role

End-to-end ownership

I was the only designer on this, so all of it is mine, from the first teardown to the prototype you can click through:

  • Discovery — pulling Rover, Wag and Gudog apart, then writing down the assumptions I was working from and the personas I designed against
  • Information architecture — 80+ screens across two roles, plus the logic for moving between them
  • Design system — 40+ components on shadcn/ui, with the tokens kept in Figma
  • Visual design — high-fidelity screens for both Owner and Walker flows, localised to Lisbon
  • Interactive prototype — a working React app (Next.js + Tailwind) with live data, real navigation and an AI support bot
  • Design-dev handoff — component docs, token specs and flows with notes on them
Interactive prototype

The prototype below is the running build — click it to interact.

App Flow Walkthroughs

Both sides of the app, screen by screen. Swipe or scroll.

Dog owner flow

Onboarding, then discovery, booking, live tracking and the walk summary. This is the run the trust signals have to survive.

Onboarding
01Onboarding
Home
02Home
Explore
03Explore
Walker profile
04Walker profile
Booking
05Booking
Live tracking
06Live tracking
Walk summary
07Walk summary
Messages
08Messages
Conversation
09Conversation
Settings
10Settings

Dog walker flow

The other side of it: the schedule, the calendar, earnings against a weekly goal, and the bookings themselves.

Dashboard
01Dashboard
Calendar
02Calendar
Earnings
03Earnings
Bookings
04Bookings
Profile
05Profile
Settings
06Settings
Messages
07Messages
Help centre
08Help centre
Personas

Who I'm designing for

Alex F.
Dog Owner · Estrela, Lisbon · Primary User
Goals
  • Find a trustworthy walker within walking distance in Lisbon
  • Book recurring walks without friction — in their preferred language
  • Track their dogs' walks in real time via GPS
  • Manage multiple dogs (Max, Bella, Charlie) with distinct profiles and care instructions
Pain Points
  • Language barriers — expat walkers may not speak Portuguese
  • Can't assess trustworthiness without meeting in person
  • No visibility into what happens during the walk
  • Existing platforms don't show distance or availability clearly
Sofia O.
Professional Dog Walker · Estrela, Lisbon · Service Provider
Goals
  • Get discovered by nearby owners through distance-based search
  • Display language skills (PT/EN) to attract expat and local clients
  • Manage walk requests, active walks, and earnings in one place
  • Build credibility through verified badges and reviews
Pain Points
  • Competing with unverified, cheaper alternatives on social media
  • No way to show qualifications or language skills upfront
  • Managing bookings across WhatsApp, Instagram, and phone is fragmented
  • No professional tool for walk logging, photo sharing, or reporting
Discovery

The assumptions this rests on

This is a self-directed concept. I didn’t interview anyone, so none of what follows is a finding. These are the assumptions I designed from, taken off teardowns of Rover, Wag and Gudog and off how marketplaces in neighbouring categories solve the same problems. I’ve written each one so a real study could knock it down, next to what I built on the strength of it:

AssumptionDesign Response
Trust is the primary conversion barrier for first-time bookingsVerification badges (Email / ID / Phone) sit on the browse card, before anyone opens a profile
Users shortlist 2–3 walkers before deciding — comparison is the core browse behaviourA filter bar that stays put, and price, distance, rating and language all on the card so two cards can be read side by side
Language matching is a key comfort factor in Lisbon's multilingual communityLanguage badges (flag + code) visible on every walker card; dedicated language filter in browse
Distance is the deciding factor — owners want walkers within walking distanceDistance is one of the first things on the card, with a radius slider behind it. Every walker sits in a real Lisbon neighbourhood
Owners need real-time visibility into active walks to feel safeLive GPS tracking: the route on a map, duration, distance, and photos sent while the walk is on
Process

12 weeks, 5 phases

Weeks 1–2
Research & Strategy
  • Competitive teardown (Rover, Wag, Gudog) surfaced trust gaps
  • Assumed language matching matters in a city as multilingual as Lisbon
  • Defined dual-role persona model
  • Scoped localisation requirements (EUR, distance, 5 languages)
Weeks 3–4
Architecture & Flows
  • Mapped 80+ screens across Owner + Walker roles
  • Designed 9-step linear booking flow to reduce drop-off
  • Defined role-switching logic between flows
  • Validated core journey against persona goals
Weeks 5–6
Design System
  • Built 40+ reusable components on shadcn/ui
  • Established design tokens (colour, type, spacing)
  • Created language badge & flag switcher patterns
  • Ensured Figma library mirrors React implementation
Weeks 7–9
Visual Design
  • Designed high-fidelity screens for both roles
  • Applied localisation (EUR pricing, Lisbon names, distance)
  • Ran consistency audit across 80+ screens
  • Surfaced trust signals at browse-card level
Weeks 10–12
Prototype & Handoff
  • Built fully interactive React prototype (Next.js + Tailwind)
  • Implemented AI support bot with guided flows
  • Produced design-dev handoff documentation
01 — PaperLogin, on lined notebook paper. A crossed box for the hero image, two labelled fields, a right-aligned link, and two action rows. Every one of those survives into the greybox beside it.
02 — GreyboxThe same screen in greyscale. The crossed box becomes the hero photo, the right-aligned link becomes “Forgot password?”, and the two action rows become Login and Login with Facebook.
03 — High fidelityThe browse card, specified with each walker’s verifications ticked and unticked — Tajana passes three of four checks, her phone unverified — so trust is comparable without opening a profile.
04 — High fidelityThe profile that card leads to: the same checks in full, a photo grid, and the price and book action pinned where the thumb sits.
Doggio — pencil sketch of the login screen on lined paper: a header bar, a crossed-out image block, two labelled input fields, a right-aligned link, and two action rows each ending in a small crossed squareDoggio — greybox wireframe of the login screen with placeholder blocks for the logo, fields and buttonsDoggio — high-fidelity walker list showing each walker's price, distance in metres, and a checklist of email, ID, phone and reference verificationsDoggio — high-fidelity walker profile with photo gallery, verification checklist, reviews and a book button

These are working files, not a reconstruction. The high-fidelity walker list specifies distance in metres — “350 m”, “500 m” — which is how I found that the built app was printing the same stored values as kilometres: a regression away from a spec that had been right all along. That fix started as a difference between these files and the running code.

Core Journey

The booking flow

Discovery to confirmed booking is nine steps in a straight line, no branches. Each one asks a single question and nothing else. Nine sounds like a lot until you try putting the dog, the date, the time and the payment on one screen.

Owner — discovery to first booking
Explore WalkersFilter (distance + language)View Walker ProfileSelect DogChoose DateChoose TimeReview SummaryPay (EUR)Booking Confirmed
Design Decisions

Strategic trade-offs

Each of these traces back to one of those assumptions. The five that changed the product most:

DecisionRationaleAlternative Rejected
Trust signals surfaced on browse cardsShortlisting happens on the cards. In the teardowns, the trust information sat behind a profile tap, which is friction right where the first decision gets made. Putting the badges (Email/ID/Phone) on the card is a bet that losing that tap lowers browse-to-profile drop-off.Trust info in profile only — most users never reach a profile if the card doesn't earn initial trust
Live GPS tracking during walksMy bet for the biggest trust win after the money changes hands. Owners watch their dog's route, get photos, and can message the walker while the walk is still going on.Post-walk report only — doesn't address real-time anxiety
Dual-role app with role switchingI assumed plenty of walkers own dogs themselves. One app with a “Switch to Owner/Walker” control means one install, one login, and half the maintenance of running two products.Separate apps — doubles maintenance, confuses users who are both
Distance-based hyper-local discoveryA walker 8km away is no use to you at eight in the morning, every morning. Distance in metres on every card makes proximity the first filter, which is how people already think about it: “who's in my neighbourhood.”City-wide list without distance — useless for a service that requires physical proximity
Language badges (flag + code) on walker cardsLisbon has a large expat population, and being able to talk to the person holding your dog's lead matters. Flag badges on the card show who you can actually talk to, without opening anything.Language info in profile only — requires drilling into every profile to check compatibility
Final Designs

High-fidelity screens

Doggio — Home Dashboard with Upcoming WalksDoggio — Explore Walkers with Distance & Language BadgesDoggio — Walker Profile with Verifications (Lisbon)Doggio — Booking Date SelectorDoggio — Live GPS Walk TrackingDoggio — Walk Summary with Stats & PhotosDoggio — Walker Dashboard with Today's ScheduleDoggio — Walker Earnings Breakdown (EUR)Doggio — Walker My Bookings
Design System

Visual foundations

Two roles and eighty-odd screens only hold together as a system. Orange carries every primary action, blue is kept for links and system messages, and the neutrals do the rest — so the one orange thing on a screen is always the thing to press. Gabarito runs the whole type scale across five weights, and the icons are Google Material rather than a set drawn from scratch.

Colour

Primary · actions, active states
#FF862F
Secondary · highlights, ratings
#FFEF79
Tertiary · links, system messages
#007AFF
Neutral · surfaces, dividers
#ECECEC
Dark · text, bars
#000000
Light · cards, fields
#FFFFFF

Foundations

Typeface
Gabarito — light, regular, medium, semibold, bold
Iconography
Google Material Icons, used unmodified
Components
Buttons, rating, and the field set (name, email, phone, ID, references, reviews) drawn once and reused across both roles
What I Delivered

What I delivered

Twelve weeks, on my own, from an empty Figma file to something you can actually use on a phone. Here’s what came out of it.

What I Learned

What I learned

Two roles in one app turns out to be mostly a components problem. I couldn’t have held 80+ screens together by hand, and the design system stopped feeling like overhead somewhere around the third screen I hadn’t planned for. The thing I’d carry to the next project is smaller than it sounds: put the trust signals where the first decision happens, on the card, not two taps in. And the gap here is obvious enough that I may as well say it. I never put any of this in front of a real dog owner, so every row in that assumptions table is still an assumption. Next time I’d get something testable out in week three, before the booking flow hardened into nine steps I was already fond of.

What this project demonstrates

Marketplace work where trust is the design problem, not a feature bolted on late. Pricing you can see before you commit, a booking flow that asks one thing at a time, and profile signals placed where they can still change someone’s mind. All of it built out as a React prototype rather than a deck of screens.

Next project
MindPeace —
Dual-User Mental Health Tracking for Patients and Clinicians
Get in touch

Let’s talk.

Happy to walk through any of these case studies on a call, including the parts that didn’t work.

Please add your name
Please add a valid email
Please add a subject
Please add a message
Open to opportunities
Based inRijeka, Croatia · remote worldwide, or relocating within the EU
Right to workEU citizen (Portugal) · no permit needed anywhere in Europe
Open toUI/UX designer roles, employed or contract
Email me directly atnicole@dinardo.design