Digital Medication Card

Build a digital medication selection tool which facilitates conversation between doctors and patients, build pleasant doctor-patient relationships, and accelerates decision making process.

March 2016 / Team Work / 3 Months
Project background
Paper medication card

Mayo Clinic is currently using paper medication cards for depression treatment. As you can see from the below image, there are more than fifteen medications for depression treatment available to patients, with various side effects and considerations.

Design Process
How does it work?

As shown below, doctors and patients sit together, walk through the information on the medication cards and figure out the most suitable medication(s) for the patients.

Design Process
Design process
Design Process
Product research

I had a talk with one Mayo Clinic designer and doctor, Ian and Maggie, to get a holistic view of medication cards, in terms of user workflows, design goals and possible design spaces in transferring to a digital device.

Design Process
Considerations on business side

They told us about the biggest reason why they came to us for help, is the high cost of printing cards, which leads to a couple of issues:

Reusable card

Sometimes people sketch on the reusable cards, which requires Mayo Clinic to replace them with new sets.

Updating card

When new medications come out, Mayo Clinic needs to keep the information on cards to be accurate and up-to-date.

Communication issue

Patients remain silent when doctors lead the conversation, which helps nothing with decision-making.

Understanding user's pain points

In order to get first-hand user data, especially patient’s feedback, we asked to interview some patients about their experiences. But got refused due to the privacy issue. But the good news is we have three private videos of how doctors and patients actually use medication cards and finally figure out the suitable medication.

Design Process
Proposed solutions

Based on the observation, we identified three design principles.

Shared reading experience

In Card Introduction, doctors and patients could walk through need-to-knows on a shared screen in order to understand medications and side effects.

Collaborative comparing and selecting experience

In Medication Selection doctors and patients work together on comparing side effects and issues, as well as selecting the most appropriate medication.

Effective leave-taking experience

In Leave-taking, doctors and patients review the medication and side effects again and then send/print it out for future reference.

Brainstorm & design exploration

Keeping the three design principles in mind, we explored different solutions, interactions and flows of using medication cards. We mainly focused on what is the best timing of presenting these cards and how these cards could help patients and doctors to go through the process smoothly.

Prototyping and iteration

Since we have already had the paper medication cards, we used Sketch and InVision to visualize and test our ideas. The prototype has very basic design as well as the real medication information from the cards.

Design Process
Design outcome

Based on the previous iterations, we have decided to lock down our design as following. Live demo is also available.

Design Process


Introducing key information that patients need to know before conversation starts.

Design Process


Inviting patients and doctors to start their conversation by selecting issues.

Design Process

Comparison & selection

Activating issues and selecting the most appropiate medications to proceed.

Design Process

Comparison & selection

Pulling up Keep in Mind card at anytime to check critical considerations for each medication.

Design Process

Summarize & share

Reviewing medications with issues, selecting the proper one and taking them away.