ZOLL emsCharts NOW
Real time patient care for all platforms
Patient charting for EMS providers on scene
ZOLL’s medical app provides comprehensive care documentation and procedure assistance for healthcare professionals. It is fully designed for web and mobile, compliant with iOS and Android guidelines. Developed and released in 2021.
THE PROBLEM
Charting saves lives—but it takes time. In EMS, every second matters. Transporting a patient within an hour of the medical event is critical for patient survival. Providers lose precious minutes to paperwork, even though clear records are vital.
THE OPPORTUNITY
ZOLL saw a chance to start fresh—build a new product, unify their suite, and close the gaps users felt every day.
The challenge: Improve the experience. Make charting faster without losing what matters.
UX Designer - Me
UX Researcher
Product Manager/Lead
Engineering Manager
Development Team
TEAM
11 Months
TIMELINE
TOOL
Sketch
InVision
Miro
Jira, Confluence
TASK
User Interview
Wireframe
UI Design
Usability testing
Prototyping
Component Design
THE BACKGROUND
ZOLL’s legacy products, limited by outdated tech, couldn’t support the modern features users needed. With a growing backlog and fragmented experiences, the company chose to consolidate its product suite into a single, unified app.
As lead UX/UI designer, I was responsible for designing a cross-platform solution for iOS, Android, and web. Partnering with a small R&D team and UX researcher, we set an 11-month timeline to deliver a streamlined charting tool built for the fast-paced needs of EMS professionals—improving efficiency without compromising accuracy.
THE SOLUTION
Reduce charting times with automation
Recommend likely options based on medical protocol and patient information.
Populate based on previous medical history and suggest likely options based on business logic.
Leverage new technology to import information and bypass manual entry.
Driver’s license scanning
Bypass manual input by leveraging mobile and tablet technology to scan and import demographics.
Allow for modifications to grant more user control.
Dynamic input components
Contextual inputs tailored for medical documentation. Defaulted values allow for easy modification and allow users to edit instead of starting with an empty form.
Progressive disclosure
Simplified forms maintain a clean user experience without overwhelming the user with options.
Business logic hides conditional questions until medically relevant.
Medications defaulted to standard dosages based on patient demographics.
Recommended medications based on patient condition and onset.
Statistically likely options surfaced to reduce repetitive searching and scrolling on phones and tablets.
Pinned common options
Button selections
Immediate visibility of desired options for quicker input. No typing required.
Bypass search indexing delays for high frequency workflows and minimize cognitive load.
Quick Actions
Log actions with 1-click.
Guided follow-up protocols with timers and visual feedback, assisting patient care in real-time.
Connected devices
Medical devices connected to the app automatically import patient health information as it’s recorded.
Patient activity documentation is automated via hardware integration.
Dark mode
High contrast themes to deal with dynamic environment changes from inside the ambulance to patient scene location
THE PROCESS
Who our primary user is
What we: know, don’t know, would like to know
01 discover
Define a clear problem to solve
What’s working and what’s not
02 define
Ideate with the team and prototype possible solutions
Test solutions with sponsor users
03 develop
Refine and implement the solution
Constant iteration based on user research
04 deliver
Collaborating with product, engineering, and stakeholders
Map
Who’s our who?
HMW questions
Map our goals
Sketch
Whiteboard ideas and concepts
Sketch potential solutions
Decide
Decide on solution to prototype
Storyboard a scenario
Prototype
Build just enough to learn
Draft a test script
Test
Capture insights with users
Review & iterate
User persona
I identified our core users and potential sponsors for our new platform.
I compiled what I learned through interviews and past research to align the team on who we’re serving and what their needs were.
Research findings
Google Analytics provided quarterly usage trends that informed product direction.
Mobile usage was growing sector quarter over quarter.
Page usage identified which parts of the user journey had the highest potential of improvement.
Working with medical experts, I identified user workflows and product friction points.
In order to reduce context switching, the user experience needed to follow their workflow, not the other way around.
Rapid prototyping
I prototyped several solutions that could address our HMWs, in order to gather user feedback.
I wireframed just enough to learn what did and didn’t work.
How might we improve charting times?
I worked with medical experts to script scenarios that would facilitate insightful discussion.
We observed where users would click and learned what they thought was valuable information at every step of the way.
UX Architecture
Building on early user insights, we developed a detailed product proposal to guide our transition from prototype to a fully functional app. By mapping the user journey across platforms, we identified a critical area for improvement—helping define scope and constraints.
Using swim lane diagrams, we mapped data flow and timing against user actions, ensuring design and technical requirements were fully integrated. This collaborative approach allowed back-end development to progress in parallel with design.
Development
Building a Scalable, Cross-Device UI for iOS, Android, and Web
I led a lean, scalable design strategy that balanced speed and structure. Knowing the app was built with Ionic React, I worked within its minimal UI library to accelerate development—leveraging existing components wherever possible and designing custom ones only when necessary.
We started with simpler screens to define the core UI patterns and interaction models. These early decisions gave us a solid foundation to scale as we moved into more complex workflows. As the design library matured, we were able to maintain visual and functional consistency across all device types.
Component development workflow
I start by auditing existing library components and benchmarking against best-in-class design systems like Human Interface Guidelines and Material Design. Guided by accessibility standards and user research, we explore scalable, usable solutions. After defining component states with engineering, the finalized design is handed off for development. I review built components for accuracy before they’re added to Storybook and made available for reuse. My team also supports implementation across the product.
Development considerations
We started small—buttons, fields, icons. Each built with shared styles for color, type, and spacing. From there, we built small, reusable components that could scale into more complex UI patterns
Everything stayed connected. No detached instances. Just a clean, flexible system that scaled as we did.
For high traffic workflows, we wanted to make sure they were as frictionless as possible.
Custom components were carefully considered and were justified through rapid prototyping and user validation.
Deliver & iterate
Early user research helped me build strong relationships with our customers and establish a sponsor user program for regular feedback. These ongoing check-ins allowed our team to validate ideas early, pivot when needed, and stay aligned with real user needs.
By involving users throughout the process, we created a sense of shared ownership. This not only built trust, it also led to early product buy-in. We secured adoption well before beta, giving us the confidence to build boldly, knowing the app would be a welcome improvement over existing solutions.
REFLECTION
Involving the full team early gave us a shared understanding of our users and challenges. This alignment helped us make confident, fast decisions and reduced costly revisions later on.
Diagramming the user journey early uncovered the full scope of work and facilitated meaningful conversations. It aligned stakeholders on expectations, timelines, and deliverables well before a single screen was built.
Lean UX & Agile
By integrating user research from the start, we could address pain points holistically. Early insights informed our priorities and allowed us to prototype with purpose, saving development time and reducing risk.
Regular testing with flight paramedics provided invaluable real-world feedback. Iterating based on their input helped us fine-tune the experience and build something truly useful—before launch day.