Product DesignCase Study

How We Turned a Pharmacy Website into a Refill Power Tool

From placeholder to productivity. We transformed a static brochure site into a frictionless refill workflow that gives patients clarity and gives staff their time back.

Cover image for How We Turned a Pharmacy Website into a Refill Power Tool

Project Summary

🔍 Key Facts

ClientUltracare Pharmacy
IndustryHealthcare, Pharmacy, B2C Services
My RoleUX, UI & Frontend Design
Project TypeProduct Design · Frontend Dev
DeliverablesResponsive Web App · Refill Tracker · Unified Design System
FocusSystem Design, Workflow Design, Workflow Design, Patient Experience
Scale🟢 Merged 2 standalone apps Launched with real users
💡Background

Refining Pharmacy Workflows: How a Static Site Became a 24/7 Refill Power Tool

From placeholder to productivity. We transformed a static brochure site into a frictionless refill workflow that gives patients clarity and gives staff their time back.

So we asked: what if the website wasn’t just a digital brochure but a real-time assistant?

Walkthrough

📍The Problem

Patients kept calling ?

Not because they didn’t trust the pharmacy—but because the digital experience gave them nothing back. "They just want to know if it’s ready. That’s it." — Pharmacy Tech

📞 On the patient side:

  • They had to remember logins
  • They didn’t know what the status messages meant
  • They weren’t sure if the request even went through

💼 On the staff side:

  • Dozens of status update calls daily
  • Repetitive work and increased frustration
  • Manual double-checking and follow-ups
64of patient calls were just asking for status.
<12saverage time to resolve via phone.
90%of these calls replaceable by self-serve.

Redefining the Website's Role

We reimagined ultracarepharmacy.com as a working tool, not a placeholder. We started by stripping away the login wall and simplifying everything down to a single input: just type your Rx number.

The website should say what the staff would - Design Principle

We created a real-time refill tracker that:

  • Shows status in human terms: "In Progress," "Ready," "Needs Action"
  • Feels like a technician saying, "You're good to go"
  • Reduces patient uncertainty and staff interruptions
BeforeBefore
AfterAfter

Patients Want Refill Clarity. Staff Want Breathing Room.

We framed success by designing for both sides of the counter.

Without

  • Switching tools
  • Guessing root causes
  • Losing time

Design Outcome

  • One unified interface
  • Clear root cause analysis
  • Faster decision making
How We Solved It

How We Designed Clarity Into the Refill Experience

Each screen and flow was crafted to replace live human reassurance with interface cues.

Goal alignment visual

Homepage Input Field

Just type your prescription number. That’s it. We tell you where things stand—clearly, calmly, no login required.

Goal alignment visual

Tracker Status States

Every word is tested for tone and transparency. Patients know exactly what’s happening and what’s next.

Goal alignment visual

Success Confirmation UI

Instead of vague status, we explain the hold-up. “Waiting on doctor’s approval” beats “Still processing.”

Goal alignment visual

Microcopy in Action

The tracker mimics what staff would say in-store. “You’re good to go. Just head to the counter.” That builds trust—and keeps phones quiet.

Exploring and choosing the right approach

Clear.Confident.Informed.

We explored multiple patterns to find the one that balanced clarity, speed, and confidence.

IDEA 1

Stage Cards

Breaking status into multiple cards improved visibility, but added noise and cognitive load.

🖼️ Insert design iteration visual
IDEA 2

Progress Timeline

Timeline visuals showed momentum but felt too operational and heavy for quick check-ins.

🖼️ Insert design iteration visual
IDEA 3

Single Clarity Panel

One focused message with clear status and next steps was fastest to scan.

🖼️ Insert design iteration visual
IDEA 4

Panel + Icon Cue

A concise panel with a simple visual cue hit the balance of speed, tone, and trust.

🖼️ Insert design iteration visual
✍️SIGNING OFF

What This Project Taught Me

Ultracare was a test of clarity, empathy, and systems thinking—under pressure.

🧠Healthcare Language

Learning the Language

I came in speaking 'product,' not 'pharmacy.' Asking 'dumb' questions revealed that patients weren’t confused by UI—they were confused by process.

🛠️Precise Impact

Small, Precise Changes

Design wasn’t flashy—it was quietly useful. The biggest impact came from changing a status label or collapsing one unnecessary click.

🧑‍🤝‍🧑Ground-Level Truths

Staff Feedback > Assumptions

Listening to staff handling 40+ calls a day provided the real signals. They showed us what was broken, then helped us fix it.