React Diagnostics Telepatch Mobile UI Redesign

Overview

TelePatch is an at-home cardiac monitoring device that enables physicians to continuously monitor patients' EKG data in real time. Designed for long-term use, patients wear the TelePatch for a full month while maintaining their regular daily routines, with live data being transmitted seamlessly. The system is complemented by a mobile app, which allows users to record symptoms as they occur. Users can either record a voice note or select symptoms manually, enhancing the accuracy of their medical reporting and providing physicians with valuable insights for timely intervention.

The Challenge

Understanding why Users were opting out of recording their symptoms on the app

This project addresses key usability challenges in a mobile symptom-tracking app, specifically focusing on improving convenience and accessibility. Users found the two-handed navigation cumbersome, particularly when logging symptoms on the go or during busy moments. The lack of confirmation messages after symptom entries created uncertainty, while the inability to dim the bright screen at night raised concerns about eye strain. These pain points led users to avoid the app, even when they needed it most, reducing overall engagement and effectiveness.

The goal was to enhance the user experience by streamlining symptom logging for one-handed use, providing visual feedback through confirmation messages, and introducing features like adjustable screen brightness. While the product is designed for any patients needing to monitor and record heart symptoms, this project specifically focused on enhancing accessibility for working professionals with busy schedules and unmet accessibility needs. The business objectives aimed to boost user retention and reduce friction in the symptom logging process, ensuring users felt confident and comfortable using the app consistently. By making the process smoother, users would be more likely to record their symptoms rather than neglecting to report them. In turn, this would support physicians when they analyze user data holistically.

Mobile technical constraints to consider:

The mobile app comes pre-installed on a dedicated phone provided as part of the at-home cardiac monitoring kit. Users are unable to install or access the app on their personal devices. The mobile phone is pre-programmed to restrict usage to only the TelePatch app, which introduces unique accessibility challenges:

Users are unable to utilize other features or apps that might assist with ease of use, limiting flexibility and potentially impacting the overall user experience such as:

• Being unable to initiate mobile phone’s system dark mode
• Enlarge font size unavailable

The Solution

Enhancing Accessibility for Seamless Symptom Tracking

The Process Breakdown

01 Research and Discovery: Initiating User and Business Research

Understanding the product from the user side

I conducted a user interview for current users and people who had used similar recording apps in the past.

Understanding the product from the business side

ReactDX (React Diagnostics) develops products and services in the cardiac telemedicine and home sleep testing industries. I wanted to paint a clear picture about the product goals and how it aligns with React Diagnostic’s business goals. This involved interacting with the physical product kit in addition to digital research on the company. To achieve this, I studied the product packaging, instruction manual, and discovered React Diagnostic’s branding and mission statement: Their mission is to provide “accurate diagnostics and timely interventions” for patients so that they may achieve a better quality of life. I noted that their mission is reflected in the design of the physical monitoring device, clear instruction manual steps, and their mobile interface. This gave me a better understanding of how I should plan out integrating user and business needs.

Based on my notes about the business and user target, this is the user story I came up with: “As a user, I want to log heart symptoms quickly and easily so that I don’t delay or ignore logging symptoms because of the hassle”

UX Auditing

Next, I started a UI audit of the app to assess the current state of the user interface, map out the user flow to mark where pain points occurred, identify strengths, and create a list for areas of improvement:

• Visual accessibility could be improved

  Immediately, my first impression was that the primary theme color presented a user and business conflict. From a user standpoint, it is overly saturated and creates eye fatigue over time. From a business standpoint, this shade of blue was not the same one used in their brand identity which causes a disconnect from the product and the image that the business wants to project.

  Font size and secondary color made it difficult for users to intake important information such as device battery level

• Information hierarchy could be improved

• I created a user flow and annotated where users encountered frustration

  There were missing visual cues and confirmation screens after symptom logging completion

• Product and identity disconnect

  From a business standpoint, the app did not reflect React Diagnostics brand identity. This creates issues because users don't connect the app and the main diagnosis product emotionally.

Competitive Analysis

I then conducted a competitive analysis of direct (other brand that developed similar cardiac symptom recording apps for supplementing health diagnosis) and indirect market competitors (apps that had a similar process of logging symptoms or life experiences, but not necessarily heart symptoms).

02 Ideation and planning strategy

At this phase, I gathered all user interview data and created an affinity map to reveal the common themes within user expressed sentiment. Afterwards, I generated a list of new and existing app features to address the issues identified earlier.

03 Wireframe, Prototype, and Iteration

This is the section where I explain my sketch, lo-fi, to hi-fi design process.

04 Testing

The Results