Stepo Design

Private design gallery. Enter the passphrase to view.

Stepo · Design

Share the journey, one step at a time

Stepo's UI is built around one mechanic: a step is live for 24 hours, and stepping with it while it's live is how support becomes recognition — Starter, Companion, Celebrator. Live cards glow and count down, past cards stay vivid but go quiet, and every badge is a person you stepped with, never a number.

Starter · marigold Live · tangerine Celebrator · rose
Read the design notes
The app
50 screens — the plan the Flutter build follows.

You & your people

12Identity, recognition, and the people around you.
profile
Who did I support, who supports me? — the two door tiles, journey filmstrips, and your on-air strip.
profile steps
The Steps tab — an Instagram-style media grid with the design's semantics: live, first and final steps ringed.
profile other
Someone else's profile — Follow states, a visit-time on-air moment, and tappable doors that open the unranked visitor lists.
badges visitor
People Lena showed up for — the visitor state of the one Badges page: the same public stat band and "Shows up most for" peak the owner sees, minus the owner's private drill-in, over the shared unranked rows.
supporters visitor
People who showed up for Lena — the visitor state of the one Supporters page: the same public stat band and public podium the owner sees, plus your own private standing, over the shared unranked rows.
stats room
The private stats room — the owner-only complete ladder behind the Supporters and Badges drill-ins: absolute ranks, exact unique-step counts, ties that tie (two 5s, then a 7), and a pull-only footer. Never public, never notified.
profile locked
A private account, seen from outside — public metadata, one kind lock card, the Requested state, and nothing that leaks.
badges
People you showed up for — the owner state of the one Badges page: a public stat band and a public "Shows up most for" peak over the shared, unranked list, with your full outward record kept in a private drill-in.
badge reveal
A badge just arrived — the full-screen discovery moment: one saturated pill, the memory line, no share, no next-tier. Arrival only.
journey people
Who became part of this journey? (V1.1) — the journey-scoped people page: role filters, relationship language, milestone citations; no ranks, ever.
supporters
People who showed up for you — the owner state of the one Supporters page: a public stat band and a public podium (top three, exact counts, crown) over the shared, unranked list, with your full ranked list kept in a private drill-in.
followers
My people — followers/following with relationship-first captions and real follow states (mutual, follow back, requested, remove).

Spec & brand

9Reference sheets, not app screens.
notifications board
The notification spec — every trigger, recipient, copy line, media rule and tap destination; push anatomy, the priority ladder, badge model, and the never-send list.
milestones board
The milestone spec (V2) — a landmark, not a reward: mark/unmark flows, the quiet feed chip, the acknowledgment moment, the Companion citation, and the bright lines.
people card board
The people-card spec — every state a role row can hold: a zero is never a digit, a chevron promises a page, and the ground carries the same tense as the tile (your role's wash, grey once a row is empty and settled, paper while it is still possible).
states empty
The reviewer's first five minutes — empty Activity, empty profile, and a failed search that stays honest: no nags, no filler, doors at zero.
states error
Errors & dead ends — when something breaks the app gets quieter, not louder: ink not red, one Retry per state, and deleted vs blocked render the identical closed door.
media viewer
The media viewer — a lightbox, not a surface: one X, one caption line, sound on by intent, swipe-down to leave; no social actions, no download.
step sheet
The step's overflow sheet — a sheet earns its rows: Share, the quiet milestone toggle, Delete in danger ink; Report step on others'; the dead taps and per-step notifications cut.
step people
The per-step guest book: one sheet for everyone, with a While it was on air section and a public After it aired section. Same room, viewer-graded ink: owners see act glyphs and timing on the rows, visitors see plain shuffled faces.
icon
The mark, decided — the picked tangerine icon in its settings: home screens, iOS light/dark/tinted, notification, in-app chrome, splash.