Home Health EMR
Connecting Clinicians to Patients
As the sole Product Designer for a home health agency, I envisioned a custom Electronic Medical Records (EMR) system, through responsive workflows for desktop and tablet, a robust design system, and front-end development efforts.
Problem Statement
The home health agency was facing a critical need to improve the efficiency of their patient record and back-office software systems to meet the demands of the ever-changing healthcare industry, necessitating an effort in design and development to create a custom EMR solution that fit their exact needs.
TEAM COMPOSITION
2 Executives/Owners
1 Product Designer/FE Developer
1 Full-Stack Software Engineer
My Impact
Translated nuanced ideas into components
Created navigational flows and hierarchy
Provided front-end development in React
Understanding the Home Health Need
In today's rapidly evolving healthcare landscape, staying ahead of the curve is crucial for providing the best patient care. Home health agencies offer a variety of services, as ordered by physicians, to rehabilitate and treat their patients effectively. There are major considerations that these agencies must take into account regarding their implementation of software that handles their patient records and back-office tasks.
Stakeholder Collaboration
A cornerstone of this project involved high communications with stakeholders to ensure the end-deliverables were aligned with the goals of the home health agency and addressed the core pain points of administrators.
The home health agency I worked with was exploring a custom EMR solution that could improve efficiencies across departments, allow for customizability, and reduce the overhead of common admin tasks. Their goals included gaining a competitive edge in a demanding industry—which is understandable considering the circumstances of the sheer amount of patients entering home health, and the demands placed on clinicians to provide top-notch care to all of their patients.
The short answer is that what they were building, from scratch, would allow them to better control their patient care and services; however, it would require an effort from design and development to realize their goals. This endeavor required a multidisciplinary approach across UI, UX, and front-end development, for which I was up to the challenge.
Creating a Robust Design System
With a clear understanding of the agency's needs, I embarked on creating a robust design system. This system would serve as the backbone of the EMR, promoting consistency and a cohesive user experience across viewports and components. I crafted a set of guidelines, typography, color schemes, rules, and UI components tailored to their domain and users. The components were directly tied to the cornerstone pages we created, such as viewing patient records on a detail view or assembling the care forms.
Lesson Learned
During this project, I worked in an Atomic Design fashion, honing in on small components and working my way up. A lesson would be to get feedback and user acceptance testing on components as the design system evolves; we lacked this process.
One of the most important components of the design system included input fields. Such a simple, often taken-for-granted, form field contained a lot of functionality that needed to be considered. I didn’t want to reinvent the wheel, so the design system was based primarily on Google’s MUI system, which is a common framework for developers to extend in React. I defined custom styles across different input field types, pills for capturing the context of question types, and states of input fields.
What I created for the agency allowed them, and myself as a fractional front-end developer, to move quickly in introducing the changes into the system. Our library of assets lets us cross-reference during the development stage and build extensible components.
The undertaking of designing a full-fledged EMR began with a deep dive into the domain of healthcare and a willingness to garner an understanding of the daily lives of nurses, doctors, and back-office administrators. By taking copious notes, studying other EMR solutions, and providing a conduit for feedback, I was able to produce high-fidelity prototypes for desktops and tablets.
Information Architecture Considerations
It was imperative to understand the flow that a clinician would take when they were filling out start of care and resumption of care forms. Medical insurance writes the rules for what questions the clinicians need to ask and for how much an agency receives to fulfill the proposed care plan, depending on factors; the most important information to capture was the patient’s current state and how the plan of care would improve their mobility/ability relative to the doctor’s orders. When it came to navigation, there was a need for a clinician to have context as to where they were in the form, easy-to-find patient records without needing to exit the form, and an idea of what still needed to be completed.
Alongside considerations for the overall information architecture, I worked on the low-level interactions of components and navigation items to ensure there was a documented flow for how a clinician might get from one screen to another. We decided on a multi-navigational approach, where a top-level menu and sub-level menu was available to help the clinician drill down into the forms or charts that needed to be completed. I supplemented this navigation with a floating footer bar that provided context about saved changes and the ability to navigate from form to form.
Design Systems & Standards
My forte is in designing interfaces and components for usage in prototypes, that we can test, iterate, and ideate upon. This project was no different; I created Patient and Visit Hubs, custom input fields, and stateful components like the Patient Detail banner.
The desktop and tablet versions of the web application included a way for clinicians to view their current form via secondary navigation. Breaking up the navigation into primary and secondary lists reduced the confusion around finding charts. I included various functions such as searching and filtering, and a toggle for grouping forms as needed. These interaction patterns helped cut down on the visual clutter and introduced improvements that weren’t found in previous implementations at the company.
At different points in the lifecycle of using the system, a clinician would need high-level patient details. My idea was to encapsulate the high-level information into a fixed-position card, that could be expanded for more context. In times when they needed the full picture, a clinician could navigate away from the form at hand, and call up the patient details. This was helpful for clinicians to see if a patient had marked ‘DNR,‘ had allergies, and what team they were a part of.
As the product started to take shape, we were considering what it meant for nurses and clinicians to use the software in the field. Typically, they would go from home to home and fill out multi-page forms to capture an initial assessment, resume care, or close out their services. This endeavor, specifically the start of care was taxing on the clinician and patient due to the length of the form. We decided to focus on a refined interface that took advantage of the screen real estate and provided custom controls on iPads.
Front-End Implementation and Beyond
End-to-end Design
I provided the hands-on skills needed to bring the EMR to life and iterate against components to ensure their efficacy within the platform. I worked directly with stakeholders on implementation and strategy.
After working with the team on workflows and components, my ongoing support ensured a smooth transition and addressed any challenges that arose during development. As a self-taught front-end developer who uses React, I was able to support their efforts in delivering functional styles that leveraged the design system. It was rewarding to see the platform become real and focus on the meticulous details.
Designing and providing front-end development services for a custom EMR system showcased my abilities to handle complex workflows, dive into deep domain expertise, work with stakeholders, and present design systems that scale. By understanding the agency's unique needs, we created a solution that not only met but exceeded expectations. This custom EMR system is under development but stands as the agency's commitment to providing top-tier patient care in the evolving home health industry.
Outcomes and Results
Collaborating with the agency, I successfully designed the foundations of a web-responsive EMR system, established an evolving design system and aesthetic, and supported front-end development via React/TypeScript, enhancing their operational efficiency and competitive position in the home health industry.
Disclaimer: Header image from Unsplash.
