MedRx Case Study — Shahriar Shanto

Project information

DisclosureIndependent concept project using fictional data. No patient information, confidential employer materials, or proprietary assets are included. Proposed improvements are design hypotheses unless marked as tested.

Role: Sole UX engineer: research framing, UX and UI, accessibility, prototyping
Type: Self-initiated portfolio concept
Tools: Figma variables, axe, NVDA, React, Storybook
Platforms: Web 1440 first, tablet 1024, mobile 390, light and dark
Deliverables: 61 Figma screens, components, clickable and coded prototypes, research kit
Status: Automated checks pass. Not yet tested with users.

Evidence labels: ◇ Conceptdesigned, not tested ✓ Implementedbuilt and passing automated checks ○ Plannedscripted, needs people

4:00 pm · Challenge

A legal record that has to read clearly in the middle of a busy shift

A Medication Administration Record (MAR) is the legal record that each dose was given, refused, held, or missed. Legacy tools in home and community-based care often answer three different questions on one dense screen.

What needs attention?WorklistOverdue, due now, coming up, drafts.
What is planned?Dose sheetOrder, safety context and dose window, right where the dose is given.
What happened?HistoryWho gave what, when it was given, and when it was recorded.

What happened feeds the next shift's worklist, so the loop closes at every handoff.

How might we

help care teams understand medication tasks and document outcomes clearly, across shifts and devices?

Goal: Find the most urgent dose in under 5 seconds; record the right outcome first time.
Setting: Group homes; shared tablets, personal phones, office laptops.
Scope: Worklist, dose entry, PRN, exceptions, handoff, monthly history.
Out of scope: Prescribing, pharmacy ordering, billing, integrations.
Constraints: Fictional data; WCAG 2.2 AA as the floor; standard clinical terms.
Success: 4 of 5 testers finish each core task; 0 axe critical issues.

4:30 pm · People

Three roles, one record

Proto-personas to check in interviews ○ Planned. Names and homes are fictional.

Rina Okafor

Direct support professional · evening shift

“Show me the next urgent dose. I'm standing next to the person.”

Uses: A shared tablet, sometimes her own phone
Gets stuck when: Interrupted mid-entry, or unsure which outcome fits a refusal

Marco Villanueva

Visiting nurse · 6 homes

“Every exception across my homes, with the reason, in one place.”

Uses: A laptop between visits, a phone on the road
Gets stuck when: Late records look on time, or a refusal has no note

Dana Whitfield

Supervisor · 12 homes

“A record I can trust at audit time, on screen and on paper.”

Uses: An office laptop, monthly audits and printouts
Gets stuck when: Printouts depend on colour, or corrections leave no trail

5:15 pm · Gaps found

32 gaps, ranked by risk. The worst ones are about trust in the record.

Written as general patterns from experience with this category of tool: 21 system gaps (SG) and 11 UX and accessibility gaps (AG), each paired with a MedRx fix and mapped to WCAG 2.2 where it applies.

P0Level A failure or medication-safety riskP1Level AA failure or high risk of a documentation error

SG1P0

Gap

Batch entry can apply one time to many doses

Recorded times may not match real care.

MedRx fix

Batch only works for doses in the same window, and each dose keeps its own editable time.

SG2P0

Gap

Early, late and back-dated entries need no explanation

Late documentation looks like on-time care.

MedRx fix

An inline warning and a required reason. Care time and record time are stored separately.

SG3P0

Gap

Safety context sits one click away from the dose

Allergies and holds get missed at the point of giving.

MedRx fix

Allergies, holds and order changes sit on the dose sheet as text, above “Mark given”.

SG14P0

Gap

Printed records rely on colour and unexplained codes

Unreadable in greyscale.

MedRx fix

A print-safe month: text codes, a legend, exception reasons and version history.

AG1P0

Gap

Status relies on colour swatches

WCAG 2.2 · 1.4.1 Use of Color (A)

MedRx fix

Every status is a word plus a distinct icon shape. Colour is the third cue.

AG2P0

Gap

Safety icons have no text label

WCAG 2.2 · 1.1.1 Non-text Content (A)

MedRx fix

Alerts are text chips (“Allergy: penicillin”) with the icon marked decorative.

The P1 gaps and their fixes
ID	Gap	WCAG 2.2 or impact	MedRx fix
SG4	Timestamps depend on the device clock	Wrong times	Server time is the source of truth
SG5	Attribution relies on manual selection	Wrong person credited	Signed-in user recorded; witness for controlled substances
SG6	Status vocabulary overlaps	Unclear next steps	Seven plain statuses, from Upcoming to Missed
SG7	History mixes care time and record time	Audits can't tell when	Scheduled, Given at, Recorded at and By kept apart
SG8	PRN views hide last-given time and daily max	Risk of exceeding limits	“Last given” and “2 of 4 today” before giving
SG15	Vitals lack units, ranges and flags	Abnormal readings missed	Units, nurse-set ranges, text flags
SG16	Vitals are disconnected from doses	Pre-dose checks skipped	Orders can require a pre-dose check
SG17	Leave is set medication by medication	Missed medications	Person-level leave; doses show as LOA
SG18	Corrections lack a reason and history	No trail	What and why asked; both versions kept
AG3	Status pills likely fail contrast	1.4.3 Contrast (Minimum)	Text tokens at 4.5:1 or higher
AG4	Component edges hard to see	1.4.11 Non-text Contrast	Borders and focus rings at 3:1 or higher
AG5	Small, crowded targets	2.5.8 Target Size (Minimum)	44 × 44 px targets
AG6	Dense rows won't reflow	1.4.10 Reflow	Split view that stacks on mobile
AG7	Required state and counters not announced	3.3.2, 4.1.3	“Required” in labels; polite live regions

6:00 pm · Decisions

Three decisions carry the redesign

Each one is ◇ Concept until people test it.

One worklist, sorted by urgency

Need: See the most urgent dose first, across everyone supported.
Tried: Tabs by medication type; a grid of counts; a timeline.
Choice: One list: Overdue, Due now, Coming up, Drafts. Type becomes a tag, not a place.

Web worklist for Rina Okafor's evening shift: Theo Marsh's metformin overdue by 34 minutes, Jonah Reyes and Amara Lindqvist due now, and a draft. Jonah's dose is open beside the list with a penicillin allergy chip. — **Worklist with dose panel.** Selecting a dose opens it beside the list.

One primary action; exceptions one step away

Need: Most doses go as planned; exceptions need a reason and a follow-up.
Tried: A long form for every dose; a batch-first entry mode.
Choice: One “Mark given” button. Refused and Held open a short reason form.

Record refusal dialog for Amara Lindqvist's vitamin D3: required reason selected, an optional note with a character counter, and a message that the nurse will be notified on save. — **Recording a refusal.** A required reason, a note, and who will be notified.

A month as a readable grid

Need: Spot patterns and gaps across 30 days.
Tried: A long list of entries; a calendar of colour dots.
Choice: Medications by day with text codes; each cell opens who and when.

Given
Refused
Held
Missed
Late

Monthly history for Amara Lindqvist: medications by day with text codes, an exceptions summary, and a record showing a dose given at 8:20 pm but recorded at 10:45 pm with the late reason. — **Monthly history.** Scheduled, given and recorded times stay separate.

7:00 pm · Final design

Web first, then tablet and mobile. Same steps on every size.

61 screens built from Figma variables and components, in light and dark.

Shift handoff: three open items with status, reason and next action, a shift summary, and notes above 'Hand off to night shift'. — **Shift handoff.** Open items carry a status, reason and next action.

PRN acetaminophen for Jonah Reyes resumed from a draft: 2 of 4 doses in 24 hours, last-given time, reason chips and an effect-check reminder. — **PRN with a resumed draft.** Limits show before the reason.

7:30 pm · Safety

Guardrails exactly where records go wrong

All ◇ Concept. Each answers a P0 or P1 gap.

P0SG2

Late or back-dated entry

When care time falls outside the dose window, a warning explains that both times are saved and a reason is required. History marks it “Recorded late”.

Late entry form: care time set to the previous evening, a warning that the record is about 24 hours after the dose, and a required reason.

P0SG1

Safe batch entry

Only doses due in the same window can be recorded together. Each keeps its own time, and held doses are left out.

Batch entry for Amara Lindqvist: two 8 pm doses selected with their own times; lisinopril excluded because it is on hold.

P1SG5

Count and witness for controlled doses

Count before and after, and a witness who confirms on their own device. No shared passwords.

Controlled dose for Theo Marsh: counts before and after, a witness confirmed on their own device, and a required reason.

P1SG15 · SG16

Vitals linked to the doses that need them

Units in every header, nurse-set ranges, text flags. A systolic under 100 mmHg suggests holding the linked dose and notifies the nurse.

Vitals for Amara Lindqvist with units, ranges, low readings flagged in text, and a note that her lisinopril will be suggested as held.

Checks inside the dose, on mobile

Mobile pre-dose check: systolic 96 flagged under 100, and 'Hold this dose' with Hold dose and notify nurse as the main action. — **Pre-dose check**

Scan match: right person, medication, dose and time all OK, with Continue to dose. — **Scan: match**

Scan mismatch: 'Stop, this card is for Theo Marsh', with Scan again. — **Scan: mismatch**

Records you can trust

Print dialog with a print-safe monthly preview using text codes and a legend. — **Print-safe month.** Reads in black and white.

Correct this record dialog asking what is wrong and why, with both versions kept. — **Versioned correction.** What changed, why, and both versions.

Leave of absence for Amara Lindqvist: dates, reason, medications going with her, and a note that eight doses will show as LOA, not Missed. — **Leave of absence.** One entry covers every medication.

Beyond the care worker

Nurse

Exceptions across 6 homes

Supervisor

Monthly audit by home, fictional figures

8:00 pm · Accessibility

Accessible by construction, checked by machine

Tokens carry the contrast, components carry the states, and the coded prototype is tested automatically. A manual screen reader pass is still ○ Planned.

0axe violations34 checks, 17 stories, light and dark✓ Implemented

16/16reflow checks320, 768, 1024 and 1440 px✓ Implemented

6/6keyboard stepsfocus moves; saves and errors announced✓ Implemented

6.6:1lowest text contrastlight; 7.5:1 dark; borders 3.6:1✓ Implemented

Primary#0B5F59
Primary deep#0A4B47
Tint#E3F1EF
Canvas#F5F6F3

Atkinson Hyperlegible NextProduct face · 14 px data minimum · 0/O and 1/I/l told apart

The web worklist in dark mode with the same layout, status chips and safety chips. — **Dark mode.** Same structure; dark text pairs are 7.5:1 or higher.

Component sheet: status chips, buttons in five states, dose cards in default, selected and focus states, and form fields in default and error states. — **Component library.** StatusChip, Button, DoseCard, Field, TextArea, RadioOption, Checkbox, Switch, Banner, SafetyNote.

9:00 pm · AI assist

One small, labelled job for AI: drafting the handoff

Labelled “AI draft: check every line before sending”.
Every line cites the record it came from.
No clinical advice. The person on shift is the author.
Nothing is used until a person chooses “Use in notes”.

✓ Implemented20 of 20 fictional shifts pass the contract tests (rule-based draft).

○ PlannedAny real model must pass the same tests first.

Mobile handoff with an 'AI draft' panel: three lines with source links, a no-advice note, and Use in notes and Discard.

Web handoff with the AI draft beside the open items, each line linked to its source record. — **AI handoff draft on web.** The draft sits beside the open items it summarises.

10:00 pm · Validation

What is proven, and what isn't yet

No user testing has been done yet. Automated checks pass; every design claim stays a hypothesis until people use it.

✓ Implemented

Coded prototype

React, built from the same tokens: worklist, dose panel, refusal validation, undo, history and the AI-drafted handoff, in web, tablet and mobile layouts.

Open the live demo (opens in a new tab) → ○ Next

Research and testing kit

Interview guide, a 10-task usability script, and the NVDA and JAWS script for the next phase.

Open the kit (opens in a new tab) →

○ PlannedFind the most urgent dose in under 5 sModerated test, 5 participants

○ Planned4 of 5 finish each core taskModerated test

○ PlannedScreen reader dose entry, unaidedNVDA + Firefox script

✓ Implemented0 axe critical or serious issuesEvery Storybook story · 0 in 34 checks

✓ ImplementedNo sideways scrolling at 320 pxPlaywright, 4 widths · 16 of 16

✓ ImplementedFocus moves; saves and errors announcedKeyboard script · 6 of 6

✓ ImplementedAI draft lines traceable, no adviceContract tests · 20 of 20 (rule-based)

11:00 pm · Handoff

Reflection and next steps

The hardest problems in medication documentation are time, attribution and reason, not visual polish.

Designing web first made the split view, list beside dose, the core pattern; it held on tablet and stacked cleanly on mobile. Writing statuses as words before choosing colours removed a whole class of accessibility failures early.

Open items for the next shift

✓ DoneReact and Storybook components with axe, reflow and keyboard checks
○ NextInterview 3–5 care workers to validate the gap list
○ NextRun 5 moderated tests and update every evidence label
○ NextRun the manual NVDA and JAWS script