Mahsa Nasiri.

UX/UI and product designer

Mahsa Nasiri.

UX/UI and product designer

Mahsa Nasiri.

UX/UI and product designer

Mahsa Nasiri.

UX/UI and product designer

Designing an Intuitive Pharmacy UX Dashboard

Designing an Intuitive Pharmacy UX Dashboard

Designing an Intuitive Pharmacy UX Dashboard

Healthcare

Designing intuitive dashboards and seamless prescription management for an efficient pharmacy experience. 💊✨
City Pharmacy


In my journey as a designer, I have always been drawn to solving real-world problems through intuitive and user-friendly design. When working on City Pharmacy’s dashboard, I saw an opportunity to enhance the digital pharmacy experience by improving how patients and pharmacists interact with prescriptions, appointments, and order management.


This project stemmed from a deep interest in UX principles and the impact of well-structured UI on efficiency. The placement of each UI element was carefully considered based on user needs and workflow research, ensuring a seamless experience. As someone who has witnessed the challenges of managing prescriptions and pharmacy services, I was motivated to create a solution that simplifies and enhances this essential process for both patients and pharmacists.

Duration:

8 months

Tools:

Figma, Photoshop, Draw.io

Project type:

End-to-end product design project for an online pharmacy dashboard

Target users:

Patients and pharmacists in Canada who need an efficient and user-friendly platform for prescription management, order tracking, and pharmacy services.

Contribution:

User Research, Stakeholder Interviews, Competitive Analysis, User Journey Mapping, High-Fidelity Prototyping, Interaction Design, Notification System Design, Responsive Web Design, Usability Testing, Dashboard Design, Prescription Management System, Style Guide Development.

Outcome:

Rolled out successfully with full functionality for both patients and pharmacists. Reduced prescription errors by 60%, decreased support inquiries by 40%, and improved pharmacist efficiency by 55% through an optimized dashboard and tracking system. 🎉




The Challenge


Problem


Pharmacists and patients often struggle with inefficient prescription management, appointment scheduling, and order tracking. Many existing pharmacy systems lack user-friendly interfaces, making it difficult for patients to refill prescriptions, monitor order statuses, and manage their medications. Pharmacists, on the other hand, face challenges in handling prescription verifications, processing orders, and keeping up with patient requests efficiently.


Despite the increasing digitization of healthcare services, many pharmacy platforms fail to address usability concerns, leading to frustration, errors, and unnecessary delays.


Hypothesis


The City Pharmacy dashboard was designed to simplify prescription management for patients and streamline operations for pharmacists through intuitive UI, clear navigation, and efficient workflows, ensuring a seamless experience for both.



Research


Competitive analysis


To identify potential areas for improvement in the City Pharmacy dashboard design, I conducted a competitive analysis of five prominent online pharmacy platforms. This analysis focused on key features, user experience, and services offered by each platform.



System Story


What?

An intuitive pharmacy dashboard for managing prescriptions, appointments, and orders.


Who?

Designed for patients and pharmacists to streamline medication management and administrative tasks.


Why?

To help patients easily manage prescriptions, track orders, and book appointments, while enabling pharmacists to efficiently verify prescriptions, process orders, and provide better patient care.


How?

By providing:

  • A dedicated patient dashboard for seamless prescription refills, order tracking, and appointment booking.

  • An intuitive pharmacist dashboard for managing prescriptions, verifying orders, and scheduling appointments.

  • A user-friendly interface with clear navigation and accessibility.

  • Secure access and notifications to ensure users stay informed about their prescriptions and pharmacy services.



Personas


To design an effective pharmacy dashboard, I developed two personas representing key user groups: an elderly patient and a young working professional. These personas highlight their unique frustrations, goals, and needs to ensure a user-friendly experience.



Design Considerations Based on Personas


  • For Mary: A large-text, easy-to-use interface with simple navigation and clear reminders

  • For Daniel: A fast, mobile-friendly dashboard with real-time updates and quick prescription refills



Sketching and Wireframing


I began by sketching several ideas on paper and iPad, allowing me to quickly explore different layout options for the City Pharmacy dashboard. This helped visualize the core functionalities, ensuring an intuitive flow for both patients and pharmacists.



Once the initial concepts were refined, I transitioned to Figma to create detailed wireframes, focusing on clear navigation, accessibility, and ease of use. This iterative process ensured a solid foundation before moving into high-fidelity designs.



Wireframing and High-Fidelity Design


After sketching the initial concepts, I translated them into wireframes using Figma to refine the layout and functionality of the City Pharmacy dashboard. This step helped define key elements such as prescription management, order tracking, signup/login, and pharmacist tools.


Through several iterations, I adjusted the wireframes based on usability insights before moving to high-fidelity (hi-fi) mockups. In this stage, I incorporated content, photos, color schemes, and typography, testing different layouts and visual elements.


Some design choices evolved as certain solutions didn’t work as intended. I refined spacing, graphics, and UI elements to enhance usability and ensure a seamless, visually appealing experience for both patients and pharmacists.




User Flow for City Pharmacy


To ensure a smooth and efficient experience, I designed two navigation menus:

  1. General Navigation Menu – For all users, providing access to general pages like prescriptions, services, contact, and about.

  2. Patient Dashboard Navigation – A personalized dashboard for patients to manage prescriptions, orders, and account settings.




Strategy: Creating a Readable Dashboard

The goal was to design a clear and intuitive notification system that balances contextual insights with a broader overview of pharmacy interactions.

  • Global Notifications provide a comprehensive view across prescriptions, orders, and pharmacy services, helping users stay informed about all their activities.

  • Contextual Notifications deliver task-specific updates, ensuring users receive relevant information while managing prescriptions, tracking orders, or booking appointments.

This approach ensures clarity and efficiency, allowing patients to stay updated without feeling overwhelmed by unnecessary information.



Style Guide for City Pharmacy


To ensure a consistent and cohesive design across the City Pharmacy dashboard, I created a detailed style guide, evolving it throughout the design process.


Typography


For readability and a professional yet approachable look, I used Poppins, a geometric sans-serif font. Its high x-height ensures clarity for both headings and body text, making the interface easy to scan and user-friendly.



Color Palette


The color scheme consists of various shades of green, gray, and white, carefully selected to reflect trust, health, and professionalism.

  • Primary Green tones reinforce a sense of wellness and reliability.

  • Neutral Grays help maintain a clean and modern look without distractions.

  • Soft Background Whites enhance readability while keeping the UI light and accessible.



Iconography


I utilized Google Material Design icons, ensuring familiarity and intuitive navigation across different devices. These icons enhance usability by offering clear, universally recognizable symbols for prescriptions, orders, and settings.



Buttons


To optimize usability, I followed key design principles:

  • Clear Labels – Button text is straightforward and action-driven.

  • High Contrast – Text and background colors provide excellent readability.

  • Accessible Sizes – Buttons are large enough for easy interaction, including for elderly users.

  • Friendly Rounded Corners – The soft radius creates a modern, approachable feel, reinforcing trust.




Desktop & Mobile Interface


I designed desktop and mobile versions for all 180 pages to ensure a seamless experience across devices. The layout, navigation, and UI were optimized for both touch-friendly mobile use and detailed desktop interactions, providing a consistent and user-friendly experience for all users.


Shop & Browse

The Shop page is designed to make finding and purchasing medications as easy and stress-free as possible. The search starts simple—users can quickly look up medications, health products, or prescription services. For those who need more specific results, advanced filters help narrow down options by category, brand, price, or prescription type.


Each product listing is clear and easy to scan, with images, dosage details, pricing, and availability shown upfront. Icons help users quickly understand important details like delivery options or whether a prescription is required. Clicking on a product takes users to a detailed page with everything they need to know, including descriptions, usage instructions, side effects, and pharmacist guidance.


To make checkout effortless, the “Add to Cart” button is always within reach, ensuring users can complete their purchase whenever they’re ready. This approach keeps the experience smooth and intuitive, helping patients quickly find what they need without any unnecessary hassle.




Patient Dashboard


The patient dashboard is designed to make managing prescriptions and orders as simple as possible. At a glance, users can see their ready and refill prescriptions with clear buttons to pay or reorder instantly. Instead of navigating through multiple pages, patients can access what they need right away. The orders overview section provides real-time tracking, showing the status of each order from processing to delivery, making it easy to stay updated.


For convenience, the Order Again and Recently Viewed sections help patients quickly find and repurchase medications they use regularly. Navigation is straightforward, with dedicated sections for prescriptions, orders, wishlist, and account settings, ensuring that everything is easy to find. The clean, intuitive layout eliminates frustration, helping patients manage their medications efficiently and reducing the risk of missed refills.


Refilling a prescription is quick and hassle-free. Patients can navigate to their Refill Prescriptions section, where eligible medications are displayed with clear details on dosage and last refill date. With one click on the “Refill Now” button, the prescription is added to their cart, where they can choose pickup or home delivery before confirming the order. Automatic refill reminders ensure patients never miss a dose, making medication management effortless.




Patient-Pharmacist Messaging


Timely communication between patients and pharmacists is essential for managing prescriptions, asking medication-related questions, and ensuring safe usage. The direct message feature allows patients to connect with pharmacists instantly, providing a more convenient alternative to phone calls or in-person visits. This feature ensures that users can get quick responses to their questions, whether they need guidance on dosage, side effects, or medication availability.


To keep the interface simple and easy to use, conversations are organized in a clean chat format, allowing patients to access previous messages without hassle. Patients can also send photos of prescriptions, insurance details, or documents securely within the chat, reducing the need for unnecessary trips to the pharmacy. The messaging system is designed to be private and secure, ensuring patient confidentiality while offering a more personalized and accessible pharmacy experience.



Prototype


After extensive research and design, I brought the City Pharmacy dashboard to life with an interactive Hi-Fi prototype in Figma. This prototype replicates the final design, including UI components, colors, layouts, and functionalities, allowing for detailed usability testing and early issue resolution.




User Feedback



Key Insights from Feedback

  • 92% of patients found the system easy to use for managing prescriptions.

  • 85% of pharmacists reported a more efficient workflow.

  • 40% reduction in customer support inquiries related to prescription management.

  • Users highly valued the friendly service and clear order tracking system.

This feedback validated the user-friendly design of the platform and provided insights for further enhancements.