Not a redesign story — a debugging-the-experience story. Every slide is a real problem from our decision logs, with the broken version rebuilt so you can feel it, flip it, and see the fix. Why it hurt · how we killed it · what shipped.
EVERY DEMO IS PLAYABLE · FLIP 😖 BEFORE / 😌 AFTER · → TO ADVANCE
WHERE WE STARTED · THE AUDIT
We didn't guess. We counted.
11
different filter-bar patterns doing the same job across 37 table pages
9
uncoordinated table-footer variants (F1–F9) — or none at all
70+
!important rules accumulated on a single Select wrapper
83
files that lost all visual chrome in dark mode — at once
2
pagination controls rendering on the same table, disagreeing
20+
prompts that tried (and failed) to fix one clipped page title
30
component doc pages with invisible white-on-white text (23%)
6
buttons crammed into one page header — including Delete
EVERY NUMBER IS FROM THE DECISIONS LOG · W11 → W112 · LET'S GO FIX THEM →
CHAPTER 2 · STRAIGHT FROM THE DEV AREA
The anatomy of the experience.
Before the 20 fixes: the structures users live in all day — the sidebar, the page patterns, the interaction chassis. Everything on these slides is real: real nav labels from navData.tsx, real template counts from the page matrix, real rules from the brain.
OISidebar · OIListPageTemplate ×18 PAGES · OIDetailPageTemplate ×27 · THE DRAWER LAW →
ANATOMY 1 · THE SIDEBAR — WHERE USERS LIVE
Navigation is a mental model. Ours finally matches the user's.
organisms/Shell/Sidebar · OISidebar · REAL navData.tsxCLICK THE NAV
Overview
Workspaces
Deployments
Models
Volumes
Monitoring
Users
Settings
12 FLAT ITEMS. SAME WEIGHT.
WHICH WORKSPACE AM I IN? WHOSE DEPLOYMENTS ARE THESE? TENANT SCOPE? WORKSPACE SCOPE? THE SIDEBAR WON'T SAY.
A FLAT LIST TREATS "SETTINGS" AND "THE WORKSPACE YOU LIVE IN" AS EQUALS. USERS NAVIGATED BY GUESSWORK.
⌂ TENANT · ACME-AI ▾
WORKSPACE
▸ ml-training ▾
Overview
Deployments
↳ llama-7b-inference
CPUACC
SCOPE FIRST (TENANT → WORKSPACE), THEN PLACES, THEN THE THING YOU OPENED. RESOURCE METERS LIVE WHERE YOU LOOK. ← CLICK THE NAV ITEMS.
REAL LABELS FROM navData.tsx: ml-training · llama-7b-inference · CPU/MEMORY/ACCELERATOR/OBS/FS METERS IN THE SHELL.
WHY IT HURTScope was invisible: tenant admins and workspace users saw the same flat list and clicked into the wrong context daily.HOW WE FIXED ITOISidebar rebuilt as a scope machine: scope selector → workspace tree → entity. Locked with OIAppBar + OIPageBreadcrumbs as one shell.WHAT SHIPPEDYou always know where you are, whose stuff you're touching, and what's left in the tank.UX PRINCIPLEMENTAL MODEL MATCH — navigation must mirror how users think (scope → place → thing), not how the router is organized.
ANATOMY 2 · PAGE PATTERNS — 80 PAGES, 5 SHAPES
Learn five patterns, know eighty pages.
DS-PAGE-MATRIX · REAL COUNTS FROM THE REPO GREPCLICK A PATTERN
BEFORE~80 app pages, each hand-rolling its own layout on raw divs — OITopPageLayout ×44 and OISubPageLayout ×67 used inconsistently.HOWThe page matrix mapped every page to one of 5 template families; each family shipped as a real Storybook template with entity reference stories.AFTERNew page = pick a pattern + fill slots. Users transfer knowledge between pages instantly.UX PRINCIPLERECOGNITION OVER RECALL — consistent patterns let users recognize the shape of a page instead of re-learning each one. (Nielsen #6)
ANATOMY 3 · THE INTERACTION CHASSIS
Click "Edit." Feel both timelines.
DRAWERS & MODALS · RULE LOCKED 2026-04-29PRESS EDIT IN BOTH
llama-7b-inference
replicas: 4
EVERY EDIT WAS A CONTEXT-KILLING MODAL — AND MODALS OPENED MODALS. PRESS EDIT A FEW TIMES.
llama-7b-inference
replicas: 4
Edit deployment
CONTEXT STAYS VISIBLE ←
Replicas: 4
CancelSave
ONE DRAWER CHASSIS, SHARED TONE, MAX DEPTH LOCKED. THE PAGE STAYS UNDER YOUR FEET WHILE YOU EDIT.
WHY IT HURTModal-on-modal buried the page users were editing; every dialog invented its own chrome, spacing and dismiss behavior.HOW WE FIXED ITOne chassis rule, locked verbatim: "fundamental for the drawers, for modals, and for literally everything we design from this point — never ever forget this rule."WHAT SHIPPEDEdits happen beside your context, not on top of it. Same header shape, same card stack, everywhere.UX PRINCIPLECONTEXT PRESERVATION — users should never pay a memory tax to edit. Keep the object visible while acting on it.
ANATOMY 4 · THE DRIFT NOBODY COULD SEE
Every surface was wrong for a month. Can you tell?
ONE OF THESE IS TRUE WHITE. ONE IS THE BUG THAT SHIPPED FOR A MONTH ON EVERY CARD, DRAWER AND POPOVER. WHICH?
WHY IT HURTA component-layer token override redefined --oi-bg-elevated; every elevated surface silently went off-white. Review never caught it — humans can't see 3% drift without a reference.HOW WE FIXED ITRule locked: component layers may ADD tokens, never REDEFINE foundations. Visual gate now screenshots both themes against reference values.WHAT SHIPPEDTrue white restored — and a class of invisible regressions became machine-caught.UX PRINCIPLEPERCEPTUAL THRESHOLDS — users FEEL sub-visible drift as "something is off" without being able to name it. Guard quality below the conscious threshold.
CHAPTER 3 · THE INVISIBLE STRUCTURE
Architecture & flow.
Three disciplines users never see and always feel: information architecture (can I find it?), progressive disclosure (am I drowning?), and click economics (how much does this task cost me?). All playable. Bring your mouse.
A FINDABILITY GAME · A FOLD BUDGET · LIVE CLICK COUNTERS →
IA · 1 OF 3 — THE FINDABILITY GAME
Task: find Fine-tuning. Click where you'd look.
INFORMATION ARCHITECTURE · WHERE THINGS LIVEPLAY BOTH SIDES
Overview
Model Registry
Jobs
Pipelines
Advanced Settings
Experiments ▸
FINE-TUNING SHIPPED… SOMEWHERE IN HERE. WRONG GUESSES: 0 REAL SUPPORT TICKET: "where did finetuning go after the update?"
WORKSPACE · ml-training
Overview
Deployments
Models
Fine-tuning ★
Experiments
Data Volumes
TOP-LEVEL, NEXT TO ITS SIBLINGS (MODELS, EXPERIMENTS), NAMED WHAT USERS CALL IT. CLICK IT — FIRST TRY COUNTS.
WHY IT HURTFine-tuning lived under "Experiments ▸ Advanced" — an org-chart decision, not a user decision. Findability failures become support tickets.HOW WE FIXED ITTree-tested the IA against real tasks: things users reach for weekly earn top-level slots in the workspace scope, beside their mental siblings.WHAT SHIPPEDFirst-guess findability. The "where did X go" ticket class died.UX PRINCIPLEINFORMATION SCENT — every label must smell like its destination. If users hesitate at the nav, the architecture failed, not the user.
IA · 2 OF 3 — SPEAK USER, NOT SYSTEM
Same features. Whose words?
LABELING · NIELSEN #2: MATCH THE REAL WORLDHOVER THE LABELS
ENGINEERING'S INTERNAL NOUNS, SHIPPED TO THE NAV. HOVER THEM TO HEAR WHAT USERS ACTUALLY SAID.
MODELSACCELERATORS (GPUS)DATA VOLUMESWORKLOADS
THE SHIPPED NAV: MODELS · ACCELERATORS · DATA VOLUMES · WORKLOADS — THE WORDS FROM USERS' OWN SLACK MESSAGES.
WHY IT HURTEvery system-noun forces a translation step. Users searched docs to decode the nav of a product they used daily.HOW WE FIXED ITHarvested vocabulary from real support threads and standup language; the glossary in the DS-Brain locks canonical product nouns.WHAT SHIPPEDZero-translation navigation. New hires stopped asking "what's an artifact here?"UX PRINCIPLEMATCH THE REAL WORLD (NIELSEN #2) — the interface speaks the user's language; the system keeps its jargon to itself.
7 LEVELS. EVERY LEVEL: A DECISION + A WAIT + A CHANCE TO GET LOST. BACK-BUTTON ROULETTE TO ESCAPE.
ml-training / Experiments / run-17
MetricsParamsArtifactsCompare
3 LEVELS OF PLACE + TABS FOR FACETS. DEEP THINGS BECAME WIDE THINGS. (RUNS FOLD INTO THE EXPERIMENT DETAIL PAGE.)
WHY IT HURTFacets (metrics/params/artifacts) were modeled as PLACES, inflating depth. Users bookmarked URLs because re-navigating was too costly.HOW WE FIXED ITThe page matrix drew the line: hierarchy for OWNERSHIP (tenant→workspace→entity), tabs for FACETS. DetailPage template enforces it on all 27 entity pages.WHAT SHIPPEDMax 3 place-levels anywhere in the product. Nothing important lives below the fold of the tree.UX PRINCIPLEBREADTH BEATS DEPTH — recognition at each level is cheap; backtracking a wrong branch is expensive. Model facets as views, not places.
PROGRESSIVE DISCLOSURE · 1 OF 3 — THE FOLD BUDGET
A reference panel ate 140px of prime real estate.
ANTI-PATTERN A-007 · REAL CASE, WAVE W48TOGGLE THE PANEL
▾ Reference: node pricing & SKU table OPEN BY DEFAULT · 140px
WHY IT HURTOperators opened this page to check WORKLOADS; a rarely-needed pricing reference rendered expanded on every first paint, pushing the actual work below the fold.HOW WE FIXED ITdefaultActiveKey={undefined} — collapsed by default, one click away when needed. A-007 entered the anti-pattern catalog.WHAT SHIPPEDThe primary task owns the fold; reference material waits its turn.UX PRINCIPLEPROGRESSIVE DISCLOSURE — show what most users need most of the time; keep the rest one intent away. Screen space is ranked by task frequency, not by what fit.
PROGRESSIVE DISCLOSURE · 2 OF 3 — THE LADDER
Glance → hover → open. Climb it.
ONE DEPLOYMENT, THREE DETAIL LEVELSHOVER, THEN CLICK THE ROW
LEVEL 1 · GLANCE: NAME + STATUS DOT + GPU COUNT. FOR 90% OF VISITS, THIS IS THE WHOLE ANSWER.
BEFOREEverything at level 1: rows bloated with 11 columns, every metric always on, tables unreadable at a glance.HOWDetail ladder locked into the DetailPage + OITable contract: row = glance, hover = vitals tooltip, click = drawer, drawer = actions + deep links.AFTERScanning is instant; depth is one intent away; nothing is more than two rungs from the row.UX PRINCIPLEDETAIL ON DEMAND (Shneiderman: overview first, zoom & filter, then details-on-demand) — the information ladder matches the intent ladder.
PROGRESSIVE DISCLOSURE · 3 OF 3 — THE 24-FIELD MONSTER
One form, 24 fields. Or four honest steps.
CreateDeployment · REAL WIZARD, SHAPE LOCKED W36SCROLL VS STEP
New Deployment
Name
Model
Version
Runtime
Replicas
GPU type
GPU count
Memory limit
CPU limit
Autoscale min
Autoscale max
Env vars
Secrets
Volume mounts
Network policy
…9 more fields
Create (pray)
24 FIELDS, ONE SCROLL, ZERO GUIDANCE ON WHAT'S REQUIRED WHEN. ABANDON RATE: PAINFUL. SCROLL IT.
1 MODEL2 COMPUTE3 ADVANCED4 REVIEW
Pick your model
llama-70b · v4
3 FIELDS NOW · SMART DEFAULTS HANDLE THE REST
Continue →
STEP 1 OF 4 — ONLY WHAT THIS DECISION NEEDS. "ADVANCED" IS A STEP, NOT A LANDMINE FIELD-SOUP.
WHY IT HURTNovices froze at field 6; experts resented scrolling past basics. One form punished everyone equally.HOW WE FIXED ITOIWizardPageTemplate — 9 real create-flows (CreateDeployment, CreateWorkspace, CreateFinetuning, CreateTenant…) on one locked stepper shape with smart defaults per step.WHAT SHIPPEDEach step is one decision. Advanced options disclose only for those who need them.UX PRINCIPLESTAGED COMMITMENT — chunk complexity by decision, default the rest. Completion is a staircase, not a cliff.
CLICK ECONOMICS · 1 OF 3 — DO THE TASK, WE'LL COUNT
Task: scale replicas 4 → 6. Your clicks are being metered.
LIVE CLICK METERB: 0 CLICKS · A: 0 CLICKS
chat-llama-70b · replicas: 4
Edit deployment
Replicas:
Apply changes to 4 replicas?
EDIT → MODAL → DROPDOWN → PICK → SAVE → CONFIRM. GO ON, DO IT.
chat-llama-70b · replicas: 4
INLINE STEPPER ON THE DETAIL HEADER · APPLIES ON RELEASE · UNDO TOAST INSTEAD OF CONFIRM WALL
SAME TASK. CLICK ＋ TWICE. THAT'S THE WHOLE FLOW.
WHY IT HURTScaling is the most common intervention on a deployment — and it cost 6 interactions, two context switches and a confirm wall. Every day. Every operator.HOW WE FIXED ITFrequent + low-risk + reversible = inline control with undo. The confirm wall is reserved for destructive, irreversible verbs.WHAT SHIPPED6 clicks → 2. Reversibility replaced interrogation.UX PRINCIPLEFLOW EFFICIENCY — interaction cost = clicks × attention × waiting. Optimize the tasks users do daily, guard the ones they do rarely.
CLICK ECONOMICS · 2 OF 3 — THE HUNT
Task: find the failed workload. 478 rows. Meter's running.
LIVE CLICK METERB: 0 CLICKS · A: 0 CLICKS
WORKLOAD · PAGE 1/20 · NO STATUS FILTER, NO STATUS SORT
THE FAILED ONE IS ON SOME PAGE. KEEP CLICKING. (OPERATORS DID THIS DURING INCIDENTS.)
🔍 Search…RUNNING (412)PENDING (63)
WORKLOADSTATUSGPUS
click the FAILED chip ↑
STATUS CHIPS WITH LIVE COUNTS, RIGHT IN THE FILTER BAR. ONE CLICK.
WHY IT HURTDuring incidents — the highest-stress moment — finding failures was a pagination safari. Time-to-failure-found was measured in minutes.HOW WE FIXED ITThe OITableFilterBar contract requires status chips with counts for every status-bearing table. Failures also auto-sort to the top (you met that fix in the live-build).WHAT SHIPPEDIncident triage: 1 click. The counts even tell you IF there's a fire before you look.UX PRINCIPLEZERO-CLICK SIGNALS FIRST — the best interaction is the one the count badge made unnecessary. Then make the next-best cost exactly one.
CLICK ECONOMICS · 3 OF 3 — THE BILL
Five daily tasks. The invoice, before and after.
CLICKS-PER-TASK AUDITPRESS TALLY
SCALE REPLICAS
FIND FAILED WORKLOAD
COPY ENDPOINT URL
OPEN INSTANCE LOGS
CHECK GPU HEADROOM
FIVE TASKS AN OPERATOR DOES EVERY SINGLE DAY.
THE BILL, BEFORE28 clicks across the five most common daily tasks — plus the modals, waits and context switches between them.HOWInline controls for the frequent, chips for the urgent, hover-copy for the tiny, meters in the shell for the ambient.THE BILL, AFTER8 clicks. ~3.5× less friction on the daily loop — the kind of number users FEEL as "the app got faster" even though latency never changed.UX PRINCIPLECOUNT THE CLICKS, WEIGH THE TASKS — interaction cost is a budget; spend it where frequency × urgency is highest. (GOMS thinking, minus the lab coat.)
CHAPTER 8
Tables & filters.
An MLOps product is 80% tables. Ours had 37 of them — and no two filtered, paginated, or footered the same way. The single biggest cluster of user pain. Wave W74 — "The Table Reckoning" — fixed it bottom-up.
4 PROBLEMS · ALL PLAYABLE →
PROBLEM 01 / 20 · TWO PAGINATIONS, ONE TABLE
Which "next page" is the real one?
DeploymentsPageFIXED IN W74
DEPLOYMENTSTATUSGPUS
chat-llama-70bRUNNING16
embed-minilmRUNNING2
‹ PAGE 1 / 20 ›
< 1 2 3 … 20 >CLICK BOTH →
TWO PAGERS RENDERED AT ONCE. TRY THEM — THEY DON'T EVEN AGREE.
DEPLOYMENTSTATUSGPUS
chat-llama-70bRUNNING16
embed-minilmRUNNING2
SHOWING 1–25 OF 478‹ PAGE 1 / 20 ›
ONE PAGER + A RANGE LABEL. pagination IS NOW A DISCRIMINATED UNION — YOU CAN'T RENDER TWO.
WHY IT HURTAnt's built-in pager + our layout pager both rendered when total > pageSize. Users clicked one; the other didn't move.HOW WE FIXED ITW74: OITable's pagination prop became a discriminated union — built-in, footer, custom, or false. Two pagers is now a type error.WHAT SHIPPEDExactly one pagination surface per table, plus "Showing X–Y of Z" everywhere.UX PRINCIPLEJAKOB'S LAW + CONSISTENCY — One function, one control. Duplicate controls force users to build two mental models and trust neither. (Nielsen #4)
PROBLEM 02 / 20 · 11 FILTER PATTERNS, 37 PAGES
Every table filtered its own special way.
3 OF THE 11 PATTERNS, SIDE BY SIDEFIXED IN W74
MODELS PAGE🔍 Search…
WORKSPACES🔍 SearchStatus ▾Owner ▾⚙ Columns
VOLUMES☰ Filters (drawer)All | Mine | Shared+ New
SEARCH-ONLY · CHIPS+FUNNEL · DRAWER+SEGMENTED… ×11 VARIANTS. LEARN EACH PAGE FROM SCRATCH.
MODELS PAGE🔍 Search models…Status ▾Owner ▾+ New
WORKSPACES🔍 Search workspaces…Status ▾Region ▾+ New
VOLUMES🔍 Search volumes…Type ▾Owner ▾+ New
ONE OITableFilterBar: searchSlot + filterChips + actionsSlot. LEARN IT ONCE, USE IT EVERYWHERE.
WHY IT HURT11 hand-rolled JSX fragments = 11 different muscle memories. Spacing and alignment drifted on every page.HOW WE FIXED ITOne orchestrator molecule with three slots, living in the layout's headerContent — not in page code.WHAT SHIPPED37 pages, one filter grammar. New pages get it for free.UX PRINCIPLEJAKOB'S LAW — Users spend most of their time on OTHER pages. Every page that filters differently taxes the muscle memory built everywhere else.
PROBLEM 03 / 20 · NINE FOOTER VARIANTS (OR NONE)
"How much data is there?" The table wouldn't say.
TABLE FOOTERS F1–F9FIXED IN W74-B/C
models table
— NO FOOTER AT ALL. IS THIS ALL THE DATA? WHO KNOWS. —
workspaces table
Rows per page: 10 ▾
volumes table
↻ Updated 2m ago · LIVE ●
9 VARIANTS: RANGE-ONLY, SIZE-ONLY, REFRESH-ONLY, NOTHING… THE "SHOWING 1–25 OF 478" LABEL EXISTED ONLY IN STORYBOOK.
any table, anywhere
SHOWING 1–25 OF 478Rows: 25 ▾‹ 1 / 20 ›
ONE OITableFooter: RANGE + PAGE SIZE + PAGER. THE ANSWER TO "HOW MUCH DATA?" IS ALWAYS IN THE SAME PLACE.
WHY IT HURTUsers scanning 478 deployments had no idea how deep the list went — the range label never shipped to production.HOW WE FIXED ITMigrated the DS footer into @oi/ui as one family: range + pager + page-size, plus bulk-actions and add-row molecules.WHAT SHIPPEDEvery table answers "where am I, how much is there" identically.UX PRINCIPLEVISIBILITY OF SYSTEM STATUS — Nielsen #1: the system should always tell you where you are and how much there is. A bottomless table hides the map.
PROBLEM 04 / 20 · THE 45-LINE TABLE
Demos promised a rich table. Production shipped a skeleton.
OITable · PROD vs PROMISEFIXED IN W74
NAMESTATUSGPUS
chat-llama-70bRUNNING16
THE PRODUCTION TABLE: 45 LINES. NO TITLE. NO TOOLBAR. NO EMPTY STATE. NO ERROR STATE. NO SELECTION. EVERY PAGE HAND-ROLLED ITS OWN.
Deployments 478Density ▾Export+ New
NAMESTATUSGPUS
☑ chat-llama-70bRUNNING16
☐ embed-minilmRUNNING2
1 SELECTED · Stop · Restart‹ 1/20 ›
TITLE · COUNT · TOOLBAR · SELECTION FOOTER · EMPTY & ERROR STATES — AS PROPS, NOT PER-PAGE REINVENTION.
WHY IT HURTThe rich chrome existed in a DS organism with 0 production consumers. 37 pages each faked their own subset.HOW WE FIXED ITW74 unified the two OITable implementations and back-filled the chrome as real, typed props.WHAT SHIPPEDOne table organism. Prototype promise = production reality.UX PRINCIPLEEXPECTATION INTEGRITY — A demo is a promise. Shipping less chrome than the prototype breaks trust before the user even files a bug.
CHAPTER 7
The space wars.
Five waves of civil war over who owns the gaps — W11 → W16 → W17 → W19 → W55. It ended with one primitive (the Brick Wrapper) and one law: nobody owns their own margins. These are the battles.
4 PROBLEMS · INCLUDING "WHERE THE F*** IS THE FILTER BAR" — A REAL QUOTE →
PROBLEM 05 / 20 · THE INVISIBLE FILTER BAR
"Where the f*** is the filter bar?"
W16 EDGE-TO-EDGE INCIDENTFIXED IN W19→W55
🔍 Search…Status ▾
NAMESTATUSGPUS
chat-llama-70bRUNNING16
FILTER BAR IS *RIGHT THERE* ↓ · BORDERS BLEND INTO THE PAGE
CANVAS PADDING WENT TO 0 IN W16. CHROMED BRICKS SAT FLUSH ON THE EDGE AND DISSOLVED INTO THE BACKGROUND.
🔍 Search…Status ▾
NAMESTATUSGPUS
chat-llama-70bRUNNING16
24px GUTTER · EVERY BRICK SELF-FRAMES
W55: OIBrickWrapper + OIBrickRow — EVERY BRICK CARRIES ITS OWN 12px INSET; ROWS ADD 12px = 24px CANVAS GUTTER, BY CONSTRUCTION.
WHY IT HURTCard chrome needs page background around it to read as a panel. Flush to the edge, the filter bar literally disappeared — the design lead couldn't find it.HOW WE FIXED ITA five-wave saga ending in W55's brick primitives: spacing became math owned by wrappers, not opinions owned by pages. Rules 82–84 locked it.WHAT SHIPPED24px everywhere, automatically. The war ended.UX PRINCIPLEFIGURE-GROUND (GESTALT) — A panel only reads as a panel when ground surrounds figure. Flush edges destroy the boundary the brain needs.
PROBLEM 06 / 20 · 360px OF NOTHING, TWICE
A monitoring dashboard that wasted a third of your monitor.
DASHBOARD TEMPLATE · max-width:1600pxFIXED IN W15 · RULE 35
360px DEAD
73%GPU128NODES
llama-70bRUN16
360px DEAD
max-width:1600px HARDCODED IN THE TEMPLATE. ON A WIDE MONITOR: UP TO 360px OF EMPTY SPACE, EACH SIDE, ON A DATA-DENSE PAGE.
73%GPU UTILIZATION128NODES42JOBS8QUEUE
WORKLOADSTATUSGPUS
llama-70b-ftRUNNING16
RULE 35: TEMPLATES OWN ZERO LAYOUT DECISIONS. FULL WIDTH BY DEFAULT; PAGES OPT IN TO NARROW.
WHY IT HURTOps teams run wide monitors precisely to see more data. The template threw a third of it away and looked broken doing it.HOW WE FIXED ITDeleted the hardcoded max-width from template CSS; width became a page-level prop.WHAT SHIPPEDDense dashboards use the whole viewport.UX PRINCIPLEDENSITY FOR EXPERTS — Ops users buy wide monitors to see MORE data. Tufte: maximize data-ink — never spend a third of the screen on nothing.
PROBLEM 07 / 20 · TWO BREADCRUMB TRAILS
Two "you are here" signs. Pointing from different maps.
UsageMonitoringFIXED IN W15 · CVL R2
OICM / Admin Tools / Usage Monitoring
Tenant / Monitoring / Usage
SHELL'S CRUMBS…AND THE TEMPLATE'S
gpu-usage by workspace
SHELL RENDERED ONE TRAIL, TEMPLATE RENDERED ANOTHER — WITH DIFFERENT PATHS. WHICH ONE IS TRUE?
OICM / Admin Tools / Usage Monitoring
gpu-usage by workspace
ONE CANONICAL TRAIL — THE SHELL'S. TEMPLATES LOST THE breadcrumbs PROP; AN AUDIT ITEM GUARDS IT FOREVER.
WHY IT HURTNavigation is trust. Two disagreeing trails means at least one is lying — users stop believing both.HOW WE FIXED ITappShellCrumbsDecorator became the single breadcrumb surface; the CVL checklist audits "one breadcrumb per page" on every wave.WHAT SHIPPEDOne map. One you-are-here.UX PRINCIPLEWAYFINDING — Navigation is a trust system. Two 'you are here' markers from different maps means at least one lies.
PROBLEM 08 / 20 · THE UNDERLINE THAT GAVE UP
The tab rail stopped 70px before the edge.
TAB STRIP · CVL R1–R4 REPEAT COMPLAINTFIXED IN W16
OverviewInstancesLogsSettings
STOPS HERE. WHY? PADDING.
CONTENT PADDING CUT THE RAIL SHORT — THE "TABS SPAN THE SURFACE" MODEL BROKE AT EVERY WIDE VIEWPORT.
OverviewInstancesLogsSettings
OIPageContent PADDING-INLINE → 0. THE RAIL RUNS EDGE TO EDGE; BRICKS SELF-INSET INSTEAD.
WHY IT HURTA rail that stops mid-air reads as a rendering bug. It was reported in four consecutive design reviews.HOW WE FIXED ITMoved inset ownership from the content container to the bricks themselves (the space-wars doctrine).WHAT SHIPPEDStructural lines span the surface. Always.UX PRINCIPLECONTINUITY (GESTALT) — Structural lines must complete their path. A rail that stops mid-air reads as breakage, not styling.
CHAPTER 8
The polish files.
One page — the Deployment Overview — got nine consecutive fix waves (W80-FIX-A through I). This chapter is forensic UX: clipped glyphs, 10px jitter, phantom voids. The stuff users can't name but always feel.
4 PROBLEMS · INCLUDING THE TITLE THAT SURVIVED 20+ FIX ATTEMPTS →
PROBLEM 09 / 20 · THE DECAPITATED TITLE
The page title lost its head. For 20+ prompts straight.
DEPLOYMENT OVERVIEW · H1FIXED IN W80-FIX-I
resnet-50-prodREADY
ASCENDERS: GONE. overflow:hidden ATE THEM.
MODEL v4 · ENDPOINT /infer · OWNER m.chen
FONT-METRIC VARIANCE + overflow:hidden = ONLY THE BOTTOM HALF OF THE GLYPHS RENDERED. REPORTED 20+ TIMES, PATCHED AT THE WRONG LAYER EVERY TIME.
resnet-50-prodREADY
MODEL v4 · ENDPOINT /infer · OWNER m.chen
overflow:clip + overflow-clip-margin:4px — ELLIPSIS PRESERVED, ASCENDERS GET BREATHING ROOM. ROOT CAUSE, NOT SYMPTOM.
WHY IT HURTThe page's primary identifier — the thing you check before hitting Stop — looked corrupted on some machines and fine on others.HOW WE FIXED ITRoot-caused to clipping semantics: swapped hidden→clip with a 4px clip margin. One CSS property, found after 20 failed symptom-patches.WHAT SHIPPEDFull glyphs on every machine. And a failure-registry entry so it can never silently return.UX PRINCIPLELEGIBILITY IS NON-NEGOTIABLE — Typography carries identity. If the primary identifier renders corrupted, every other polish signal is discounted.
PROBLEM 10 / 20 · THE 24px LIE
Title and tabs, 24px out of line. On every detail page.
ALIGNMENT SPINEFIXED IN W80-FIX-F→H (GLOBAL)
resnet-50-prod
OverviewInstancesLogs
← 24px ADRIFT
TAB-LIST PADDING PUSHED THE FIRST TAB 12→24px RIGHT OF THE TITLE'S LEFT EDGE. THE PAGE'S ALIGNMENT SPINE — BROKEN AT THE TOP.
resnet-50-prod
OverviewInstancesLogs
ONE SPINE ✓
.tab:first-child{padding-inline-start:0} — FIRST TAB TEXT SITS EXACTLY ON THE TITLE'S EDGE. SHIPPED GLOBALLY, NOT PER-PAGE.
WHY IT HURTEvery left edge on a page should agree. When the two loudest elements disagree by 24px, everything below looks accidentally placed.HOW WE FIXED ITTook two waves: FIX-F's calc() was a partial; FIX-H zeroed the tab-list's contribution at the atom level.WHAT SHIPPEDOne alignment spine on every tabbed page in the product.UX PRINCIPLELAW OF ALIGNMENT — Edges are commitments. One broken spine at the top makes everything below feel accidentally placed.
PROBLEM 11 / 20 · THE JITTERY META STRIP
Same row. Same chips. Two different heights.
HEADER META STRIP · 8 CHIPSFIXED IN W80-FIX-C
MODEL resnet-50VERSION v4 ⧉OWNER m.chenENDPOINT /infer ⧉REGION eu-w124px vs 34px — SPOT THE JITTER
COPYABLE CHIPS WRAPPED THEIR GLYPH IN A BORDERED 24×24 ICON BUTTON → +10px. ONE ROW, TWO HEIGHTS, PERMANENT VISUAL NOISE.
MODEL resnet-50VERSION v4 ⧉OWNER m.chenENDPOINT /infer ⧉REGION eu-w1
BARE 16×16 HOVER-REVEAL COPY TRIGGER · TOKEN REBOUND control-sm → icon-sm · ALL 8 CHIPS: 24px FLAT.
WHY IT HURTMetadata strips are read in one horizontal scan. A 10px sawtooth breaks the scan on the page users check most before dangerous actions.HOW WE FIXED ITKilled the nested bordered button; the copy affordance became a quiet hover-reveal glyph bound to the right size token.WHAT SHIPPEDOne 24px rhythm — and the chips actually copy now (that was Problem 11½: the onClick was a no-op).UX PRINCIPLESIMILARITY (GESTALT) — Rows are scanned, not read. Any element breaking the height rhythm interrupts the scan — 10px reads as noise, not variety.
PROBLEM 12 / 20 · THE HARD LINE & THE VOID
A 1px cliff and a 48px hole, under every header.
GLOBAL SEAM · EVERY TAB + BREADCRUMBFIXED IN W80-FIX-C/E/G
Deployments / resnet-50-prod
TWO HAIRLINES, 12px APART
≈48px OF NOTHING (PADDING + STACK MARGIN)
content finally starts here
RULE-37 HAIRLINE COLLISION + A PADDING/MARGIN PILE-UP = A HARD DOUBLE LINE, THEN A DEAD BAND, ON EVERY PAGE.
Deployments / resnet-50-prod
content starts here
ONE HAIRLINE + A THEME-ADAPTIVE GRADIENT FADE · VOID COLLAPSED VIA --oi-page-header-* TOKENS. THE SEAM BREATHES INSTEAD OF CUTTING.
WHY IT HURT"It's a global issue — under every tab and every breadcrumb." A hard rule + dead strip made every page feel unfinished at its most-seen seam.HOW WE FIXED ITThree coordinated fixes: drop the duplicate border (E), collapse the void with header tokens (C), add the ::after gradient fade (G).WHAT SHIPPEDA soft, intentional transition — globally, from one component.UX PRINCIPLEAESTHETIC-USABILITY EFFECT — Users forgive small functional gaps in interfaces that feel finished — and distrust capable ones that feel rough.
CHAPTER 7
States & signals.
The quiet catastrophes: buttons that didn't look like buttons, text that vanished in one theme, colors that screamed ERROR when they meant "heads up." State design is trust design.
4 PROBLEMS · INCLUDING THE 83-FILE DARK MODE COLLAPSE →
PROBLEM 13 / 20 · THE INVISIBLE CTA
Every Save button rendered as plain text. Nobody filed a bug.
DRAWER FOOTER · variant="primary"FIXED IN W33 · RULE 69
Edit deployment
Replicas: 4
CancelSaveTHIS IS THE PRIMARY CTA. CLICK IT.
OIButton HAD NO variant="primary" — IT SILENTLY FELL BACK TO TEXT. 4 PRODUCTION CALLERS SHIPPED BROKEN. FOR MONTHS. UNFILED.
Edit deployment
Replicas: 4
CancelSave
variant="primary" EXISTS · SOLID TEAL · AND RULE 69 NOW DEMANDS A STORY FOR EVERY VISUAL STATE, SO "SILENTLY FALLS BACK" IS EXTINCT.
WHY IT HURTThe most important control in every drawer had no visual weight — and because it "worked" functionally, no one reported it.HOW WE FIXED ITGrep found 4 silent broken callers (one inside a production atom). Added the variant + the loading state it exposed + Rule 69 coverage.WHAT SHIPPEDCTAs look like CTAs. And unrepresentable states get stories, so they can't hide.UX PRINCIPLEAFFORDANCE (NORMAN) — A control must LOOK like what it does. A Save that reads as text has zero perceived affordance — so its failure goes unreported.
PROBLEM 14 / 20 · THE 83-FILE DARK MODE COLLAPSE
Flip to dark mode. Watch everything dissolve.
TOKEN MIGRATION REGRESSIONFIXED IN W18 · RULE 68
Deployments
chat-llama-70b RUNNING 16
embed-minilm RUNNING 2
Save Cancel + New deployment
NO CARDS. NO BORDERS. NO BUTTONS. 83 FILES' WORTH OF CHROME — GONE. TOKENS WERE WRAPPED IN [data-theme="light"], WHICH NEVER MATCHES IN DARK.
Deployments+ New
chat-llama-70bRUNNING16
embed-minilmRUNNING2
FOUNDATION-CHAINED TOKENS MOVED BACK TO :root · RULE 68 REWRITTEN: SPLIT BY HOW A TOKEN RESOLVES, NOT BY SURFACE NAME.
WHY IT HURTThe entire product looked broken for every dark-mode user — surfaces invisible, hierarchy flattened to floating text.HOW WE FIXED ITA sweep re-homed the mis-scoped declarations, and the rule that caused it was rewritten so the mistake is unmakeable.WHAT SHIPPEDBoth themes, full chrome — plus a failure-registry entry with the grep that catches recurrence.UX PRINCIPLEMODE PARITY — Dark mode is not a feature, it's a second rendering of the same promises. Parity failures read as a broken product.
PROBLEM 15 / 20 · THE VANISHING NUMBER
There's a number on this card. Find it.
RESOURCE METER HERO VALUEFIXED IN W29-D / W37
72 TB
STORAGE USED
IT'S WHITE. ON GREY. TRY SELECTING IT.
--oi-fg-primary IS WHITE IN LIGHT MODE (IT'S FOR TEXT ON BRAND SURFACES). PUT IT ON A NEUTRAL CARD → INVISIBLE HERO NUMBER.
WHY IT HURTA capacity meter whose value renders invisible in one theme fails at its one job — silently. Same trap hit the RangePicker cells.HOW WE FIXED ITWrote the three-row decision matrix into the brain; consumers switched to fg-inverse; visual gate screenshots both themes.WHAT SHIPPEDReadable numbers in both themes, and a rule that ends the guessing.UX PRINCIPLECONTRAST (WCAG 1.4.3) — 4.5:1 minimum exists precisely because 'looks fine on my machine' isn't a contrast strategy.
PROBLEM 16 / 20 · RED MEANS DEAD (NOT "HEADS UP")
Overcommitted capacity screamed OUTAGE.
RESOURCES POPOVERFIXED IN W35→W38
GPU · 128 ALLOCATED / 96 TOTALEVERYTHING ON FIRE?
MEMORY · 61%
OVER-ALLOCATION PAINTED RED (= HARD ERROR) · "AVAILABLE" PAINTED GREY (= LOOKS BROKEN/MISSING). USERS SAW AN OUTAGE THAT WASN'T.
GPU · 128 ALLOCATED / 96 TOTALOVERCOMMIT ⚠ — A WARNING, NOT A FIRE
HEALTHYOVERCOMMITEMPTY
PALETTE LOCKED: PURPLE=HEALTHY · ORANGE=WARNING · BAR IS NEVER RED · TOKENS RENAMED TO MATCH THE TOOLTIP WORDS.
WHY IT HURTColor is the fastest signal we ship. Red for a routine overcommit trains users to ignore red — right up until a real outage.HOW WE FIXED ITFour waves of palette work: semantic tokens renamed to match the labels users read ("Total", "Empty"), red reserved for genuine failure.WHAT SHIPPEDWarnings look like warnings. Red got its meaning back.UX PRINCIPLEALARM FATIGUE — Color is a budget. Spend red on warnings and users learn to ignore red — until the real outage.
CHAPTER 8
Information design.
Where UX stops being pixels and starts being respect for attention: what to show once, what to hide behind a menu, what a chart owes its reader, and who gets left out when a link isn't really a link.
4 PROBLEMS · FROM THE ANTI-PATTERN CATALOG →
PROBLEM 17 / 20 · ONE NUMBER, THREE PLACES
"Total members: 24." Yes. We heard you. Three times.
WORKSPACE OVERVIEW · ANTI-PATTERN A-001FIXED IN W48
24TOTAL MEMBERS (HERO)
24MEMBERS (KPI STRIP)
24DONUT CENTER
🔍 RUN THE AUDIT
SAME DATUM. HERO + KPI + DONUT. CLICK THE AUDIT TO SEE WHAT A REVIEWER SEES.
24TOTAL MEMBERS · +3 THIS WEEK
7ADMINS
4PENDING INVITES
ONE AUTHORITATIVE SURFACE PER DATUM (A-001). THE RECLAIMED SPACE NOW SAYS SOMETHING NEW.
WHY IT HURTDuplicated data competes with itself — it dilutes hierarchy and quietly admits "we don't know what's primary here."HOW WE FIXED ITAnti-pattern A-001 entered the catalog; the audit now flags any datum rendered on 2+ surfaces of one page.WHAT SHIPPEDEach number appears once — and earns its spot.UX PRINCIPLESIGNAL-TO-NOISE — Every duplicated datum is noise wearing a signal's clothes. Show each fact once, where it matters most.
PROBLEM 18 / 20 · SIX BUTTONS & A LOADED GUN
Six header actions. Rollback one mis-click away.
DETAIL HEADER · ANTI-PATTERN A-003FIXED IN W48
resnet-50-prodEditAPI KeysStopRollbackRestart+ New
6 ACTIONS SIDE-BY-SIDE, 3 OF THEM DESTRUCTIVE. OVERFLOWS ON NARROW SCREENS; THE PRIMARY DROWNS; "ROLLBACK" SITS NEXT TO "EDIT."
resnet-50-prod+ New deployment⋮ More
ONE PRIMARY CTA EXPOSED · ≥3 SECONDARIES COLLAPSE TO "MORE" · DESTRUCTIVE ALWAYS LIVES IN THE OVERFLOW, BEHIND A CONFIRM. TRY THE MENU →
WHY IT HURTAction rows are read left-to-right at speed. Destructive verbs in the fast lane = incidents waiting for a shaky trackpad.HOW WE FIXED ITPage-spec mandate: 1 primary max, secondaries collapse at 3+, destructive is always overflow + confirm.WHAT SHIPPEDCalm headers. Dangerous things take two deliberate clicks.UX PRINCIPLEHICK'S LAW + ERROR PREVENTION — Fewer exposed choices = faster, safer decisions. Destructive verbs earn friction by design. (Nielsen #5)
PROBLEM 19 / 20 · THE CHART THAT SAID "21th"
Wrong ordinals. A missing bar. Would you trust this data?
OIStackBarChart · 7 BUGS, ONE FORENSIC PASSFIXED IN W84-C
GONE
20th21th22nd23th
Y-LABELS RENDERED ON THE X AXIS. YES, REALLY.
"21th" · "23th" · FINAL BAR SILENTLY DROPPED · LABELS ON THE WRONG AXIS · 30 CATEGORIES CRAMMED IN HORIZONTAL MODE. 7 BUGS TOTAL.
20th21st22nd23rd
ALL 7 FIXED VIA CHROME FORENSICS · STORY FILE CUT 23 EXPORTS → 7 CANONICAL ONES SO THE BUGS HAVE NOWHERE TO HIDE.
WHY IT HURTA chart with a wrong ordinal makes users doubt the values too. One visibly missing bar = "what else is this thing not showing me?"HOW WE FIXED ITW84's forensic pass: fixed the ordinal helper, the dropped-final-bar off-by-one, the axis mapping, and pruned the story surface.WHAT SHIPPEDA chart you can quote in a meeting.UX PRINCIPLEDATA INTEGRITY — A chart is a promise about reality. One visible error ('21th') and users re-verify everything it ever says.
PROBLEM 20 / 20 · THE LINK KEYBOARDS COULDN'T SEE
Press TAB. Watch who gets skipped.
"VIEW ALL →" · ANTI-PATTERN A-004 · WCAG 2.1.1FIXED IN W49
RefreshView all →Export
⌨ PRESS "TAB"
IT'S A <span onClick> WITH cursor:pointer. MOUSE-ONLY. KEYBOARD & SCREEN-READER USERS: IT DOESN'T EXIST.
RefreshView all →Export
⌨ PRESS "TAB"
NOW IT'S <OIButton variant="link"> — REAL FOCUS, REAL role, REAL ENTER/SPACE. EVERYONE GETS THE SAME PAGE.
WHY IT HURTFails WCAG 2.1.1 & 4.1.2 — not focusable, no role, no keyboard activation. An entire class of users simply couldn't reach "View all."HOW WE FIXED ITReplaced with OIButton variant="link" (A-004); the pattern is banned in the catalog and the verifier greps for clickable spans.WHAT SHIPPEDEvery interactive thing is a real control. No exceptions.UX PRINCIPLEINCLUSIVE BY CONSTRUCTION — WCAG 2.1.1: if it's clickable, it's focusable. Accessibility isn't a layer on top — it's whether the control is real.
CHAPTER 9 · THE REAL ACHIEVEMENT
Fixing 20 problems is easy. Making them unrepeatable is the work.
91 IRON RULES
Every fix became a law
Rule 35 (templates own no layout), Rule 37 (no adjacent hairlines), Rule 69 (every visual state gets a story), Rules 82–84 (brick spacing). Cited by number in every review.
23 FAILURE MODES
Every bug got a registry entry
The title clip, the fg-primary trap, the dark-mode collapse — each catalogued with the exact grep that catches its return. Regressions die in CI, not in front of users.
COLD-EYED VERIFIER
The builder never grades itself
A fresh-context AI audits every wave against the rules and the registry. "Looks fine to me" stopped being an argument.
BEFORE: 20+ PROMPTS TO FIX ONE TITLE · AFTER: ONE PROMPT, ROOT CAUSE, RULE, REGRESSION GUARD
FIN
Polish isn't a sprint. It's a system.
20 problems · 100+ waves · every fix root-caused, ruled, and guarded. Mehrshad · Design Lead — with the whole OI team.
PART 1: FROM CHAOS TO CANON · PART 2: EVERYONE BUILDS · PART 3: YOU JUST WATCHED IT