Onboarding, item activation, scan, profile, pings and mutual chat.
[Product · Mini app]
product design
interactive demo
MUTUAL: meet via QR
A streetwear brand where the clothes introduce people: a static QR on a garment stands for the owner’s identity, and the introduction only opens by mutual consent.
case status
interactive prototypeMini App product logic before launch
Chat opens only after mutual interest, and a profile can be hidden.
Backend, real users and geolocation are not connected; the interface simulates the journey.
interactive demo: walk the whole flow
MUTUAL
// streetwear that introduces
Clothes
that
introduce
The QR on a garment is the owner's identity. Scan someone's item to see who they are.
01Scan the code on an item
02Ping the owner
03They accept, chat opens
// step 1 · privacy
Who can
find me
These are the defaults. Change them anytime.
Meeting only by consentChat opens only if you accept the ping🔒 can't be turned off
{{ visTitle }}
{{ visNote }}
// step 2 · nearby
Who's nearby
You're hiddenNo one sees you here.
You can still scan others.
You can still scan others.
A profile opens only after scanning an item. Only people who allowed it show here.
{{ p.name }}{{ p.drop }}{{ p.dist }}online{{ p.last }}
// step 3 · scan
{{ capText }}
Lena 22
DROP 01 · "LET'S MEET?"the item you scanned
Moved here a month ago, barely know anyone. Climbing, ramen, bad horror films.
Ping
sent
Lena is looking at your profile. It's her call now.
Chat closedOpens only if Lena accepts the ping
Mutual
Lena accepted your ping. The chat is open now, for both of you.
Lena, 22online⚡ mutual
{{ m.text }}
{{ m.text }}
{{ m.at }}
// summary
Here's how
it works
01
Code on the item = identity
One code, one person. The profile is editable; the item stays.02
A scan opens the profile
Not from a map or a feed, only from scanning a real item.03
A ping is a question
A decline is invisible to anyone. Nothing just happens.04
Chat only if mutual
Both said yes, then the conversation opens.Consent is a rule, not a settingNeither side can turn it off.
MUTUAL: meeting via a garment.
mutual-consent path
From a garment QR to mutual contact
Every step checks privacy boundaries and consent before revealing a person or opening communication.
Someone notices the garment and scans
The QR connects a specific drop to its owner profile instead of opening a product page.
The privacy mode is applied
Profile visibility and proximity are disclosed only within the owner's settings.
The owner receives a private ping
The sender expresses interest without gaining direct access to personal contacts.
The recipient makes the decision
Only mutual consent turns the ping into a chat.
Open the chat
Both people explicitly choose to continue.
Contacts stay hidden
A ping never becomes access to personal data.
The owner controls visibility
Discovery can be limited before anyone sends a ping.
01 · problem
Meeting people offline is chance and awkwardness: you notice someone whose style you vibe with, but there’s no bridge from “spotted them in a crowd” to “we’re chatting,” and making the first move is uncomfortable for both. MUTUAL turns the garment itself into that bridge: a streetwear brand where every item carries a QR, and scanning it opens the owner’s identity and their consent to be contacted, not a product page. The product problem wasn’t the code. It was designing the whole flow to stay useful without turning into surveillance.
02 · solution
The key decision is an inversion: the garment holds a fixed pointer, the identity lives online. The QR is printed on a physical garment and can’t be reprinted, so it carries a stable link, not a person’s data; everything mutable (name, interests, privacy, even the owner on resale) is edited in the online profile at any time. On top of that, a consent-based introduction flow: scan → ping the owner → chat opens only on mutual interest. We built an interactive Telegram Mini App: onboarding, item activation, personal QR, scan, a “who’s nearby” map, profile, pings, chat. The whole path is walkable end to end.
03 · what was hard
We reworked it: before consent the scanner sees only a public storefront (the item, a nickname, a couple of interest tags) but no contacts, no precise location, and can’t message. Between profile and chat sits a gate: the only action is a “ping,” and the chat doesn’t exist at all until the owner answers in kind. Consent here isn’t a checkbox in settings. It’s the act of replying to the ping.
We resolved the forks like this: you only appear on the map by explicitly opting in to be visible; distance is approximate (“~40 m,” not coordinates); and a person is shown only after a scan has already linked you, not to everyone. Precise geo, address and continuous position are never exposed. The map shows the fact of being close, not the place.
The principle the whole flow is built around: in a product about meeting people, privacy isn’t a settings screen. It’s the direction of the flow itself. Every step first answers “what does this person reveal, and did they consent to it,” and only then “how does it look.”
04 · result
- The idea, the consent mechanics and the privacy are designed: the whole path from scan to chat.
- An interactive Telegram Mini App: 8 screens (onboarding, item activation, personal QR, scan, a nearby map, profile, pings, chat). Every transition is walkable end to end.
- The states and transitions are worked out, from onboarding and item activation to pings and chat.
- The design, flow and all screens are done. The product is ready to build and launch.
Telegram Mini App
UX design
product design