From a Confusing Brief to the UX/UI Document

# PawSoul — UX/UI document

## 1. The product in three lines
PawSoul matches compatible dogs and cats in the same neighborhood and gets
their owners to set up a real meetup. You sign up, register your pet, and
swipe through other pets' cards: when a like is mutual, a conversation opens.
A profile can be marked as available for adoption, in which case it also
appears to people looking for a pet to give a home to.

## 2. Problem, user, job to be done
Problem: you take your pet out every day, to the same places, and you don't
know anyone to do it with. The pet gets bored, and so does the person.
User: someone with a dog or a cat who goes out (or would like their pet to
socialize) fairly regularly, and doesn't have a network of people around
them. Secondary: someone looking to place a pet — a shelter, a private
owner.
Job to be done: "when I go out with my pet alone, I want to find someone
compatible nearby, so the walk turns into a meetup."
Stated assumption: the number that matters is how many meetups get set up
in chat, not how many people sign up. The client didn't know how to measure
it; we measure it as "conversations where a date or place gets proposed."

## 3. The main action and the flow
Main action: judge a card and say yes or no. It's the one gesture the app
exists to make you repeat; everything else follows from it.
Flow: open → sign up → register your pet → see the cards → like → get a
match → message → propose a meetup.
The gesture works in two equivalent ways: dragging and two buttons under the
card. Anyone who doesn't get the drag gesture should still be able to use
the app.

## 4. MVP: in and out
In: pet registration, cards to swipe through, filters by species and
distance, adoption-only filter, matches, conversation, public pet profile,
personal area with multiple pets of your own.
Out, and written down so it doesn't get lost: map of meetups, reviews
between users, verified vaccination badges, push notifications, groups,
management tools for shelters, any kind of payment.
Cutting rule: cut in width, not depth. Fewer features, but no reachable
screen left half-built.

## 5. The screens (ten) and how you reach them
1. Public landing — explains the product and leads to sign-up. From there
   you can also reach the profiles of pets up for adoption.
2. Sign-up — name, email, password, city. Leads to pet registration.
3. Log in — email and password. Leads to the dashboard.
4. Pet registration — step by step: owner, species, basic info, personality
   (different questions for a dog and a cat), photo, what they're looking
   for, and the finished profile shown as the result.
5. Dashboard — where you land once logged in: active pet, new matches,
   recent activity, shortcut to the cards.
6. Cards — the main screen. Deck, filters, full-screen match reveal.
7. Matches — list of conversations. On large screens, list and conversation
   side by side.
8. Conversation — on phone it's its own screen, reached from the list.
9. Public pet profile — from the cards, from a match, from the landing.
10. Personal area — my pets, add one, search preferences, settings, log
    out.
Navigation: on phone, a four-item bottom bar (cards, matches, dashboard,
profile). On large screens, a top bar.

## 6. Decisions made
- Fun but not childish → deliberately deferred, turned into the criteria in
  point 7. We give up being able to start designing right away.
- Lots of features but simple → cut in width, every screen stays fully
  built. We give up features the client had in mind; they stay written down
  in the "out" list.
- Like Tinder but not Tinder → keep the gesture, change everything else.
  The model is friendship, not pairing up. We lose nothing except the
  shortcut of copying the look too.
- The pet or the owner → the pet is the profile, the owner is the user, and
  the conversation happens between people. We lose a bit of charm, we gain
  a chat that makes sense.
- Cats now or later → now, because it's the data model, not a feature. We
  lose time now, less than it would cost to redo it later.
- Adoption → a toggle on the profile plus a filter, not a role and not a
  management panel. We give up shelter tools: if they're ever needed,
  that's the next project.

## 7. Criteria for the aesthetic direction
The visual style is NOT chosen in this document. Whichever direction is
picked, it has to pass these four tests:
1. Not-Tinder at a glance: placed next to Tinder, someone outside the
   project should say it's not the same product.
2. Fun without childish: it has to hold up the word "fun" without making
   anyone think of a kids' app. The client is showing it to a possible
   investor.
3. The pet photos are the content: no treatment that reduces them to
   background, covers them, or shrinks their space. The face is the
   product.
4. Recognizable at 390px: on a phone it has to stay itself, not fall back
   to a generic look.
References given by the client: Tinder (for how it works, not how it
looks), Duolingo (for the tone). To avoid: banking apps, grays, small text.

## 8. States
Every screen has its three states — empty, loading, error — and none of
them is a blank screen.
- Cards, deck finished: "you've seen everyone nearby," plus a way to widen
  the distance and reload.
- Matches, no matches: what to do to get some, with a link to the cards.
- Conversation with no messages: a suggestion on how to start, not an empty
  space.
- Loading: shapes matching the form of the real content, never a spinner
  in the middle of the screen.
- Network error: recoverable, with a retry button.
- First launch: the deck is never empty on first access — there's already
  a set of profiles in the area chosen during registration.

## 9. Responsive
Designed at 390px and scaled up. On phone: bottom bar, full-width deck,
matches list and conversation on two separate screens. On large screens:
top bar, list and conversation side by side, centered deck with filters to
the side. Every tappable element is at least 44px tall. No screen is
allowed to turn generic as it scales up.

## 10. Completion criteria
- The main flow can be walked start to finish on a phone: sign-up, pet
  registration, cards, match, conversation.
- No link in the demo leads to a screen that doesn't exist or is empty.
- All ten screens have real content, not placeholder text.
- Registration asks different questions for a dog and for a cat.
- The species filter and the adoption filter work and change the deck.
- All three states exist on every screen.
- The chosen look passes the four tests from point 7.