Pathwise

Manuals / Figma / Chapter 10

C · Systems · intermediate · Week 2 · Chapter 10 of 13

Prototyping flows

Prototype to communicate — not to impress. Link login → home, error states, simple overlay. Smart animate optional.

Path progress
72%

Step 1 of 3

Happy path

Login button → navigate to home. Use dissolve or smart animate 200ms.

Happy pathDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Happy pathdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Prototype login → home. Set flow start on login.

Was this step clear?
Chapter learning outcomes
  • Connections
  • Interaction details
  • Overlays
  • Flow starting points

Clear these before you leave

Side quest

User test lite

Ask one person to complete login in prototype. Note where they hesitate.