Redesign: Poppins, a two-step destination, and a splash that says what the app does

The effort pass, end to end. Every screen was run through one test — if I
remove this sentence, does the customer make a worse decision? — and the parts
that failed it are gone.

The flow

  Home ▸ BOOK ▸ Where is it going? ▸ When shall we collect? ▸ details ▸ booked

BOOK opens a sheet, not a form. The destination is browsed state-then-district
because a flat list of every serviceable district survives twelve and not
sixty, and search cuts across states because somebody who knows they are
sending to Chennai should not have to know which state it is in. Districts
multi-select, but only where the server allows it: BookingLimits advertises
maxDestinations: 1 until the Miler build keys on consignmentid, and a sheet
that ignored that would sell a booking the network cannot complete.

The pickup window is now a step the customer answers rather than a slot chosen
for them. A pickup window is a promise about somebody's afternoon.

What the screens stopped saying

Home lost the orb caption for returning customers and a four-cell live card.
Send lost the city strip, both address fields, the optional disclosure and
three sentences about charging — the route, the packages and the button are
what is left. Tracking lost a radar with a bike in it, a Milers-in-your-zone
count, a "Step 2 of 7" and a sentence describing the screen you were looking
at. The window sheet lost "Fastest pickup", "4 Milers nearby" and "Relaxed
evening handover".

Type

Poppins, which has no variable release — four static cuts, and the sans styles
set fontWeight alone because fontVariations on a static font is ignored in
silence. Every weight dropped a step and the tracking went deeper: Poppins is
built on near-circles and carries more ink than the humanist faces before it.

Objects

One lit sphere on Home, and the primary button now takes its gradient and rim
because a committing action that is not lit like the hero reads as a different
material. The tracking rail's connector is crimson as far as the parcel has
come, so the line is the progress bar. Confirmation is a white tick on green:
crimson is this app's action colour and that screen has nothing left to do.

Bugs found on the way

The OTP screen dropped digits. Four fields passing focus along lose a keystroke
that arrives mid-transition, so "1234" became "124" and the screen answered
"That code did not match" — blaming the customer for its own race. One field
now, four boxes that only draw.

Nothing ever asked for the customer's location: detectPickupLocation was the
OTP screen's job, so a restored session or an auto-login never triggered the
permission prompt and the pickup map had nothing to centre on.

The launcher icon and both splash screens pointed at a house drawn as two
vector paths — a placeholder that shipped.

The splash clock started when the widget was built rather than when it was
visible, so the truck got 0.45s of a 1.8s beat behind Android's own splash.
It waits on waitUntilFirstFrameRasterized now, raced against a timeout so a
binding that never reports one cannot strand the app.

Also: design/screens/ holds all 19 screens under readable names, tool/ has the
scripts that refresh them and rebrand the Lottie, and DESIGN.md is current.

flutter analyze clean. 88 tests, 1 skipped.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EqVJPB9B4QuieZnBAAKgYQ
This commit is contained in:
2026-09-22 17:45:54 +05:30
parent 8207e27a97
commit 06fa6b797a
107 changed files with 4597 additions and 2071 deletions

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 154 KiB

BIN
design/screens/04-home.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 633 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 494 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 455 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 358 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 416 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 221 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 258 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 377 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 296 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 415 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 213 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 KiB

48
design/screens/README.md Normal file
View File

@@ -0,0 +1,48 @@
# Screens
Every screen in the app, at 390×844 @3x, with the real fonts.
These are the golden files from `test/snapshots/`, copied here under readable
names so the set can be browsed, shared or dropped into a deck without anyone
having to know what a golden is. **`test/snapshots/` is the source of truth** —
this folder is a copy, and a stale copy is worse than none, so refresh it
whenever the design moves:
```bash
flutter test test/design_snapshot_test.dart --run-skipped --update-goldens
tool/screens.sh
```
They are rendered by the test harness rather than captured from a handset, so
they are identical on any machine and need no device attached. Two consequences
worth knowing: **map tiles are blank**, because the harness has no network and
CARTO is fetched live; and the data is `DevDoormileApi`'s, so the names,
addresses and references are invented.
| File | Screen | |
| --- | --- | --- |
| [`00-splash-animation.png`](00-splash-animation.png) | **Splash · first beat** | What the app does: a parcel on the road. |
| [`00b-splash-mark.png`](00b-splash-mark.png) | **Splash · second beat** | Whose app it is. Caught mid-cross-fade. |
| [`01-sign-in.png`](01-sign-in.png) | **Sign in** | One question, one field, one button. |
| [`02-sign-up.png`](02-sign-up.png) | **Create account** | The same shell, three fields. |
| [`03-verify-code.png`](03-verify-code.png) | **Verify the code** | One field behind four boxes that only draw. |
| [`04-home.png`](04-home.png) | **Home** | Welcome, the pickup address, BOOK, and the live booking. |
| [`05-pickup-search.png`](05-pickup-search.png) | **Collect from** | Changing the pickup address from the Home header. |
| [`06-orders-active.png`](06-orders-active.png) | **Orders · Active** | State, date, route, packages, reference. |
| [`07-orders-completed.png`](07-orders-completed.png) | **Orders · Completed** | Delivered orders and what they cost. |
| [`08-account.png`](08-account.png) | **Account** | Grouped rows, and the build this handset is running. |
| [`09-tracking.png`](09-tracking.png) | **Live tracking** | The live card, the map, the Miler, the journey rail. |
| [`10-cancel-pickup.png`](10-cancel-pickup.png) | **Cancel this pickup** | The one destructive action, behind a reason. |
| [`11-destination-states.png`](11-destination-states.png) | **Where is it going? · states** | Step one, with the state marks. |
| [`12-destination-districts.png`](12-destination-districts.png) | **Where is it going? · districts** | Step two. Multi-select where the server allows it. |
| [`13-pickup-window.png`](13-pickup-window.png) | **Pickup window** | The times, and nothing else. |
| [`14-send-a-parcel.png`](14-send-a-parcel.png) | **Send a parcel** | The route, the packages, the two commitments. |
| [`15-pickup-map.png`](15-pickup-map.png) | **Pickup point** | The map editor, and who the Miler asks for. |
| [`16-pickup-booked.png`](16-pickup-booked.png) | **Pickup booked** | White tick on green. The reference and the live search. |
| [`17-receipt.png`](17-receipt.png) | **Order details** | What was collected, weighed, photographed and paid. |
## Not here yet
**First-run Home** — the sphere's caption and the "How it works" rail only
appear for a customer with no orders, and the dev backend seeds three. It needs
a flag on `DevFlags` to capture, which is not worth adding for a picture.