Duration:

November 2021 - December 2021

Tools:

Figma, Adobe Photoshop

My role:

UX designer

Medication Helper is an app that helps you take care of your health on a daily basis. It helps you set up a scheduled pill to take, prompt you to take it before or after a meal, and set up an alert in a way that works best for you.

My responsibilities:

Conducting interviews, wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

According to recent studies, 50-60% of all patients forget to take their medications, which reduces the effectiveness of their treatment. There are times when you need to take several different pills a day, and they all have specific conditions for taking: some with meals, others before meals, some before bedtime, some only once a week — dosage regimens can be many and varied.

Problem:

Design an app with a user experience to help people remember to take medicine on time and a responsive website for the app's vendor.

Goal:

Problem & Goal

The main target users of Medication Helper are adults and the seniors who are self-administering medications who are concerned about taking the right medication, are health-conscious, or need to take medication on a regular basis.

I conducted interviews with users, which I then turned into empathy maps to better understand the target user and their needs. I have found that many target users feel anxious and frustrated if they miss their medication on time. Many of them find an application such as a medication reminder useful. But it is important for them that the app be user-friendly and understandable and has certain settings, such as choosing a dose, indicating the type of drugs, setting an notification, and others.

User research

The users & Personas

I conducted a survey for two groups of users: the first group is those who use a dedicated mobile application, the second group is those who want to learn more about the application using a responsive website. Accordingly, I formed two personas.

Wireframes

I have developed wireframes for a dedicated mobile app with a responsive design. For responsive design, I designed wireframes using the principle of progressive enhancement. That is, the design started with designing small screens and then I created wireframes for tablets and desktops. In the slide below, I have presented all the wireframes for both cases.

Lo-fidelity prototype

To prepare for usability testing, I created a low fidelity prototype that links the user flow of adding a new medicine to take.

I also created a low fidelity prototype for responsive design based on the mobile-first principle.

Based on the results of the usability study, I made design changes for a dedicated mobile app.

I also thought through visual elements such as typography, colors, iconography, and images and checked various references of colors, and typographic combinations to get the impact I wanted.

Mockups

Stickershit

During the design of the app and responsive website, I created a sticker sheet in which I collected all the interface elements: icons, buttons, components, popups and etc.

High-fidelity prototypes for responsive website

High-fidelity prototype for mobile app

High-fidelity prototypes

Final polished design

results:

It so happened that I got sick during the project and for me the topic of medication reminders became relevant. As most of the users I interviewed, it was important for me to have an application that would be convenient, simple, and understandable. But I'm not my user, so I considered their needs first.

Outcomes:

The most important takeaway for me is to remember who your end-user is and always focus on the user’s needs when designing. I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs to be helped me come up with solutions that were both feasible and useful.

Results & Outcomes