Interaction Design, Usability testing

Communicating the effects of drugs on the developing embryo

60% of women take at least one medication during pregnancy. Sadly, 40,000 infants are born each year in the US with birth defects directly attributed to medication exposure.

Medical experts from the University of Washington constantly review and summarize scientific literature to build a reliable database with information regarding the effects of drugs and chemicals on the developing embryo.

The database is currently distributed to healthcare providers via a desktop experience. I was brought into the project to build a mobile interface for the database. This is the design process that I used:

1. Survey
2. Lo-fi prototypes
3. Usability testing & interviews
4. Personas & Scenarios
5. Hi-fi prototypes
6. Usability testing
7. Final designs

First, we ran surveys with Healthcare Providers to learn their goals, needs, and technology use habits. Based on findings from the survey, we created low-fidelity prototypes and used them in usability testing with 22 providers. Testing insights led to the high-fidelity prototype presented in this case study. I tested the hi-fi prototypes with 20 providers in August and September of 2019.

Based on survey and user testing findings, we defined 2 key personas and 3 scenarios of use that should be supported by the mobile application.

A clinician’s prime function is to manage a sick person with the purpose of alleviating the effect of their illness. Clinical evidence is the material with which a clinician works, along with meticulous history and physical examinations. A clinician usually works in a hospital or clinic.
Midwives support patients during pregnancy, labour and the postpartum period. They also provide general health counselling and education, not only for the person pregnant, but also for their family. This work involves antenatal education and preparation for parenthood.

Scenario 1
Identifying risks quickly and accurately

Health providers want accurate information to estimate the risks of treatments for their pregnant patients. However, compressing a large body of complex —and often conflicting— data for quick decision aid without sacrificing accuracy is challenging.

I soon realized that designing drug risk information was beyond my general knowledge on information visualization. Foremost, an effective design could potentially save lives.

I turned to Tufte’s seminal book on Information Vizualization for insight. Reading this book is essential for anyone designing data displays.
Sketches of the risk visualizations. As much as these ideas seemed exciting, I needed expert advice to know if sketches were going in the right direction. Fortunately, the Division of Developmental Medicine at the University of Washington was available to provide feedback.

The success of this project depended on developing a strong relationship with medical researchers.

I made it a point to meet medical researchers weekly to discuss the designs. Through informal conversations with these experts I learned that the data display design had to accurately reflect:

9  risk levels
None, None to minimal, Minimal, Minimal to small, Small, Small to moderate, Moderate, Moderate to high, High risk.

3 other classifications
Unlikely risk
Undetermined risk
Multiple risks (e.g. Small risk or High risk depending on dosage, timing)

1st iteration
The risk scale made the interface look crowded. Gradient colors didn’t help users differentiate risks when quickly scanning a list of drugs. Also, the scale didn’t help explaining off-scale classifications such as ‘Undetermined.’

2nd iteration
I focused on labels to accurately define risks. A simpler palette helped to elucidate common risk interpretations. Blue means “ok,” yellow, “attention” and red, “careful!”

3rd iteration
I removed the information on each agent to facilitate comparison of drug risks. I also tweaked the colors with help from color-blindness simulators, and more careful consideration of contrast.

4th iteration
Finally, I adjusted the tone of blue after participant feedback. Many participants mentioned that a brighter blue would appropriately suggest that a drug is not risky.

Risks are further detailed on the article pages. Each article has 4 main sections: Risks, Key points (if available), Evidence, and References.

Subtle design elements can facilitate discoverability. Note the Animal Data section divider, and the reference key.


Scenario 2
Accessing articles in different ways

Providers may want to find information on drugs in different ways. Depending on the case they are dealing with, it might make more sense to search for drugs names or category.

In addition, providers might be on-the-go, or sitting at their desk, which drastically changes the context of search and information consumption.

Here, the emphasis was on letting users quickly access articles in multiple ways, according to their needs and preferences.

The main screen shows drugs in alphabetic order.

Lists of drug categories are shown under the ‘Maternal indication’ tab. E.g. nausea and vomiting, depression.

Bookmarked articles or categories.
A chronologic list of searched drugs.

Search functionality iterations

1 I designed a custom icon for the floating button pattern to make search prominent. It is placed on the bottom to facilitate tapping.

Usability testing participants were confused with the floating button, as it behaved as either global or local search (searching for a specific keyword within an article).

I decided to split the search functionality. I used an open field search pattern for the main search.

And another more familiar search pattern for searching keywords within a document.

I also proposed a text-to-speech feature for busy healthcare providers to obtain information on the go. This is a concept of how users could access the feature.

Scenario 3
Sharing information with patients, but not oversharing

Healthcare providers in our study mentioned the need of designing the app to help better explain risk to patients. We included handouts that providers can print out or send to patients. Obviously, such functionality raises privacy concerns.

I designed a secure sharing feature to protect users’ contact information. The interface makes it clear that resources will be sent to patients via an alias.

User Experience Researcher
Interaction Designer

December 2018 — September 2019

University of Washington Medical Center


I am grateful for having contributed to a project with such an incredible societal impact. I had a chance to engage with world-renowned medical experts, clinicians, and midwives, who dedicated entire careers to improve public health. Needless to say, learning from stakeholders in this project was incredible.

I worked diligently to align the goals of medical experts from the University of Washington Medical Center with technical constraints, as well as findings from our user research. Such alignment work is one of the key skills — if not the key — in the UX field.

Some strategies that I use to support stakeholder alignment:

Early in the project
  • Prepare for meetings with questions to learn the most you can from stakeholders. Your talking points do not matter as much at this point.
  • Develop strong relationships with stakeholders. Dedicate plenty of time to meet and talk to them.
  • Develop new insights about customer needs and pain points.
  • Apply ruthless problem definion techniques to encourage focus.

Moving towards research and design
  • Teach UX techniques to stakeholders. They will value your expertise even more once UX makes sense to them.
  • UX professionals have to integrate multiple perspectives into research and design. Make sure stakeholders frequently notice how you are incorporating their perspectives on the project.

© 2021 Lucas Colusso.