Lab 02 · The register · rebuilt on Untitled UI

The screen that has to survive first.

All Customers, three ways. Real seeded data: twelve rows drawn from the 214 in the book, with the real totals underneath, $21,558,179 of lifetime spend and $830,025 outstanding. The spread is deliberate. A $2.4M corporate sits four rows above a $1,028 individual, one row is a private record you may not read, and one books in dirhams while the branch books in dollars.

Same ten columns, same figures, same toolbar in all three. Still no colour: it is topic five, and a register that only works in colour is a register that fails in a print, a screenshot and a colour-blind pair of eyes.

The screens, rebuilt

Drawn fresh from the Untitled kit and the system’s ruled tokens, not restyled from the originals.

The register · rebuilt on Untitled
Search customersFiltersViewsColumnsAdd customer
CustomerReferenceTypeStatusTotal spendE · Q · B
SCSterling Capital Groups.whitlock@sterling.exampleCCN-1001CorporateActive2,453,87057·53·47
BTBrooks Travel Co STOPCCN-1021AgencyActive396,41022·14·9
*** M***** H***** PRIVCCN-1044PrivateWithheld••••
ANAl Noor Trading FZECCN-1078 · DubaiCCN-1078CorporateProspectAED 58,90022·13·8
Page 1 of 16PreviousNext
Skeleton rows at exactly 44px · no shimmer
The peek
Sterling Capital Group
ReferenceCCN-1001
TypeCorporate
OwnerS. Mansour
Open balance$46,900.00

Four facts, no actions. A peek that can do something is a menu, and a menu that opens on hover is a trap.

The reasoning, kept

What to watch

Read the RSS column. "9 Over-growth" against "3 At risk" is instantly clear as language and completely flat as a scan: you cannot see the shape of the book without reading every row. That is the exact cost of this position, and the question is whether it is worth paying for the extra rows on screen.

An honest defect, left in on purpose

Look at the inline spend bars below row four. The book is a long tail: one customer at $2.4M and eight under $60,000, so every bar after Pierce is a stub and tells you nothing except "small". Magnitude bars inside a row only work on data that is roughly evenly distributed, and an agency book never is. If you like this direction, the bar has to go or change to a rank, a band or a share of the filtered set. That is what the lab is for.

What it buys and what it costs

Buys: the funnel bar makes conversion visible without arithmetic, a 22% agency stands out instantly against a 82% corporate, and every row is legible without reading a column header. The AED row is unmistakably a different currency because the amount sits alone rather than in a column of dollars. Costs: nine rows fit where the ledger fits twenty-two, sorting by a fact that is not one of the four zones needs the Columns menu, and a row this tall is a scroll on a laptop.

What this lab asked

  1. Density against shape. R1 fits twenty-two rows and makes you read them. R3 fits nine and makes you see them. R2 tries both and the long tail defeats its inline bars. There is no neutral answer: this decides how a person works in Tripbooks all day.
  2. Is the funnel bar a keeper? Three numbers that already exist on every register row, drawn as a shrinking bar. It is the only genuinely new idea in this lab and it would travel to enquiries, quotations, bookings and analytics. Worth keeping or too clever?
  3. Status: word, badge, or fill? R1 writes "Inactive". R2 draws a solid badge for live and an outline for not. Thirteen lifecycle values are coming across four record types, and whatever we choose here has to survive all thirteen.
The original document, in its own chrome and drawings, is kept unedited: open the original.
Tripbooks Design SystemBuilt on Untitled UI · Inter for language, IBM Plex Mono for every figureLight and dark from the same tokens