Loop· Create-a-Loop · design directions · v1

UX & Information Architecture — three directions to choose from

Starting a Loop is
writing an invitation,
not filling a form.

A Loop carries a lot: the occasion, the timing, the place, who’s allowed in, what tools it opens with, and the welcome your guests read first. The craft is deciding what a host must answer now, what can wait, and how to reveal the rest without it ever feeling like paperwork. Here are three ways to shape that moment.

Required now — title · schedule · reach · modules Optional at creation — place · description · welcome · good-to-know Deferred to settings — cover · wall style · share links · guests

00 — Shared foundation

Every field a Loop can hold, grouped the way a host thinks

All three directions below draw from this same inventory — mapped to the real CreateLoopReq contract. They differ only in how much is on screen at once and in what order. Dots mark when each field is answered.

01 · The Occasion

What is it?

  • Title ≤120 chars · required
  • Description ≤4000 chars
  • Cover photo MediaRef · added after
02 · When

The timing

  • Schedule required · one kind
  • Specific date SpecificDate
  • Date & time SpecificDateTime
  • Recurring RRULE
03 · Where

The place

  • Address ≤240
  • Area neighbourhood ≤120
  • Map link mapUrl
  • Parking · dress code notes
04 · Who can join

The reach

  • Reach 4 levels · dflt Invited
  • Share link scope + slots
  • Named guests invite after
05 · What’s inside

The modules

  • Wall photos & notes
  • Spread who-brings-what
  • Lists checklists & votes
  • Wall style 7 layouts · 5 cards
06 · The welcome

First impression

  • Note to guests ≤2000 chars
  • Good-to-know cards up to 8
  • Parking · Bring · Wifi… 7 kinds

DIRECTION 01

The Invitation

One luminous surface you fill top-to-bottom, the way you’d actually write an invite. Required fields lead; everything else waits behind calm, optional disclosure rows. Nothing is hidden in tabs — you just keep going, or stop early.

PatternScroll · progressive reveal
SurfaceModal · 560px
Time to create~15s minimal
Best forThe emotional first-timer

DIRECTION 02

The Guided Steps

The full set of configs, chunked into four calm steps so a host never sees more than one decision-cluster at once. A visible spine of progress carries them to a final review before anything is created.

Pattern4-step wizard + review
SurfaceModal · rail + panel
Time to create~40s · thorough
Best forFirst host · mobile

DIRECTION 03

The Command Console

A power tool. Every config on one dark screen, nothing hidden, a live invite preview updating as you type, and a “/” palette to jump to any field. Built for the host who runs a Loop every week and wants zero ceremony.

PatternTwo-pane · live preview
SurfaceFull dialog · dark
Time to create~8s · keyboard
Best forThe repeat power host
/ jump to a field — reach, wall style, parking, recurring…
Occasion 28/120
Solstice Long-Table Dinner
When
Sat 29 Jun · 18:30
OnceRepeat?
Where
The Old Print Works — Peckham SE15
Reach
InvitedFriendsFoFPublic
Modules
WallSpreadLists
Wall style
ScatterTimelineMosaic+4 Polaroid
Good-to-know 2 cards
🅿 Parking🍷 Bring+ card
Live preview — what guests see
29
Jun

Solstice Long-Table Dinner

📍 The Old Print Works · Peckham · 18:30
WallSpreadLists
You’re hosting · invited-only

The preview is the deliverable — the form is just the levers. Every keystroke on the left redraws the invitation on the right, so hosts design the guest’s first impression directly.


04 — Decide

Three philosophies, one field inventory

They aren’t cosmetic variants — each answers “how much complexity does a host meet at once?” differently. Pick by who your median host is.

  The Invitation01 · scroll The Guided Steps02 · wizard The Command Console03 · power
Mental modelWriting an inviteBeing walked through itOperating a control desk
Cognitive loadLow–med — grows as you expandLowest — one cluster at a timeHigh — everything visible
Speed, minimal Loop~15s, one surface~40s, four steps~8s, keyboard
Speed, full configMed — scroll + expandSlow — every stepFast — all in reach
Mobile fitGood — gets tallExcellent — thumb-sized stepsWeakest — stacks, loses preview
Error recoveryInline, edit anytimeReview step before commitLive preview catches it early
Shows all configs?Behind 3 disclosuresAcross steps 3–4All at once
Best median hostCasual, occasionalNervous first-timerFrequent, confident
Brand feelWarmest, most LoopReassuring, safeSharp, pro

A pragmatic route many products land on: ship Direction 01 as the default for its warmth and low floor, borrow the Guided Review step for confidence, and offer the Console as a “⌘K power create” for repeat hosts. The three aren’t mutually exclusive — they’re a spectrum you can grow along.


05 — The configs, up close

The details that make a Loop specific

The surfaces every direction shares — rendered here so you can see how the hard configs feel, with the real contract enums behind each.

reach · LoopReach

Who can join

Four levels, most-private first. Widen it any time from settings.

✉️ Invited
Link or named guests only
default
👥 Friends
Your friends
🔗 Friends of friends
One step wider
🌍 Public
Anyone on Loop
enabledModules · LoopModule[]

What’s inside

All three on by default. Toggle any off — turn on later without losing anything.

🖼WallPhotos & notes from everyone
🍲SpreadWho’s bringing what
ListsChecklists, shopping, votes
wall.layout · wall.defaultCardStyle

Wall style

Seven layouts, five card finishes. Set at creation in the Console, or in wall settings after.

Scatter
Hero
Timeline
Mosaic
Fresh
Loved
By person
Album
PolaroidMatteFilmKraftAlbum
goodToKnow · GoodToKnowCard[] · max 8

Good-to-know

Little cards that answer questions before guests ask. Seven kinds.

🅿️ParkingFree on Bellenden Rd after 6:30
🍷BringA bottle to share — no food needed
+ Seating+ Dress code+ Wifi+ Pets
IssueShareLink · scope · maxRedemptions

Share link

Issued after creation. Choose what a link-holder can do, and cap the seats.

ViewRSVP statusGrab a dishPost
🎟️loop.to/solstice-7fq212 of 20 seats left · expires in 5 days
schedule · LoopSchedule

When

One of three shapes — the input adapts to the kind you pick.

A dateDate & timeRepeating
Repeating uses a standard RRULE — “every 2nd Friday” and friends.