Medbuddy Take Medicines on Time App

UI DESIGN PROJECT

Project Brief

Medbuddy application is used by caregivers and those who do not want to miss their medication hours. Medication hours are tracked with this application.

My Role

I designed the Medbuddy app's UI screens as a freelance. After the briefs I took from the company, I started to design the app logo on Adobe Illustrator and app screens on Adobe XD.

Tools

Figma, Illustrator

Moodboard

I prepared a mood board for the colors to be used in the application.

My keywords were trust, nature, and punctuality.

The colors of the application started to appear gradually with the mood board.

Logo

The app did not have a logo. So I started by making the logo first.

That's why I thought of a logo that could show the content of the application such as medicine and hospital at first glance.

I did research on the internet for this. I examined the logos used by such applications.

The symbol on the logo represents the symbol used for health units.

Colors

I created a color guide in Figma for the colors created with the mood board.

"Status colors" were previously informed by the company as yellow, red, and green. I have added them to the guide by adjusting their appropriate tones.

Typography

Since the official font of the company is "Lato", I used the "Lato" font family for the app.

Brief for Dashboard

Goal:

● The medication status of more than one patient should be easily visible at a glance.

Detailed explanation:

There is a box for each patient, the patient's name is written just above this box.
Inside the box are the medicines the patient needs to take today. And with the help of a small calendar, the previous or next days should also be visible.
The name and dosage of the medicine are written on the left side.
On the right, there are boxes that will show the time and status of the drug.

Medicines are not taken on time: Red
Medicines are taken on time: Green
Medicines to be taken immediately as follows: Yellow

Add New Patient Screen

Goal:

● Save the patient's name and phone number.

Detailed Description:

● A box asks for the patient's name (Patient's Name)

● A box asking for the phone number (Phone Number)

● A button on a screen where medicine can be added.

Color Contrast Checker

While using colors, I do color control at every stage.

In this way, I can aim for the most comfortable reading for users.

Conclusion & Key Takeaways

Visualizing Complex Health Data: The main challenge of the Medbuddy project was making critical healthcare tracking data digestible for caregivers at a single glance. By combining clear status colors with a structured dashboard grid, I ensured that urgent medical information is prioritized without causing cognitive overload.
Strategic Use of Color and Contrast: Integrating color psychology (trust, nature, punctuality) alongside mandatory accessibility standards (WebAIM Color Contrast Checker) proved that visual aesthetics must always serve usability. This approach ensured that the application remains fully accessible, even for elderly caregivers or in high-stress situations.
Ecosystem Harmony: Designing a logo from scratch on Illustrator and developing the interface around the company's official corporate typography ("Lato") allowed me to deliver a unified brand identity. The project reinforced the importance of blending business constraints (brief-driven status requirements) with human-centered, accessible UI principles.

Page updated

Google Sites

Report abuse