Modern Care, Modern Access: Rebuilding Doctor Direct with a Complete UX and Accessibility Overhaul

Built with accessibility and usability at the core, the redesigned Doctor Direct portal delivers a modern, patient-friendly experience that meets today’s healthcare standards.
MacBook mockup

Overview

As the UX Designer, I redesigned Doctor Direct's patient portal so that it would comply with WCAG Web Content Accessibility Guidelines through various different research and design methods.

Goal

To give patients of different medical practices the ability to access their medical records through the Doctor Direct portal which hadn't been updated since the early 2000's.

Role

UX Designer, UX Researcher

Company

Doctor Direct

Key Results

25% increase in patient portal engagement

Research that uncovered user pain points led to 25% increase in patient portal engagment

15% reduction in support tickets within six months

New enhancements that made for a more seamless user experience led to 15% reduction in support tickets

Legacy Design

Prior to the redesign, patients were unable to access their medical records through the Doctor Direct patient portal.
Dashboard mockup

Background: The Problems

Access their Health Records

Doctor Direct’s patients need a way to easily access their health records, appointments, billing, and more.

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- The current messaging system is disabled, not allowing patients and doctors to correspond.

Discover: The 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

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.

Strategizing the Solutions

In order to solve the problems and reach the targeted goal (patients being able to access their medical records through the Doctor Direct patient portal), various research methods were conducted. Data was then collected and thoroughly evaluated to outline the specific solutions:
Heuristic EvaluationI began the research by conducting a Heuristic evaluation. This research method outlined the issues that needed to be targeted with a High, Medium, Low, or Good practice impact using usability and accessibility principles.
MacBook mockup
Competitive AnalysisAfter thoroughly conducting a heuristic evaluation, I made a competitive analysis to find patterns across competitors that are missing from Doctor Direct's current system. Here are some highlighted insights:
MacBook mockup
Usability TestingUsability 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.
MacBook mockup

Design: New Wireframes

After the various research sessions concluded, I designed mid fidelity wireframes to get feedback on.
MacBook mockup
MacBook mockup

Mid- fidelity Feedback

Usability testing was performed on the mid-fidelity wireframes to get quick feedback from the users.

100%

Users expressed that the new landing page was clear and easy to log in/ sign up.

60%

Users expressed that the new landing page was clear and easy to log in/ sign up.

90%

Users said they were more likely to continue to the site to gain access to their medical information

Design: High-fidelity Wireframes

Using data from the mid-fidelity wireframes tests, iterations were made based on the feedback received.
MacBook mockup
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. By using the appropriate colors (green for paid and red for unpaid), users can quickly recognize which bills are paid and unpaid.
MacBook mockup
Users can now track appointments, view test results and notes, and message physicians through a familiar, smartphone-like system—improvements driven by usability testing after half of participants struggled with messaging in earlier wireframes.

Test: Final Testing

A final round of usability testing was performed on users to validate the re-designed portal. Throughout testing, it was clear that the changes made a positive impact.

100%

Users were able to successfully view their account.

90%

Users were able to successfully message their physician.

100%

Users were able to access their upcoming appointments, billing, records, and messages.

More case studies

Case Studies
Case Study
7 min read

AI tool for Data Analysts at The Home Depot

This case study showcases UX design work completed for a AI tool for an internal product developed in collaboration with the Data Product Management team at The Home Depot. Due to the confidential nature of the project and the proprietary data involved, full details are not publicly available.
‍
Email me for password
View Case Study
Case Study
8 min read

Customization for Automating Reports

This case study showcases UX design work completed for an internal product developed in collaboration with the Data Product Management team at The Home Depot. Due to the confidential nature of the project and the proprietary data involved, full details are not publicly available.
‍
Email me for password
View Case Study
Untitled UI logotextLogo
Case Studies
About me
Download resume