Ahmad Habbab

Home › Projects › Harmony: teleradiology operations platform

Harmony: teleradiology operations platform

One system for the life of a scan.

A hospital sends a scan, a coordinator routes it, a radiologist reports, a reviewer checks and an accountant settles the fees. Harmony runs all of it. I designed its design system and the product from April to September 2026; it was still in development when I left.

Product
Harmony, teleradiology operations
Role
Sole product designer
Scope
Design system + product for 5 roles
Status
In development

The old tool was a single dense table.

The old tool was one screen: an eleven-column worklist, a filter rail as long as the page, and a menu of database tables. Nearly half a million studies had gone through it, and its power users were fast in it.

The company also planned to sell Harmony to other teleradiology providers under their own brand. So it had to work for a radiologist at 2 a.m., and wear someone else's logo next year.

Five people touch every scan.

A site sends the study. A coordinator routes it to a qualified reader. The radiologist reports, a reviewer verifies, an accountant pays the doctor and bills the hospital. Five owners, five products inside one app, and on a STAT scan, minutes matter more than any layout.

I built the system, then the screens.

I built the design system in Figma, then designed the product on top of it: the worklist, study details, insights for managers, payment reports, standby and coverage for radiologists, notifications and onboarding. Every flow went out as a clickable prototype built from the system's own tokens, with its states written down.

Make the brand the only thing that changes.

I started from Material 3 and kept its bones (tonal palettes, a text colour for every background, state layers) then replaced what didn't fit a clinic. Raw colours live only in palettes; components use meaning-based tokens like Primary or On Hold. 73 of the 74 tokens point at a palette, so a new client is one palette swap, not a redesign.

Status got its own vocabulary: six workflow families and an Urgent level above Error, so a STAT scan never looks like a form mistake. The cost: thirteen colour families make a re-theme heavier than stock Material, and I never finished dark mode.

Three rules I designed by.

The calls I'd defend first if someone asked why it looks this way.

Five roles on shared components

One Table component serves the worklist, the user directory and the payment ledger; one SideNav has five role variants. A new role is a variant, never a fork.

Never a lone average

A consultant radiologist's rules: every timing number ships with the usual wait, the slow tail and the late cases named, and every delay is labelled with the team that owns it.

Settle authority before layout

A coordinator can flag a wrong fee, but only the accountant changes money; they can see a radiologist's standby, but can't end it. Once that was clear, the screens stopped being arguments.

What I can count.

73/74 tokens: Aliased to palettes

A new client brand is one palette swap in Figma's Variables panel: no component is opened.

~147 components: One library, five roles

From about forty in May to ~147 by August, with 497 variables, audited on a schedule.

37→8 measures: A two-minute read

Managers' Insights cut from thirty-seven candidate numbers to eight, each answering a question they ask out loud.

What I owned

  • The Harmony design system in Figma
  • Every product flow, from worklist to billing
  • Clickable prototypes and handoff specs
  • Discovery with a clinician and the accounting team

Checked by experts, not yet by users.

Harmony was still in development when I left, so I have no live numbers. The bigger gap: most decisions were checked by a clinician, the product lead and the accounting team, not by people doing real tasks. I wrote the interview and usability kits, but not every session ran. Next time, five people and a timer come before the second round of screens.

More case studies