Tripbooks design system / lab 03 / status and the funnel

Lab 03 / the badge system you ruled

Nineteen statuses, five marks.

Counted from the modules rather than estimated. Customers carry three statuses, enquiries six, quotations five, bookings six. Nineteen distinct labels, and they all appear in registers that sit one click apart, so they have to belong to one another.

Nineteen separate badge designs is a legend nobody learns and a maintenance job nobody wants. So the badge is built from two independent dimensions instead: fill says whether a clock is running, colour says whose move it is. Five marks, learned once, and every one of the nineteen reads exactly.

01 / the two dimensions

Fill answers "is anything happening". Colour answers "whose move".

Fill inherits the rule you already adopted, solid for settled and hatched for open, and extends it with an outline for records where no clock is running at all. Colour is doing one job only, and it is the job an operator actually asks a register.

Fill: is a clock running

The rule you ruled in Lab 01, carried into every badge on the platform. Legible in a screenshot, in a print, and to eyes that do not separate hues.

OutlineNothing is owed and no clock runs
HatchedOpen, in flight, a clock is running
SolidSettled, terminal, nothing more will move

Colour: whose move it is

Five dispositions, and every status on the platform belongs to exactly one. An operator who learns these five can read a status they have never seen before.

RestingExists, nobody owes anybody anything
OursWe must act, and the delay is ours
TheirsWaiting on a customer or a supplier
WonSettled with value
EndedSettled without value
Why this pairing and not another

Every other split I tried collapsed. Grouping by record type gives four families that mean nothing to a reader. Grouping by good and bad puts "Sent" nowhere. Grouping by lifecycle position makes "Active" and "Confirmed" look identical when one is a relationship and the other is a contract. Whose move it is, is the only question that survives all nineteen and it is the question an agent actually has.

02 / all nineteen

The whole platform's status vocabulary, on one sheet.

On paper · light theme
Customerrelationship
Active Prospect Inactive
Enquiryrequirement
New Qualifying Ready to quote Converted Lost Spam
Quotationthe promise
Draft Sent Approved Accepted Expired
Bookingthe contract
Draft Issuing Confirmed In service Completed Cancelled
On graphite · dark theme
Customerrelationship
Active Prospect Inactive
Enquiryrequirement
New Qualifying Ready to quote Converted Lost Spam
Quotationthe promise
Draft Sent Approved Accepted Expired
Bookingthe contract
Draft Issuing Confirmed In service Completed Cancelled
The palette, and why it is dull on purpose

Deep azure for ours, ochre for theirs, forest for won, brick for ended, graphite for resting. Five hues at low saturation, chosen so that a register with forty rows of badges does not look like a christmas tree, and so that a booking that is genuinely on fire can still shout above them later. The bright end of every hue is deliberately unspent, because severity, drift and breach still need somewhere louder to live.

03 / the control

The same sheet with the colour taken out.

This is what a screenshot, a printed report and a colour-blind reader get. Fill still carries the whole "is a clock running" dimension, so the sheet does not collapse, but "Sent" and "Qualifying" become indistinguishable without reading them. That gap is exactly what colour is buying, and it is worth knowing the size of it.

Fill only · no hue
Customer
ActiveProspectInactive
Enquiry
NewQualifyingReady to quote ConvertedLostSpam
Quotation
DraftSentApproved AcceptedExpired
Booking
DraftIssuingConfirmed In serviceCompletedCancelled

04 / the real test

Both new parts inside the ledger you chose.

Thirty-one pixel rows, unchanged from R1. The badge sits in a 17 pixel box so the row height never moves. E, Q and B have collapsed from three columns into one, because the funnel bar carries the shape and the mono numerals carry the exactness. That is two columns of width recovered, spent on making the register readable rather than longer.

CustomerTypeStatusLast booking Enquiry · quote · bookingTotal spendOutstandingRSSAgent
Sterling Capital GroupCCN-1001CorporateActive24 Jul 2026 57·53·47 2,453,870386,7209 Over-growthSarah Mitchell
Crestview PartnersCCN-1004CorporateInactive22 Jul 2025 38·30·25 1,560,00006 TypicalSarah Mitchell
Aurora Travel PartnersACN-3001AgencyActive23 Sep 2025 23·18·15 940,07507 StrongEmily Rodriguez
Mr. Jonathan PierceICN-2007IndividualActive12 Jul 2026 24·18·14 803,46556,8708 StrongJames Carter
*** M***** H*****ICN-2044***Withheld*** ***************
Globe OTA HoldingsACN-3009AgencyProspect13 Jan 2026 22·13·8 58,90006 TypicalSarah Mitchell
Northgate EquityCCN-1031CorporateActive04 Jul 2026 9·9·7 46,9876,0907 StrongJessica Thompson
Silverline LogisticsCCN-1040CorporateInactive10 Feb 2025 10·5·4 38,67604 DevelopingOlivia Bennett
Ms. Jennifer CarterICN-2011IndividualInactive08 Jul 2025 6·4·2 28,90004 DevelopingSarah Mitchell
Brooks Travel CoACN-3006AgencyBlacklisted02 Apr 2025 18·11·4 22,4001955 DevelopingNour Haddad
Ms. Leila SaabICN-2019IndividualActive18 Dec 2025 9·4·4 10,57305 TypicalNour Haddad
Vertex Trading FZECCN-1019CorporateProspect12 Jun 2026 3·3·1 AED 25,700AED 17,1603 At riskSarah Mitchell
12 of 43 shown219·168·1315,970,846449,875
Three things this proved

One, badges do not cost row height: the row is still thirty-one pixels. Two, the register now scans on colour, which is what you wanted, and the eight Active and Inactive customers separate at a glance without reading a word. Three, the private row is a problem the badge system just solved by accident. It used to read three asterisks in a status column, which looks like broken data. Now it reads "Withheld" in a dimmed resting badge, which looks deliberate.

05 / the funnel as a platform primitive

One shape, four sizes, everywhere three stages narrow.

You ruled it a primitive, so here is the whole family. The rule that keeps it honest: the first segment is always the whole, so the bar is a share of what came in and never of the widest bar on screen. Two funnels in different rows are directly comparable, which is the entire point.

Inline · register row

57·53·47

52 pixels wide, 8 tall, fits a 31 pixel row. The default.

Inline · weak conversion

18·11·4

The same customer count, a collapsing shape. This is the read the three bare numbers never gave you.

Inline · no denominator

0·0·0

Never nought per cent. An empty outline and three zeros, and the row sorts last in both directions.

Inline · perfect

4·4·4

A 4 of 4 must not read like a 38 of 40. The numerals are always beside the bar for exactly this.

Block · record page

Stacked on a customer profile or an enquiry overview, where there is room to label each stage.

Board · dashboard

2,224 · 1,533 · 1,079 across the whole book. The same grammar at the top of the platform.

Where else it goes

Quoted to issued to delivered on a booking. Raised to in progress to resolved on the service desk. Invoiced to received to settled on a customer balance. Searched to attached to sold on the marketplace. Every one of those is three stages that narrow, and every one of them is currently three unrelated numbers on a row.

What I need from you

Four things, and the palette is the big one.

  1. The five dispositions. Resting, ours, theirs, won, ended. If this holds, every future status in every future module gets its colour by asking one question instead of by a design decision. If any of the nineteen sits in the wrong bucket, now is when it is cheap to move.
  2. The palette itself. Azure, ochre, forest, brick, graphite, all deliberately low saturation so that the loud end of each hue stays free for severity and breach. Too dull, right, or should the accent be something with more of a signature?
  3. Blacklisted became a status. In the current product it is a separate flag living inside the status filter. On this sheet it reads as an ended badge and it is the clearest thing on the row. That is either a simplification worth taking or a conflation worth refusing, because a blacklisted customer is still Active in the relationship sense.
  4. Two columns recovered. Collapsing E, Q and B into one funnel column freed real width. Spend it on more columns by default, or keep the register narrower and let it breathe.