Outpatient Application
Day of procedure documentation and patient tracking system
Scroll ↓
Problem
Existing documentation system needed to be updated to remediate technical and UX debt to allow for application scaling and an improved user experience. The entire application was reworked, but for demonstration purposes we’ll focus on the Anesthesia Documentation section.
Process
For this project we wanted to incorporate the user centered design process as much as possible to ensure the end product was something that would have a high acceptance rate. Because this was such a complex application, we solicited user feedback at several different points throughout the design / development process to ensure we were meeting user and customer needs. Here’s what that looked like:
User / Stakeholder Interviews to Elicit Requirements
Design Workshop
Low Fidelity Mockups
User Testing
Design Iteration / Feedback Incorporation
High Fidelity Mockups / Visual Design
Cognitive Walkthrough
UX / User Must Haves Based on User and Stakeholder Interviews
Responsive Design
Intuitive Navigation
Fewer Clicks to Task Completion
Design / Layout that Closely Mimics Paper Charting
Improved Visual Contrast
Updated Design
Design Workshop
Requirements from user and stakeholder interviews were identified and marked as a “Must Have,” a “Nice to Have,” or a “Delighter.” These were then used to structure the content of the application and inform overall design.
Navigation was moved from nested tabs across the top to a consistent side panel location.
Low Fidelity Mockups / User Testing
Mockups were created based on the design concepts created during the Design Workshop. Using Axure, we created click-through prototypes that were used during our initial round of user testing. Feedback* from these testing sessions was then incorporated into the next design iteration.
*Feedback content has been removed from the image to protect product confidentiality.
Pertinent patient information was identified and made available in a consistent location on all screens.
Design Iteration and High Fidelity Mockups
Using the feedback gathered in the Low Fidelity User Testing sessions, we collaborated with the Design team to create high fidelity mockups and overall product design guidelines using Adobe Illustrator. Cross-team communication and feedback during the design phase occurred in InVision.
Intra—Op Anesthesia Charting: A top priority for users was for the electronic chart for anesthesia to look as close to paper charting as possible while improving the overall user experience.
Pre-Op Medications: Charting of patients current medications and the last time they were taken or administered.
Provider Desktop Dual View: It was important to users to be able to see both a schedule that they could navigate as well as view of today’s patients and where they were in the perioperative workflow on the same screen.
Provider Desktop Expanded: In order to allow users to view as much information as possible for each of those sections, we added the ability to expand and collapse the Schedule and Today’s Patients sections independently.
Cognitive Walkthrough
Using both the high fidelity mockups as well as an early working build, we tested the application with a cross section of medical professionals familiar with Anesthesia charting, the previous application, and other medical documentation systems. We conducted a cognitive walkthrough and assessed things such as:
Time on Task
Task Completion Rate
False Clicks
Satisfaction Ratings
While we did find some areas of the application that still needed improvement, overall satisfaction was high. All items that did not meet their designated “pass” threshold were submitted back to the team for further consideration and future incorporation into the application.
