228 lines
9.2 KiB
Markdown
228 lines
9.2 KiB
Markdown
# 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.
|