Five product teams within the VA Clinical Decision Support Collaborative were building tools to help clinicians plan workflows and make critical decisions. Each team had solved the same design problems differently. Tables looked different across applications. Charts used different conventions. A pattern that worked one way in one tool worked another way in the next.
Clinicians moved between these applications throughout their day, and the inconsistency cost them. Every unfamiliar interface required extra cognitive effort. In fast-paced environments where decisions affect patient care, that effort matters. Time spent interpreting a chart is time not spent on a patient.
Conversations with each product team surfaced common problems. Clinicians struggled to view changing data over time, like vital signs and medication adherence. Critical information lived in multiple locations, which increased workloads. There was no centralized way to manage tasks while keeping relevant context in view.
These findings pointed to five patterns worth standardizing: a Data Grid for managing large patient lists, a Drawer for accessing secondary information without leaving the main view, a Line Chart for tracking trends over time, a Bar Chart for comparisons, and a Single Value Visualization for key metrics.
We built and tested each one with clinicians.
The Data Grid worked well for finding and interpreting patient information, but users instinctively tried to drag and drop columns to reorder them. We added that capability. Clinicians needed date filters that could handle approximate dates, not just exact ones. Hidden columns weren't obvious, so we added visual cues at the edges to signal more data was available.
The Drawer lets clinicians access patient details three times faster than opening a separate tool. They wanted the ability to resize the panel and customize which sections appeared. Several participants had to double-check they were viewing the correct patient record, a safety concern we addressed by adding clear visual links between the Drawer and its corresponding row in the Data Grid.
The Line Chart helped clinicians spot trends, but some preferred seeing the same data in a table. We added a toggle between views. Unfamiliar terminology slowed interpretation, so we incorporated reference ranges and helper text to reduce the mental effort required.
We partnered with the Accessibility Digital Experience team throughout, auditing every pattern and letting accessibility shape design decisions rather than just checking compliance at the end.
All five patterns are now in use or planned for adoption across the collaborative. Product teams no longer build their own visualizations or purchase external solutions. Six of the components we developed have been adopted by the US Web Design System and the VA Design System, where they now support teams across the federal government.
