setup

Summary

The launch route. Five rows, two of which drill down, and one button that deals.

Raw wireframe

• .context/designs/mobile/home/setup.html

Why it is drawn this way

There is no home screen, and that is deliberate. / is this screen. A party game is opened with five people already waiting, and the first thing anyone needs is the thing they are about to change. It lives in the home flow because home is the reserved name for the first screen after entry, whatever that screen turns out to be.

Checked against the market, not guessed. Imposter Who? (5M+ installs) launches straight onto four drill-down rows. imposter.app is one list and a Start button. Neither ships a home screen, and neither ships a three-step setup wizard.

An earlier version had four ways to start a game — NEW GAME, "Same 5 again", a category tile, and "All 10 →" — each landing in a different step of players → roles → category. Tapping a category set the pack and then asked for it again two screens later. One screen cannot contradict itself.

Two rows drill down, three do not. Players and Packs open a sheet because their content is unbounded — 20 names, 10 packs. Imposters, hints and the clock are one control each and stay here. A sheet for a stepper is a screen that exists to hold three taps.

The screen height never changes. Three players or twenty, one pack or ten, it is the same five rows. That is the whole reason the unbounded things sit behind a chevron.

The CTA states what is missing rather than greying out with no reason — "Add 1 more player", not a dead button. See the empty state.

Hints stay a row rather than becoming a buried preference. A hand-written hint for every word is the one thing no competitor advertises, because no competitor writes them. See packs.

The clock's "Off" is a link in the wireframe. Turning the clock off is the only control in the product that produces untimed, so it is what opens it.

Related

• players
• packs
• untimed
• card
• how-to-play
• settings

Sources

• .context/designs/mobile/home/setup.html
• src/app/index.tsx
• src/lib/roles.ts — MIN_PLAYERS, maxImposters, describeProblem