MedRemind

Vue 3, TypeScript, Tailwind CSS, PWA, Astro, Cloudflare, Web Push

A medication app for older Czech patients. It nudges them when it is time to take a dose, they confirm with one tap, and their clinic can see who is keeping up and who needs a call. Works on any phone, with no install and no password.

The Challenge

Older patients forget their medication, and the clinic usually finds out too late, at the next visit. Most reminder apps are built for young, confident phone users: small text, a long sign-up, a download from the app store. For someone in their seventies with tired eyes, that is a dead end. And the clinic was flying blind on who was actually taking their pills. We wanted something a 75-year-old could use without help, plus a view a nurse could glance at to know who to phone.

Our Solution

Kept the product to one job: remind the patient, let them confirm in a tap, and show the clinic who is slipping. Everything else waited.
Made it a web app you do not install. It opens in the browser, works offline, and can be pinned to the home screen like a normal app.
Activation is a scan, not a sign-up. The clinic gives the patient a printed QR card; they scan it, confirm, and they are in. No password to remember.
Designed it for older eyes and hands first: large text, big buttons, and status shown in words and an icon, not just colour.
Gave the clinic a simple dashboard that sorts patients by who is falling behind, so staff know who to call.
Reminders arrive through the phone's own notifications, with a text message as backup so nobody misses a dose over a flaky connection.
Thought about privacy from the start: sensitive details stay off the lock screen and personal IDs are protected.

Brand manual

The manual came before the first screen. Eight pages on how Medremind should look and why. The reason is mostly practical: in a year someone else will be editing this product, and this is cheaper than the meeting where it all gets explained again.

Enlarge

CoverVersion and date on the front page. When a rule changes, you can tell which one and when.

Enlarge

LogoMark and wordmark, primary and inverse. Minimum width 120 px, clear space equal to the height of the mark. The monogram goes solo only where the brand reads anyway, so the app icon and the favicon.

Enlarge

ColoursDark green for the accent and a cream background instead of white, because it glares less. Every semantic colour has a light tint so an error message does not have to shout.

Enlarge

TypographyOne typeface, Inter, from headline to footer. Body text starts at 19 px, meta at 16 px. We did not go below that even where it would have been convenient.

Enlarge

Spacing and radiiSeven spacing steps, five corner radii, two border weights. No touch target under 48 × 48 px, 64 for the main buttons.

Enlarge

IconographyLucide, one library, 2 px stroke. An icon always sits next to a label, never instead of one.

Enlarge

ComponentsButtons with their hover and press states, cards, an input with its error message, the bottom navigation. What is on this page is what is in the code.

Enlarge

AccessibilityContrast ratios calculated and written down, including the one combination that failed and is therefore unused. Status is reported by colour, icon and word at once, so it still reads for someone who sees colour poorly.

Enlarge

Brand in useHow the brand looks on the patient phone, in the clinic dashboard and on the site that sells it. Three rules at the end for how the product talks.

The patient app

The whole design aimed at one person: seventy-five, reading glasses, a phone they use to make calls and read texts. Someone like that does not scan a screen, they read it. So each one has a single obvious main thing. The screenshots are in Czech because the product ships in Czech only.

MedRemind: Sign in by card — **Sign in by card**The patient scans the card they were given at the clinic. If the camera will not work or they declined it, they type a code and their date of birth. Nobody invents a password.

MedRemind: Today — **Today**The next dose is the largest thing on screen and the rest of the day sits under it. Take and Snooze are the only two buttons the patient has to hit.

MedRemind: Schedule — **Schedule**A month forward and back. The selected day breaks down into times, medication and appointments in one column.

MedRemind: Health — **Health**Blood pressure and pulse over the last fourteen days. The latest reading is large at the top, the chart comes after it.

MedRemind: Quick log — **Quick log**Recording a reading or a symptom takes two taps. The time is prefilled to now and can be edited.

MedRemind: Settings — **Settings**Text size, high contrast, light and dark theme. A pause for when the patient ends up in hospital. The clinic phone number right at the bottom.

The clinic interface

A nurse opens the dashboard between two patients, not between two coffees. They get about ten seconds to work out who needs a call.

MedRemind: Triage — **Triage**Patients who need attention sit at the top with a reason and the time they were last active. The Call button is in the row itself, not buried in a detail view.

MedRemind: Patient detail — **Patient detail**Seven-day adherence, the plan for today, a grid of doses by day and time, active prescriptions, appointments and history. The national ID stays masked, even from staff.

MedRemind: Prescribing — **Prescribing**The doctor enters the drug, the dose and how many times a day. Times are suggested and can be overwritten. Recent prescriptions sit a row above. They repeat more often than you would expect.

The details it rests on

Most of the work on a product like this is not in the main screen. It is in what happens when the network drops or the patient mistypes the code for the third time.

MedRemind: Printed A6 card — **Printed A6 card**The physical object the whole activation starts from. A QR code, a four-character code for typing it in by hand, and the clinic number for when something gets stuck.

MedRemind: Messages and states — **Messages and states**Dose confirmed, dose snoozed, network gone, account locked. Each message is written specifically enough that the patient can tell what to do next.

What We Delivered

Works on any phone, no app store, no install

Sign-in by scanning a printed QR card

Built for 70+ eyesight and one-handed use

Clinic dashboard that flags who is falling behind

Reminders on time, with SMS backup

Fast and reliable, running on the edge

Private by default

Technologies Used

Vue 3TypeScriptTailwind CSSPWAAstroCloudflareWeb Push

Visit Website →

Want Similar Results?

Let's discuss your project. We'll provide a detailed quote within 48 hours.

Get a no-obligation quote