Turning scattered medical records into clear clinical decisions.

What I inherited

The product had grown in Bubble.io before the team began moving it to React. It could already collect records, extract clinical data, and generate reports. But the interface had accumulated the kind of debt that makes a capable product feel slow and difficult to trust.

The staging environment repeatedly timed out on everyday create, search, and pagination actions. I cannot prove Bubble itself caused every delay, but the experience was slow enough to interrupt basic review work.

Internal product audit and migration records / January to February 2026

The real problem was the interaction debt

A complex patient can arrive with years of labs, medications, diagnoses, procedures, and scanned reports. The information exists, but it is spread across formats and screens. The doctor still has to assemble the story while making a decision.

The interface had the same problem. Each module could display its own data, yet the full workflow did not make priority, safety, chronology, and evidence feel connected.

The job was to make the next decision clear without hiding the evidence behind it.

How I framed it

I stopped treating the home screen as another dashboard. I used four questions to decide what belonged in the first layer and what could wait.

1. What needs my attention now?
2. What patient context can I not miss?
3. What changed over time?
4. What evidence supports the next decision?

I reviewed the existing screens, traced incomplete actions, compared clinical interface patterns, and tested the rebuilt flows in the local React app. Where I did not have clinical usability data, I treated the outcome as a design direction rather than a proven impact.

The product decisions

The same rule guided every screen: compress the signal, then let the doctor expand the context and source evidence.

Decision 01

Make the home screen a worklist

The original cards were too wide and slow to scan. I changed the page into a compact queue, ordered by clinical priority.

Repeated fields now stay in columns. Patient photos help recognition, while text and status labels carry the clinical meaning.

Decision 02

Keep safety context in one stable place

Patient identity and allergy status now begin every patient workflow. The main action sits with the page heading, and the safety area no longer floats at the edge of the layout.

The same structure carries into medication review, so the doctor does not have to relearn where critical context lives.

Decision 03

Make time feel continuous

The first timeline used separate date blocks. It looked tidy, but the dividers interrupted the chronology. I rebuilt it around one vertical spine.

The date is now part of each event. The doctor can read down the history without cross-referencing a detached column.

Decision 04

Bring the signal closer to the list

Seeing the direction of one biomarker originally took three interactions. The portfolio build brings the latest result and direction into the list.

Before / 3 interactions

Open item → switch tab → open graph

Demo / 0 interactions

Latest result + direction in the list

Decision 05

Show review state before sharing

A generated medical report still needs clinical judgement. The list makes processing, review, and completion visible instead of treating generation as the finish line.

The public case study does not reproduce source report content. It shows the workflow and keeps sensitive-looking evidence out of the portfolio.

Decision 06

Make every action finish the job

Several actions used to end with a generic toast. In the local demo, acknowledgement, review, notes, and restored attention items now change the visible state.

Source records open from the table, and Settings changes the local interface without an account, password, or external service.

The report was the end product

The platform was designed to move from scattered source records to one clinician-reviewed health report. That report had to carry the evidence, surface the important findings, and still make it obvious that a doctor was responsible for the final interpretation.

I explored eight report directions and used a 28-point review checklist. The professional direction below became the clearest end-to-end expression of the product: summary first, trends and detailed results second, then recommendations and follow-up.

What changed

By the end of the project, the product had moved from disconnected Bubble screens to a reusable React system built around one doctor workflow. The work connected patient review, clinical records and report generation instead of treating them as separate tools.

What the team said

The work moved quickly, but the feedback I value most was about the quality of the thinking and how closely design and implementation stayed connected.