doormile_milderapp/MILER_FOR_STITCH.md

Miler — a design brief

A one-page description of the app, for handing to a design tool. Everything here is what the app is; the long engineering document is ABOUT_MILER.md.

---

1. What it is

Miler is the rider app for Doormile, a delivery company in Coimbatore, India. The office assigns work; this is what the person on the motorbike holds.

One rider, one phone, one shift: sign in, go on duty, collect parcels or meals, ride to doors, hand them over, and report each step as it happens.

Who uses it: a delivery rider, one-handed, outdoors, in direct sun, often wearing gloves, often in a hurry, phone clamped to a handlebar. Nothing on any screen should need to be studied. Every screen answers one question, big.

The one rule the whole app hangs off: one order = one bag. Five orders from a kitchen means five bags means five deliveries. Counts are always stated the same way — 5 orders · 5 bags — because a rider can check that against a shelf.

Two kinds of work, one app. Which one a rider sees is decided at login.

	Meals ("milk run")	Parcels (logistics)
The job	load at a kitchen, then a round of drops	collect from a customer, take it to the depot
Work tab is called	Deliveries	Bookings
Cash at the door	never	sometimes
Ends the day	at the last customer's door	back at the hub

---

2. Brand

Deep burgundy #800020. Used sparingly and always meaningfully: the app bar, the primary action, the selected state, and the one figure a screen is answering with. Never as decoration.

(The shipping app currently uses #960019, a hair brighter. Design with #800020.)

Palette

Role	Hex
Brand — bars, primary buttons, selected state	#800020
Brand tint — selection wash, icon backgrounds	#800020 at 10%
Success — delivered, collected, done, money	#00472C
Success tint — status chips	#00472C at 10%
Attention — skipped, late, needs a second visit	#8E5A00
Danger — cancelled, destructive	#BA1A1A
Page background	#F8F9FA
Card	#FFFFFF
Card border	#E5E7EB (1px)
Tonal block inside a card	#F3F4F5
Heading / figure text	#191C1D
Body / supporting text	#584141
Labels, timestamps, captions	#6B6B6B
Text on burgundy or green	#FFFFFF

Colour is never the only signal. Every state carries a word and an icon and a tint. A rider reading a scratched screen in sunlight must not have to tell two greens apart.

Type

Inter, or Poppins. Headings 600–700 with slightly tight letter spacing; body 400–500; small labels 500 with wide letter spacing. Numbers a screen is about (minutes away, parcels, money) are set at heading weight and size.

Use	Size
The screen's answer (a count, an ETA)	30–40
Screen title	22–28
Card heading (a customer's name)	16–18
Body	14–16
Caption / timestamp	12–13
Eyebrow label (DELIVER TO)	9–10, uppercase, letter-spaced

Shape, depth, spacing

• Big corners. Cards 24–28. Blocks inside a card 16–18. Chips, buttons and avatars fully rounded. Never a square corner.
• Flat depth. A card is white, a 1px #E5E7EB border, and a very soft shadow (0 4 20, 4% black). No heavy shadows, no glass, no blur, no gradients.
• Rhythm. 8 / 16 / 32. 14–16 margin down each side of the page, 16 padding inside a card. Nothing interactive touches the screen edge.
• Buttons are 56 tall, full width, fully rounded, white text on burgundy.
• Icon containers are circles or soft squares in a 10% tint of the icon's own colour.
• Status chips are a light tint of the status colour with darker text of the same hue.

---

3. The flow

  sign in → go on duty
      │
      ▼
   HOME  ── today's route, accept the work ──┐
      │                                      │
      ▼                                      │
   MAP  ── ride there, hand over ────────────┤
      │                                      │
      ▼                                      │
  DELIVERIES ── what is still in his hands ──┘
      │
      ▼
  ACTIVITY ── what he did today ── DELIVERY DETAILS (one record)

  ACCOUNT ── earnings, profile, help

Four tabs at the bottom, always: Home · Deliveries · Activity · Account.

A stop's life, in order:

assigned → accepted → arrived → picked up → out for delivery → delivered
└──────────── HOME ────────────┘ └────── DELIVERIES ──────────┘

---

4. The screens

Sign in

Phone number, then a 4-digit PIN. Brand-filled screen, logo, one big button.

Home — "what am I doing today?"

The rider's route for the day.

• App bar: Home, and an on-duty switch.
• A summary line: how many stops are left, how far, how long.
• Trip 1 · Trip 2 · Trip 3 — a segmented control; a rider gets up to three runs a day and each shows its own progress (Done, Active, 40%).
• The route: stops grouped under the kitchen or pickup point they belong to, each with a number, a name, an area, and a bag label.
• The rider ticks the stops he accepts; a bar at the bottom commits them.
• Tapping a stop opens the stop detail sheet.

Stop detail sheet (bottom sheet)

Everything about one stop.

• A numbered disc, the customer's name, Stop 3 of 8.
• A small map of the leg, with 2.0 km away · 6 min ride written across the bottom of it.
• Two figures side by side: DISTANCE and EST. ARRIVAL (the arrival in burgundy, large).
• DELIVER TO + the full address in a tonal block.
• TASK DETAILS — a card: Deliver 1 parcel · Photo of the parcel, with a call button on the right.
• Tonal tiles: order id, contact, bag, weight, booked slot.

Map screen — "get me there, then let me close it"

A full-screen map with the route drawn on it, and a sheet over the bottom 45%.

• Big: 6 min, then 2.0 km away · Arrive by 3:05 PM, and a green Picked up chip.
• A three-step rail: Collected → On the way → Delivered, in burgundy.
• The customer: initials avatar, name, order reference, a green call button.
• DELIVER TO and the address.
• One control, and it is a slide, not a button: slide to start delivery → sets off and opens Google Maps; then slide to deliver → photo (optional) → done.

Deliveries — "what is in my hands right now?"

The queue of parcels already collected.

• A route rail across the top: Trip 1 · 0 of 21 done.
• NOW — one big card: the stop being worked, with the only button on screen.
• UP NEXT — the next stop, quieter.
• LATER — one line each.
• SKIPPED sits above them all, with a way back in.
• A bar at the foot: 4 orders in hand · Start round.

Activity — "what did I do today?"

The shift log.

• A white pill floating over the burgundy bar: 28 delivered today.
• A segmented filter: All · Active · Completed · Cancelled, with a sliding white pill.
• Grouped by trip: a green tick disc, Trip 1, 28 delivered.
• Each stop is a card: an icon tile, the customer's name, the time on the right, the route line, and Delivered · Gandhipuram · 1h 44m — Delivered in green.
• Tapping one opens the record.

Delivery details — "prove what happened"

One finished stop.

• App bar: Delivery details, with the order reference on the right.
• Hero card: a green disc, Delivered, To dharaneesh; on the right the ETA, the actual time, and the day.
• Tonal tiles: TOTAL DELIVERY TIME, PARCELS, and — parcels only — ARRIVED AT HUB.
• Journey: a horizontal timeline — Assigned → Arrived → Out → Delivered, each with an icon and a time, the line green behind the rider and grey ahead. A View full log link opens the detailed vertical version.
• Under it, a tonal card: Delivered to customer, the address, 3m at the door.
• Proof of Delivery: the photograph, full width, with a View full button.
• Three folded rows at the bottom: Delivery details · Payment · Order details.

Account

Profile photo and name, a strip of figures (rewards, bookings, help), then grouped cards: Money (earnings), Account (edit profile, documents), Support (help, about, sign out).

---

5. Rules to design by

1. One question per screen, answered big. The count, the ETA, the outcome.
2. One primary action visible at a time. Never two buttons of equal weight.
3. Irreversible actions slide; everything else taps. Handing over a parcel and setting off under your own name are slides.
4. The exception is the only thing that gets colour. A day of 25 delivered stops must not be 25 green words with nothing left for the one that failed.
5. Never invent data. A missing time, distance or photo is simply absent — never a zero, never a placeholder, never a greyed-out "pending".
6. Empty states explain, they do not apologise. "No work assigned yet" with a way to refresh.
7. Legible at arm's length, in sun, at 2× system text size. Text can wrap or shrink; it can never be clipped.