Responsive design

Patient Summary: A UX Overhaul for Safer, Faster Clinical Workflows

1. Introduction: Setting the Stage

Every designer has a project that challenges not just their skills, but their perspective. Patient Summary was that project for me.

I was brought in as the Lead UX Designer for a web-based desktop application used by healthcare providers to manage key patient data such as medications, allergies, and medical history. My responsibility spanned from creating user flows and wireframes to building high-fidelity prototypes and collaborating across teams using a design system I developed specifically for this platform.

Our tech stack centered around Figma for design, FigJam and MIRO for workshops, and we followed Agile methodologies to ensure tight collaboration with a cross-functional team that included a product owner, developers, a UI designer, QA, business analyst, and product manager.

UX work was always at least 2–3 weeks ahead of development, and our daily standups and weekly syncs kept us aligned and iterative.

2. The Context: A Tool That Should Help, But Hurts

The Patient Summary was designed as a central clinical tool to speed up the management of patient information and, in the future, integrate directly with electronic medical records (EMR). This integration would eliminate redundant data entry and streamline workflows.

However, usability reviews and stakeholder feedback painted a very different picture of the existing tool: instead of supporting care, it was hindering it.

3. The Problem: When Design Gets in the Way

Despite its critical role, the original interface presented four major usability challenges:

  1. Clunky navigation slowed down essential data entry tasks.
  2. Inconsistent layout and structure confused users about what was editable.
  3. Accessibility gaps posed barriers for keyboard users and those with visual impairments.
  4. Repetitive manual entry, due to the lack of EMR integration, created inefficiencies and safety risks.

Together, these issues led to slow workflows and an increased risk of medical errors, an unacceptable outcome in a clinical environment.

4. The Objective: A Clear Vision for Change

Our team’s objective became clear:

Redesign the Patient Summary interface using Angular components, improve the help content, and meet WCAG AA accessibility standards, all while reducing the average task completion time by at least 50%.

The original average task time was 14 minutes, far too long for clinical use. We needed to bring that down to 7 minutes or less.

5. The Process: Empathize, Design, Test

This four-month project followed a structured UX process. Let’s walk through it.

Empathize: Understanding Needs Beyond Data

Although research had already been conducted by our UX research team, I revisited the data to sharpen the focus of the redesign.

Key Insights:

  1. The process was too fragmented – users needed a more streamlined experience.
  2. Guidance was lacking – users often felt lost without contextual help.
  3. Accessibility wasn’t optional – it had to be baked in from the beginning.

To align the team, I ran a "How Might We" workshop in FigJam with the full team and stakeholders. We grouped ideas into six themes: Integration, Accessibility, Visual Hierarchy, Navigation, Speed, and UI.

Workshop Takeaways:

  • Prioritize accessibility from the beginning.
  • Stick to existing Angular components to reduce development time.
  • Validate designs with real users through usability testing.

Design: Balancing Constraints with Context

With a clearer strategy in place, it was time to begin design exploration. Two big questions framed this phase:

  1. Single screen or dual screen layout?
  2. Do we need new components in our design system?

Design Decisions:

  • Healthcare providers prefer density over whitespace. Unlike most users who appreciate clean, spacious layouts, clinicians want data packed tightly and easily scannable.
  • While a dual-screen layout would allow more visible information, it wasn’t supported by our design system and would slow down development.

Ultimately, I chose a single-screen layout, as it offered:

  • Easier scalability and updates.
  • Better accessibility control.
  • No need for new components.
  • Faster development turnaround.

I started with low-fidelity mockups, collaborated on them iteratively with the team, then moved into high-fidelity designs and interactive prototypes in Figma.

Test: Did We Solve the Right Problems?

After securing stakeholder approval, we moved to usability testing with real users.

Usability Goals:

  • Can users successfully complete patient data entry?
  • Do users utilize the help icons and guidance tools?
  • Where do users struggle?

Key UI Features Tested:

  • Dense layout with minimal white space, tailored for clinical needs.
  • Focus and error states for better input validation.
  • Improved calendar and notes functions.
  • Help icons redesigned to be more visible and informative.
  • Angular components for efficient development and accessibility.

6. Results: From Clunky to Clinical-Grade

The redesign made a measurable impact.

  • Completion time dropped from 14 minutes to 8 minutes
  • Users found it “simpler and faster” than the original experience
  • Minor tweaks were made to the Medications and Allergies sections, including the ability to add notes directly

7. Launch & Reflections

The redesigned Patient Summary was successfully launched with positive feedback from both users and stakeholders. More importantly, the solution laid the groundwork for future EMR integration and iterative improvement.

How Research Shaped Design:

One question from the “How Might We” session stuck with me:

“How might we help users stay focused and avoid distractions?”

This question led to the decision to implement a panel layout that allowed users to complete the entire process without jumping between multiple pages. We also redesigned the help feature from cramped info icons to a full “Guide” panel with detailed support and external resources.

8. Impact Metrics

  • Task Completion Time: Reduced by 43% (from 14 to 8 minutes)
  • Accessibility Compliance: Met WCAG AA 2.2 standards
  • Development Speed: Faster handoff using Angular-compatible components

9. Closing Thoughts

This project was a reminder that in healthcare, UX isn’t just about usability, it’s about safety. By grounding every decision in user needs and clinical context, we created a product that empowers providers.

See More Projects

Have a project in mind?
Let’s work together