Turning a photo of a prescription into a medication schedule

I designed and built the Add Medicine flow around a simple goal: turn a prescription photo into a usable schedule in under a minute.

The flow is split into three steps—Add Medicine, Processing, and Results—each focused on reducing effort while keeping users in control.

The Add Medicine screen uses the camera to capture prescription images. Users tap the upload area, submit a photo, and the system begins processing immediately.

Behind the scenes, OCR extracts text from the image, while Med7 (an NLP model) identifies key entities like medication names, dosages, frequencies, and durations.

I also integrated a localized dataset to better recognize Philippine-specific medicine names, which are often missed by generic models.

The Processing screen acts as a short transition state while the system parses the data. Instead of showing raw loading states, I used a simple illustration to make the wait feel more intentional and less technical.

The system then converts unstructured instructions into structured schedules. For example, “3x a day for 7 days” becomes specific reminder times, while local shorthand like “#10 tablets” is interpreted into quantity.

The Results screen presents the extracted data in an editable format:

• Medication name as a removable tag

• Instructions translated into readable frequency

• Structured inputs for dosage, strength, and quantity

• Start and end dates for duration

• Customizable reminder times

Users can add or remove time slots, and the “Schedule All” action confirms everything in one step.

Every field remains editable. The system automates the heavy lifting, but the user always has the final say.

I designed and built the Records and Calendar experience to make medication adherence instantly understandable, without requiring users to read through data.

The Calendar view uses a simple color system:

• Blue — all medications taken

• Yellow — missed doses

• Grey — upcoming days

• Dark blue outline — today

This turns the calendar into a visual progress tracker. Instead of scanning numbers, users can immediately see patterns—consistent streaks or gaps in adherence.

Below the calendar, “Medicine for Today” lists scheduled doses in chronological order. Each card shows the time, medication name, and instructions.

The primary interaction is intentionally simple:
one tap logs the dose.

Once tapped, the “Untake” button transforms into a green confirmation with a timestamp. There are no confirmation dialogs or extra steps—the goal was to make logging as frictionless as possible.

Tapping a medication opens a detailed record view, where users can:

• Review full prescription details

• See adherence metrics (taken vs expected doses)

• Track remaining days in the prescription

• Edit schedules if needed

I didn’t just design this flow. I also implemented it!

Working directly with OCR, NLP outputs, and scheduling logic shaped many of the design decisions. Instead of designing ideal states, I had to account for real constraints like imperfect text extraction, inconsistent prescription formats, and local medical shorthand.

This pushed the design toward:

• Editable outputs instead of fixed results

• Clear structure over visual complexity

• Fast interactions over multi-step confirmations

Building it myself helped close the gap between concept and reality, making the experience more grounded and practical to use.