Health data is useless if clinicians can’t find it. We built a unified timeline for Careflow to put years of patient records on a single, easy-to-read screen.
As one of the designers on the UX team, I took on a major share of the timeline’s design, including the category bar, colour, zoom and patient summary panel, working closely with the product lead and engineers. I also helped run discovery and feedback sessions and documented 15+ user states for handoff.
My Role
Interaction design, user states, handoff
TEAM
PLATFORM
TIMELINE
Challenge
Clinicians had access to years of patient data, but lost time just trying to find basic answers.
Through clinical feedback and workflow analysis, three main barriers emerged:
Data fragmentation
Key events were buried across separate tabs, making it hard to connect cause and effect—like seeing how a medication change six months ago impacted a recent lab result.
Information overload
Trying to view long-term trends alongside fine-grained daily updates created massive screen clutter, making quick scanning nearly impossible.
System sluggishness
Older hospital PCs froze when loading thousands of live data points at once, slowing down care teams when every second counted.
Important realizations
Through these feedback loops, three critical workflow realities emerged:
Patterns
Clinicians scan for correlation, not linear events.
Doctors don't read patient histories sequentially like a book. They look for cause-and-effect relationships across categories—like checking if a medication change in March triggered a blood pressure spike in May.
Essentials
Full details are only needed on demand.
Displaying full clinical notes upfront created visual fatigue and made long-term trend scanning impossible. Clinicians wanted high-level trend markers first, with full documentation available only when prompted.
Trust
Performance directly dictates clinical trust.
If the UI lagged or stuttered while zooming on low-spec hospital workstations, clinicians immediately lost confidence in the tool and reverted to their old multi-tab habits.
Business reality & constraints
Before jumping into design, we had to work around the real-world limits of an early-stage healthcare product:
Adoption in a complex space
Careflow is a deep, complex medical platform, so clinicians were always going to need some onboarding. The goal for the timeline—our core feature—was simply to make it clear enough that care teams wouldn't get frustrated or overwhelmed when trying to use it in active health studies.
Building as we went
Early on, our team wasn't running a perfectly oiled sprint process. Developers built backend connections one by one as new feature needs popped up. We had to design flexible screens that could work with incomplete data and evolve as the tech was built. (Structured monthly sprints only came later, around the time we shifted toward AI.)
Quick, high-signal feedback
We didn't have time for long, formal UX research studies. Instead, we got quick, practical feedback by meeting monthly with active doctors, watching recorded review sessions, and checking support tickets to see where users got stuck.
What I inherited
Before jumping into design, we had to work around the real-world limits of an early-stage healthcare product:
Everything in one place, unlike the big EMRs
In EMRs like Epic and Cerner, clinicians jump between tabs to piece a patient’s story together. Careflow’s timeline already put every category in rows along one shared time axis. When I joined, the job was making that view hold up as the data grew: clearer categories, calmer colour, the right zoom, and patient context at a glance.
What I changed & why
A category bar that scales
In the old layout, a category’s name and actions sat at the top of a side bar, so as vitals were added you’d see “Vitals” at the top and blank space beside every row below. I moved each category into an accordion bar across the top of its section, holding its name and actions, and put each row’s label into the chart as a watermark.
We explored sticky labels, labels that float or appear on hover, and a legend first. None of them fixed the core problem: a label sitting away from its row. Clinicians who reviewed it found rows easier to tell apart.
The trade-off: the bar takes some vertical room from the data, and a watermark is harder to read behind dense data.
From monitor colours to neutral
Each vital had its own colour, borrowed from hospital monitors so it would feel familiar. But monitors show those colours on black. On our light background they couldn’t reach legible contrast, and as vitals were added we’d run out of distinct colours. We tried muted, brighter and hover-only versions first; none of them solved it.
I proposed one neutral colour for every vital, with red kept for readings outside their thresholds. My team was reluctant to drop the familiar colours, so I made the case with contrast checks and by showing clinicians mockups next to the live product. Their feedback settled it.
The trade-off: less at-a-glance distinction between vitals. Each vital’s own row and watermark label carry that now, and red actually means something.
Zoom: the last 24 hours mattered most
24 hours and under: For the anesthesiologists we worked with, this was the view that mattered. Their work centres on a procedure, so they need recent vitals, labs and medications, watched closely in the hours after surgery, when complications tend to show up. Zoomed in, clinicians see exact dosages, lab numbers and timestamps.
Longer ranges (days to 6 months and beyond): Clinicians can zoom out further to follow longer patterns, but for our anesthesiology users these views weren't very important. The trade-off: more buttons in the control, and far more data to handle at the closest zoom levels.
Turning an empty sidebar into a patient summary
The timeline already had a sidebar, but it sat blank most of the time, and patient details were hidden behind a click on the patient’s name that few people discovered. I turned it into a patient summary: key details at the top with the full record one click away, the latest readings of key vitals, and the medications and labs from the last 24 hours. We considered a modal, a bar along the bottom and inline summaries; the sidebar was the simplest, since the space was already there. The cost: when it’s open, it takes a lot of room from the timeline.
Business impact & platform evolution
Contextual decision-making
Unified fragmented records into a scannable longitudinal narrative to help staff spot health anomalies.
Shipped for studies & demos
Deployed across multiple research studies and featured as a primary showcase in enterprise sales demos.
Retrospective & strategic reflection
What I’d do differently
If I redesigned it today, I wouldn’t lead with a timeline. Clinical data arrives in different formats from each source organization, and some of it doesn’t visualize well, so we were sometimes forcing it into a view we knew wasn’t intuitive. I’d start with a dashboard that surfaces what clinicians need first, with timeline charts available as a deeper layer for the data that suits them.
Working with messy clinical data
The project taught me how much data complexity shapes design. Inconsistent formats, privacy limits and gaps meant the best answer was often the simplest one: show less, more reliably.
Aligning earlier
Some directions we set aside early turned out to be where we ended up later. The lesson for me was to bring evidence, such as quick prototypes and clinician feedback, into the conversation sooner, so the team can align on a direction before it’s built.
Platform evolution
As Careflow pivoted toward becoming an AI model orchestrator, the timeline became a secondary, supporting feature. During that shift, our team began brainstorming and prototyping with AI tools to explore what the next version of the platform could look like.