Medi-Mix

Medi-Mix

Designing a platform for safe medication and supplement interactions

View Prototype

Overview

Medi-Mix is a web-based platform designed to help users quickly check for potential interactions between medications and nutritional supplements. This case study outlines our UX/UI design process for creating an intuitive and user-friendly interface for this critical health tool.

Our goal was to provide a quick and reliable way for users to ensure the safe combination of their medications and supplements, reducing the risk of adverse interactions and promoting better health outcomes.

Understanding the Problem

Each year, over 2 million cases of drug interactions result in disability, hospitalization, or death. Most of these cases are preventable

of the adult population (18+) in Israel reported consuming nutritional supplements

Two-thirds do not report this to their doctor

1 in 4 people take nutritional supplements alongside medications

The Challenge

Given the concerning statistics around drug interactions, there was a clear need for an accessible tool like Medi-Mix to check for potential interactions between medications and nutritional supplements. The website is not intended to replace professional advice from doctors or pharmacists but aims to provide immediate information for users who cannot consult a professional..

User Research

Survey Details

We conducted a comprehensive survey to understand user behaviors and needs, involving 45 participants, all of whom were over 18 years old. This approach allowed us to gather valuable insights that inform our design process.

Key UX Insights

Personas

Design Process

  1. User Flow

We designed a straightforward user flow to ensure a smooth experience:

  1. Select the drug + drug/nutritional supplement

  2. Click the 'check' button

  3. Confirm the regulations

  4. The app checks if the combination is approved

    • If the combination is approved: The app provides recommendations and explanations > End of process.

    • If the combination is not approved: The app provides information on alternative medications, offers a purchase option, and redirects to a relevant website > End of process.

  1. Wireframing

Initial wireframes focused on creating a streamlined user flow:

  1. Visual Design

The visual design emphasized clarity and trust:

  • Clean, medical-inspired color scheme.

  • Clear typography for easy readability

  • Iconography to represent different types of interactions

Color Palette

Primary
#273469

Secondary
#1B6C53

Teritary
#90BCC6

Hero section

The insights from the research we carried out directly influenced our design decisions:

  1. Clear Value Proposition: The hero section prominently displays the website purpose and benefits, appealing to users who recognize the importance of checking interactions.

  2. Credibility Indicators: We included statistics on the homepage to address concerns about information reliability and build trust with users.

  3. Intuitive Design for Immediate Action and Easy Navigation: The prominent and large (Calculate Interactions) button in the hero section serves as a clear call-to-action, addressing users desire for quick and easy access to the website's core functionality. Its central placement and size make it impossible to miss, guiding users intuitively towards the primary feature of checking drug interactions.

Home Page

  1. Educational Focus: To address the lack of awareness and build credibility, we incorporated educational elements throughout the site, including the "Articles and Research" section on the homepage, aimed at enhancing both user knowledge and trust in the site's professionalism.

  2. User-Centric Design: The "New Drugs and Supplements" section shows an understanding of user needs for current information.

Hero section

The insights from the research we carried out directly influenced our design decisions:

  1. Clear Value Proposition: The hero section prominently displays the website purpose and benefits, appealing to users who recognize the importance of checking interactions.

  2. Credibility Indicators: We included statistics on the homepage to address concerns about information reliability and build trust with users.

  3. Intuitive Design for Immediate Action and Easy Navigation: The prominent and large (Calculate Interactions) button in the hero section serves as a clear call-to-action, addressing users desire for quick and easy access to the website's core functionality. Its central placement and size make it impossible to miss, guiding users intuitively towards the primary feature of checking drug interactions.

Home Page

  1. Educational Focus: To address the lack of awareness and build credibility, we incorporated educational elements throughout the site, including the "Articles and Research" section on the homepage, aimed at enhancing both user knowledge and trust in the site's professionalism.

  2. User-Centric Design: The "New Drugs and Supplements" section shows an understanding of user needs for current information.

Interaction Calculator Process

1. Input Medications

  • Simplicity and clarity: Clean interface with clear input fields.

  • Maximum flexibility:
    - Option to input an unlimited number of medications.
    - '+' button on the side allows easy addition of more fields.
    - Smart button placement prevents scrolling to the bottom when adding multiple medications.

  • Future-proof thinking: Design allows for scalability and complex use cases.

  • Visual guidance: Numbered fields guide the user.

  • Call to action: Prominent 'Check' button encourages process continuation.

  • Transparency and trust: Checkbox for terms of use ensures informed usage.

  • Accessibility: Simple design reduces barriers to starting the process.

  1. Check Results - No Interaction

  • Immediate feedback: Use of green color and positive wording conveys safety message.

  • Reassurance: Calming design and colors reduce anxiety.

  • Memory and certainty: Displaying checked medication names reminds users of their choices.

  • Knowledge enhancement: Option to view additional information for curious users.

  • Flexibility: 'Back to calculator' button allows easy additional checks.

3. Check Results - With Interaction

  • Warning prominence: Use of pink-reddish color for immediate attention.

  • Clear information: Concise recommendations for quick understanding of the situation.

  • Immediate solutions: Direct suggestion of alternatives on the results page.

  • Guidance: 'Find alternatives' button leads to the next logical step.

  • Balance: Conveying critical information while avoiding unnecessary anxiety.

  • Control: Option to return to the calculator for checking additional combinations.

4. Suggesting Alternatives

  • Clear structure: Organized presentation of alternatives with icons for easy comparison.

  • Accessible information: Option to view additional details on each alternative.

  • Decision support: Comprehensive information for informed decision-making.

  • Transparency: Displaying multiple options increases trust in the system.

  • Personalization: Variety of alternatives allows choosing the most suitable solution.

  • Navigation flexibility: Option to return to the calculator or proceed to the home page.

4. Suggesting Alternatives

  • Clear structure: Organized presentation of alternatives with icons for easy comparison.

  • Accessible information: Option to view additional details on each alternative.

  • Decision support: Comprehensive information for informed decision-making.

  • Transparency: Displaying multiple options increases trust in the system.

  • Personalization: Variety of alternatives allows choosing the most suitable solution.

  • Navigation flexibility: Option to return to the calculator or proceed to medication details.

5. Detailed Medication Information

  • Information organization: Clear division between usage instructions and warnings.

  • Visual identification: Displaying medication image alongside information.

  • Information completeness: Comprehensive information in one place, including usage instructions and warnings.

  • Action accessibility: Easily accessible 'Purchase' button for immediate action.

  • Flexibility: Options to return to previous stages in the process.

  • Reliability: Presenting detailed information increases trust in the system and its recommendations.

  • Information organization: Clear division between usage instructions and warnings.

  • Visual identification: Displaying medication image alongside information.

  • Information completeness: Comprehensive information in one place,
    including usage instructions and warnings.

  • Action accessibility: Easily accessible 'Purchase' button for immediate action.

  • Flexibility: Options to return to previous stages in the process.

  • Reliability: Presenting detailed information increases trust in the system and its recommendations.

So What Did I Learn From The Medi-Mix Project? 🤔

As a UX designer, every project brings new insights and interesting learnings. Here are three significant takeaways from the Medi-Mix project:

1. Think Big, Start Smart 📈

The Challenge: Initially, we thought checking two medications would be enough, but life (and users) taught us otherwise.

What We Did: Instead of limiting the system, we designed a flexible interface with a '+' button on the side that allows adding unlimited medications without compromising the user experience.

The Insight: Sometimes you need to design one step ahead - building a system that can grow with user needs while maintaining simplicity in its core functionality.

2. Less is More (But Keep More Within Reach) 🎯

The Challenge: How do you present complex medical information without overwhelming the user?

What We Did: We built a layered information system:

  • First - a clear safe/unsafe answer

  • Then - basic recommendations for those interested

  • Finally - detailed information for those who want to dig deeper

  • Most importantly - always showing users which medications they're checking

The Insight: In designing a medical interface, it's crucial to give users control over the amount of information they receive.

3. Trust is Built in the Details 🤝

The Challenge: How do you make users trust a digital tool in such a sensitive domain?

What We Did: We implemented trust-building elements throughout the journey:

  • Medication names displayed at every step for user verification

  • Familiar color coding (green for safe, pink-red for caution)

  • Clear explanations of interactions

  • Alternative suggestions when issues are found

The Insight: Trust in design is more than just aesthetics - it's made up of many small decisions that create a sense of confidence for the user.

In the end, this project taught me that in healthcare UX design, the real challenge isn't just making complex information accessible - it's doing so in a way that makes users feel secure and supported throughout their journey.

So What Did I Learn From The Medi-Mix Project? 🤔

As a UX designer, every project brings new insights and interesting learnings. Here are three significant takeaways from the Medi-Mix project:

1. Think Big, Start Smart 📈

The Challenge: Initially, we thought checking two medications would be enough, but life (and users) taught us otherwise.

What We Did: Instead of limiting the system, we designed a flexible interface with a '+' button on the side that allows adding unlimited medications without compromising the user experience.

The Insight: Sometimes you need to design one step ahead - building a system that can grow with user needs while maintaining simplicity in its core functionality.

2. Less is More (But Keep More Within Reach) 🎯

The Challenge: How do you present complex medical information without overwhelming the user?

What We Did: We built a layered information system:

  • First - a clear safe/unsafe answer

  • Then - basic recommendations for those interested

  • Finally - detailed information for those who want to dig deeper

  • Most importantly - always showing users which medications they're checking

The Insight: In designing a medical interface, it's crucial to give users control over the amount of information they receive.

3. Trust is Built in the Details 🤝

The Challenge: How do you make users trust a digital tool in such a sensitive domain?

What We Did: We implemented trust-building elements throughout the journey:

  • Medication names displayed at every step for user verification

  • Familiar color coding (green for safe, pink-red for caution)

  • Clear explanations of interactions

  • Alternative suggestions when issues are found

The Insight: Trust in design is more than just aesthetics - it's made up of many small decisions that create a sense of confidence for the user.

In the end, this project taught me that in healthcare UX design, the real challenge isn't just making complex information accessible - it's doing so in a way that makes users feel secure and supported throughout their journey.

So What Did I Learn From The Medi-Mix Project? 🤔

As a UX designer, every project brings new insights and interesting learnings. Here are three significant takeaways from the Medi-Mix project:

1. Think Big, Start Smart 📈

The Challenge: Initially, we thought checking two medications would be enough, but life (and users) taught us otherwise.

What We Did: Instead of limiting the system, we designed a flexible interface with a '+' button on the side that allows adding unlimited medications without compromising the user experience.

The Insight: Sometimes you need to design one step ahead - building a system that can grow with user needs while maintaining simplicity in its core functionality.

2. Less is More (But Keep More Within Reach) 🎯

The Challenge: How do you present complex medical information without overwhelming the user?

What We Did: We built a layered information system:

  • First - a clear safe/unsafe answer

  • Then - basic recommendations for those interested

  • Finally - detailed information for those who want to dig deeper

  • Most importantly - always showing users which medications they're checking

The Insight: In designing a medical interface, it's crucial to give users control over the amount of information they receive.

3. Trust is Built in the Details 🤝

The Challenge: How do you make users trust a digital tool in such a sensitive domain?

What We Did: We implemented trust-building elements throughout the journey:

  • Medication names displayed at every step for user verification

  • Familiar color coding (green for safe, pink-red for caution)

  • Clear explanations of interactions

  • Alternative suggestions when issues are found

The Insight: Trust in design is more than just aesthetics - it's made up of many small decisions that create a sense of confidence for the user.

In the end, this project taught me that in healthcare UX design, the real challenge isn't just making complex information accessible - it's doing so in a way that makes users feel secure and supported throughout their journey.

NEXT PROJECT
NEXT PROJECT

Feel free to reach out.

+972-(0)54-5366263

CV

Create a free website with Framer, the website builder loved by startups, designers and agencies.