Mobile-first medication ordering app
Team
2 UX Designers· 1 Product Manager
2 Developers
Tools
Figma · Miro · Maze · Google Forms
Platform
Mobile-first iOS & Android app
The Problem:
Pure Pharmacy’s existing medication ordering app was built for a general audience but a significant portion of its users were seniors managing multiple prescriptions. These users were struggling: small font sizes, complex navigation, and unclear terminology were causing frustration, errors, and abandonment.
The business consequence was direct: senior users were calling the pharmacy to complete tasks the app was supposed to handle, increasing staff workload and eroding trust in the digital service.
Core question:
How do we redesign the prescription experience so that seniors can manage their medications independently, confidently, and without errors?
My Roll:
Interviews
Key Findings
- Font sizes felt unreadable without zooming, which broke the layout
- Users could not find the prescription refill button without help on the first attempt
- Terminology like “Rx number” and “DAW code” caused confusion and anxiety
- Trust was the biggest barrier — seniors were uncertain whether their order had gone through
- Medication reminders were the most-wanted feature, but the existing one was buried 4 levels deep
Surveys
Surveys Finding:
- 71% said they found the current app “difficult” or “very difficult” to use
- 64% had abandoned an order and called the pharmacy instead
- 89% said they would use the app more if reminders were easier to find
- 78% wanted confirmation that their order was received before closing the app
Personas
Margaret manages 4 daily medications and lives independently. She is comfortable using her iPad for video calls and email, but feels anxious about online health transactions. Her biggest fears are making an error with her medication or not knowing if her order went through.
- Goals: Refill prescriptions without calling, feel confident the order is confirmed, get reminders she won’t miss
- Frustrations: Small text, confusing medical terminology, no clear order confirmation
- Needs: Large text, plain language, prominent confirmation messages, simple navigation
Journey Map
Margaret’s journey: from opening the app to completing a refill
| Stage | Action | Emotion | Pain Point |
|---|---|---|---|
| Open app | Tries to log in | Neutral | Forgot password — reset flow is confusing |
| Find medication | Searches for Rx | Frustrated | Can’t find search bar — it’s grey on white |
| Read details | Reviews prescription info | Anxious | “DAW code” and “Rx number” are unexplained |
| Place order | Taps refill button | Confused | Button is small and below the fold |
| Confirmation | Waits for response | Very anxious | No clear confirmation — did it go through? |
| Follow-up | Calls the pharmacy | Relieved but disappointed | Defeats the purpose of the app |
Opportunity areas identified from the journey map:
- Simplify and enlarge all navigation elements
- Replace medical jargon with plain language throughout
- Add a prominent, unmissable order confirmation screen
- Make medication reminders accessible from the home screen
- Streamline the login and onboarding experience
Design from Wireframes to Prototype
- Clarity over cleverness — every label in plain language, no medical shorthand
- Confirmation at every step — users should never wonder if something worked
- Accessible by default — WCAG 2.1 AA as the minimum, not an afterthought
- Forgiveness built in — easy to undo, easy to recover, easy to ask for help
Wireframes (Lo-Fi)
Starting with paper sketches and low-fidelity Figma wireframes, I explored three different navigation structures:
- Option A: Bottom tab navigation (Home / Medications / Orders / Reminders / Help)
- Option B: Card-based home screen with large tap targets for each main task
- Option C: Single scrolling home screen with all actions visible
Early user feedback from 3 informal sessions with seniors strongly favoured Option B — the card layout with large tap targets felt more manageable and less overwhelming than a tab bar.
Wireframes (Hi-Fi Prototype)
Key design decisions in the high-fidelity prototype:
- Minimum font size: 17pt throughout the app (up from 12pt in original)
- Tap targets: minimum 48×48px on all interactive elements (WCAG 2.1 requirement)
- Colour contrast: minimum 4.5:1 ratio on all text (WCAG 2.1 AA)
- Plain language audit: replaced all medical jargon — “Rx number” became “Prescription number,” “DAW” was removed from user-facing screens entirely
- Order confirmation: added a full-screen confirmation with large checkmark, order summary, and estimated ready time — visible for 5 seconds before auto-advancing
- Medication reminders: moved from 4 levels deep to the home screen card
- Progressive onboarding: broke the registration flow into 5 short steps with a progress bar and the ability to skip non-essential information
Usability Testing & Iteration
I ran 4 rounds of usability testing with a total of 14 participants across the project.
Round 1 (Lo-Fi prototype, 4 participants)
- Finding: Users were not recognising the card-based home screen as interactive — cards looked like information, not buttons
- Change: Added visible chevron arrows and a subtle border to all interactive cards
Round 2 (Hi-Fi prototype v1, 4 participants)
- Finding: The medication reminder setup flow still required too many steps
- Change: Condensed from 5 steps to 2 — set time, set frequency. Done.
Round 3 (Hi-Fi prototype v2, 3 participants)
- Finding: One participant with low vision struggled with the grey placeholder text in input fields
- Change: Darkened all placeholder text to meet 4.5:1 contrast and added persistent floating labels above fields
Outcomes
Usability results (post-redesign testing vs. original app)
| Metric | Original App | Redesigned App | Change |
|---|---|---|---|
| Prescription refill task completion | ~40% unassisted | 100% unassisted | +60 points |
| Average time to complete refill | ~8 min | ~3 min | −62% |
| Users who could find reminders | ~20% | 100% | +80 points |
| Users who felt confident order was received | ~30% | 97% | +67 points |
| Error rate during checkout | High | Near zero | Significant reduction |
Stakeholder outcomes
- Pharmacist staff reported a measurable reduction in support calls from senior users during beta testing
- The design system and component library built for this project was adopted as the foundation for Pure Pharmacy’s ongoing mobile platform development
- The plain language audit became an internal standard applied to all future pharmacy communications
What I Learned
1. Accessibility work is UX work. Every change I made for senior users larger text, clearer labels, explicit confirmation made the experience better for every user. Designing for the edge case improved the mainstream experience.
2. Trust is a design element. The single highest-impact change was adding the full-screen order confirmation. It didn’t change what the app did it changed how users felt about what the app did. Perception of reliability is part of the product.
3. Jargon is a barrier you can always remove. Medical terminology felt “accurate” to the team but “scary” to users. Plain language is not dumbing down — it is clarity. Getting stakeholder buy-in for the language audit was the hardest part of the project, and the most worthwhile.
Next Steps (if continued)
- Integrate caregiver access — a linked account for family members to manage prescriptions on behalf of a senior
- Add in-app pharmacist chat for questions before and after ordering
- Expand accessibility testing to include Android and low-vision assistive technologies
- Introduce medication interaction alerts with plain-language explanations