VeloxChart is a desktop application that allows users to chart patient data and organize everyday tasks
My role as UX/UI student is to research, create, test, and iterate this project from start to finish.
November 12, 2021 to March 25, 2022
Charting software for healthcare professionals who work directly with patients are found anywhere from acute care hospitals to long-term care facilities. The image below is a screen shot of Meditech, a charting software I used when I worked in hospitals.
Many areas in Meditech simply do not make sense, such as the tables shown below.
The greatest design challenge was to create something that was not only efficient, but also had a low learning curve. Nurses and doctors did not go to school for technology, therefore, they should not have to invest so much time learning how to chart.
Using the five stages of design thinking (empathize, define, ideate, prototype, and test) I researched and eventually created a comprehensive desktop application that tackled the many issues healthcare professionals often face on a day-to-day basis. With an emphasis in human-centered design, this application allows users to compartmentalize vast amounts of information without overwhelming users. VeloxChart uses a dashboard and tab system to organize information in an intuitive way.
I have worked in healthcare for a decade. The first several years I was studying to become a nurse and at the same time I was also working in the nursing department as at CNA, patient care technician, unit secretary, and phlebotomist. During those years, I experienced a variety of issues and witnessed my fellow nurse colleagues struggle and crumble under the pressure. As a result, I decided to focus my efforts in healthcare for this project.
After extensive reading of peer reviewed studies and experiments, I found that there were a variety of issues healthcare professionals, specifically nurses, faced. The largest issue was the nursing shortage, which in turn caused the ever growing nurse-to-patient ratios as well as declining quality of care. Nurses are being forced to take care of more patients than what is deemed safe or ideal simply because there aren’t any more nurses available. As a result, the health outcomes of patients have been negatively impacted, which includes longer stays in hospitals and slower recovery.
Another issue I found in my research was the charting dilemma. Both nurses and doctors reported excessive charting requirements that have often impeded patient care. Healthcare professionals are being backed into a corner, having to choose charting patient information over caring and interacting with their patients. Studies worldwide have shown that there is a lack of process when integrating staff members into using EMR technology, and current technology often leads to increased stress, which reduces the quality of care for the patients.
After concluding my secondary research, I proceeded to plan my user interviews. My goal was to identify users of current clinical charting software in hospitals and nursing homes and discover their pain points, motivations, and possible solutions to their issues. I wanted to see if there were correlations between my research and the users I interviewed. If there weren’t any correlations, I would have to learn why these correlations did not exist and how I would pinpoint issues current users had.
Participants were recruited through different channels such as Slack, facebook, Reddit, and in person. Ages were restricted to a minimum of 22 years and participants were required to have experience in direct patient care in a clinical facility setting (hospitals, nursing homes, skilled nursing, rehabilitation facilities, psychiatric facilities, etc.…). My objective was to identify users of current clinical charting software in hospitals and nursing homes and find solutions to improve efficiency and flow of the software.
Questions I wished to get answered:
After securing 4 participants, I interviewed each individual for approximately 30 minutes.
After conducting user interviews, I went back and listened to each recording and wrote down notes and observations on individual sticky notes. These notes included participants’ pain points, their hopes, concerns, and their needs. Each sticky note was then placed on a board in no particular order or category
After conducting user interviews, I went back and listened to each recording and wrote down noteIn my next step, I slowly began grouping notes together based on keywords. For instance, if the participant mentioned anything about patient ratios or the number of patients, I would group them together regardless of the actual context of the note. Once these notes were grouped together, I had to take a step back and name each group. I asked myself, what did these notes have in common? What is the theme?s and observations on individual sticky notes. These notes included participants’ pain points, their hopes, concerns, and their needs. Each sticky note was then placed on a board in no particular order or category
From there, I named each category of the grouped notes. Four reoccurring subjects appeared throughout the interviews: patient ratios, reason for going into healthcare, administration, and lastly, charting. Each note may have pertained to one of the four categories, however, they did not follow the same trajectory. Categories could be broken down further into more specific subcategories. In the fourth step, I began grouping like concepts in each category.
Lastly, I ordered each code in each subcategory based on priority. The most important codes were placed at the top and the least important at the bottom. With these prioritized codes, I organized my thoughts and generated a theme.
I learned participants were all a very similar type of person. All of the reasons why they went into healthcare were the same, to help people. Those who are empathetic and wish to contribute to the health and lives of others were drawn to this field. Another reoccurring discussion topic that participants brought up included the high nurse-to-patient ratios. Many of the participants experienced being overwhelmed by the number of patients they were assigned.
I generated an empathy map based on the participants of my interviews. To do this, I had to put myself in the shoes of others. I asked, how would the participant say and feel about healthcare? What would they do and what would they think? I divided these questions into four sections. In the “says” section, I included direct quotes from participants from the interview, one example would be, “A well written EMR saves us time, a badly written one will sink up time”. In the “thinks” section, I included wants and ideas of the target audience, such as having administrators involved in patient care or having multiple views in EMR software. In the “does” section, I listed things the target audience would do in certain situations. Lastly, the “feels” section listed the emotions someone would go through within those situations.
The next step was to list the participants’ pain points and areas they would benefit, or gain from. The pain points were areas I focused on when it came down to identifying main issues in healthcare. Although there are many, I highlighted the areas that brought participants the most grief and focused on areas that had potential solutions. In the “gains” section, I listed areas that were beneficial to the participants, such as their ability to adapt in different situation and their resiliency in times of trouble.
From this point, I took a step back and asked, “who am I designing this product for?”. By using all of the qualitative and quantitative data I gathered from my research and interviews, started to develop two personas. The personas would represent my target audience, their background, personality, priorities, and other characteristics that make them unique.
My first persona is Rachel Burns, a registered nurse with years of experience under her belt. She works 60 hour weeks and is married with two children. Rachel is highly extroverted, as a result, she enjoys working as a nurse and thrives in human interaction, however, she find herself to be stressed often and ends up working more than her fair share due to fear of the administration. This has affected her personal life by reducing the amount of time she can spend with her family. Because she works in a metropolitan hospital, she finds administrators constantly breathing down her neck and has to choose between good record-keeping or caring for her patients. Rachel is an empathetic person, and she wants to spend more time on her patients, but her fears lead her to focus more on her charting.
My second persona is Rhonda Compton, a CNA who works in home health care. Rhonda also has extensive experience and has worked in different types of facilities. Although Rhonda enjoys home health care, she is paid very little, as a result, she is currently in school with hopes to change her career. Rhonda is introverted and cares deeply for her patients. She has found working in hospitals and acute care facilities to go against her morals and values, due to administrations tendency to push nurses to chart more thoroughly, which in turn has reduced time with the patient. Rhonda’s priorities, first and foremost, are to that of the patient and not the charting process or administration. Both personas want what is best for their patients. One has her hands tied and has to choose between charting and patient care. The other left the hospital environment all together because she chose her patients first.
Both personas would prefer it if there was less charting, or perhaps a more efficient and effective way to chart. Both personas don’t want to sacrifice their personal life, but one persona ended up choosing her job over her life. Although both individuals have similar goals, their priorities differ.
After taking the time to develop my empathy map and personas, I had to now focus on the issues my target audience would experience. I learned that healthcare professionals have very similar perspectives when it came down to their field. They also had grievances in regards to the quality of their work. Before I could brainstorm solutions to the problems, I first had to identify the problems by asking myself questions in a statement format.
These statements helped me condense the issues I have discovered in healthcare into a workable and compact construct. With my HMW established, I then had a set outline on how to approach the the problems and why I needed to resolve them.
After synthesizing all of my data and constructs, I proceeded to the ideation phase. In this phase, I drew quick sketches of some ideas I wanted to integrate into my application.
Idea 1: Have an application compatible across different platforms.
Idea 2: Accessible via RFID scan technology.
Idea 3: Include a notification system that alerts users.
In my user stories, I wrote down step-by-step the most important areas that healthcare workers are required to do. What decisions would they have to make? What tools would they need? I had to put myself in the shoes of others in order to understand the needs of the target audience. In the example diagram below (starting left to right), if I were a CNA, one of the things I would need to do is chart patient information.
While ideating and sketching out ideas, I realized that the application I wanted to create was far more complicated than I anticipated. In order for it to work for nurses and doctors it would have to solve the issues already present in current charting software. I could not make this application mobile to start with. I would have to begin with a desktop and simplify it after I established all the necessary functions in the application. The trajectory of my ideas changed and I would have to focus on something much larger.
Before I could design anything, I first had to lay down the skeleton of the application. I started with the basic structure of the information hierarchy, the site map. Based on my research and ideation, I wanted to have have at least five pages that most of the information can fit within: Dashboard, Patients, Orders, Tasks, and Reminders.
The Dashboard page would be a summary page for the users. It will also show users the most important information first, such as STAT orders and new or critical lab results. From the dashboard, users can access the other primary pages. This feature is crucial to keep everything efficient and parallel to the workflow of nurses.
Although I had many things planned for this application, I had to reduce the amount of information down to three of the most important routes. By reducing these routes, I’d be able to focus on creating something comprehensive. Once these routes are finalized, I would apply my designs to other routes and add on the features I planned in the beginning. My three red routes are as follows:
After establishing my red routes, I started planning my user flows. I traced and determined what steps a user would have to take in order to successfully complete a red route. By taking this methodical approach and expressing it with a diagram, I can visually see what areas may cause confusion and possibly lead to even more stress for the user. My goal is to reduce stress by increasing efficiency, so being able to see where I can cut corners can help me streamline the application.
After completing all of the components of the information architecture, I started to have a better understanding of what my application would be and how the layout would appear. This application would have to be large and thorough enough to fit all of the necessary information for a functional application, but simple enough for users to navigate without being overwhelmed by the immense amount of information that is often found in healthcare industry. To do this I had to utilize all of the information I learned during the information architecture phase. It would have to be intuitive, logical, and most importantly, human-centered.
When brainstorming a possible layout, I decided I wanted something simple. I had to create something that the target audience would be familiar with familiar with and organize it in a way that wouldn’t clutter information. To achieve organization and efficiency, I did the following:
One of the most important area of healthcare applications is the patient’s chart, which I have often found to be quite messy. To reduce the amount of information the target audience is presented at one time, I attempted the following:
The tabs I incorporated into my application were inspired by the physical charts found in one of the hospitals I’ve worked at. As a former unit secretary, one of my jobs was to keep physical charts in order, and to do that, I had a system of tabs to organize each patient’s chart. This is a practice that is not adopted by all hospitals, in fact, this particular method was something I noticed simply because it kept the contents of charts organized and easy to navigate. Other hospitals I worked in usually had piles of paper stuffed into a folder without any semblance of structure. Finding a particular piece of information took ages. By adopting the tab system into a digital environment, I wanted to create the same sense of structure in a vast sea of information.
After much research, I learned there were a variety of issues such as:
As something that is designed to hold immense amount of information, I needed to utilize the entire screen instead limiting and condensing information into a smaller space. Once I established my grids, I applied them to the rest of the application
One of the major changes I implemented was over the patient chart where I moved the patient profile from to top of one column and created a separate column. With an established grid, I had plenty of room for a separate column
Lastly, I implemented changes when adding new orders. Initially I had the form as a modal before making the following adjustments:
By having a separate page for placing orders, users can have a more comprehensive view on what they are ordering. Every change they make on the form will populate in the summary.
Healthcare is often a high stress and fast paced environment, I wanted the mood of my application to be more serene and muted. I did not want anything bold or bright otherwise it would incite more stress on the user. So instead, I based my color palette on images that brought calm and serenity.
Before I could apply these colors to my design, I first had to check to see if the selected colors met the standards of the Web Content Accessibility Guidelines (WCAG). With each color, I used a contrast checker to make sure each color was accessible to all users based on the three main background colors.
The first three main colors met the WCAG, which meant I was clear to utilize these three colors along side the three background colors. The last two warmer colors did not meet the WCAG in terms of text, however, they met guidelines as graphical objects and user interface components. I decided to uses the last two colors as accent graphical colors and omit using them in any sort of text context.
When choosing fonts, I decided to adapt sans-serif over serif. Because this is a healthcare application, legibility is one of the top priorities. Although serif can be legible, there are plenty of fonts within the family that may be difficult to comprehend. Sans-serif would be ideal in terms of clarity and precision.
Roboto was ultimately chosen because it is universally compatible. It also has a greater x-height, which has better legibility at small font sizes. Roboto also has a variety of weights to choose from, allowing creative freedom in design.
When it came down to the icons, I wasn’t all that particular with it. Because this is a healthcare application majority of the clarity would be represented by text. Icons would give it additional emphasis and allow it be more visually appealing. I chose images that were bolder and filled in for the sake of clarity. This will allow visual representation without confusing the user.
As for the colors, I simply followed my color palette. Icons would not necessarily function has important aspects of the application, rather, they would be used to draw attention and clarify the context of the text. Overall, the icons would accelerate understanding and comprehension and add to the design elements of the overall application.
Although my focus was mostly on designing the UI components of my project, I still wanted to create a logo that was not only specific to the brand of VeloxChart, but also memorable without standing out too much. Like I stated earlier, I wanted to keep the entire application muted and calm, the opposite of the actual healthcare environment. So, instead of choosing a graphic from a stock photo site, I decided to draw something that would represent my brand.
The design shows a human-esque figure, which represents humanity, the foundation of healthcare. The figures are also coming together in the center, symbolizing my brand attributes: Sincerity, caring, kindness, thoughtfulness, and effortlessness. Overall, I believe I managed to design a graphic that not only represents VeloxChart, but also represents me personally.
Finally, after thorough planning, I was ready to start on my high fidelity screens. At this point, I used my wireframes as a guide while I included color and imagery into the design.
I had to take a step back and think about the design of the application, which wasn’t something I was concerned with at first. After some research, I decided to make several changes:
All of these changes were made to be more aesthetically pleasing to the user and remove distractions. For example, a simple light background color is significantly less distracting than the gradient. A simplified infographic also removes the amount of information the user would be exposed to at one time.
All the stylistic changes I made to VeloxChart allowed me to realize that I could create something both functional and creative. I finally had a workable prototype. In a sense, I felt relieved. Everything I learned was coming together and I was able to create something that I was proud of. This was something that took hours of mistakes and revisions. There were moments I had to scrap ideas entirely. I learned that this field isn’t for someone who is inflexible and unwilling to learn and compromise. I was taught how to think and how to approach issues. I was reminded to be creative and unique. I believe my work paid off and I now have a project I can be proud to share:
With my prototype completed, I was ready for the user testing phase. As a way to recruit potential testers, I reached out to my alumni through the Slack channel. I offered interviews and testing participation in exchange for their own participation. Thankfully, I was able to secure a handful of testers. I then reached out to a nurse that I interviewed for my research. My goal was to have at least one individual that had healthcare experience, preferably someone who has worked in nursing. I used Slack to recruit, Calendly to schedule, and Zoom to conduct the actual interviews.
During my first round of usability testing, I found some issues the users experienced. Luckily, none of these issues stopped users from completing their tasks, however, it did affect the overall flow of the entire application.
I thought testing was going to go smoothly. Turns out, my expectations were too high. From my perspective, I designed something logical and straightforward. Unfortunately, first time users found themselves bombarded by vast amount of information that did not make sense. Because the application was made for nurses, users without that experience simply could not connect meaning behind what they were doing. They were only able to provide me feedback regarding the design, but I had to depend on those with healthcare experience to enlighten me with the content and context of my application. I learned that I had to keep my expectations to a minimum and be prepared to keep changing my application to meet the needs of the users.
My main focus when iterating my prototype was to resolve the issues identified in my first testing phase. I decided not to focus on the personal preferences of the users, instead set my sights on solving actual problems.
In the second phase of user testing, I approached it the same way as my first phase. I recruited testers through slack, scheduled in Calendly, and interviewed in Zoom. Like the first phase, I also had at least one tester with healthcare experience.
I no longer had any large issues that prevented users from doing their tasks. However, each user had their own opinion regarding the design of some interfaces. None of them really focused on any specific area. For instance, one user wanted to see preset templates utilized in the task flow instead of having to manually type things every time they wanted to add a task, which was something I am now considering. The reason why I chose to utilize a modal for the tasks was so that users did not have to have their work flow interrupted to fill out a form for a task. I wanted to give them the flexibility to add information quickly and then move on with their day.
Overall, my second phase of testing did not have any issues that prevented users from doing their tasks, however, I did receive an abundant amount of suggestions regarding the design and format of the application. Moving forward, I will work on these suggestions based on priority.
I found the Capstone Project incredibly fulfilling. The process of learning these concepts and then applying them into something concrete was eye-opening. Being able to design something that can work in real life has given me more confidence in my abilities and has allowed me to see UI/UX in a different light than I had initially viewed it. I learned about design thinking and creating personas to learning how to conduct interviews and animate prototypes. I look forward in applying everything I’ve learned into future projects and perhaps a prospective career.