MedPal

Supporting people to stay accurately informed about their health conditions

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Overview

MedPal is a browser-extension AI chatbot that verifies and makes health information online more digestible through summarizing and fact-checking functionalities. It also provides a personalized health browsing information, increasing health literacy and empowering users to make informed decisions about their health care.

Timeline

Sep – Nov 2023

Tools

Figma

Context

Project for MHCI+D

My Role

User Research, UX/UI Design,
Visual Design

Specific Contributions

Research

I wrote research plan documents, conducted interviews, and send out diary study emails.

Prototyping

I created and tested a lo-fidelity prototype of one our main flows.

Interaction Design

My team member, Alex Chen, and I worked together to create the UI and interactive prototype

Design System

I defined branding and UI patterns, and created components for the prototype.

The Problem

Searching for health information is overwhelming.

Surveys show that 80% of internet users search for health information online (Source), but they often encounter misinformation and confusing medical terms. Fact-checking can be time-consuming and overwhelming, especially for those with low health literacy.

This issue is particularly severe for adults over 65 with chronic conditions, the group that is currently the fastest-growing population in the U.S (Source).

[Above] Because adults 65+ face issues such as a decline in cognitive ability and more physical impairments, they often have low health information and digital literacy. We chose to focus on this demographic because our desk research also indicated that they frequently seek online health information to manage chronic conditions.

💭 Initial Design Challenge

How Might We... help adults over the age of 65 manage their chronic health conditions?

Solution Highlights

Research

Understanding the current process of obtaining health information

How do older adults (above age 65) perceive and navigate information regarding diagnoses of mild to moderate health conditions?

What existing tools help them obtain and process this information?

What barriers prevent them from obtaining and processing this information?

Chosen Methods

To choose our research methods, we considered what kind of information would best help us to answer our research questions and provide the most insight given the unique qualities of our target group.

3
‍Semi-Structured Interviews

Gained insights, anecdotes, and behavioral observations by talking 1:1 with participants in their 60s.

3
‍Three-Day Diary Studies

Expanded and validated interview findings. Designed to explore the kinds, sources, and emotional impact of health-related information participants face daily.

1
SME Interview

Gain a more medical perspective and uncover pain points that adults 65+ may not be fully aware of or able to articulate.

Qualitative Analysis

After pulling quotes from our interviews and diary studies, and color coordinating them depending on participant (yellow, green, purple, and gray), we organized them into different findings (blue). We then categorized them further into three overarching categories: learning/information, family & relationship, and relationship with health/disease.

Key Insights

Participants initially struggle to accept diagnoses, reluctant to have their lifestyles disturbed by their health conditions.

Users expressed a desire to maintain their independence by trying to manage their own health before consulting a doctor.

"The doctor said my high blood pressure is very bad for my heart, but I didn't pay attention to it at first."

— P3

"So it is very common for patients with a chronic medical condition. They go into denial as the first step. They would say, 'Oh, you know, I'm gonna try ginger tea or something alternative, and I'll call you if I need you.'" — SME

Participants value trust in their information sources.

Participants cross-reference various sources to validate information, preferring to trust data from credible and recognized websites, friends, family, and doctors.

“If [the site] isn’t something I recognize, it’s not worth it to me, because I need to feel safe... to me, truth is the most important thing.” — P1

— P1

Browsing health information is a unique and personal experience for everyone.

Participants either actively seek out or unintentionally encounter health-related information online. Browsing health topics is a routine part of their daily lives, and varies widely based on individual health circumstances.

"My doctor may be mad, but Google is my friend."

— P1

Zooming out: Do adults 65+ really have low digital literacy?

Our research revealed that age didn’t necessarily correlate to health information and digital literacy. Some of our participants, though older than 65, had high digital literacy. We also got feedback that age should not be used as a way to define our users.

Instead, we learned that participants struggled to accept their health conditions and integrate managing them into daily life. Further research showed that effective management starts with understanding, then accepting their disease.

Thus, we reframed our design challenge to:

🌟 Refined Design Challenge

How Might We.. support people to understand and
stay accurately informed about their health conditions?

Ideation

To find our solution, we took a four step ideation process.

Step 1

Design Principles

Step 2

Crazy 8’s/ 30 Candidates

Step 3

Affinitize

Step 4

Downselect

Step 1/
‍Design Principles

First, we agreed on three design principles based off of the top user needs from our research.

Create a feeling of control

Give users a sense of agency and independence. Help, not force, users to achieve goals without disturbing their lifestyle.

Acknowledge differences

Tailor solution to support users with varying conditions/goals. Ensure accessible, clear, and concise information.

Create trust

Establish a sense of trust. Create a judgement-free environment that will not make the user feel penalized or guilty in any way.

Step 2+3/
Crazy 8’s/ 30 Candidates + Affinitize

We started by doing a crazy 8’s exercise as a team to ensure that we were aligned on the kind of solutions we wanted to generate.

I brought 30 ideas to our next meeting, during which we pinned our ideas on a board and categorized them within repeating themes.

Step 4/
Downselect

To down-select, we first organized the solution themes on an axis. For the x-axis, 'personal' vs. 'community' was chosen based on interviews showing the role of friends and family in health management. The y-axis used 'user-initiated' vs. 'system-initiated' to reflect varying levels of user engagement, acknowledging the personal nature of browsing health information. From these themes, we focused on exploring the 'widget/fact-checking' theme further.

We then looked at our original board of ideas, and placed design principle stamps on each idea based on whether they met the criteria. From the ideas with the most stamps, we decided on one that aligned with our ‘widget/fact-checking’ theme.

Chosen Solution

MedPal, a Browser Extension that Provides Reliable Health Information

What:

MedPal is a browser extension chatbot that pops up when a user is browsing health-related information. It serves to provide users a more complete picture of medical facts, with validated information sources explicitly laid out. User can also ask questions to learn more about the article topic.

Why:

People often browse health information online, but struggle to verify its accuracy. This forces them to rely on personal judgment, which can lead to incorrect or irrelevant conclusions. A reliable chatbot could provide users with more accurate and applicable health insights.

Design

Desired Outcomes

Before we started designing, we wrote out desired outcomes to ensure our designs moved towards the right direction:

Prevent consequences that come with misleading health information.

Make health information more digestible.

Integrate our solution within existing internet-browsing habits.

From talking with users, and discussing among ourselves, we decided to create 3 MVP features to best demonstrate MedPal in use. A typical user using MedPal would interact with it in 3 parts:

Iterating to High Fidelity

We started by creating paper prototypes, then tested them with participants to both validate our concept and get feedback on the usability of the features.

Iteration 01: Onboarding

🗣 User Feedback

After onboarding, some participants still lacked knowledge of MedPal's capabilities and functions.

Participants wanted more information on how MedPal selects content to determine its trustworthiness.

Some participants were confused by the personalization options.

✅ Update

Introduced MedPal's capabilities for supporting health needs.

Explained how MedPal works and where it gets its data sources.

Provided explanations of the types of information that can be flagged.

Emphasized that MedPal provides context, not judgments, empowering users to assess and make their own decisions.

Iteration 02: Chatbot

I created these paper prototype by printing out an example article, and text bubbles, and drew and cut out chatbot components. I tested participants by going through an assumed user journey of (1) searching up a topic, (2) clicking on an article, (3) seeing the chatbot icon pop-up, (4) clicking on the chatbot, and (5) going through back and forth dialogue.

🗣 User Feedback

Participants are worried that the information they learn will disappear after closing the chatbot.

When seeking personal medical advice, participants are frustrated at the chatbot’s limited responses but recognize the rationale.

Providing context for where the information is coming from would create more trust between participant and chatbot.

✅ Update

Created a way for participants to save the information they learn from the chatbot.

For personal questions, provided participants with action-based information or suggestions.

Incorporated citations in chatbot answers. For international citations, linked the sentence or paragraph that was referenced. Provided users with the ability to visit external sources.

Final Designs

Part 01/
Onboarding

After users download the MedPal browser extension, they’re guided through an onboarding session to learn about MedPal’s features, understand how MedPal provides credible information, and choose their preferences for the type of info they want MedPal to flag.

Design Principles

Creates a feeling of control

Acknowledges user differences

Creates Trust

Part 02/
Chatbot — Information Flagging

When the MedPal browser extension is activated, the MedPal chatbot will pop up (depending on user preferences) when it detects misleading information on health-related sites. Ultimately, MedPal helps to contextualize information; the user decides what information to consider.

Design Principles

Creates a feeling of control

Acknowledges user differences

Creates Trust

Part 02/
Chatbot — Chatbox

In addition to reviewing flagged information, users can converse with MedPal to get a deeper understanding about article topics. To make the learning process easier, MedPal provides prompts of frequently asked questions. For example, users can also ask MedPal to summarize a page’s content.

Every MedPal response concludes with at least one citation of where the information was obtained.

Design Principles

Creates a feeling of control

Acknowledges user differences

Creates Trust

Part 03/
Saved Conversations

Users can choose to save conversations with MedPal to refer back to. Based on what users choose to save, MedPal will adjust its answers to provide them with information specific to their health situations.

Design Principles

Creates a feeling of control

Acknowledges user differences

Design System

I led the visual and UI design of MedPal, working with my team member Alex to create the design specifications. I selected teal as MedPal's primary color because, according to colorpsychology.org, it signifies trustworthiness and reliability. It is also known to promote feelings of calm and composure; all of these emotions align with MedPal's goals.

Below is a sample of elements from our design spec:

Conclusion

Next Steps

Conduct another interview session to specifically test how successful MedPal is in facilitating trust.

Health is a personal and sensitive topic, so users may be uncomfortable with an AI chatbot accessing their health browsing. To build trust, we were transparent about MedPal's information sources and added the 'Saved Conversations' feature — MedPal only adapts based on saved conversations, and users have the freedom to choose what information to believe. I plan to test with users to see if these features increase trust in MedPal.

Conduct usability testing in real-life contexts.

Conducting usability tests in real-life contexts, potentially by using Wizard of Oz techniques, would be beneficial to see how well MedPal fits naturally with current user browsing habits.

Expand content by considering other kinds of sources, adding more personalization features, etc.

MedPal seeks to provide users with the full picture. By considering different kinds of sources, such as YouTube videos, podcasts, etc., users could get more diverse perspectives. Additionally, more personalization features, such as allowing users to upload their health history, could help MedPal provide more tailored recommendations.

Project Takeaways

Refine the design challenge and target users as needed, based on research findings, to accurately identify the right problem to solve.

Initially, we aimed to help people feel more confident in their health-information browsing experiences by targeting adults 65+, due to observed patterns of low tech information literacy. However, further research revealed that low tech information literacy isn't determined by age alone, so we refined our design challenge.

SMEs offer valuable insights about target users that even the users themselves may not be aware of.

Our SME, a doctor, revealed that patients often struggle with denial and acceptance of their health issues—an insight we couldn't easily obtain directly from the users.

Understand users' motivations, daily routines, and interactions to design solutions that fit naturally into their lifestyles.

Health information browsing is a daily activity, especially for those with more health issues. Our users wanted to feel in control of their health management, so we aimed to design a solution that seamlessly fit into their daily routines. To achieve this, we conducted diary studies to gain a comprehensive understanding of their daily lives.

Overview The Problem Solution Highlights Research Design Final Designs Conclusion

Next project

Disney D23 Expo

→