typework Collab Internal
← Showcase

02 · Blueprint

Wireframes

The whole product, screen by screen. Low-fidelity, annotated wireframes for every state of both builds — grayscale structure with the accent reserved for callouts and the few genuinely accent-colored elements (map pins, match tags, paywall). Each region is labeled; notes under every frame explain what it does.

Mobile app · iOS · 5-tab PC web · sidebar console Dashed box = a module / region Orange note = key behavior
Mobile app iOS · casual discovery & swipe matching · bottom 5-tab bar 25 states

Entry — logged out

M·01Landinglogged out
9:41▮▮▮
◧Collab
BUSINESS SPEED-DATING FOR SMBS Find your next business partner.
Start now
Map preview · confidence device
1,248 reachable businesses near you
How it works · 3 steps
1Sign up
2Match
3Collaborate
  • Value proposition + primary “Start now” CTA into onboarding.
  • Map is a confidence device — “N reachable businesses near you”, not a matching engine.
  • “Sign up → Match → Collaborate” sets expectations before commitment.

Onboarding — 6 steps

M·02Onboarding · Industrystep 1
9:41▮▮▮
What's your business?
Industry options · pick one
Restaurants & Cafes
Fitness & Gyms
Clinics & Healthcare
Salons & Spas
Retail & E-commerce
Logistics & Supply Chain
Continue
  • Six industry cards; Continue is disabled until one is picked.
  • Progress bar tracks the onboarding steps.
M·03Onboarding · Linkstep 2
9:41▮▮▮
←
Add your business link
yourbusiness.com or @yourbusiness
✦ We'll pre-fill your about & offerings
Continue
  • Max auto-fetches the profile from a link (same logic as Marketing Hub).
  • Back arrow returns to the industry step.
M·04Onboarding · Review profilestep 3
9:41▮▮▮
←
Review your profile
MT
Morning TableRestaurants & Cafes · Hong Kong
About · editable
What you offer · editable
Looks good, continue
  • AI-drafted bio the owner confirms or edits — About + What you offer.
  • Profile card previews name, industry, and city.
M·05Onboarding · Emailstep 4 · new
9:41▮▮▮
What's your email?
[email protected]
Validates format · inline error if invalid
Send code
  • New step — collects the email, then sends the 4-digit code to it.
M·06Onboarding · Verify codestep 5
9:41▮▮▮
Check your email
0000
Code sent to the address from step 4
Verify email
  • 4-digit code confirms the owner; invalid input shows an inline error.
M·07Onboarding · Donestep 6
9:41▮▮▮
✓ You're all set.
Enter Collab
  • Confirmation → “We're already finding nearby matches for Morning Table.”
  • CTA enters the Home / Map tab and launches the first-time tour (M·10).

Main app — bottom 5-tab bar

M·08Home / Maptab · center
9:41▮▮▮
CollabMT
Cross-promotionCo-sellingJoint events
1,248 reachable businesses near you
HB
Harbor BloomStrong fit
Product bundling
NL
North LoopStrong fit
Cross-promotion
Inbox Swipe + AI Account
  • Full-bleed map (confidence device) with your location + nearby business pins.
  • Floating top bar (Collab + avatar) and scrollable collaboration-type filter chips.
  • Bottom sheet: reachable count + recommended need cards with match tags.
  • On Home the center tab is a “+” to post a need; elsewhere it returns Home.
M·09Home · Post-a-need nudgeempty state
9:41▮▮▮
You might want to post: “Looking for a cafe partner to co-create a weekend celebration bundle.”
InboxSwipe + AIAccount
  • First-time / no-history users get a hovering preview of an AI-recommended need beside the “+”.
  • Nudges the user to complete their first post; dismissed once they've posted.
M·10First-time tourcoach-mark · new
9:41▮▮▮
1 / 6Skip
Businesses within reach
Next
InboxSwipe + AIAccount
  • New — a 6-step spotlight walkthrough on first entry: reachable network → filter chips → recommended needs → swipe → inbox → post.
  • Each step: counter, title, body, Skip / Back / Next; the last step is “Post your first need”.
M·11Swipetab
9:41▮▮▮
Swipe5 swipes left today
Business card · one at a time HB
Harbor Bloom StudioFlorist · Hong Kong
Strong fitProduct bundling
LOOKING FOR — a cafe partner for a weekend bundle
✕ ✓
InboxSwipe ⌂ AIAccount
  • Card subject = the business (logo, name, category, intent tags, why-it-fits); its need sits secondary.
  • ✕ skip · ✓ interested — fixed, clearly labeled. Daily swipe count top-right.
  • Tapping the card opens the business detail sheet (M·19).
M·12Swipe · It's a matchtoast
9:41▮▮▮
Swipe4 swipes left
NL
North Loop FitnessGym · Hong Kong
Strong fitCross-promotion
★ It's a match! North Loop Fitness is interested too.
InboxSwipe ⌂ AIAccount
  • Mutual interest → match toast; the match opens as a conversation in the Inbox.
M·13Swipe · Caught upempty deck
9:41▮▮▮
Swipe0 left
You're all caught up
InboxSwipe ⌂ AIAccount
  • Deck exhausted → “check back tomorrow.”
  • Running out of swipes is a paywall trigger (see M·21).
M·14Inboxtab · reworked
9:41▮▮▮
Inbox
Invitations · incoming
CB
Central Bake LabWants to collaborate · Co-selling
Accept & messageDecline
Conversations
NL
North Loop2m
New match
HB
Harbor Bloom1h
›
Sent · pending
SP
SoHo Pop-Up
Pending
InboxSwipe ⌂ AIAccount
  • Reworked into three groups: Invitations (incoming cold-reach), Conversations, and Sent · pending.
  • Invitations offer Accept & message / Decline; new matches carry a “New match” tag.
  • Empty conversations show a prompt to accept an invite or match on Swipe.
M·15AI Analysis · Lockedfree
9:41▮▮▮
AI Analysis
Sample report · blurred
Sample report
Paywall
Unlock your full AI Analysis
Unlock analysis
InboxSwipe ⌂ AIAccount
  • Free users see a blurred sample + core data only.
  • The AI Analysis entry point is one of the three paywall triggers.
M·16AI Analysis · Generatesubscribed
9:41▮▮▮
AI Analysis
Generate report
InboxSwipe ⌂ AIAccount
  • Subscribed, no report yet → a single “Generate report” action.
M·17AI Analysis · Reportgenerated
9:41▮▮▮
AI Analysis
Your current state
Possible improvements
Recommended partners
HB
Harbor Bloom
NL
North Loop
Ask Max · chatbot
Ask a follow-up…↑
InboxSwipe ⌂ AIAccount
  • Report = current state · improvements · recommended partners (tap a partner → detail).
  • A chatbot lets the owner ask follow-ups about the report.
M·18Accounttab
9:41▮▮▮
Account
MT
Morning TableRestaurants & Cafes · Hong Kong
Subscription
FreeUpgrade
Notifications
Team
Help
Import business info to Typework →
InboxSwipe ⌂ AIAccount
  • Company profile · subscription (Free/Subscribed) · settings (Notifications, Team, Help).
  • “Import to Typework” — the restrained, non-intrusive strategic conversion entry point.

Overlays & flows

M·19Business detailbottom sheet
9:41▮▮▮
HB✕
Harbor Bloom Studio
Strong fitProduct bundling
Why this fits
First move to try
Looking for
Send collaboration message
  • Opened from a map pin, need card, swipe card, or AI partner.
  • Why this fits · First move to try · Looking for — the deal-making context.
  • Send is a cold-reach: it lands in the other business's Invitations and shows a “✓ Message sent — they'll see it in their inbox” confirmation. Sending is gated by the subscription paywall (M·21).
M·20Chatfull screen
9:41▮▮▮
←HB
Harbor BloomFlorist
Message↑
  • Conversation opened from the Inbox: header (business), message thread, composer.
  • The opening message is pre-seeded from the “first move” idea.
M·21Paywallmodal
9:41▮▮▮
✕
✦ Subscribe to send collaboration messages
Subscribe — $29/mo
Not now
  • One modal, three triggers: swipes exhausted · AI Analysis · sending a collaboration message.
  • Copy adapts to the trigger; card-on-file subscription at $29/mo (MAX).
M·22Post a need · Typeflow 1/4
9:41▮▮▮
✕Post a need
What kind of collaboration?
Cross-promotion
Co-selling
Joint events
Referral exchange
Budget or exchange (optional)
A few words (optional)
Continue
  • Fill the key points: collaboration type (7 options) + optional budget & notes.
  • Opened by the Home “+”. Continue disabled until a type is chosen.
M·23Post a need · Reviewflow 2/4
9:41▮▮▮
←Review your post
Max expanded your points — edit before posting.
AI-expanded draft · editable
Continue
  • AI expansion turns the points into a full need description the owner can edit.
M·24Post a need · Confirmflow 3/4
9:41▮▮▮
←Ready to post?
Preview
Cross-promotion
Visible to nearby businesses browsing needs.
Post need
  • Final preview with the type tag before publishing.
M·25Post a need · Postedflow 4/4
9:41▮▮▮
✓ Need posted
Done
  • Confirmation → “nearby businesses matching your need will start reaching out.” Returns Home.
PC web console Professional console · depth & operations · collapsible left sidebar 22 states

Entry — logged out

W·01Landinglogged out
collab.typework.com
◧typework · Collab
FeaturesHow it worksStart now
BUSINESS SPEED-DATING FOR SMBS Find your next business partner.
Start now
1 Sign up2 Match3 Collaborate
Map · confidence device
1,248 reachable businesses near you
  • Marketing header (Features · How it works · Industries) + two-column hero.
  • Same value prop and map-confidence device as mobile, sized for the large screen.

Onboarding — 6 steps

W·02Onboarding · Industrystep 1
collab.typework.com/onboarding
◧typework · Collab
PARTNER CONSOLE SETUP What's your business?
① Industry② Business link③ Review profile④ Email⑤ Verify code
Industry grid · pick one
RestaurantsFitness ClinicsSalons RetailLogistics
Continue
  • Persistent left rail shows the 5-step progress (industry → link → review → email → verify).
  • Same onboarding logic as mobile, laid out for the console.
W·03Onboarding · Linkstep 2
collab.typework.com/onboarding
◧typework · Collab
PARTNER CONSOLE SETUP Add your business link
yourbusiness.com or @yourbusiness
✦ We'll pre-fill your about & offerings
Continue
  • Link → auto-fetch drafts the profile with Max.
W·04Onboarding · Reviewstep 3
collab.typework.com/onboarding
◧typework · Collab
PARTNER CONSOLE SETUP Review your profile
MT
Morning TableRestaurants & Cafes · Hong Kong
About · editable
What you offer · editable
Looks good, continue
  • AI-drafted About + offerings, confirmed or edited before continuing.
W·05Onboarding · Emailstep 4 · new
collab.typework.com/onboarding
◧typework · Collab
PARTNER CONSOLE SETUP What's your email?
[email protected]
Validates format · inline error if invalid
Send code
  • New step — collects the email, then sends the 4-digit code to it.
W·06Onboarding · Verifystep 5
collab.typework.com/onboarding
◧typework · Collab
PARTNER CONSOLE SETUP Check your email
0000
Verify email
  • 4-digit verification; inline error on invalid input.
W·07Onboarding · Donestep 6
collab.typework.com/onboarding
◧typework · Collab
✓ You're all set.
Enter the console
  • CTA lands on Map / Discover and launches the first-time walkthrough (W·09).

Console — collapsible sidebar · 6 sections

W·08Map / Discoverdefault home
collab.typework.com/discover
Collab
Map Inbox2 My Needs Swipe AI Analysis Account
Map / Discover
Cross-promotionCo-selling
1,248 reachable near you
Recommended needs
HB
Harbor BloomStrong
NL
North Loop
  • Default landing = map-first for a strong first impression, not a cold report.
  • Floating filter chips (top-left), reachable-count pill (bottom-left), recommended needs panel (right).
  • Clicking a pin or need card opens the business detail drawer (W·17).
W·09First-time walkthroughcoach-mark · new
collab.typework.com/discover
Collab
Map Inbox My Needs Swipe AI Analysis Account
Map / Discover
1 / 6Skip
Businesses within reach
Next
  • New — a 6-step spotlight walkthrough on first console entry (reach → filter → needs → swipe → inbox → post).
  • Each step spotlights a region of the console with a titled tooltip; ends on “Post your first need”.
W·10Inbox / My Collaborationssection
collab.typework.com/inbox
Collab
Map Inbox2 My Needs Swipe AI Analysis Account
Inbox / My Collaborations
HB
Harbor Bloom
NL
North Loop
CB
Unlock
HBHarbor Bloom
Message↑
  • Two-pane: conversation list + active thread with composer.
  • Locked matches are blurred in place; selecting one opens the paywall (W·18).
  • Sidebar shows an unread/locked badge count.
W·11My Needssection
collab.typework.com/needs
Collab
Map Inbox2 My Needs Swipe AI Analysis Account
My Needs+ Post a need
Posted need · with responses
Product bundling3 days ago
HBLP
2 businesses responded
Empty state — “No needs posted yet” before any post.
  • Post new needs and manage posted needs and their responders.
  • Responder avatars link to each business's detail drawer.
W·12Swipe → mobilehandoff
collab.typework.com/swipe
Collab
Map Inbox2 My Needs Swipe AI Analysis Account
Swipe
Business card HB Harbor Bloom Studio
Strong fitProduct bundling
✕ Skip✓ Interested
Better on mobile
  • Swipe is mobile-native: the console keeps the entry point but nudges to phone via a QR code.
  • Drives cross-platform acquisition; PC matching runs through Map / Discover instead.
W·13AI Analysis · Lockedfree
collab.typework.com/ai
Collab
Map Inbox2 My Needs Swipe AI Analysis Account
AI Analysis
Sample report · blurred
Paywall
Unlock your full AI Analysis
Unlock analysis
  • Free users see a blurred sample + core data; the upgrade CTA sits beside it.
  • AI Analysis is a paywall trigger and a Premium-tier selling point.
W·14AI Analysis · Reportgenerated
collab.typework.com/ai
Collab
Map Inbox My Needs Swipe AI Analysis Account
AI Analysis
Current state
Improvements
Recommended partners
HBNLLP
Ask Max · chatbot
Ask a follow-up…↑
  • Large screen = report + chatbot side by side, the console's deep-use case.
  • Report sections: current state · improvements · recommended partners.
W·15My Accountsection
collab.typework.com/account
Collab
Map Inbox My Needs Swipe AI Analysis Account
My Account
MT
Morning TableRestaurants · Hong Kong
Subscription
FreeUpgrade
Notifications
Team
Help
Import business info to Typework →
  • Profile, subscription management, settings.
  • Centralized “Import to Typework” strategic conversion entry point.
W·16Sidebar collapsedlayout state
collab.typework.com/discover
Map / Discover
Recommended needs
  • The sidebar collapses to icons, freeing width for the map, reports, and board views.
  • A toggle at the sidebar foot switches expanded ↔ collapsed.

Overlays & flows

W·17Business detailright drawer
collab.typework.com/discover
Collab
MapInboxMy Needs
Map / Discover
SP✕
SoHo Pop-Up Room
Fresh angleJoint eventsNot joined yet
Why this fits
First move to try
Looking for
Invite them to join
  • Right-side drawer over the console; same context as mobile (why / first move / looking for).
  • Joined → “Send collaboration message”, which then shows a “✓ Message sent” confirmation. Not joined (sourced) → “Invite them to join” (growth loop).
W·18Paywallmodal
collab.typework.com/inbox
Collab
MapInboxMy Needs
Inbox
✦✕
2 businesses want to collaborate with you
Subscribe — $29/mo
Not now
  • Same three triggers as mobile; presented as an in-place overlay + upgrade modal.
W·19Post a need · Typemodal 1/4
collab.typework.com/needs
Collab
MapInboxMy Needs
My Needs
✕
What kind of collaboration?
Cross-promotionCo-sellingJoint eventsReferral
Budget or exchange (optional)
Continue
  • Centered modal: pick collaboration type (7) + optional budget & notes.
W·20Post a need · Reviewmodal 2/4
collab.typework.com/needs
Collab
MapInboxMy Needs
My Needs
←Review your post
Max expanded your points — edit before posting.
AI-expanded draft · editable
Continue
  • AI expansion → editable full description.
W·21Post a need · Confirmmodal 3/4
collab.typework.com/needs
Collab
MapInboxMy Needs
My Needs
←Ready to post?
Preview
Cross-promotion
Visible to nearby businesses browsing needs.
Post need
  • Final preview with the type tag before publishing.
W·22Post a need · Postedmodal 4/4
collab.typework.com/needs
Collab
MapInboxMy Needs
My Needs
✓ Need posted
Done
  • Confirmation; the new need appears at the top of My Needs.