← Biller case study Rashmi Kumari · rashmiux.in

Biller.app · design lane · mid-fi wireframe · rev 3

Billing screen

Built from the owner's rough, re-thought around the field study (#687–#702): the cashier's screen is the waiter's item picker, big targets, tap-driven, keyboard only for search. Real tokens (graphite / heat amber, no shadows, 44px floor), real dishes, real prices. Frames are drawn 1:1 — 44px in here is 44 real pixels.

Default flow shown throughout is quick bill + kitchen (per-table default, #687). Numbered badges map to the notes at the bottom.

Rev 2 carries the owner's review: rail is Tables / Bills / Kitchen / On-off / Admin, the top-bar flow chip is gone, the bill header gains a Back button, credits use the existing progress ring, search scopes to dishes and categories, picker cards carry a photo thumbnail, and customer capture is drawn as two options to choose between.

Rev 3 carries the field-study feedback: kitchen-stage language (cooking / served / late) is gone from bill lines, the heat strip and the notes — simple flows only ever know Not sent / Sent to kitchen, because paper KOTs mean the app can't see the stove; On-off is renamed Out of stock, plain availability language, switch on = available; a new Bills screen fills the rail's second slot, with Open / Completed / Due status chips and at least one credit bill; and Complete never blocks on printing — it auto-prints the customer receipt the first time, and never reprints once one has gone out.

Table 7 · Bill #1042 · 5 lines · Rs. 1,732.50 — the same bill in every frame on this page.

01

Desktop — 1280

The rough's single scroll column becomes a picker + bill split. Everything else keeps the rough's vertical order: bill header → search → categories → items → customer strip → sticky footer.

Desktop 1280 · quick bill + kitchen · 5 lines on the bill, 2 not yet sent
2 3 5 4 1 12 14 15 17 19 20 7 9 10 11 18 16 21 6 8 26 25 13
Spice Route Koramangala 5th Block · tap to switch outlet
🔔3
240 credits
left
Tables
📜Bills
🍳Kitchen
Out of stock
Admin
?Help
Settings
👤Ravi
Tables #1042 Table 7 seated 12 min ago Open Move to another table Split / merge
Starters 18 Main course 24 Breads 9 All 11 categories Veg only Combos
Most ordered here · today
Paneer Tikka
Rs. 280 2+
Chicken Tikka Spicy
Rs. 320+
Hara Bhara Kabab
Rs. 260+
Starters · 18 dishes
Veg Manchurian (dry)
Rs. 240+
Masala Papad
Rs. 80+
Chilli Chicken
Rs. 330+
Mutton Seekh Kabab
Rs. 420Out of stock
Press and hold to mark available
Crispy Corn
Rs. 230+
Dahi Ke Kebab
Rs. 270+
Main course · 24 dishes
Butter Chicken
Rs. 380 1+
Dal Makhani
Rs. 290 1+
Shahi Paneer
Rs. 310+
On this bill 5 lines · 9 items
Not sent to kitchen 2 lines
Butter Naan
Rs. 60 each
4+ 240
+ Note for the kitchen
Jeera Rice
Rs. 180 each
1+ 180
Sent to kitchen 3 lines
Paneer Tikka
Rs. 280 each · sent 14 min ago
×2 560
Butter Chicken
Rs. 380 each · sent 6 min ago
×1 380
Less spicy, no cream on top printed on KOT
Dal Makhani
Rs. 290 each · sent 22 min ago
×1 290
SubtotalRs. 1,650.00
GST 5%Rs. 82.50
Discount Charges Round off
Add customer details opens upward ▴
Total to collect Rs. 1,732.50
Print KOT2 new lines · 5 items
Print billcustomer copy
Completetake payment & free Table 7
Not sent to kitchen Sent to kitchen Only two states, on purpose — paper KOTs mean the app can't see cooking or served status, so it never claims to. The 6px left edge is the app's existing heat bar (--exp-edge-w / --exp-heat-*) — nothing new invented.
02

Mobile — 390

One column can't hold two. The bill column collapses into a pull-up strip that sits directly above the footer — the total and how much of the bill is still unsent stay on screen at all times, the picker keeps full width. Tap the strip and the bill covers the picker.

390 · picker with the bill collapsed ← default
23
Spice Route Koramangala 5th
🔔3
240
#1042 Table 7 Open
seated 12 min ago Move table More
Starters 18 Main 24 All 11
Paneer Tikka
Rs. 2802+
Chicken Tikka
Rs. 320+
Hara Bhara Kabab
Rs. 260+
Masala Papad
Rs. 80+
Mutton Seekh
Rs. 420Out
Crispy Corn
Rs. 230+
Dal Makhani
Rs. 2901+
Dahi Ke Kebab
Rs. 270+
On this bill
Rs. 1,732.50
Add customer details
Print KOT2 new
Print billcopy
Complete · Rs. 1,732.50
Tables
📜Bills
🍳Kitchen
More
390 · the same bill, strip pulled up
Spice Route Koramangala 5th
🔔3
240
#1042 Table 7 Open
On this bill
5 lines · 9 items
Not sent to kitchen 2 lines
Butter Naan
Rs. 60 each
4+ 240
+ Note for the kitchen
Jeera Rice
Rs. 180 each
1+ 180
Sent to kitchen 3 lines
Paneer Tikka
sent 14 min ago
×2 560
Butter Chicken
sent 6 min ago
×1 380
Less spicy, no cream on KOT
Dal Makhani
sent 22 min ago
×1 290
SubtotalRs. 1,650.00
GST 5%Rs. 82.50
DiscountCharges
Add customer details
Print KOT2 new
Print billcopy
Complete · Rs. 1,732.50
03

Footer per flow mode

The table's flow mode (#687) is the only thing that changes the footer. The total never moves, and there is exactly one filled amber button in every variant.

Quick bill — no kitchen (takeaway counter, chaat stall)
Total to collectRs. 1,732.50
Print billcustomer copy
Completetake payment
22Default → Quick bill + kitchen — the KOT prints on its own when the kitchen is informed
Total to collectRs. 1,732.50
Print KOT2 new lines · 5 items
Print billcustomer copy
Completetake payment & free Table 7
36Same table, before any receipt has printed — Complete still works
Total to collectRs. 1,732.50
Print KOT2 new lines · 5 items
Print billcustomer copy
Completetake payment · prints receipt

Complete is never blocked on printing. Nobody tapped Print bill yet, so Completing prints the customer receipt automatically — the cashier never needs a second step to remember.

Advanced — today's staged CTA, unchanged
Total to collectRs. 1,732.50
Savestage 1 done
Inform kitchenstage 2 of 4 · 2 new lines
Print billafter kitchen
Settleafter bill

Only advanced mode has kitchen screens, so only advanced shows stage wording. Quick modes never claim to know cooking or served status — a bill is just Open, and a line is just Not sent or Sent to kitchen.

04

Customer details — four states, two options

One button, closed by default, expands upward from the footer (#696). Name first; the phone box only appears once we know this is somebody new. GST, birthday and anniversary stay behind more — a cashier at a queue never opens them.

State 1 · closed — the default
Add customer details
Complete

Nothing to skip, nothing to dismiss.

State 2 · open — one box, nothing else
Customer optional
Name Start typing

We'll look them up as you type.

Close
Complete
State 3 · match found — pick, don't type
Customer 3 matches
Name Ra
Rahul Sharma
98••• 43210
12 visits
Rajesh Kumar
99••• 87215
3 visits
Ramya Iyer
90••• 11208
1 visit
+ Nobody above — add as new
State 4 · new person — phone appears
Customer new
Name Rakesh Nair
Phone · new box 98450

Only so the bill can reach them.

More details

GST number, birthday, anniversary

Two ways to ask — pick one

Same four states above; the difference is what Complete does when there's no name. Either way the name prints on the receipt when it's there. Our pick: B — a counter at 8pm will type “.” to get past a hard gate, and junk names are worse than no names.

29Option A · required — no name, no Complete
Add customer details no name yet
Total to collectRs. 1,732.50
Print billcustomer copy
Completeadd customer name to complete

Every bill carries a name — and at a queue you get “a”, “x”, “cash”. Guaranteed capture, unreliable data. Phone stays optional.

30Option B · nudge — Complete always works
Add a name — it prints on the receipt, and a phone sends them the bill on WhatsApp. Add name
Add customer details optional
Total to collectRs. 1,732.50
Print billcustomer copy
Completetake payment & free Table 7

Only real names get in, and nothing slows the counter — at the cost of some bills having no customer at all.

05

Supporting states

The five places the rough left as a dashed box or didn't reach.

“All 11 categories” expanded — the waiter screen's own grid
Categories tap one, panel closes
Starters18 Tandoor12 Main course24 Breads9 Rice & biryani11 Chinese14 South Indian16 Combos6 Beverages16 Desserts7 Extras5 Veg onlyfilter
Tap the quantity → 10-key pad (party of 14)
Butter Naan Rs. 60 each
Quantity 14
1
2
3
4
5
6
7
8
9
0
Set

Rs. 840 · no hardware keyboard anywhere in this flow.

Entry point: a plain table grid, no floor map
Tables 4 open bills
1Free
2Free
3Rs. 6406 min
4Free
5Rs. 1,18034 min
6Free
7Rs. 1,73212 min
8Rs. 2,9401 hr 20 min
+ New takeaway bill

Time reads “34 min”, never a timestamp. Amount on the tile so a manager can scan the room.

32Bills — the rail's second screen, history and dues in one list
Spice Route Koramangala 5th Block · tap to switch outlet
🔔3
240 credits
left
Tables
📜Bills
🍳Kitchen
Out of stock
Admin
?Help
Settings
👤Ravi
Bills 6 today · Rs. 9,822.50
Today Date range
#1042Table 7
12 min ago · 5 items Rs. 1,732.50 Open
#1041Table 5
34 min ago · 4 items Rs. 1,180.00 Open
#1040Counter
1 hr ago · 2 items Rs. 340.00 Completed
#1038Table 2
3 hr ago · 6 items Rs. 2,120.00 Completed
#1036Table 4
5 hr ago · 3 items Rs. 890.00 Due
#1032Counter
7 hr ago · 8 items Rs. 3,560.00 Completed

33Today defaults on, date range and search sit beside it — the same search idiom as the picker, scoped to bills instead of dishes.

34Three status words, nothing invented: Open (still on the floor), Completed (paid and closed), Due (closed on credit, balance still owed).

35Due = a credit bill — #1036 above, closed without full payment. The whole row is the tap target (≥44px) and opens the bill to collect the balance.

27Out of stock — the rail's own screen for what's 86'd
Out of stock 3 out of stock today
Find a dishType a name
Mutton Seekh Kabab
Starters · Rs. 420
Out of stock
Paneer Tikka
Starters · Rs. 280
Prawn Koliwada
Starters · Rs. 460
Out of stock
Butter Naan
Breads · Rs. 60
Gulab Jamun
Desserts · Rs. 120
Out of stock

The whole 56px row toggles — switch ON = available, OFF = out of stock. An off row dims and carries the tag, never disappears. Everything off here shows dimmed on the billing screen too, never hidden.

28Admin — a second level beside the rail
Admin open · the counter stays behind it
Tables
📜Bills
🍳Kitchen
Out of stock
Admin
?Help
Admin ×
Menu & dishes
Insights & reports
Inventory
Expenses
Team & roles
Printers & peripherals
Taxes & charges
Outlet & tables
Plan & credits

Everything that isn't the counter lives one level down, so the rail stays at five and a cashier never scrolls past it.

06

What changed against the rough, and why

Badge numbers on the frames above map to these. Everything not listed here is the rough, kept.

1Sidebar → 76px icon rail: Tables, Bills, Kitchen, Out of stock, Admin — Help, Settings, Profile at the foot. Rev 2, renamed rev 3.
2Outlet name shows the area and a caret. The rough's “clickable” wasn't visible — now it looks like a switch.
3Top-bar flow chip removed. The footer already says which flow this table is on — one source of truth, one control fewer. Rev 2 decision.
4Credits use the app's existing progress ring with the count inside — same component as today, no new chip. #689, rev 2.
5Bell carries an unread count, so it's worth looking at — or it isn't.
6Time reads “seated 12 min ago”, never a clock time. #696, plain terms.
7Move to another table lives in the header — reachable without a menu dive. #696.
8Status is one plain word (“Open”). Stage wording only exists in advanced mode.
9The rough's biggest hole: no bill. Added a 392px bill column beside the picker — a cashier must see what's being charged.
10Bill splits into “Not sent” / “Sent to kitchen” so what Print KOT will send is visible before printing.
116px edge per line marks send-state only (not one banner): amber = not sent, neutral = sent to kitchen. Rev 3 — no cooking/served/late tracking in quick flows; paper KOTs mean the app can't see the stove, so it doesn't pretend to.
12Search scopes to dishes and categories only — bills are found on the Bills screen. The placeholder says exactly that. Rev 2.
13Category chips carry counts; “Show more” → “All 11 categories” opening the waiter screen's grid. State 05.
14Veg / non-veg mark on every card and every bill line, always, never behind a toggle. #694.
15Card = one big tap to add 1; the stepper replaces the + in place at qty ≥ 1, and the card tints amber. Name and price stay the loudest thing on it.
16Tap the quantity for a 10-key pad — party orders without a keyboard. State 05.
17Out-of-stock stays visible, dimmed, price struck; press-and-hold restores it for staff. #697 — hiding it makes cashiers ask the kitchen.
18Per-item note sits on the bill line, where it's read back to the guest, and states that it prints on the KOT. #696.
19Customer details: one button, closed, expands upward — kept exactly as the rough drew it. Section 04.
20Total moved into the sticky footer. Money and the buttons that act on it belong in the same reach.
21One filled amber button per screen. Complete is filled; the two prints are outlines — a mis-tap can't close a bill.
22Footer adapts to the table's flow mode; buttons carry what they'll do (“2 new lines · 5 items”). #687, Section 03.
23Mobile: the bill column becomes a pull-up strip above the footer — total and send-status always visible, picker keeps full width.
24Tonal-flat throughout: surface 0–3 ladder, hairlines, zero shadows, 44px minimum on every target, both themes.
2544px photo thumbnail where a dish has one — card height is unchanged, and dishes with no photo close the gap instead of showing an empty box. Rev 2.
26Back button names where it goes (“← Tables”) — the screen you came from, not a bare arrow. Rev 2.
27Out of stock is its own rail screen: find the dish, flip it — on = available, off = out of stock; the whole 56px row is the target. #697, renamed rev 3, Section 05.
28Admin opens a second level beside the rail — menu, reports, team, printers, taxes, plan. The rail stays at five. Rev 2, Section 05.
29Option A — required: guaranteed capture, but queue pressure turns it into “a” and “cash”. Section 04.
30Option B — nudge (our pick): clean data only when it's given, zero counter friction; some bills stay nameless. Section 04.
31A-or-B belongs in outlet settings, not the product — a fine-dine counter and a 40-cover canteen want different answers. Name prints on the receipt either way.
32Bills joins the rail as its own screen — every bill today, not just the one on screen. Rev 3, Section 05.
33Today is the default filter, date range and search sit beside it — the picker's own search idiom, scoped to bills. Rev 3, Section 05.
34Three status words, nothing invented: Open, Completed, Due — no stage language, matching the bill column. Rev 3.
35Due = a credit bill closed without full payment. The whole row is the tap target (≥44px) and opens the bill to collect the balance. Rev 3.
36Complete never blocks on printing. Printed already → no reprint. Never printed → Complete auto-prints the receipt. WhatsApp send is unaffected either way. Rev 3, Section 03.

Mid-fi wireframe — layout, spacing, hierarchy and real tokens are load-bearing; icons are placeholders. Seeds the owner's final design; not a build spec.