Chart-Sync
Medical Plug-In

Team

Matthew BermudezCaylin Gaines
Khrystal Mendonca

Project Length

12 Weeks

Tools

Figma
FigJam
Google Forms

Roles & Responsibilites

Researcher
UX Design
Atomic Design System
Prototyping
User Testing
Componentization
Interactivity
Continuity between Systems

Pitch Deck

We created Chart-Sync to be a medical charting plug-in that would streamline the process of inputting patient information and would indefinitely remove the use of paper charting.
This system could be used for a variety of health care fields and professionals.

(30 to 45 minutes read)
Features:
UI Design
Research
Click To View Prototypes →

Introduction

Objective

Our goal was to increase the digital adoption of technology by frontline workers, by creating a digital, hand held medical charting system in order to streamline the process of inputting patient vitals. Our system intends to act as a plug-in for existing systems.

Problem Statement

The current state of healthcare workers has focused primarily on paper and personal computer charting. What existing products/services fail to address is the amount of time and effort spent by healthcare workers when charting. Our system will address this gap via implementing a portable device such as a tablet or phone application, and our initial focus will be streamlining the initial charting process.

Hypothesis

We believe we can implement and/or increase the digital adoption among healthcare workers who use paper or personal computer for charting as part of their job by making the process more efficient by streamlining the patient check-in process of inputting initial information such as vitals.

Stakeholders

Our primary target audience is health care professionals, we aim to reduce their pain points and frustrations and want to put them at the forefront of our user testing. Other stakeholders might include hospitals, clinics, or other healthcare companies that would want to implement our system into their place-of-work.

Exploratory
Research

Proto-Personas

We initially created 3 proto-personas based off three varying healthcare fields, featuring a Pediatrician, Dental Hygienist, and ER Nurse. Further into our project, we limited it down to one fully developed persona based off of our User Interviews to create a more accurate description of our target audience.

User Interviews

As a team, we interviewed 4 users in various healthcare fields based off of our proto-personas: a Surgical Nurse, a Registered Nurse (RN) in a Cardiac Unit, a Dental Assistant and a Dental Hygienist student. We collected basic demographic information, and asked a series of 10 questions, and also utilized the "5 Whys" method.

I personally conducted the interviews with the Dental Hygienist and Dental Assistant, which you can view the transcripts & notes by clicking on the hyperlinks that are underlined.

Dental HygienistDental Assistant

Extant Systems

We researched four extant medical charting systems/ patient database systems based on what we found from the current market, WOM marketing, and guerilla interviews. These systems (listed below) are utilized across various healthcare fields. We primarily utilized Google, YouTube, and various forums and blogs in order to get an understanding of how they currently function, look, feel, and the layout of their information architecture. The four systems were:

  • eClinicalWorks
  • Dentrix
  • Meditech
  • Epic Nurse

Card Sorting

Based off our learnings through research and user interviews, we synthesized our ideas via FigJam, then sorted and grouped using affinity diagramming. Once categorized, we titled each grouping based on a high-level goal achieved by these solutions.

Brain Storming

Using FigJam, we compiled all of our thoughts, ideas, flows, features and more. After a brainstorming session, we created a basic skeleton, combining all of our ideas into categories, and highlighting ideas that appeared to be the most viable solutions we could pursue, and discussing next steps. The six main categories included:

  1. Features
  2. Devices: Tablet
  3. Devices: iWatch App
  4. Streamlining
  5. Accessibility
  6. Accountability

Prioritization Matrix

We gathered the top features from our brainstorming and created a prioritization matrix in FigJam. We gave our problem statement and hypothesis to external users and had them rate the ideas on sliding scales of Low to High Effort and Low to High Impact. They then voted on which idea(s) would be the best to pursue for our business goals. After each of the items were rated, the most viable option was to create a Universal Charting System, which would operate as a plug-in across many different extant charting systems.

Focused
Research

Journey Mapping

We created two journey maps that allowed us to empathize with medical professionals. The journey map includes their emotions and feelings during each step, what technology they interacted with, and if any other healthcare workers would be affected by our product.

Storyboards

Building off of the Journey Maps, we wrote stories to visualize when and how our proposed system would come into fruition. We encompassed users' emotions, pain points, and how our system would mitigate the issues by streamlining the charting process and creating a multi-channel experience for users.

Information Architecture

Through our research, we categorized our proposed system into 5 main categories: Patient Information, Medical History, Vitals, Lab Orders and Notes. Below each of the main categories, we listed each of the corresponding information tags related.

Low Fidelity

Sketching

As a team, we iterated more than 80+ sketches to gain a better idea of how we wanted to structure and organize the information; this included features, functions, UI, layout, IA, and more. We utilized methods such as the Crazy 8's (for design sprints) and show, tell, describe, when going through our sketching processes. We then combined our ideas, picking out the most viable ones to pursue in our app.

Scenarios of Use

Due to constraints regarding both time and resources, we narrowed our system down to complete three main tasks utilizing both the Tablet and Mobile platforms to produce a Minimum Viable Product.

  1. Can you demonstrate the steps you would take to admit a patient? (via Tablet)
  2. How would you update a patient’s vitals? (via Mobile App)
  3. Which collaboration screen is most effective (A/B Test)​

Wireframes

Below are some wireframe samples created for both mobile and tablet resolutions. For the wireframes, we laid out all of the screens necessary to complete the SOU's above, which totaled to be about 20 screens each resolution. To view them in their entirety on our Figma file, click here.

Design

Moodboard

Style Guide

Atomic Design

This was our first time tackling the Atomic Design methodology, which resulted in us inadvertently working backwards. We started at organisms, creating some base components such as a dropdown menu and status bar, and then took them apart and separated them into their respective atoms and molecules.

Testing & Iterations

Design Sprints

Overall, we went through 3 Iterations of Design and Testing phases. We started with black and white low-fi wireframes, and later leveled up to a high-fidelity, fully prototyped system. Each design sprint lasted about two weeks. We would spend the first half designing, then discussed what worked and didn't work through peer-level critique.
We would then construct a script for all of us to follow, editing and tweaking it with each iteration to fit what we were testing. When conducting user testing we tested 2-5 users for each iteration due to time constraints and low resources. Unfortunately, we were not able to test actual users in healthcare, which could skew our data overall.

Iteration 1: Low-Fidelity Wireframes

For our first round of testing, we tested users on the 3 SOU's and a 12 question survey on what they understood and experienced on each screen. Due to time constrains, we were only able to test two users for this iteration, however they both provided us with useful and constructive feedback that we would implement into our next design iteration.

Iteration 2: Mid-Fidelity

Our Mid-Fidelity product adds a sense of our style guide, utilizing color on some of our pages, and implementing an early version of our components. It's prototyped out enough for user testing, but is not fully functional.

We had a lot more user feedback for this round of testing, which showed us that the more that we add, the more problems we would eventually run into. Similar to the first round of iteration, we had 3 SOU's, about 12 questions, and 4 users. While the process overall was more clear, we ran into many smaller issues, as well as keeping consistency across both systems.

Iteration 3: High Fidelity

Our High-Fidelity Prototypes are fully operational, and our final version of our ChartSync Plug-in. For this round of testing, we provided users with an in-depth example of patient information, and asked them to physically chart it into our system. We tested 3 users, and all of their interactions went very smoothly, they thought the process was done well and straightforward for anyone to understand.

Future
Endeavors

Going further, there are still loose ends to tie up. Specifically, additional research and testing should be done as more iterations are released, in addition to testing our actual target audience. Due to constraints regarding both time and resources, we were limited in what we could accomplish. However, from the feedback we received through the different rounds of design iteration and testing, future improvements include:

  1. Creating a stronger brand identity
  2. Better prototyping functionality
  3. Creating “incorrect” states for all screens & components
  4. Increasing the recognition of the collaboration feature
  5. Editing the UI of buttons

Figma Files

To view any of the brainstorming, design, or prototyping process, you can click on the embedded files below.

Back to Top ⤴︎

Khrystal Mendonca