WebMD Drug Interaction Checker

OVERVIEW

ROLE

The Drug Interaction Checker is a key piece of the WebMD medical suite, which helps consumers find crucial drug interaction information, giving them piece of mind that they can safely use their prescribed drugs together, and answers their concerns and questions. The original tool was a clunky single input that took multiple clicks and page loads for the user to find their information.

My goal was to identify the product's usability issues and redesign the tool to be more intuitive and user friendly.
UX Designer
Research, Interaction, Visual design, Prototyping & Testing



Background

WebMD had limited time and budget to update this vital tool. I was tasked with finding and implimenting a solution quickly and elegantly.

Understanding the Problem

WebMD released the original version of the Drug Interaction Checker six years earlier as a minimum viable product, and it hadn't been updated since. It functioned as simple database inquiry and outputted basic interaction infomation with little context. While the product functioned, it had been created without usability testing or user input.
After determining primary pain points, I distilled years of feedback into common buckets and created an internal team to comb through the data and identify primary functions.

Research strategies:

Gathering insights

Given how long the tool had been available, we had years of feedback. I identified common pain points and conducted affinity mapping with my teammates to flesh out our primary focus, grouped into common themes and features.


Criticality

We used a severity framework to prioritize usability issues. This framework helps identify a quantifiable usability issue rating based on:
Task criticality x impact x frequency = severity

Issue Prioritization

Given the project's scope and WebMD's budgetary considerations, I created Epics to provide the Product Manager and Developers with a prioritization framework. I synthisized our findings to create a new minimum viable product that could be developed within our timeframe, including my own prioritization from a usability standpoint. This was useful in the longterm, but also helped shape the product road map for the quarter.

Product, Design and Development concluded that the first Epic would prioritize the user's interaction with the interface, with an eye toward intuitiveness and speed.

Wireframing the Solution

Based on our research and prioritization, we began presenting potential solutions to the team in these key areas of focus:
I quickly mocked up low-fidelity wireframes to educate and gather feedback from the Product Owner and Development on the layout and structure of the app. This involved establishing a standardized visual hierarchy and layout for the component.

Validating the Designs

I conducted usability-testing sessions with internal users. During these sessions, I observed how they interacted with the prototype and noted their velocity and questions. The usability sessions revealed that our new design made it faster and more intuitive to get to the information the user needs. With a few tweaks, we found that users found the tool intuitive and comprehensive.

Developing the Designs

I recreated the tool in HTML, CSS, and JavaScript and used this as a mock-up for stakeholders. Other Frontend Developers incorporated this into the larger WebMD medical suite. Throughout the development process I maintained UX reviews of each ticket to ensure it was aligned with designs.

We collected data on the app through user feedback and interaction statistics. Use of the tool increased while negative feedback decreased. User feedback particularly focused on the ease of use and presentation of the information they sought.

Outcomes

Some key takeaways from the project

More projects