User flows, de kaart voor de schermen, de edge cases opgeschreven.
De meeste producten eindigen met schermen die niemand koos in een volgorde die niemand besloot, omdat de flow nooit getekend werd. Wij mappen de user-flow eerst: states, beslissingen, branches, failure-modes. Het scherm-design wordt het visuele antwoord op een vraag die al duidelijk gesteld is.
Wat we bouwen
Flows die elke state bevatten, geen alleen het happy path
Sign-up flow met de email-taken branch, de email-not-verified branch, de OAuth-cancelled branch. Het flow-document is de spec voor wat er gebeurt als dingen niet goed gaan, geen alleen wanneer ze dat wel doen.
Decision-points benoemd en geconsequeerd
Bij elke vork benoemt de flow de vraag, de opties en wat elke optie downstream kost. 'Vragen we hier om X of stellen we het uit' wordt beantwoord in de flow, geen in de design-review drie weken later.
Failure-modes in het design opgenomen
Netwerk down, validatie gefaald, third-party-down, rate-limited, out-of-stock. Elke failure-mode heeft een flow-entry die benoemt wat de gebruiker ziet en wat ze kunnen doen. Het product faalt niet stil.
Cross-surface flows vastgelegd
Web naar email naar web flows. Web naar mobile-push naar mobile-deep-link flows. Multi-step flows die over oppervlakken spannen worden volledig getekend zodat de handoffs werken.
Flows gereviewd voor schermen ontworpen worden
Softwarebouw, PM, support en CX wegen allemaal mee op de flow voor een scherm gepolished wordt. Goedkoop om een vak in FigJam te veranderen; duur om een scherm in Figma te veranderen.
Source of truth voor de spec
De flow wordt de canonical referentie voor wat het product moet doen. PMs linken naar flow-nodes in tickets. Engineers refereren de flow bij scoping. De schermen volgen; de flow leidt.
Waar dit past
Je product heeft schermen die meestal werken maar het tussenin (loading, errors, edge cases) werd per scherm uitgevonden door wie het leverde op.
Je sign-up funnel heeft onverklaarde drop-off en je hebt geen flow-diagram om tegen te onderzoeken.
Je team scopet een nieuwe feature en de engineers schatten tegen design-mocks in plaats van een flow.
Tech stack
- Figma
- FigJam
- Whimsical
- Flow Diagrams
Wil je dit voor je team?
30 minuten met een oprichter of ervaren ontwikkelaar. We bepalen wat je nodig hebt en zeggen je eerlijk of Stacklane past.
Plan een gesprekVerwante capabilities