Inspiration
In Benin, a prescription is handwritten, full of abbreviations (“4 tab x2/d w/ meals x3d”) and almost always in French, while many patients first speak Fon, Yoruba or Mina and read little. The pharmacist explains the treatment at the counter, and the patient forgets it on the way home. The result is wrong doses, missed doses, and antimalarials or antibiotics stopped too early. [Add one sentence about a personal experience, e.g. a relative who mixed up their medicines.]
We wanted to design for the people most health apps forget: those who can't read the instructions at all.
What it does
For the pharmacist: in under a minute, they turn a prescription into a Dose plan. Frequent medicines take one tap. Catalogue medicines arrive pre-filled and collapsed with a one-line summary. A live preview shows exactly what the patient will see. They can record a 30-second voice message in the patient's own language, then hand it over by QR code, WhatsApp, SMS or a printed sheet.
For the patient: only today, in four moments: rising sun, high sun, setting sun, moon. Each dose shows:
the real pill, drawn, as many times as there are pills to take (4 tablets = 4 drawings); a picture sequence for meals (💊 → 🍽️ = before eating); one big “I took it” button. Dose also handles missed doses safely, locks “only if needed” medicines at the daily maximum, reads everything aloud, and explains “What is this medicine for?” in five short blocks: harmless effects are kept apart from warning signs.
On paper: a tick-box calendar on the front, short medicine sheets on the back, for patients without a smartphone.
Private by design: no account and no server. The prescription lives inside the link.
How we built it
We started from the moment that fails, the pharmacy counter, and wrote a design brief with proto-personas, flows and design principles. Then we built the visual foundations: Atkinson Hyperlegible, a warm high-contrast palette, drawn pills and time-of-day pictograms. After that came the patient view, the pharmacist view with its live preview, the printable sheet and the landing page.
It is plain HTML, CSS and JavaScript, with no framework and no build step:
Web Speech API for reading aloud in 5 languages; MediaRecorder for the pharmacist's voice message; the native
element for the medicine sheet; print CSS for the A4 calendar; the prescription encoded in the URL (JSON → base64url), and qrcode-generator for the QR code. It is hosted on GitHub Pages. Every screen was checked in a headless browser at phone and desktop sizes, with an automated check that all translations are complete.Challenges we ran into
_Saying “before eating” without words. We tried icons and badges. What worked was the order of two pictures: pill → plate. _Telling morning from evening without relying on colour. Each sun pictogram uses three cues: arrow direction, colour and background. _Local languages. Text-to-speech doesn't speak Fon. So the pharmacist's own recorded voice carries the local language, which is also more trustworthy. _Medical content. It had to be useful without being frightening: three items per block, harmless effects kept apart from warning signs, and the pharmacist can edit or hide every sheet. A long form for a busy counter. Collapsed, pre-filled medicine cards with a one-line summary.
Accomplishments that we're proud of
_A patient can understand a dose without reading a word. _A complete loop, pharmacist → patient → paper, that works today from a single link. _Accessibility as the concept, not a checklist: WCAG AA contrast or better, 48 px targets, a larger-text mode, keyboard and screen reader support, reduced motion, and never colour alone. _Five interface languages (FR, EN, ES, PT, IT). The patient's screen opens in their language, and local languages are carried by the pharmacist's voice.
What we learned
Designing for low literacy means designing for everyone: the drawn quantities and picture sequences are faster for fluent readers too. Paper is not a fallback. For many patients, it is the main channel. Privacy can be a design choice: putting the data in the link removed the need for accounts entirely.
What's next for Dose: the prescription everyone can read
Testing in real pharmacies in Cotonou with the 5-second test (“What do you have to do, and when?”). SMS reminders that work on basic phones, and an installable PWA. A synchronised caregiver view for relatives. Secure, short-lived storage for voice messages. A pharmacist-validated catalogue with real box photos.
Built With
- atkinson-hyperlegible
- css3
- github
- html5
- javascript
- mediarecorder
- qrcode-generator
- web-speech-api
Log in or sign up for Devpost to join the conversation.