production
This commit is contained in:
227
MILER_FOR_STITCH.md
Normal file
227
MILER_FOR_STITCH.md
Normal file
@@ -0,0 +1,227 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user