Eko Health Devices

Heart health from home, with the power of smart instruments. Creating an approachable way to communicate complex technology to the patient and clinicians, regardless of age and demographic.

Client
Team
Our Role

Ship Date

Live Link

Overview

Eko's suite of machine learning algorithms equips providers and health systems with a powerful new ally for detecting heart disease. Heart sound and ECG data will be analyzed for heart murmurs, atrial fibrillation, and other hemodynamic parameters indicative of heart disease.

Patient Facing Software

Eko Home allows patients to stream data to providers, and clinicians to monitor patients, outside the four walls of the hospital. Simple patient enrollment . With a provider's prescription, patients can download the Eko mobile app and begin sending recordings back to their care team

Eko Home, allows patients to stream data to providers, and clinicians to monitor patients, outside the four walls of the hospital. The challenge in design was finding what works for both the patient and the clinician. Power and functionality meets simplicity and usability.

Solutions

Simple, Open, Layouts and Iconography

leveraging ample white space and focusing on only a few key interactions in each screen. A common issue with medical applications is cognitive overload, i.e. trying to fit everything plus the kitchen sink into one screen.

Improved Usability in the Recording Flow

Modifying functionality to make the recording interactions more usable, specifically helping the user position the device correctly and simplifying the layout of the screens to allow focus on the most important elements.

Patient History and Recording Architecture

Organize the data according to what is most important to each user type, then allows that data to be filtered based on simplified tags.

An Accessible Overview Screen

Utilizing existing iconography and data visualizations seen in the other screens, echoing that language and solidifying metaphors, then extending it into new concepts and important health information like AFIB and Bradycardia / Tachycardia Alerts.

Revamped and Improved Onboarding Experience

Focused around approachability, ease of use, and fastest path to value - while using illustrations, iconography, and visual design to provide an entertaining and delightful experience.

Simple, intuitive, accessible, the perfect combination for a medical app built for at-home use.

Design Highlights

For process deep dive scroll a bit further down

Recording functionality and management by both patients and clinicians
The new recording flow, usable by both patients and clinicians
Overview of the recording flow, updating usability, visual design, and functionality throughout.
Revamped onboaring flow
Overview of the new onboarding flow, educational, simple, entertaining, and resilient to errors.
The app also has a web app portal for clinicians to manage their recordings and patients

Process

The following section takes a quick deep dive in to the thinking and strategy behind each of the solutions, issues with the original design (if applicable) and how they were addressed, along with some of the design process and iteration leading up to the final product.

Simplicity + Usability in the Recording Flow

Modifying functionality to make the recording interactions more usable, specifically helping the user position the device correctly and simplifying the layout of the screens to allow focus on the most important elements.

The original recording flow

Reasonably practical but missing the fit and polish expected from a world class product, still feels like it's in "beta" mode. Additionally, the flow is missing a number of elements and features which demonstrably add to the usability of the experience. Namely, help with device positioning and control/indication of recording types and resulting analysis.

Early evolution of the recording flow exploring a bullseye icon for device positioning, ways to indicate recording type, and anatomical illustrations for help.

One of the key elements missing from the original recording flow was a an intuitive way to help the patient understand how to place the device on their chest, near their heart, to transmit the best signal to the app for a high quality recording.

These early explorations made use of a marksman's bullseye icon to access the device positioning help with an interactive anatomical illustration.

This early iteration also shows a some other functionality that was eventually cut, selecting a recording type and looking for specific elements in the recording such as AFib.

These were all found to be too esoteric and complicated to be successful, but our data showed that we were on the right track. The next step would be finding ways to communicate this information through other metaphors, removing unnecessary functionality, and placing education somewhere else.

Explorations using color (on the recording button in the bottom of the screen) to indicate the best position of the recording icon.
Zoom in of the color-indicates-signal-quality exploration. We were on the right track with this one, it utilizes the same signal quality graphic used in the onboarding tutorial. However, at this stage, it has already been shown and understood, so we wanted to explore minimizing it in the next evolution.
Detail of the early signal quality + full recording flow - which also shows the relocation of AFib+etc information to a recording overview screen and help-info-overlay.
Final explorations of the minimized signal quality indicator. It could be minimized significantly since we had already done the education job in the onboarding tutorial. This allowed the focus and accessibility of the recording functionality to take center stage.
Signal indication - minimal and resilient to accessibility needs.
Signal indication

Minimal and accessible. Due to the positioning and shapes of elements usable by the color blind. Additionally, once the indicator has reach good quality for a moment recording begins automatically.

Additional signal indicator info available on-tap
Final Recording Screen Design

The final design came out bright, usable, and accessible - everything you could ask for in an app meant to be used by a wide demographic range of patients and clinicians.

Patient History and Recording Architecture

Patients needed a way to organize their recordings and clinicians needed a way to organize their patients and recordings. Needs included a way to keep a similar framework to utilize on both the patient and clinician views, an intuitive filtering system, and a redundant access points for patient records and new recordings.

The trick, and common theme in this project, was devising a unified system that worked for both key user groups without sacrificing anything.

The original patient recording screens
The new patient recording history screens

Key Points

Filtering was kept intentionally simple and contextually relevant. The average active case load for a clinician was only in the low double digits, so there was no need for an active filtration system according to name or other demographic data. Automatically sorting the patients by most recent date was more than ample.

The patient recording history screen uses the same layout and treatment, but with contextually relevant information highlighted.

The patient screen highlights what's important to them and of course does not show a list of other patients. The patient needs to see whether or not there is an active clinician monitoring their account and recordings, or if there's more than one, show that too. They also need to see, on a case by case basis, whether or not their recording has been viewed.

Final recording history design
The most important metric for an active filter was recording output and assigned/unassigned status, therefore these were the only active filters included. Everything else was cut to allow the experience to breathe. Simple, straight forward, usable.

An accessible overview screen

leverages the existing iconography and data visualization seen in the other screens, echoing that language and solidifying metaphors, then extending it into new concepts and important health information like AFIB and Bradycardia / Tachycardia Alerts.

Original recording output screens

Suffering from a number of issues. The information was not organized as legibly as possible, usability issues around button treatments (namely in the footer, esp. the done button looking inactive), and a lack of information around AFib and _cardia alerts being visible and above the fold.

New recording output overview screens
Final recording screen output designs.

Revamped and Improved Onboarding Experience

The newly designed experience focused around approachability, ease of use, and quickest path to value. To lead in to that and support it:

The onboarding experience was revamped using illustrations, iconography, and visual design to provide an entertaining and delightful experience.

Additionally the educational tutorial teaching the user how to use the device was emphasized here so that it could be removed from the recording flow.

The original onboarding flow

The original onboarding flow was functional, but not ready for prime-time. It needed that final fit and polish that is expected of any market leading consumer app - illustrations, education, personality.

Ease of use and delight are table stakes in a first time user experience.

Additionally an education tutorial needed to be tucked in to the onboarding experience so that some weight could be taken off of the shoulders of the recording flow, it needed the room to breath. A common mistake is trying to fit too much into onboarding, it can often feel like the user needs to know everything, or that if we are not explaining everything we are leaving them hanging. But the reverse is true.

By showing or explaining too much, you can overload the user and prevent them from retaining much of anything or risking drop-out due to annoyance and fatigue. In this onboarding experience we struck the right balance, short and to the point with everything needed to use the key functionality the first time, but nothing else. Additional education is provided in-context within the app as it becomes relevant.

Final Onboarding Design

New onboarding overview
The end of the onboarding experience, leading in to the recording flow

Fin~

Thank you for your interest and reading this entire case study. If you made it this far you likely have some thoughts, interesting view points, or even critique. Feel free to get in touch and chat about user experience design.

Latest Posts

Make it great

Get Godsey
Hire great design and direction, get great digital products. It really is that easy.