Wellinks is a virtually integrated COPD disease management company, working with healthcare partners such as UMass Memorial Health and Aspire Health to improve access and quality of life outcomes for people with COPD.
As the first full stack pulmonary program of its kind, we needed to develop our own electronic health record (EHR) platform to meet clinician needs.
My role in this project was to design the clinician and patient guided-exercise experience, as well as refining the overall UI of the platform. The objectives were to:
- Summarize patient data effectively
- Increase charting efficiency
- Stylize components to be clean and minimalist
I began by loosely mocking up the project requirements on low fidelity wireframes, just to ensure that I was covering all my bases. Iterating daily, I would bring these wires to our daily stand to review them with the team. Feedback early on allowed us to narrow down our scope to the core MVP features.
The feedback I received on these designs helped determine what was primary for the user to see and non-negotiable in their ability to move through the workflow. While providing additional context to the user was useful, providing too much context distracted from what was relevant. Thus, we had to make these details hidden, but accessible.
Once all stakeholders were aligned on the requirements, I began designing high fidelity wireframes, using design principles to establish a visual hierarchy. I used Gestalt Principles to create focus and visual shorthand — like icons and color — to convey meta information around content like escalation intensity or documentation recency.
This card component also has an expanded state, for information that was supplementary but not necessary in clinician decision making. One specific piece of focus was the patient's medical readings. I conveyed the context of when these medical readings were done in two ways. First, I made the data point for readings taken during exercise visually different from at rest. Second, as to not solely rely on color as a visual indicator, I introduced a hover state with a clear label. The hover state also gave us greater flexibility in adding additional context (ex. time of reading) in the future.
Once I had nailed down the component, I started prototyping interactions. I designed the member cards to vertically scroll, while the rest of the pre-appointment details (meeting date and time, call to action buttons, etc) remained static as to preserve relevant call to actions.
Moving on in the user flow, I encountered a browser constraint during user charting. Half of the window would be taken up by patient videos, so all charting had to be done in a narrow, streamlined segment of the screen.
In addition, clinicians had to record patient progress against three dimensions: medical readings, exercises regime, and intervention notes. Clinicians would need to switch between these dimensions as they charted, and switch between patients within those dimensions.
Complicated, am I right? So I created a basic user journey flow diagram to make sure I understood what would be the most efficient process of events. I then created designs that matched by placing visual hierarchies and call to actions where the users would naturally land.
Rounding off my work in the EHR system, I stylized our table components to be as efficient and simplistic as possible. As this component appeared often in our system, it was important to me that we use all available design patterns to reduce visual redundancies and get the most use out of our table.
The perfect cherry on top for this project!
KPI’s include 11% increase in conversion rate in nurse triage line usage, and unanimous clinician satisfaction in escalation monitoring workflows as a result of this project.
Designing this EHR system was a HUGE undertaking and involved collaboration from clinicians, operations managers, and the whole product team. Although challenging, I loved coming up with creative solutions with these stakeholders. Nothing was better than getting their final stamps of approval.