TIMELINE
2 Weeks.
March 2024
TEAM
Design Manager, Web Developer
CONTRIBUTION
Wireframes, Prototyping, UI-UX, Design System
STATUS
Shipped
TL;DR
I designed an atomic design system for Under The Roof Stays, establishing foundational tokens for color, typography, icons, and visual style, then building a scalable Figma component library with reusable patterns and documentation to support consistent, efficient implementation as the product grew.
WHAT DID I DO
Defined foundational design tokens for color, typography, icons, and visual style to establish a consistent brand language across the platform
Built a scalable Figma component library using nested tokens, variants, and reusable patterns, then designed the core screens and interactions end to end
Documented component specifications and usage guidelines, partnering with developers through handoff to keep implementation consistent
TOOLS USED
THE PROBLEM
The brand had a vision. It didn't have a language yet.
Under The Roof Stays wanted to be the villa rental platform people trusted, curated properties, transparent pricing, a booking journey that didn't feel like digging through cluttered listings. That vision was clear. What wasn't clear was what any of it should look like.
Early research surfaced two problems that would define everything downstream: existing rental platforms were cluttered with inconsistent filters and information, and comparing properties across listings was genuinely hard.
THE SOLUTION
What I built to solve it
Built a scalable brand identity and design language system rooted in research, not aesthetics alone.
Explored and shortlisted multiple property card directions before locking a pattern that worked across every use case.
Kept the system light enough to move fast, building only what the MVP's core flows needed.
INSIGHTS
Inventory reconciliation and dispensed-drug verification were the biggest sources of friction, especially when a second pharmacist wasn't around to double-check during peak hours
The interactions pharmacists miss aren't the obvious ones. A drug that's dangerous on its own gets caught. The risk is the borderline case: a drug that's fine alone but wrong for a specific patient's full history, the kind of thing that gets missed under time pressure, not through negligence
Cross-checking eats time but takes comparatively little judgment, which is what made it the right place for AI to sit. We didn't want to touch the parts of the job pharmacists actually value
EXPERT EVALUATION & ITERATION
What a practicing pharmacist taught us
Reasoning behind the AI suggestion: "Why A and not B? I would know but it helps". Having reasons for every AI suggestion to build trust and improve experience
We rewrote how the AI talks about risk: A system that can be wrong, shouldn't sound certain. We shifted the tone of our copy from definitive to suggestive
WHAT WE SHIPPED
Intervenes only when needed
The plugin runs quietly in the background while a pharmacist scans a prescription. If it catches an abnormality, it surfaces a notification. If it doesn't catch one automatically, pharmacists can open the plug-in manually.
AI Flags, Pharmacists Decide
The AI scans prescriptions for potential risks, drug allergy conflicts, drug-drug interactions, contraindications, and diagnosis mismatches. Although the AI detects the risk, the final decisions are left to the pharmacist based on certain choices made.
Severity over a binary flag: A yes/no flag would treat a minor interaction the same as a life-threatening one, which just adds noise pharmacists learn to ignore. Severity lets them judge for themselves how urgent it is to act.
Every description is sourced: Pharmacists cross-verify with each other constantly, so providing claims without supporting evidence would introduce another layer of uncertainty rather than reduce their workload.
Notifying the Doctor
The pharmacist can choose to opt for physician approval by adding a note and send the request directly to the doctor through RX/Ai. Instead of relying on a phone call and waiting for the doctor to become available, the request is documented and routed directly for review, reducing interruptions for both clinicians.
Suggesting an Alternative
If a medication poses a potential risk, the pharmacist can suggest an alternative medication as part of the approval request. The doctor can then review the recommendation and respond directly with an approval or an alternate medication, closing the communication loop without requiring a back-and-forth phone call.
Closing the Communication Loop
The pharmacist can see the doctor-approved change directly within the prescription, with the original and replacement medication clearly shown side by side. This closes the communication loop.
The Controlled Substance Boundary
For controlled substances, AI cannot suggest alternatives. Pharmacists can only notify the doctor, reflecting both regulatory requirements and pharmacists’ need for direct physician oversight in higher-risk decisions.
IN HINDSIGHT
The gaps I'd fix next
01
No audit trail: The plugin doesn't log what data it saw or why it flagged something. For FDA validation or HIPAA accountability, every output needs to be reconstructable: why did the system say this, based on what. Scoped out for time, but it'd be first in the next iteration.
02
No way to correct the system: Pharmacists can override a flag but can't tell the AI it was wrong for a specific patient. Without that feedback loop, the same near-miss can repeat.
WHAT I GOT OUT OF THE PROJECT
Word choices matter more in high-stakes environments
The biggest shift in how I think about AI design: a single word choice moved trust more than the information architecture did. I assumed the hard part would be getting the right data in front of the right person at the right time. What nearly broke the tool was language that claimed more certainty than the system actually had.
Next time, I'd bring a practicing pharmacist in during ideation, not after a working prototype. We only caught the override screen and the copy problem because we happened to test with someone who does this job daily. Those should've been stress-tested from day one.
You reached the end! Have an AI-generated cookie.
AI still can't replicate the taste. Want a real cookie? Let's chat. (Click the cookie to eat it.)