Case Study — CareCloud

CareCloud

Helping re-platform a clinical suite from Adobe Flex to React: four months on-site in Miami, a five-person UX team and hi-fi flows tested with real doctors — design delivered hand-in-hand with the engineers rebuilding it.

Client
CareCloud · Health-tech, Miami (via App Theory)
Year
2017 – 2018
Role
UX / Product Designer — five-person UX team
Platform
Web app · clinical EHR & practice management
Context
Re-platforming a core product from Adobe Flex to React
CareCloud screens on a light background: the Productivity Center up front, with the review of systems and billing beside it

CareCloud is a US health-tech company whose platform runs the clinical and administrative side of medical practices — charting, prescriptions, scheduling, billing. When I joined, through the product studio App Theory, the company was re-platforming a core product from Adobe Flex to React.

I came in as part of a five-person UX team, working on-site in Miami for four months and remotely for the rest of roughly a year. The job: redesign the clinical screens for the new stack and validate them with the people who live in this software all day — doctors, nurses and front-desk staff.

What I did

UX research & interviewsClinical workflow mappingHi-fi prototypingUsability testing with cliniciansInteraction & information designUI patterns for the new stackDesign → code with engineersStakeholder alignmentOn-site in Miami
~1 yron the engagement, start to handover
4 moon-site in Miami; the rest remote
5 UXdesigners on the team, plus engineering
4modules: charting, e-Prescribe, billing and scheduling
Flex → Reactthe platform migration I designed for
Hi-fiprototypes tested with real clinicians

01 — The product

A clinical workspace, re-platformed

The product is where a practice runs its day. The Productivity Center is the provider’s home base: the day’s tasks, the appointment load, the message center and performance metrics, all on one screen. My job was to make that density legible — a lot of information, read at a glance, acted on in a click.

Everything had to be redrawn for React. The legacy was built in Adobe Flex, a technology on its way out; the rebuild was a chance to rethink the interface, not just port it.

The modern CareCloud rebuild: the dashboard on desktop and the patient chart on a phone, in light and dark
One component system, from desktop to phone — and in light and dark.
01 — Productivity Centerprovider dashboard · full page
CareCloud Productivity Center: task activity, appointment overview, the day’s schedule, message center and performance metrics
The day’s tasks, the appointment load, the schedule, the message center and performance gauges on one screen. Hover the window to scroll the page.

02 — The chart

The whole patient, in one view

From the dashboard the provider moves into the chart. The Patient Center pulls the whole patient into one screen — orders, upcoming visits, vitals, medications, immunizations, problems, allergies — each block a module to scan or open. The design job was hierarchy: what a clinician needs first, what stays one tap away.

Prescribing lives inside that screen. Swapping one medication for another is a single modal: what goes out, why, what comes in, with a preview of the script and the pharmacy already picked — and a red badge when the substance is controlled.

01 — Patient Centerchart · full page
CareCloud Patient Center: a full chart with orders, vitals, medications, immunizations, problems and allergies
Today’s visit on top — orders, upcoming visits and the latest vitals — and below it every chart module with its own “Add New”. Hover to scroll.
02 — Medicationse-Prescribe
CareCloud: a stop-and-add medications modal over the chart, with two discontinued medications and a new one flagged as a controlled substance
Stop and add in one action: discontinued medications keep their reason; the new one shows the script exactly as the pharmacy will receive it.

03 — The visit

From intake to billing without switching tools

The encounter is the heart of the visit. I designed the note-taking flow — intake, history, review of systems, exam, plan — as a sequence of steps with progress always in view. In the review of systems, colour-coded chips let a doctor mark findings fast without leaving the keyboard: green is normal, red is a finding, grey is not yet assessed.

The plan closes the visit. E&M code, procedures and diagnoses live on the same screen as the note, with one button to sign and send to billing — the visit ends without opening another system.

01 — New encounterintake · full page
CareCloud: a new encounter with chief complaint, past medical history, risk factors and social history, with recommendations and orders in the right column
02 — Review of systemschips · full page
CareCloud: an encounter note at the review-of-systems step, with findings as green, red and grey chips per system
03 — Encounter Notescoding & billing
CareCloud Encounter Notes: E&M coding, procedures with modifiers and diagnoses, and the Sign & Send to Billing button
Clinical setting, service and exam type on top; below, the E&M code, the procedures and additional diagnoses. “Sign & Send to Billing” closes the visit.

04 — The details

The decisions a screenshot hides

Clinical software is decided in the details: the colour of a chip, an icon next to a blood pressure out of range, the badge that says “controlled substance” before the doctor signs. Each of these was designed, tested with clinicians and adjusted. A few that mattered most:

Neurological section of the review of systems: red chips for findings, green for normal and grey for not assessed
Three-state chips

Green for normal, red for a finding, grey for what has not been assessed yet. The doctor marks the whole review without leaving the keyboard and reads the result from across the room.

Today’s visit block: orders, upcoming visits and latest vitals, with alert icons on blood pressure and pain out of range
The alert on the data, not in a footer

Blood pressure and pain out of range get the icon in the cell itself. Nobody has to memorise the threshold to see the problem.

The day’s schedule: patients with photo, time, status icons, room and elapsed time, in treatment or checked in
A schedule with state

Every patient carries their status, their room and how long they have been waiting. Colour warns before text does.

A Clonazepam prescription row with a red controlled-substance badge, prescription preview and pharmacy
Controlled substance in plain sight

The badge sits on the prescription row, before signing. The preview says exactly what the pharmacy will receive.

E&M code block with four levels as side-by-side options, and the procedures table with units, modifiers and diagnoses
E&M code in one click

The four levels as side-by-side options, with modifiers and diagnoses on the same row. Billing starts inside the visit.

Task activity card: a ring at 80% done and the list of what remains, by type
The day in one number

The ring says how much is already done; the list next to it says what is left, by type. One glance, one decision.

05 — The method

On-site with the people who use it

For four months I worked out of CareCloud’s Miami office, next to product, engineering and the clinical experts. That proximity was the point: healthcare software is full of rules you only learn by watching someone work — how a nurse rooms a patient, how a biller reads a code, what a doctor does in the ninety seconds between rooms.

I ran interviews and usability tests with real clinicians, mapped their workflows, and built hi-fidelity prototypes we put in front of users before a line of the new front-end was written. We tested, I adjusted, in cycles — regulated healthcare leaves little room for guessing.

Diagram of the method: observe up close, interview clinicians, map the workflows, hi-fi prototype and test with the users, in cycles; below, the twelve months of the project with the first four on-site in Miami
Five steps in a loop, inside the client’s building: four months in Miami, the rest remote with the same team.

06 — Design → code

Designing hand-in-hand with the rebuild

Because the product was being rebuilt in React, design and engineering had to move together. I handed off hi-fi flows as the components took shape, defined the UI patterns the new interface would reuse, and sat with developers to resolve the gaps that only appear in real code — states, edge cases, the density a screenshot hides.

Working this close to the build is the part I carried into everything since: design that ships, not design thrown over a wall.

Two-lane diagram, design and engineering, with deliveries alternating between them: hi-fi flows, React components, UI patterns, screens assembled, fixes in real code and production
Two lanes, each delivery pulling the next: design lands as the component is born, then goes back into the code to close what a screenshot never shows.

07 — Outcome

A legacy suite, redrawn for its next decade

Across roughly a year, the clinical product moved off Adobe Flex toward a modern React front-end, with the provider workspace — charting, prescribing, scheduling and billing — redesigned and validated with the clinicians who use it every day.

It was my deepest immersion in regulated, workflow-heavy healthcare software, on a cross-functional team, inside the client’s own building — and the project that set the way I still work: research close to users, design close to code.

Outcomes

What the work delivered

  • +A core clinical product moved off Adobe Flex toward React
  • +Provider workspace redesigned: charting, e-Prescribe, billing, scheduling
  • +Hi-fi flows validated with real doctors and clinical staff
  • +Four months on-site in Miami with stakeholders and users
  • +Design delivered alongside the engineering rebuild
  • +Reusable UI patterns for the new platform

Stack

SketchAxureHi-fi prototypingUsability testingDesign SystemReact (target stack)Clinical UX

Have a complex product that needs re-platforming?

I design close to the users and close to the code — from research to a front-end that ships.