UX Case Study · Family Health

Birr — the medication companion I designed for families caring for an ageing parent, anchored to prayer times instead of the clock

Adult children in Saudi Arabia increasingly manage a parent's chronic medications — often 4–8 drugs from several doctors — using WhatsApp groups and memory.

System Usability Scale (n = 5)

Households, both sides

Screens per language

Modes, one source of truth

RoleProduct Design · Research · Design System — Solo

PlatformiOS · Figma

DurationSeptember 2026 · Concept

LinkVisit →

Self-initiated concept · iOS · Arabic-first

Why medication, why families, why Saudi

بِرّ — birr al-walidayn, the duty of kindness to one's parents. I help manage my parents' medication, and this project started with a simple question: why is it this hard? Three facts shaped this project.

Chronic illness is common, and it's managed at home

The International Diabetes Federation estimates (IDF Diabetes Atlas, 2024) that 23.1% of adults in Saudi Arabia live with diabetes — one of the ten highest rates in the world. Diabetes rarely travels alone; blood pressure and cholesterol medication usually come with it, so a parent in their late sixties can easily be on five or more daily medications from two or three different doctors.

Care is a family duty, not a service

Multi-generational households are the norm, and looking after ageing parents is a deeply held value — birr al-walidayn, which gave the app its name. In practice an adult child, often a daughter, becomes the unofficial pharmacist: reading labels, refilling boxes, reminding. Siblings help “when they're home”. The coordination layer for all of this is a WhatsApp family group.

The day runs on prayer times

Ask a 68-year-old when he takes his blood pressure pill and he won't say “7:15”. He'll say “after Fajr”. Every medication app I looked at is built on the clock.

What already exists

Prescriptions from Ministry of Health clinics are largely dispensed through Wasfaty at contracted community pharmacies, and chronic prescriptions are dispensed in monthly refills and renewed by the clinic every few months. Sehhaty covers appointments and records. Global reminder apps like Medisafe are clock-based, English-first and built around one patient managing themselves. None of them is designed for the person actually doing the work: the family member.

Birr cover — the Parent-mode dose card, the Caregiver Today screen and onboarding on three phones, with the بِرّ wordmark, Arabic UI

// preview

Two households · both sides

Research

Concept-project honesty: nothing here was commissioned, and I'm inside the problem myself — I help manage my parents' medication, and so does a friend for theirs. That gave me two households to study from both sides. I interviewed my friend Abdulrahman and all four parents, kept a three-day diary of my own household instead of interviewing myself, audited three apps, and tested a prototype with five people. Small numbers, real people.

Who

Two households, both sides. Caregivers: Abdulrahman, who manages his parents' medication, and me. Parents: my mother Munirah and my father Mutlaq, and Abdulrahman's mother Nora and father Ahmed — aged 57 to 65, taking three to five medications a day. Two of the four parents are my own; I say so here and keep their medical details out of everything that follows.

How

Semi-structured conversations in Arabic — 30 minutes with my friend, 15–20 with each parent — and a three-day diary of my own household, one line per dose: how the time was described, who gave it, how we knew, any doubt. I asked everyone to walk me through yesterday — never “how do you usually…” — because a specific day is remembered; a habit is reconstructed. Weighting the sample towards parents was deliberate: most medication apps are designed by talking to the person who manages the medication, not the person who takes it.

What the diary showed

Over three days and twelve doses, eleven were described by a prayer or a meal (“after Fajr”, “with lunch”) and only one by the clock. Someone asked “did anyone give…” four times. The one moment of real doubt came on the second evening, when my brother and I each assumed the other had given the Isha dose — nobody had.

P1 · Abdulrahman — caregiver (friend)

Age 23. Parent's meds/day: 5 (father) · 3 (mother). Who else helps: his sister. Current system: WhatsApp family group + memory.

P2 · Me — caregiver (diary)

Age 23. Parent's meds/day: 4 (father) · 3 (mother). Who else helps: my brother. Current system: WhatsApp family group + weekly pill organiser.

P3 · Munirah — parent (my mother)

Age 57. Meds/day: 3. Who else helps: me + my brother. Current system: pill organiser filled on Fridays; reminders by phone.

P4 · Mutlaq — parent (my father)

Age 63. Meds/day: 4. Who else helps: me + my brother. Current system: keeps the boxes by the prayer mat; “I know my medicine”.

P5 · Nora — parent (Abdulrahman's mother)

Age 60. Meds/day: 3. Who else helps: Abdulrahman + his sister. Current system: boxes in a kitchen drawer; the daughter reminds her.

P6 · Ahmed — parent (Abdulrahman's father)

Age 65. Meds/day: 5. Who else helps: Abdulrahman. Current system: paper schedule on the fridge from his last clinic visit.

Medisafe · Sehhaty · Nahdi

Competitive audit

I looked at the three apps a Saudi family is most likely to already have: the best-known global reminder app, the national health platform, and the biggest pharmacy chain's app.

Medisafe

Consumer pill reminder (Israel/US), free with a Premium subscription — built for the patient managing themselves. Time to schedule 6 meds (measured): 9 min — six screens per medicine, clock times only. Arabic quality: UI localised into 15+ languages incl. Arabic; drug database and many labels stay English; Arabic plurals are wrong (“1 حبات”) and numerals switch between Western and Eastern on the same screen. RTL correctness (measured): navigation mirrors; the dose sheet breaks direction when a Latin drug name starts the line. Reminder model: clock times, snooze, “as needed” doses; complex schedules in Premium; lock-screen widget and Apple Watch. Family / caregiver support: “Medfriend” — a linked contact gets a push when a dose is missed — one-to-one, both need accounts and internet; reviewers report delays of hours between the missed dose and the alert; unlimited Medfriends only in Premium. Refill tracking: refill reminder when the remaining dose count hits a threshold you set (e.g. 10 days before). Large text / accessibility (measured): scales with the OS text size, but the timeline truncates medicine names at the larger sizes.

Sehhaty

Ministry of Health's national health platform — appointments, records, e-prescriptions — built for the citizen and their records. Time to schedule 6 meds (measured): 14 min — reminders live under the health wallet, one list, clock times only. Arabic quality: native Arabic and English, government terminology. RTL correctness (measured): mirrors correctly throughout. Reminder model: medicine reminders exist inside a records app (added in the 2023 release) — clock-based, one person's list. Family / caregiver support: dependents (children, elderly) can be managed under one account for appointments and records — no dose confirmation loop between family members. Refill tracking: Wasfaty e-prescriptions viewable, status by SMS; chronic prescriptions renewed periodically through the system. Large text / accessibility (measured): scales, no truncation.

Nahdi

Pharmacy chain's shopping app — products, e-prescription upload, delivery or pickup, “Ask the pharmacist” — built for the shopper. Time to schedule 6 meds: n/a — no schedules. Arabic quality: native Arabic, retail tone. RTL correctness (measured): mirrors; several product cards stay left-to-right. Reminder model: none — the app sells and delivers, it does not remind. Family / caregiver support: family members in the separate NahdiCare Clinics app for bookings; nothing for medication. Refill tracking: upload a prescription, order delivery or pickup — no countdown, no warning before the box is empty. Large text / accessibility (measured): does not scale — fixed sizes.

Takeaway

The market splits into self-management apps, health-system apps and pharmacy apps. Medisafe comes closest with Medfriend, but it is still one patient's app with a spectator attached: clock-based, English-first, and a missed-dose alert that arrives late. Nobody has built the family app — where the schedule is written in prayers, the confirmation comes from the parent's own tap, and every sibling can see who did what.

Five insights

What I learned

Five insights drove every decision that follows. Four came straight out of the interviews; the fifth I expected and the interviews sharpened.

The day is measured in prayers, not hours

All four parents described their schedules as “after Fajr”, “with lunch”, “after Maghrib”; not one gave a clock time unprompted. A 6:00 alarm is meaningless in December and wrong in June. → Schedules anchor on prayer slots; the reminder fires twenty minutes after the adhan.

Caregiving is a group chat, not a person

Whoever is home gives the dose. The failure mode isn't forgetting — it's double-dosing, or assuming someone else did it. Both households had a story about a dose given twice. → Shared status with “confirmed by whom”, not a single-user log.

The refill cliff

Nobody counts pills. Both families discovered an empty box at night at least once in the last month. → Supply counted down in days from the pack size, an amber nudge three days out, and a one-tap refill request.

Parents will press one big button. They will not navigate

All four parents use WhatsApp voice notes and a Quran app and almost nothing else; two of them hand the phone to a grandchild for anything with a form. Tabs, gestures and small text are walls. → A separate Parent mode: one card, one button, 30pt titles, opened from a link with no account.

Help must not feel like surveillance

Parents accept reminders but bristle at being “watched”; both caregivers said the word “nagging” without being asked. → Language and escalation built around dignity: a late dose is “a little late, that's okay”; escalation goes to the family, never at the parent.

Participant voices

In their words

“I gave him the evening one, then my sister came home and gave it again. Nobody wrote anything down.”

Abdulrahman, 23 · Insight 2 — caregiving is a group chat, not a person

“I only know it's finished when I open the box and there's nothing in it.”

Nora, 60 · Insight 3 — the refill cliff

“If it has a password, I'm not using it.”

Ahmed, 65 · Insight 4 — parents will press one big button. They will not navigate

Who it's for · jobs · scope

Framing the problem

Sara, 34 — primary caregiver

Works full-time in Riyadh, lives with her parents; her brother Mohammed helps on weekends and a home helper, Fatima, is there on weekdays. Runs her mother's medication from a screenshot of the last prescription and a WhatsApp group. Her fear: giving the wrong dose after a doctor changes something.

Noura, 68 — Sara's mother

Type 2 diabetes and high cholesterol: Metformin twice a day, Aspirin, Atorvastatin at night, Vitamin D. Reads Arabic comfortably, uses WhatsApp voice notes and the Quran app. Doesn't want to feel like a patient in her own house.

Mohammed, 29 — the weekend sibling

Wants to help when he's around, and wants to know in one glance whether Mom has taken her evening pills.

When a doctor changes my mother's medication

I want to update the routine once and have everyone see it, so that nobody gives her the old dose.

When it's after Maghrib and I'm not home

I want to know whether Mom has taken her pills, so that I don't nag her and my brother doesn't double-dose her.

When a box is running low

I want to be told days early, so that I pick it up on the way home instead of at 11 pm.

(Noura) When the phone tells me it's time

I want to press one thing and get on with my day, so that I don't feel managed.

How might we

…make it effortless for a family to keep a parent's medication on track without making the parent feel monitored?

What success looks like

For a concept project I can only measure the prototype: task completion, time on task and SUS in usability testing. If this shipped, I'd track on-time dose rate, refill-on-time rate, and weekly active caregivers per family circle — the last one is the product's real health signal.

In scope

Medication schedules, prayer-time anchoring, Parent mode, family circle with roles, refill tracking, missed-dose escalation, weekly pill-organiser prep, Arabic and English.

Out, deliberately

Ordering from pharmacies (a Birr Plus request only), telehealth, vitals tracking, any clinical advice, and automatic phone calls — an earlier version escalated to a call; in the parents' own words it was the “policing” they dread, so it went. The app never tells anyone what to take — only when the family agreed it's taken.

Four rules

Design principles

Prayer-time first

Time is described the way the family describes it.

One tap for the parent, full control for the caregiver

Two experiences, one source of truth.

Designed for the circle, not the individual

Every state answers “did anyone do this?” before “did I do this?”

Never shame

No red screens for a missed dose, no streaks, no “you failed”. A missed dose is a coordination problem, not a moral one.

Information architecture

Structure and flows

Onboarding

Splash · welcome · sign up (Apple / Google) · phone · code · notifications.

Caregiver mode · Today

Adherence score · today's numbers · Mom's routine · activity feed.

Caregiver mode · Medications

List · detail · add (name & dose → photos → when: after prayer or exact time) · prepare medicines.

Caregiver mode · Family

Circle members with roles · invite by link.

Caregiver mode · Settings

Parent mode · late-dose steps · numerals · notifications · language · Birr Plus.

Parent mode (opened from a link, no account)

Now · due — the medicine, one button: I took it. Now · confirmed — well done, one-tap undo. Now · late — “a little late, that's okay”.

Secondary flows

Refill (supply gauge → three-day nudge → request) · missed-dose escalation · weekly preparation (the pill-organiser checklist grouped by prayer slot) · offline and loading states · error states (invalid number, wrong or expired code, denied notifications, duplicate medicine, unreadable photo, failed sync).

Birr flows — onboarding, caregiver, parent and states, both modes on one canvas

// preview

User journey — six stages from discovery to supply and family, read right-to-left

// preview

Six steps

Hero flow — from prescription to first confirmed dose

Add a medication from the box

Sara adds a medication: she photographs the pharmacy box, and the name and dose are read from the label.

Add a photo of the pill itself

She adds a photo of the pill itself — Noura recognises the small white one, not the word Metformin.

Set when as prayer slots

She sets when as prayer slots — after Fajr · after Dhuhr, with food — or, for a medicine that needs exact spacing, as clock times.

Invite the family with a link

She invites Mohammed with a link. He lands in the same family circle; Noura gets her own link and never creates an account.

One card, one button

Noura's phone shows one card twenty minutes after Dhuhr: the pill's photo, “one tablet, with lunch”, and one large button — I took it.

Confirmed, for the whole circle

She taps it. Sara's Today screen updates: Confirmed · by herself · 12:48, and the activity feed logs it for the whole circle.

Problem · decision · why · trade-off

Key design decisions

Every decision below has the same four parts: the problem, what I did, why, and what it cost.

Reminders are anchored to prayer times

Problem: clock alarms don't match how the family talks or how the parent lives — and Fajr moves by almost two hours across the year in Riyadh. Decision: the “when” step offers two reminder types that can be mixed per medicine. After prayer gives the five prayer slots plus before bed, with an adjustable offset (“20 minutes after the adhan”) and a with food switch that changes what the parent sees (“with lunch” instead of a time); each slot resolves to a real time every day from the device's location using the Umm al-Qura calculation. Exact time is a plain clock list for medicines that need precise spacing — 7:30 AM and 7:30 PM, twelve hours apart — because some prescriptions really are written that way, and caregivers who think in clock time should not have to translate. Why: it removes a translation step for everyone, and it corrects itself through the year. Trade-off: more engineering (prayer-time calculation, location permission) and one more decision on the add flow. Keeping the clock option one tap away, on the same screen, was the compromise that kept both kinds of caregiver.

Two experiences in one app

Problem: a dashboard dense enough for Sara is unusable for Noura; an interface simple enough for Noura is useless for Sara. Decision: Parent mode is a separate surface with its own rules: one card on screen, 30pt titles, 24pt medicine name, 17pt body, a 60pt-tall button, and exactly two actions — I took it and Remind me later. It is reached from a text-message link, so the parent never signs up, and it keeps working without internet. Why: a shared UI would have compromised both users. A dedicated mode let me design every Parent screen against one question: can a 70-year-old do this with one thumb? Trade-off: two surfaces to design and maintain. I capped Parent mode at three states so the cost stays small.

A family circle with attribution

Problem: the dangerous case isn't a forgotten dose — it's two siblings each assuming the other gave it. Decision: every dose carries a name: confirmed by herself, confirmed by Mohammed. Members have one of two roles — confirms or view only — and join through a link. The activity feed is the family's shared memory of the day. Why: attribution answers the real question — “did anyone do it?” — and quietly discourages double-dosing. Trade-off: it could feel like a scoreboard. I removed streaks and counts entirely, and the parent's own view never shows who didn't act.

Escalation instead of alarms

Problem: reminder apps either nag the patient until they ignore them, or panic the family. Decision: a ladder. After 20 minutes the parent's card repeats once, gently. After 45 minutes the primary caregiver gets a notification. After 90 minutes the whole circle sees an amber unconfirmed state — never red, never “missed” in the parent's view. The timings are settings, not constants. Why: it respects the parent's dignity, avoids alert fatigue, and makes a human — not a device — the last resort. Trade-off: a slower response in a real emergency. The first version also placed an automatic phone call at the top of the ladder; it was cut because it reads as surveillance, which is the one thing the product must never do.

Refills by pack count

Problem: “running out” is discovered too late, usually at night. Decision: each medication stores pack size and doses per day; the supply gauge counts down in days as doses are confirmed, turns amber three days out, and offers a one-tap refill request. A weekly Prepare medicines checklist, grouped by prayer slot, flags anything out of stock before the pill organiser is filled. Why: nobody has to count pills, and Friday's prep catches Thursday's cliff. Trade-off: it only works when doses are confirmed. Unconfirmed doses are assumed taken for counting but shown as unconfirmed in the family view — a compromise I'd revisit with real usage data.

Bilingual RTL/LTR, done properly

Problem: most “Arabic” apps are translated English apps. The tells are everywhere: unmirrored back arrows, the wrong numerals, mixed-direction lines that break. Decision: Arabic is the design source; the English layout is derived from it, not the other way round. Explicit mirroring rules: navigation, chevrons, list alignment and the tab bar mirror; the status bar, numbers, phone fields and one-time codes stay left-to-right. Numerals are a setting: dosage and times default to Western digits to match pharmacy labels; Parent mode can switch to Eastern Arabic digits (٠١٢٣) for parents who read them faster. Medication names are Latin inside Arabic sentences, and every such string is direction-isolated so a line that starts with “Metformin” still reads right-to-left. Arabic headlines run at 1.3 line-height against 1.18 for Latin, because Arabic ascenders and diacritics clip at Latin metrics. Why: for this audience Arabic isn't a translation target — it's the product. Trade-off: every screen is designed twice. The token system is what made that manageable.

Add medicine — name and dose, when (after prayer or exact time), and the weekly Prepare medicines checklist

// preview

English version — the same screens mirrored left-to-right

// preview

Direction · colour tokens

Visual design

Calm, warm and high-contrast, borrowed from editorial and lifestyle apps rather than health apps: a warm ivory canvas, white cards with a hairline and a whisper of shadow, generous corners, a floating black tab bar and a single black pill for the primary action. Colour is reserved for meaning — amber for “running low”, green for “confirmed”, red only for “out of stock”. Everything on the parent side is bigger, plainer and slower.

v4/bg · #F4F2ED

Canvas.

v4/card · #FFFFFF

Cards, sheets.

v4/ink · #141414

Text, primary button, tab bar.

v4/ink2 · #6B6B66

Secondary text — 5.0:1 on white.

v4/ink3 · #A3A29C

Decorative only (arrows, dots).

v4/line · #E8E6E1

Hairlines.

v4/green · v4/green-text · #2E7D5B

Confirmed — fill and text.

v4/amber · v4/amber-text · #E58A2B · #A85C14

Due now, running low — fill vs. text.

v4/red · v4/red-text · #D65745 · #B8412F

Out of stock, errors — fill vs. text.

v4/blue · v4/blue-text · #4A7DFF · #2F5FE0

Verified seal, links.

v4/violet · v4/violet-text · #8B6CF6 · #6B4FD1

Late count.

Tints and text-safe variants

Every semantic colour has a soft tint for backgrounds and a text-safe variant that clears 4.5:1 — the bright version is only ever a fill. Colour is never the only signal: every state pairs it with an icon and a label.

Caregiver mode — Today, Medications and Family, Arabic UI

// preview

Parent mode — dose due, confirmed and a little late

// preview

One family for both scripts

Typography, spacing and motion

One family for both scripts: SF Pro, Regular / Medium / Semibold / Bold, so a mixed line — an Arabic sentence with a Latin drug name — sits on one baseline without a visual seam.

Display / title

Caregiver mode: 30 · 28 bold · 1.3 (Ar) / 1.18 (En). Parent mode: 30 bold.

Card title · section

Caregiver mode: 20 bold · 17 semibold. Parent mode: 24 semibold (medicine name).

Body

Caregiver mode: 15 · 1.4. Parent mode: 17.

Meta · caption

Caregiver mode: 13. Parent mode: 13.

Button label

Caregiver mode: 15 medium. Parent mode: 19 medium, 60pt button.

Floor and scaling

Nothing below 13pt. Everything scales with the OS text size; Parent mode has a size floor and never truncates.

Spacing

20pt page margins, 16 between blocks, 18 inside cards, 10 between elements, 14 row rhythm.

Shape

Radius 20 for cards, 24 for the parent's card, 32 for the welcome sheet, full for pills and chips.

Motion

Limited to state changes — the dose card settling into confirmed is a smart-animate — respects Reduce Motion, and never blocks input.

Design system — colour tokens and type scale

// preview

32 components · 17 icons

Components

32 components built from the screens, plus the Button and Tab bar variant sets and a 17-icon set. The ones that carry the product:

Button

Black · Outline · Text, each with pressed. Full-width pill, 52pt; 60pt in Parent mode.

Tab bar

Active = Today · Meds · Family · Settings. Floating black pill, white active capsule.

Header

Caregiver · Parent. Title-first, 44pt round actions.

Score card · Stat card

Adherence and the 2×2 numbers.

List row

Default; verified seal on/off. Medicine, member and activity rows.

Supply gauge

ok · low · out. Segmented, counts down in days.

Chip

Active · Inactive. Filters, prayer slots and the after-prayer / exact-time switch.

Dose card (Parent)

due · confirmed · late. The whole parent experience.

Day chips (Parent)

taken · now · upcoming. The five prayer slots.

Input row · Toggle · OTP boxes

default · error. Forms and verification.

Sync banner · Empty · Skeleton · Offline

States.

iOS alert · Welcome sheet · Social sign-up

Onboarding.

Tokens as variables

Tokens live as Figma variables (collection v4 · Editorial warm) and export to JSON for engineering.

Component library — 32 components built from the screens

// preview

WCAG 2.1 AA · Apple HIG

Accessibility

Audited against WCAG 2.1 AA and Apple's HIG before hand-off, with contrast measured from the actual variables.

Contrast

Every readable text pair ≥ 4.5:1 (secondary grey 5.0:1, all coloured text via the text-safe tokens). Two non-text pairs are logged as open: the hairline field boundary (needs 3:1 on ivory) and the amber gauge bars (2.6:1 → a deeper amber for bars only).

Targets

44pt minimum everywhere, 60pt in Parent mode; text links carry hidden 44pt hit areas.

Type

13pt floor; Dynamic Type supported; Parent mode wraps, never ellipsises.

Errors

Always text plus colour, never colour alone, and every error state has a recovery action — eight states designed in each language.

Screen readers

An Arabic-first accessible name documented for every icon-only control (“رجوع”, “إضافة دواء”, “التنبيهات · 3 جديدة”…) and the parent's card announced as one group: “Metformin 500 mg, one tablet with lunch, due now”.

Motion

Respects Reduce Motion; the confirm animation falls back to a cross-fade; nothing auto-advances.

Cognitive load

Parent mode shows one decision at a time, uses the family's own words (“after Maghrib”), and never uses medical jargon.

Accessibility review — findings, measured contrast and VoiceOver names

// preview

SUS 84 (n = 5)

Prototype and usability testing

Figma, both modes, Arabic and English — 21 screens per language plus 8 error states each, linked as four flows: onboarding, caregiver, parent, and states (offline → retry → loading → home). Five people tested it: two caregivers (Abdulrahman and my brother, who had not seen the design) and three parents (Munirah, Mutlaq and Nora). The parents are the same people I interviewed; I say so because a second household I didn't know would have been better, and I couldn't get one. Measures: completion, time on task, errors, a 5-point confidence rating per task, and SUS at the end.

(Caregiver) Add “Metformin 500 mg, after Fajr and after Dhuhr, with food” and set the pack size

Completion 2/2 · median time 3 min 40 s. Both looked for a clock time first, then found the prayer chips; my brother asked for “with food” before he saw the switch.

(Caregiver) Invite a sibling to the circle

Completion 2/2 · median time 50 s. Both expected the invite to be a WhatsApp message — it is.

(Parent) The phone shows a reminder — do what you'd normally do

Completion 3/3 · median time 8 s. Two of three tapped the pill photo, not the button, on the first try.

(Caregiver) Your brother says he gave the dose. Find out whether he did

Completion 2/2 · median time 25 s. Both went to Today, not to Activity; the “confirmed by” line answered it.

Error states — invalid number, notifications denied, duplicate medicine, sync failed

// preview

All 21 screens, Arabic

// preview

After testing · before testing

What changed

The prototype scored 84 on the System Usability Scale (n = 5). Three changes came out of testing; the rest came earlier, from my own review.

The whole dose card became the tap target

Two parents tapped the pill photo instead of the button → the whole dose card became the tap target, and the button grew to 60pt.

After prayer and exact time, side by side

Both caregivers looked for a clock time before the prayer chips → the “when” step now offers after prayer and exact time side by side, and the resolved time sits under each prayer chip.

Late became a little late, that's okay

A parent read “late” as a scolding → the late state now says “a little late, that's okay, take it now”.

Before testing, from my own review

The automatic-call step was cut from the escalation ladder; the sign-up buttons lost the company names and kept the logos; feminine-only Arabic copy was made neutral so a son and a daughter read the same sentence; the header spacing was rebuilt after the first Arabic pass clipped titles.

Before and after — the Parent dose card, tap target and button size

// preview

For the engineer who builds it

Handoff spec — design to code

A design system is only real when it survives contact with a codebase, so the handoff was written for the engineer who builds it, with the RTL and localisation rules made explicit instead of assumed.

Tokens

The v4 · Editorial warm variable collection exported from Figma (Dev Mode → Variables → JSON) to tokens.json, generated into CSS custom properties / Swift constants (--color-ink, --space-4, --text-title). One source, both sides.

Direction

The root sets dir="rtl" or dir="ltr" from the language setting; layout uses logical properties only (margin-inline-start, inset-inline-end), so there is no separate RTL stylesheet. The tab bar keeps Today → Meds → Family → Settings in both directions.

Numerals and dates

Intl.NumberFormat('ar-SA-u-nu-arab') when Eastern Arabic digits are on; Intl.DateTimeFormat for Hijri and Gregorian. Phone numbers and one-time codes are always LTR.

Mixed-direction text

Drug names rendered inside <bdi> (or a leading U+200F in native strings) so a Latin name never flips an Arabic sentence.

Prayer times

Computed on-device from location with the Umm al-Qura parameters; the schedule stores the slot and the offset, not the time.

Component contract

Each Figma component maps to a component with the same name and state props — DoseCard takes state: 'due' | 'confirmed' | 'late' | 'snoozed' and confirmedBy?: string; ListRow takes verified: boolean; SupplyGauge takes daysLeft: number and derives its own ok | low | out.

Accessibility contract

Every icon-only control ships with its documented accessibilityLabel in both languages; error text is linked to its field and focus moves to the first invalid field on submit; the notification alert traps focus while open.

Annotated component spec — the Dose card and its states, RTL and LTR side by side

// preview

Concept outcome · if this were real

Outcomes and next steps

All five participants completed the core tasks; both caregivers described prayer-time scheduling, unprompted, as “finally”, and my father asked when he could have it on his phone. After launch I'd measure on-time dose rate, refill-on-time rate, unconfirmed-dose rate over time, and weekly active caregivers per circle.

Wasfaty dispensing data

Pull dispensing data from Wasfaty so medications arrive pre-filled.

Pharmacy pickup or delivery

Pharmacy pickup or delivery straight from the refill nudge.

Live Activity and Apple Watch

A Live Activity on the parent's lock screen and Apple Watch confirmation for parents who wear one.

A clinic view

With consent, a doctor sees the family's adherence log — the weekly report already exists in Birr Plus.

Closing

Reflection

What worked

Anchoring the product on one cultural truth — prayer times — gave every later decision a spine. Splitting the app into two modes felt expensive and turned out to be the simplification that made everything else possible. Designing the Arabic version first and deriving the English one produced a cleaner English app than the reverse ever has for me.

What I'd do differently

Studying my own family cut both ways: unmatched access, and a constant risk of writing down what I already believed instead of what I heard. The diary helped; a third household I didn't know would have helped more, and I'd test with parents I hadn't interviewed.

What I learned

Cutting a feature can be the strongest design move — removing the automatic call made the escalation model coherent. And copy is the product in Parent mode: changing late to a little late, that's okay did more for the design than any layout change. The thing testing proved me wrong about: I was sure prayer slots alone would be enough for caregivers. They weren't — both wanted a plain clock for at least one medicine, and the schedule step is better for it.

Want to go deeper?

Get in touch for the full walkthrough, or browse the rest of the work.

Let's Talk All case studies