The problem
RR Systems is a B2B healthcare platform with no in-house designer - every screen had been built by developers, feature by feature. Their client Femi needed two things at once:
- A manager's dashboard for the home-care unit (the old one showed %NaN, no hierarchy, wrong frame entirely).
- A white-label CSS layer — one file, drop-in, that re-skins the whole product as Femi's brand.Two tracks, one engineer.

Research and Discovery
I sat with Femi's unit manager before sketching anything. Her line stuck: "I don't need to see every patient. I need to see the ones I'd be embarrassed about if someone asked." - That reframed the dashboard. It isn't about today's appointments — it's about commitments and SLA.
From there I wrote two personas (manager, referent), mapped the data the way she thinks about it (activity → package → insurer → patient), and audited the old screen. Three failures kept repeating:
- Wrong question — transactional view instead of accountability view
- Broken empty states leaking NaN and Infinity into the UI
- No hierarchy — eleven counters, all equal weight
I don't need to see every patient. I need to see the ones I'd be embarrassed about if someone asked.
- Femi Unit Manager
Personas
Dana - Unit Manager
Opens the system first thing in the morning. Needs the shape of the caseload in one glance: how many patients, where they sit across activities and insurers, and which packages are slipping against SLA. Her job is accountability, not data entry — she escalates, she doesn't log visits.
Sarit - Referent
Owns a portfolio of patients and coordinates their care. Filters down to her own name, scans her rows for missed visits, expired authorizations, and red alerts. Lives in the table, not the summary.
Design Approach
- Reframe the top. Total patients, activity split, work-status donut, inline alerts panel - what needs her attention, above the fold.
- One filter row, honest about state. Every filter shows its selection underneath so she never loses her place.
- The table pivots on one column. Package execution status, color-coded, scannable across forty rows. Six states calibrated to read calmly individually and legibly in a stack.
- Empty states designed first. Every component got its zero/partial/full rendering before its "happy" state, so absence couldn't break the layout.
Drill-down popup as zoom. The summary tiles open into a popup that mirrors the same hierarchy one level deeper — activity expands to packages, packages to insurers — so the manager moves through the data instead of jumping to a different screen.
Development
The white-label brief was strict: one CSS file, no JS, no markup changes, re-skins the entire product.I built it tokenized at the top - every brand decision exposed as a CSS variable - and comprehensive across components - buttons, inputs, tables, modals, nav, badges, tabs, calendar. Selectors specific enough to win the cascade without !important. Any future RR client can be white-labeled by duplicating the file and changing the tokens.The dashboard itself shipped as production HTML/CSS using the same token system.
1
CSS file white-labels the entire product
~60%
faster time-to-overview for the unit manager
600
patients monitored daily through the new view
Impact
Femi's primary management view - shipped and in daily use.
femi.css - standalone theme file, applied across the product without touching component code. Future Femi screens inherit the system automatically.
A reusable white-label pattern for RR Systems' next client - the first design language their product had ever had.

