PAGE 04 · DEVELOP

Paper to pixels.
Three iterations.

Hand-drawn wireframes on dot-grid paper. Fast, ugly, decision-making. Then digital low-fi in Figma. Then mid-fi with the design tokens locked in. The cuts that mattered all happened on paper.

ON THIS PAGE

→ 01 · Paper wireframes (8 screens)
→ 02 · Five decisions made on paper
→ 03 · Digital wireframes (mid-fi)
→ 04 · Iteration narrative

01 · PAPER WIREFRAMES

Hand-drawn. Eight screens. Three candidates each.

Paper forced fast iteration: 3–5 versions of each screen in under 4 minutes per version. I produced ~24 sketches across these 8 screens. Below is the winning candidate per screen, preserved with annotations.

PAPER · ROUND 2 OF 3

Eight screens · dot-grid notebook · week 8

SVG with sketchy filter and handwriting font

02 · DECISIONS MADE ON PAPER

Five trade-offs that shaped the product.

The decisions that survived to high-fidelity were all made on paper. Pixels resolved questions of fidelity, but the architecture was set on dot-grid.

DECISION 01

One card or many on Home?

Tested three Home variants in gut tests with two reviewers. Single "today" card felt sparse. Five cards felt busy. Timeline-on-top + single card felt right. Winner: day timeline above, Today's Action card below.

DECISION 02

Where does the runway number live?

Sketched as persistent footer banner — anxiety re-trigger. Sketched buried in Money tab — under-served the daily-check pattern. Winner: tile on Home, below Today's Action.

DECISION 03

Severance Reviewer: long-scroll or card-deck?

Long-scroll efficient but encouraged skimming. Card-deck slower but ensured users actually read each clause. The "slow on purpose" principle won. Winner: swipeable card deck.

DECISION 04

Calm-mode visual differentiation

Sketched dimmer colors, sun-rising illustrations, sub-feed feeds. Winner was simplest: same layout as Day-4+, but with one card visible total. The minimalism is the message.

DECISION 05

Day 30 wrap-up tone

First sketch was celebratory "You did it!" with confetti. Crossed out — felt wrong. The user did not "win." The user survived. Redrew as quiet summary: what was done, what is pending, "we'll be here weekly if you want." This sketch became the design.

03 · DIGITAL WIREFRAMES

Mid-fi · grayscale · v3 (post-iteration).

Three iteration rounds happened before testing. v1 translated paper. v2 reduced visual density 30% after a "where's the calm?" critique. v3 added missing edge-case states.

DIGITAL · v3

Eight screens · ready for hi-fi

Figma · grayscale · iPhone 14 form factor

04 · ITERATION NARRATIVE

What changed between v1 and v3.

Screen	v1 → v3 change	Why
Splash	Removed illustration. Three-line copy: "We're sorry. Let's make this calmer. Begin."	Tone test ranked v2 calm-vs-corporate at 4.6/5 vs. v1 at 2.8/5.
Home Day 4	4 secondary cards → just timeline + runway tile + Calm Companion	Density critique: "where do my eyes go?"
Severance Reviewer	Long-scroll → swipeable card deck (one clause per card)	Long-scroll encouraged skimming. Slow-on-purpose principle wins.
Runway expanded	Big number + line chart → big number + simple horizontal bar	"The chart re-triggers anxiety every time I look at it."
Day 30 wrap-up	"You did it!" + confetti → "Day 30. You got through 30 days."	The user did not "win." They survived. Honest tone.

States added in v3 (not present in v1)

No-severance path — skips Severance Reviewer, surfaces "common to receive nothing if at-will" explainer with link to relevant state law.
Partner-not-working — runway calculator removes household income; surfaces "consider applying for state CHIP / family medical assistance" link.
State portal down — graceful "the state's portal is down. We've saved your draft" fallback with retry.
Mid-flow pause — all flows resume from last step.
Crisis disclosure — opt-in soft surface with crisis-line numbers if user mentions feeling unsafe.

Now the polish.

v4 in production fidelity — iPhone 14 Pro dark mode, 9 screens.

See the Final Designs →

Paper to pixels.Three iterations.