# 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.