Doctor Direct Case Study

Doctor Direct is a patient portal used by multiple healthcare practices. The portal hadn't been updated since the early 2000's, so patients were unable to use it effectively. Every aspect of the site, from buttons to accessibility standards was completely outdated and needed to be updated to fit the current WCAG Web Content Accessibility Guidelines.

Company:

MD Charts, LLC

Role:

UX Designer, UX Researcher

Empathize

The Problems

Access their Health Records

Doctor Direct’s patients need a way to easily access their health records, appointments, billing, and more. Since the patient portal hasn't been updated in over 10 years, it is impossible for patients to navigate their records.

Security

The current onboarding process was not secure. For example, users could have a password that contained only one character. This is a huge security issue due to the sensitive data the site contains.

Information Architecture

The current portal did not have a structured information architecture (IA) for the user to navigate the portal.

Messaging

Patients were unable to message or contact their physicians through the portal, preventing them from easily communicating with their physicians. The current messaging system is disabled, not allowing patients and doctors to correspond.

Accessibility Standards

The colors used throughout the site are not consistent and many of them don’t meet accessibility standards.

Brainstorming the Solutions

In order to solve the problems and reach the targeted goal (users successfully navigating the patient portal), various research methods were conducted. Data was then collected and thoroughly evaluated to outline the specific solutions:

New Landing Page

After conducting usability testing and a heuristic evaluation, a new landing page was designed. This created an easy process for the user to sign up for an account and view their data.

Password Security

By completing a competitive analysis, standard instructions to set up a secure password were put in place for the user to ensure that all their data is safe.

New Dashboard

The functions of the portal were showcased by creating a dashboard to notify users of any new appointments, messages, test results, and outstanding bills. This also allows users to navigate different sections of the portal.

New Messaging

An easy way for patients to message their physicians was created and added to the portal in the form of instant messaging.

New Color Palette

By using the WebAim contrast checker and adobe color, a new color palette was created that passed accessibility standards.

Define

Research

Heuristic Evaluation

A heuristic evaluation is a usability inspection method to identify key usability issues in the user interface and experience. It specifically involves evaluating the interface and judging its compliance with given usability and accessibility principles. This evaluation will illustrate the findings with a High, Medium, Low, or Good practice impact.

Competitive Analysis

A competitive analysis allows UX designers to find patterns across competitors that are missing from their current client’s system.

Usability Testing

Usability testing was conducted on users by instructing them to navigate through the current patient portal. This helped uncover problems, discover opportunities, and learn more about what users needed in order to successfully navigate through the site. In order to run the usability test effectively, a solid test plan was put in place including: recruiting 10 participants, giving them tasks to complete, and analyzing and reporting the findings.

User Personas

Based on the data gained from user testing, two personas were created to clearly outline the target users’ goals and needs. Having a persona to represent a larger target audience was beneficial during the design phase.

Heuristic Evaluation

Layout

- The text and images are too small making it difficult for people to read the information.
- All the content on the page is moved to the left leaving a lot of empty space.
- The site is unresponsive, meaning when the user shrinks the window, the page doesn’t adjust.

Navigation

- There are no clear instructions on how to create an account.
- The account settings should have a separate page and in general there aren’t enough pages.
- There is no explanation for why there is a ‘Healthline’ search bar in the middle of the page.

Content

- There is no guidance throughout the website.
- There’s no information that would give the user a clear idea on how to navigate the site.
- There is no clear explanation for many of the tabs- ex: Clinical Documents isn’t a clear description of what the page actually is.
- The site doesn’t use language that is understandable to the user- ex: ‘reg code’

Visual Design

- There should be more spacing between the elements on the page.
- The colors are too light and wouldn’t pass accessibility guidelines.
- There are many inconsistencies in the login fields and profile fields.
- Many titles are in red, a color indicating an error.

Usability Testing

Project Objective & Background

This website is a patient portal intended for Doctor Direct patients to be able to access their records, keep track of their appointments, correspond with their physicians, and manage their billing.

Target Audience

The target audience is new and current patients of different practices that use Doctor Direct as their patient portal.
‍
Ages: 30-65
Interests:
Mental health, nutrition, physical exercise

Participants

10 total participants were tested using three usability methods.Participants were all adults paying for health insurance.

The average participant had basic knowledge of how to navigate through a website.

Methodology

Usability Test: Moderated Usability Walkthrough

Method: Using the current site, participants were given several tasks to complete that mimic tasks an average user would use the site for. The tasks were to sign into the patient portal, create an account, and view messages. The moderator answered any questions, noted the time taken paths, and missteps, and asked the participants questions related to how they completed the task.

Purpose: To model and test the ability to complete common tasks, observe the success rate and efficiency, and receive real time feedback based on the functionality.

Findings

Usability Test Findings

When the user first got to the landing page, they were suspicious as to why they were able to create a password with only one character. All the users expressed that the fonts and colors were difficult to read. In addition, many users were unable to determine which of the tabs were selected. Two users noted that many of the buttons were unclear (example: personal information). One user assumed that the ‘security’ tab had something to do with social security but was proven wrong. One user suggested that the ‘Appointment reviews’ tab would be more clear if it were called ‘test results’. Many of the older users were seen squinting at the screen because the font was too small. On more than one occasion, a user pointed out that the titles in red were confusing because they associate red with caution.

Overall, the majority of the users described the site as archaic and outdated. Multiple users suggested using less colors and making the fonts more consistent. Lastly, half the users recognized that the messaging feature wasn’t active and said that would bother them tremendously.

Ideate

Design

Mid-fidelity Wireframes

After conducting usability testing and creating user personas, enough valuable insights were gained to create mid-fidelity wireframes.

New Navigation

A new navigation system was created in order for the users to be able to navigate around the website easily and find information that is beneficial to them.

Instant Messaging

An instant messaging service was also added to the portal. This allows patients to contact physicians easily and all messaging information (inbox, sent, bookmarked, etc.) is kept in one place.

Test Results

Patients also needed a way to view their test results easily. Now, patients have access to all their test results that are displayed in a table format set by the date the test was taken.

Accessibility Guidelines Followed

By using the data from the competitive analysis, looking at the WCAG Web Content Accessibility Guidelines and using inspiration from the NHS Design System, form fields were created for an accessible and consistent experience.

High-fidelity Wireframes

After testing mid-fidelity wireframes, clear data allowed for more high-level fidelity designs to be created. Using data from the mid-fidelity wireframes tests, iterations were made based on the feedback received.

In addition to the feedback from the mid-fidelity wireframes, a new color pallet was created that passed the WCAG Web Content Accessibility Guidelines.

All colors pass the WCAG Web Content Accessibility Guidelines. The contrast between the foreground and background colors passed the 4.5:1 ratio which means that clickable objects such as buttons and links were clear and accessible to the user.

The new and accessible color palette was then implemented into high-fidelity designs. The designs include a new landing page, dasboard, messaging system, test results, billing, and patient records.

The user is now able to keep track of their upcoming, past, and canceled appointments. They can also easily view their test results and appointment notes through this channel.

The new messaging system emulates messaging on a smartphone which many users recogized during testing. The improvements were made based on feedback during testing on the mid-fidelity wireframes when 50% of users were unable to successfully message their physician.

Users now have the option to pay their bill through the portal and can view any outstanding and paid bills this way they can easily keep track of their payments. Now, by using the appropriate colors (green for paid and red for unpaid), users can quickly recognize which bills are paid and unpaid.

In the My record tab, users can make sure their medications are up to date and can change their pharmacy if need be. In addition, they are able to view any clinical documents provided by their physician.

Designing for different breakpoints and creating responsive designs was also taken into account. The responsive design allows for the portal content to flow freely across all screen resolutions and sizes, and will look great on all devices

Key Takeaways

The Doctor Direct Patient Portal holds sensitive data for patients. Security and relevance are very important to the patients. Users knowing that their data is secure relieves anxiety and worry around this issue. Patients are now also able to contact their physicians securely and all data is kept in one place. Easy access to billing, test results, and records ensures that users will be able to locate all the information they need without having to call their physicians office.

The new iteration of the website was shown to stakeholders and widely received. The stakeholders were very satisfied with the redesign and have been handed off to developers.