In the healthcare industry, the impact of UX design is profound. The healthcare market is projected to reach $665.37 billion globally by 2028, emphasizing the importance of designing effective healthcare solutions that enhance user experiences and outcomes. Additionally, due to the sensitive nature of healthcare data, it is vital that UX designers engineer experiences that are accessible and trustworthy for patients of all ages and tech-savviness. This personal project case study discusses how I redesigned APPatient, a telehealth app, to significantly improve user experience and accessibility.

What Is APPatient?

APPatient is a telehealth app that connects patients with providers via a patient portal and virtual video visits.

The Problem

Imagine scheduling an appointment with a new doctor. A few days before your appointment you are instructed to download a patient portal app and begin your check-in process. Unfortunately, upon downloading the app on your phone, you struggle to create an account to log in. After a few days, you finally generate the credentials you need to log into the portal only to find the check-in process frustrating and inaccessible. You log out of the app and decide to wait for your appointment to fill out paperwork.

This is the experience of many users who use APPatient. This patient portal app experiences low user satisfaction due to accessibility issues and a lack of intuitive design. Users find it challenging to log into and navigate the app to access medications, schedule appointments, and communicate with healthcare providers effectively. This results in frustration and decreased utilization of the app’s functionalities, impacting the overall patient experience and healthcare provider efficiency. Therefore, there is a critical need to redesign the UX/UI of the patient portal app to enhance usability and accessibility, improve user satisfaction, and encourage greater engagement.

Here are a few screens from the current design:

Analysis

User Feedback - Although I did not have access to internal user research, metrics, or data, I did have access to public customer feedback. I started by thoroughly reading through comments on the app store to gather user feedback. The consensus was overwhelming. Users found the log in process confusing and frustrating. Simply logging into the app was difficult. Users have to create an account on a computer internet browser first, wait to receive a code from their doctors office via email (not instant), enter the code and a special URL into the app, and then login with the password they created on their computer internet browser. Once in, users also complained about how difficult, if not impossible, it was to switch between organizations.

UI Audit- I ran a full accessibility check on the UI app elements. Accessibility is important with any digital product, however, it is vital in healthcare when dealing with such a wide target audience. When performing my accessibility check I found contrast colors, button sizes, text sizes, and touchpoint targets that were inaccessible. I also noticed inconsistent spacing and the lack of a grid system within the app's design.

Below is a detailed list of my analysis:

1. Log In Process. Users found the log in process confusing and frustrating. Users have to create an account on a computer internet browser first, wait to receive a code from their doctor’s office via email (not instant), enter the code and a special URL into the app, and then log in with the password they created on the computer internet browser. Once in, users also complained about how difficult, if not impossible, it was to switch between organizations. First impressions are important and this app's first impression fails.

2. Information Architecture. The overall architecture of the app is disorganized. The homepage, for example, is not used to its full potential. It holds space for upcoming visits and the rest is left blank. The homepage should be an engaging space for users to take quick actions and see everything they need to see all in one space.

3. Navigation. An app with a lot of functions makes it easier to get lost. APPatient has quite a few functionalities, including, billing, insurance, personal information, medications, video visits, and more. A restructuring of the navigation is necessary to make the app more transparent and easy to use.

4. Unnecessary Provider/Backend Information. There is information within the app that does not need to be patient-facing. This includes a sub-navigation menu item within messaging titled “Sent CCDA” (separate from the sent and inbox tabs) and a section under the user’s profile titled “audit log” that tracks when you log in and log out of the app. These items should be hidden from the user as they are not necessary and make their experience overcomplicated.

5. Accessibility. I ran a full accessibility check on the UI app elements. Accessibility is important with any digital product, however, it is vital in healthcare when dealing with such a wide target audience. When performing my accessibility check I found colors, button sizes, text sizes, and touchpoint targets that are inaccessible. I created a component and style guide library that meets WCAG AAA accessibility standards.

6. Alignment and Spacing. While doing my audit, I found inconsistent spacing that lacks a grid system. I started by creating a new layout and grid with vertical and horizontal rhythms to improve readability, hierarchy, and organization, which also helps to prevent accidental tapping/selecting.

Goals

1. Increase UI accessibility by meeting WCAG AAA standards.

2. Improve readability, hierarchy, and organization by incorporating a consistent grid and alignment system.

3. Improve the user experience by creating a more intuitive login process, navigation, and architecture throughout the app.

Solution

Click here to view the prototype of the app redesign.

Here’s a link to my working files so you can poke around in my space and get a feel for my process.

Following qualitative analysis of current successful patient portal apps, I introduced a new login screen. If a user maintains multiple organizations, they are saved in the log in screen. If they need to add a new organization, they can do so by swiping through to the last card where they can set up a new account.

I added personalized content to the home screen to display relevant health metrics, reminders for medication, and upcoming appointments.

I cleaned up the information architecture by removing unnecessary pages (for example, deleting “sent CCDA messages”, a feature only used by providers) and reorganizing content (for example, adding a hamburger menu) so that users can quickly find the information they need.

Lastly, I brought the app up-to-date with the latest WCCAG AAA standards and implemented a grid system to improve readability and organization for an accessible and clean design.