Experiment 0x3 / Apr 28, 2026

Progressive Form Flows

I saw a form pattern on Twitter that stayed with me. One step stayed active, the rest waited quietly, and the whole thing felt less like paperwork.

I first built a version in React Native. This is me rebuilding it for the web and seeing how far one flow engine can stretch.

Decision 01 / One Clear Job

I started with onboarding because everyone knows the shape of it. One step should ask for one thing, then get out of the way.

Account creation gives the engine a clean baseline: email, verify, password. If that feels noisy, the harder flows will be worse.

Example 01

what's your email?

verify your email

create a password

Decision 02 / Context Cues

Once the progression worked, I added context cues. Color and icons should tell you what kind of decision is coming, not just decorate the step.

Returns are a good test: item, reason, refund, drop-off. This example borrows from Amazon's Whole Foods return walkthrough, including the QR-based next step at the end.

Example 02

which item are you returning?

Select an item from your recent order.

why is it coming back?

how should we refund you?

choose a drop-off method

Decision 03 / Flexible Inputs

A real form engine cannot assume every step is a text field. I kept the shell steady and let the input surface change.

Agent setup is useful here: intent, data source, behavior, limits, permissions. Same flow, very different controls.

Example 03

what is the agent for?

Choose the workflow this agent should support.

connect a knowledge source

shape the behavior

set permissions

Decision 04 / Editable Defaults

Technical workflows need defaults, but they should not feel hidden. I wanted convenience with the important choices still visible.

This deploy flow borrows from Vercel's project import guide: import a repo, name it, add env vars, choose controls, deploy.

Example 04

import a repository

Select the repository you want to deploy.

name the project

add environment variables

choose deployment controls

Decision 05 / Progress Memory

The next step should remember what you just did. Choose a person, and the amount step names them. Enter the amount, and payment becomes the next question.

Money is a good place to test that memory because details matter. The flow follows the simple order in Wise's send-money guidance: who, amount, type, review. The payment step starts with a last-used Visa card and keeps the other options close.

Example 05

who should receive it?

Choose from your saved beneficiaries.

how much?

what type of payment?

review the transfer

Engine Notes

By the end this was not just an onboarding trick. It was a small flow system.

One focused decision at a time
Different controls for different kinds of decisions
Back navigation that keeps the user in control
Completed choices that can inform the next active heading
Motion and icons that communicate state without extra chrome

Outcome

What started as a saved design reference turned into a calmer way to handle form-heavy workflows.

The form still collects data. It just stops acting like it resents the person filling it out.

Next up

0x4 — Timed Brand Identity Concept