Echo’s Chart Review workspace is where clinical reviewers compare extracted answers across patients and study variables, investigate results that need attention, and inspect the evidence behind each answer.
I owned the UX optimization and Vue implementation. The mandate was to improve hierarchy and interaction without changing clinical content, extraction logic, or backend behavior.
Reviewers need to scan the cohort, identify uncertain results, and move into patient-level evidence without losing their place.
The variable table, patient panel, supporting evidence, and follow-up chat all contribute to the same review decision.
The redesign had to work within existing Vue component ownership, extraction objects, and backend contracts.
The table, patient panel, evidence, and chat each contained necessary context, but they competed for space and visual priority. Routine values looked as important as exceptions, confidence appeared only after drilling in, and opening chat obscured the evidence reviewers needed for follow-up questions.
The table needed to communicate what the extracted value was and how much attention it required without turning the grid into a heatmap. I separated answer and confidence into two default visual layers so each one had a single job.
The pill shows the result for one patient and study variable.
A light tint and warning icon identify results that may need closer review.
Each cell needed to show an extracted answer while making medium and low confidence easy to notice. I compared three treatments to find the clearest balance between value and attention signal.
Giving every Yes and No result a prominent border made routine values look like alerts, so exceptions no longer stood out.
Routine values remain legible without competing with the confidence exceptions that require review.
The repeated words crowded an already dense table and slowed comparison across patients and study variables.
The icon identifies an exception without adding repeated text. The legend and patient panel provide the full confidence meaning.
Large yellow and pink areas could be mistaken for answer state, error, or severity. Repeated exceptions also competed with the value, row selection, and hover state.
Medium and low confidence receive a light inset tint and warning icon. High confidence stays unmarked, so the answer remains primary.
Small layout adjustments made the dense table faster to scan.
Made room for more study variables while keeping patient IDs easy to locate.
Created a consistent reading edge across labels of different lengths.
Kept answer widths consistent and anchored warning icons without shifting values.
Reviewers activate Value Filters only when they need to compare repeated values. Color rails appear in selected columns, while the rest of the table and confidence signals retain their default visual language.
The patient panel evolved through three rounds. I first reduced the original panel's deep indentation and repeated Evidence actions. That pass improved scanability, but it also exposed a new problem: the same answer, confidence, and source status could appear in the reviewing bar, the variable row, and the expanded detail at the same time. A later review with an associate research scientist also showed that patient chat still competed with the details she needed to inspect.
In the next pass, I removed confidence from the variable-row summary and let the expanded detail carry the evidence-specific confidence state. The row remains a compact index of the extracted answer and available source type, while the reviewing bar preserves the active context.
An associate research scientist then pointed out that the chatbot still blocked too much of the patient detail. That feedback changed the layout decision: chat needed to be spatially independent, not another region inside the review panel.
The final design attaches chat to the left edge of the patient panel as a resizable companion layer. It expands over the lower-priority table—not the patient detail or evidence—so reviewers can ask questions and inspect the supporting record at the same time.
Extracted answers may be binary, categorical, numeric, or free-form, so permanent value colors would not scale. Value Filters is an optional analysis mode: reviewers choose the variables and patients they want to compare, and only the selected columns receive stable value-color rails. Confidence remains a separate signal throughout.
Distribution chips appear for that column and can filter rows by answer value.
Selected columns receive stable value rails, but no cross-column value filter.
Medium and low confidence retain their tint and warning icon in every mode.
I implemented the redesign in the existing Vue frontend without changing clinical content, backend contracts, or component ownership. The work stayed focused on presentation, layout, and interaction behavior.
A public demo required more than replacing patient IDs: dates, note references, evidence, reasoning, and structured results could still reveal sensitive information. I created a dedicated route with deterministic synthetic data and a separate portfolio build that excludes the local real-data snapshot and never calls the backend.
The final interface reduces persistent answer color, surfaces medium and low confidence as exceptions, keeps patient evidence visible when chat opens, and adds optional value comparison without changing clinical content or backend behavior.
This work was less about adding features than making the existing workflow more trustworthy. Every design decision had to support a clear path from result to evidence.
Anything that did not support that review path was reduced, neutralized, or moved out of the way.