MedixScan

What is MedixScan?
MedixScan is a mobile application created to provide easy access to drug facts labels (DFLs) for over-the-counter (OTC) medications. Created through participatory UX processes and maintaining a strong focus on user-centric design principles, MedixScan aims to empower users to make informed decisions about their medication usage by delivering clear, concise, and accessible drug information right at their fingertips.

MedixScan exists to:

How does MedixScan Work?
MedixScan is designed as a reliable and user-friendly interface where individuals can quickly retrieve essential information about OTC drugs, including; active ingredients, dosage instructions, warnings, and usage precautions. MedixScan is built into a mobile interface and with the help of quick-response (QR) codes scanned from OTC drug packaging, streamlines the process of accessing drug facts labels.

Why is MedixScan important?
MedixScan replaces and/or supplements the need to read small print on packaging or search through websites to correctly and effectively administer OTC drugs.

→ The process below shows the full scope of the project and the research & design phases that came together to bring MedixScan to life.

Throughout my project I will be using acronyms, some are commonly used, others may not be.
Below is a a short glossary to refer back to if any of the acronyms used are unfamiliar.

The Problem

Misuse of Over-the-Counter (OTC) medications is a prevalent problem arising due to misconceptions about the seemingly risk-free nature of OTC drugs¹.

Drug Facts Labels (DFL) on OTC medications are often ignored and lead to dangerous outcomes for patients who ignore allergens or administer incorrect dosages.^** This problem can be attributed to many factors, with some of the most common ones being; communication, legibility, language, education.^*

Tackling this problem through a design lens, led to the conception of MedixScan.

The Solution

Make over-the-counter medications more accessible; through digitising the Canadian Drug Facts Table.

MedixScan consists of two parts:

I focused heavily on the CDFT interface before moving into building the MedixScan application, based on all the research I collected in the process of building the CDFT.

Research

MedixScan’s research was conducted in phases and in accordance with every iteration being designed. The initial research consists of primary research collected to better understand the semantics and regulation of OTC drugs, while the rest of the research phases can be categorised under participatory design methods employed during the course of making MedixScan.

Guiding Questions

In order to further solidify a direction to take and to clarify its purpose, the following guiding questions helped identify some of the key issues, opportunities and challenges that arose and need to be addressed through the course of this project.

---

Literature Review

The current CDFT references the “United States Food and Drug Administration’s (FDA) applicable monographs”.³ The FDA’s OTC monograph establishes the conditions for an OTC drug to be given a therapeutic category (e.g., allergy products, sleep aid).⁴

To recieve these categorisations and be sold commercially, OTC labeling must go through regulatory standards defining an OTC drug’s; active ingredients, purpose, uses, dosage, administration, etc,.⁴

To understand these terms and my role in finding design solutions, I began my initial research phases with an in-depth study learning about all the different regulatory bodies and organisations that come together to make these labels.

Primary Research

Looking at OTC drugs in local drug stores and pharmacies helped begin ideation for my digital CDFT design.

By collecting a range of different medications & products with DFLs, I was able to compile their sections & characteristics into a spreadsheet. The areas marked in red are as seen on the respective DFL. This spreadsheet helped gauge colour usage through the packaging designs and identify trends that could possibly be integrated into my design, such as the following:

◘ In addition to black & white, the colour red was used, but quite sparingly, limited to sections indicating ‘warnings’, ‘keep out of reach of children’, and ‘active ingredients’.

◘ Another notable trend was how common it was for an OTC medication to have an ‘open for more’ label, requiring purchasing to access the DFT information. This is something the digital interface would theoretically attempt to minimise, letting customers access all the DFT information first-hand before making the decision to purchase it.

When dealing with the possibilities of design solutions for the DFL it was important to stay close to the original design of the DFL even in a digital format. The current DFL is rooted in years of research, iteration, and careful considerations to make its current design^*.

Therefore, most of the digital solutions employed for MedixScan involve very deliberate design changes, being mindful and recognizant of the original DFL & its considerations.

The following are some of the key design considerations kept throughout the making of MedixScan, showing its parallels with the current DFL design.

◓ Colour: Drug Facts Label

◒ Colour: MedixScan

In the MedixScan DFL interface, usage of colour is very intentional, the background uses colours taken from the packaging being scanned -to help differentiate products between scans- while the information cards maintain the usage of black and white as the original. 

Red is rarely used throughout the application’s interfaces to maintain its significance, and is placed in the same format (ex. Icon, font, highlight) as seen in the drug’s original DFL.

◒ Typography: MedixScan

The typeface used for MedixScan is DM Sans. Sans serif fonts appear cleaner for digital interfaces and may be better for comprehension in medical contexts.⁵ The font styles throughout the digital CDFT interface imitate the font styles in the original DFLs, such as bolded headings, maintaining the same text emphases through both interfaces. The size of the font is also taken into consideration to make a comfortable reading experience even without using text adjustments.⁶

◓ Active Ingredients: Drug Facts Label

Active ingredients for OTC drugs are displayed in two areas of a drug’s packaging. 

An OTC drug’s ‘Active ingredients’ is always paired with its ‘purpose’, these two sections have a strong emphasis throughout drug fact labels^*, oftentimes even being highlighted.

◒ Active Ingredients: MedixScan

To maintain a similar emphasis on active ingredients & purpose as the DFL, MedixScan displays this information in a section at the very top of the interface. This is designed to be expandable/collapsable and is present throughout all the screens of the DFL to allow access to this information at any time. 

Final Iterations

The following screens & protoypes are the final workings of the MedixScan & DFT interfaces.
The main changes being worked on at this stage are:

∘ Making the active ingredients/purposes more simple & accessbile throughout the DFT interface.

∘ Configuring user flows for the MedixScan app.

∘ Highlighting key features of the application & refining them.

MedixScan Features (mobile application)

The following are features that have been integrated into MedixScan through the course of identifying pain points and communication gaps in the usage and purchase of OTC products, during participatory design activities & interviews.

These concepts were built with consideration to various stakeholders such as physicians, pharmacists, drug store employees, and a wide range of potential users (elder adults, students, parents, etc.).

Participatory Design

MedixScan began with the goal of bridging communication gaps between healthcare professionals and patients about over the counter medication. In order to fully encompass a wide range of perspectives and design challenges, participatory co-design methods played a large role^*.

Interviews

I led interviews with medical professionals such as doctors, and local pharmacists and pharmacy assistants to gather insights on some of the common questions they receive from patients/customers.

By involving a diverse range of stakeholders in the process of designing in a participatory manner, I was able to gather a well rounded perspective on the gaps in communication that exists between healthcare professionals and patients.

Feedback

Since the early stages of design & research, I consulted peers, professors, friends, and family to gain feedback. This helped me understand where my design was lacking, and having such a wide range of people to get feedback from helped me gather lots of individual perspectives, specific to one’s; experiences with medication, digital literacy, well-being, age, etc.

Testing

With each iteration of my digital DFL interface, I made sure to test it with those around me. Usability testing allowed me to achieve the following:

Throughout all the phases of testing MedixScan, I asked participants to narrate their thoughts, opinions, and behaviors as I took notes alongside my discussions with them.

This created a collaborative and engaging environment for me to learn through the behaviour of others and continue building my design to create better user experiences.

Personas

Based on the research I collected through the course of building MedixScan’s DFL interface, I collected a lot of user research on the needs and wants for a wide range of users. Moving away from the DFL interface, which was the very basis of MedixScan, I began begin building the mobile application of MedixScan based on the following personas:

These personas were created through all the information I personally collected paired alongside statistics and studies that I’d been referencing through the course of this project. This helped me gain a wide scope of the interface needs for the mobile application of MedixScan, and helped in the creation and implementation of specific features to meet these needs.

Branding

The branding for MedixScan began with looking at current medical & related companies, organisations and brands to gather some of the commonly used colours in the medical industry.

I used this to rule out colours for MedixScan, mainly blue & red as they are some of the most frequently used colours for existing packaging and using these colours did not serve my concept for MedixScan well as it may be confusing when scanning packaging.

Colours:

The colours that represent MedixScan are:

These colour decisions were very important in the context of MedixScan; as explained above, the usage of colour throughout MedixScan is deliberate and intended to guide users rather than to add to the design’s aesthetics.

Web Accessibility Guidelines:

These colours were also passed through Web Content Accessibility Guidelines (WCAG), a series of web accessibility guidelines published by the World Wide Web Consortium (W3C). These guidelines were built in cooperation with organisations worldwide to create a standard for web content accessibility, which was pertinent to my project when considering the usage of OTC drugs and DFL readability.

I used WCAG checker, WebAim to ensure my colors all passed WCAG 2.0 level AA, which requires a contrast ratio of 3:1 – 4.5:1 for different text sizes & iconography. To test all my contrast levels and ensure I met level AA, I tested colours in the contexts I was designing in.

---

References