Online Pharmacy

UI/UX Case Study

Team

Reza Tavassoli

UIUX Designer

Group 759435 (1)

Shahin Servati

UIUX Designer

Verwendete Tools

Figma. Photoshop. Illustrator

Dauer

2 Months

Link

-

🗂Projektübersicht

Darorasan – Intelligente Plattform für Medikamentenlieferung

Das Projekt Darorasan zielt darauf ab, eine intelligente und sichere Online-Plattform für die Medikamentenlieferung zu entwickeln – im Einklang mit den neuen digitalen Gesundheitsvorgaben der iranischen Lebensmittel- und Arzneimittelbehörde.

Die Plattform ermöglicht es Patient:innen, sowohl verschreibungspflichtige Medikamente (Papier- oder E-Rezept) als auch freiverkäufliche Arzneimittel bei nahegelegenen Apotheken zu bestellen und sie über einen sicheren Lieferservice zu erhalten.

Darorasan basiert auf einer Microservice-Architektur und integriert zentrale Funktionen wie:

  • Versicherungsprüfung,

  • Standortdienste,

  • Zahlungssysteme

  • und intelligente Logistiklösungen.

Ziel ist es, eine moderne, zuverlässige und benutzerfreundliche Lösung für die digitale Arzneimittelversorgung bereitzustellen.

❗️Problemstellung

Der Medikamentenlieferprozess in Iran war bisher traditionell fragmentiert, ineffizient und zeitaufwendig. Es existierte keine zentrale oder regulierte Plattform, die eine sichere, zuverlässige und skalierbare Online-Bestellung von Arzneimitteln mit Rezeptprüfung und Lieferung unterstützte.

Patient:innen mussten Medikamente in der Regel persönlich in der Apotheke abholen – was besonders für ältere Menschen, Menschen mit Behinderung oder in abgelegenen Regionen eine große Hürde darstellte.

Darüber hinaus fehlte es den bisherigen Systemen an Echtzeit-Integration mit:

  • Krankenversicherungen,

  • Apothekenlagerbeständen

  • und Logistikdiensten.

Dies führte zu Medienbrüchen, Verzögerungen und einem insgesamt unzureichenden Nutzererlebnis.

🎯 Ziele und Bedürfnisse der Nutzer:innen

  • Verschreibungspflichtige oder freiverkäufliche Medikamente einfach bei einer nahegelegenen, lizenzierten Apotheke bestellen

  • Rezepte hochladen und Verfügbarkeits-Updates in Echtzeit erhalten

  • Digitale Versicherung nutzen – ganz ohne Papierkram

  • Liefer- und Sendungsverfolgung mit zeitnahen Benachrichtigungen

  • Sichere Bezahlung über integrierte digitale Wallets und Zahlungsdienstleister (PSPs)

  • Transparente Preisangaben und Zugang zu Support-Angeboten wie FAQs und Kundenservice

  • Einfache Rückgabeprozesse bei abgelehnten oder fehlerhaften Bestellungen

  •  

⚙️ Design Prozess

1. 🗣 Interviews mit Produktteam

Zu Beginn führten wir Gespräche mit der Leitung der Forschungs- und Entwicklungsabteilung der iranischen Lebensmittel- und Arzneimittelbehörde sowie mit technischen Partnern von MCINEXT. Diese Meetings halfen uns, die Projektziele, Nutzerflüsse, Schwachstellen sowie die sicherheitsrelevanten und regulatorischen Anforderungen genau zu verstehen.

Die Stakeholder betonten dabei besonders die Bedeutung von Transparenz, digitaler Rückverfolgbarkeit und einer benutzerfreundlichen Bedienung – sowohl für Patient:innen als auch für das Apothekenpersonal.

2. 📊 Brainstorming & Benchmarking

In internen Brainstorming-Sessions sammelten wir erste Ideen und analysierten führende iranische Service-Apps wie Snapp und Tapsi, um Inspiration für Prozesse wie Onboarding, kartenbasierte Lieferauswahl und Wallet-Integration zu gewinnen.
Zusätzlich untersuchten wir weltweit etablierte Healthcare-Plattformen, um UX-Patterns für E-Rezepte und Apothekentools zu analysieren und auf die lokalen Anforderungen zu adaptieren.

✅ Stärken❌ Schwächen
Vertrauter Bestell- und LieferablaufEingeschränkte Barrierefreiheitsoptionen (z. B. keine Sprachsuche, kleine Schriftgrößen)

Starke Vertrauensmerkmale wie verifizierte Apotheken und transparente Preisaufschlüsselung

Komplexe Checkout-Prozesse – insbesondere bei der Verarbeitung von E-Rezepten
Kartenbasierte Apothekenauswahl stärkt das Vertrauen der Nutzer

Fehlende Echtzeit-Einsicht in Lagerbestände über mehrere Apotheken hinweg

Benutzerkonto zur Nachverfolgung früherer Rezepte und BestellungenNur minimale Unterstützung für die Versicherungsprüfung innerhalb der App
 

Geringe Personalisierung (keine intelligenten Vorschläge basierend auf früheren Bestellungen

3. Moodboard-Erstellung

Wir entwickelten Moodboards, um eine klare, vertrauenswürdige und gesundheitsorientierte Designsprache zu definieren. Dabei kamen sanfte medizinische Blautöne, klare Iconografie und barrierefreie Schriftarten zum Einsatz. Diese Phase half dabei, visuelle Konsistenz und den passenden Ton im gesamten Interface zu gewährleisten.

 

4. Informationsarchitectur

Wir strukturierten die Inhalte und Funktionen der App neu in eine übersichtliche Informationsarchitektur, die reibungslose Abläufe von der Registrierung bis zur Bestellverfolgung unterstützt. Auch komplexe Logik, wie z. B. die Auswahl mehrerer Apotheken bei geteiltem Lagerbestand, wurde früh berücksichtigt – für ein durchgängig logisches Navigationserlebnis.

5. User flows

Nach Workshops mit dem Produktteam und einer tiefgehenden Analyse vergleichbarer Plattformen entwickelten wir die zentralen Nutzerflüsse. Der Fokus lag darauf, Nutzer:innen sicher durch alle Schritte zu führen – von der Medikamentensuche bis zur Analyse der Bestellung und dem Export von Informationen. Diese Flows bildeten die Grundlage für die Wireframes und sorgten für klare, aufgabenorientierte Interaktionen.

6.User Persona

User Personas sind fiktive, aber datenbasierte Darstellungen realer Nutzer. Sie helfen uns, die Ziele, Bedürfnisse, Verhaltensweisen und Schmerzpunkte der Zielgruppe zu verstehen. In diesem Projekt begleiteten uns Personas wie Amir, der Business Manager, bei wichtigen Designentscheidungen – um ein relevanteres und wirksameres Nutzungserlebnis zu schaffen.

7. Wireframes

Basierend auf der abgestimmten Informationsarchitektur und den definierten User Flows erstellten wir Low-Fidelity-Wireframes, um Layout und Struktur festzulegen. Diese frühen Entwürfe halfen uns, zentrale Interaktionen zu validieren – mit Fokus auf Klarheit, Inhalts-Hierarchie und Datenvisualisierung. Das Team erhielt die Wireframes zur Rückmeldung, bevor der Übergang ins High-Fidelity-Design erfolgte.

🎨UI Kit and Styles

Für dieses Projekt nutzten wir die neuesten Funktionen von Figma, um ein skalierbares und klar strukturiertes Designsystem aufzubauen. Unser Ziel war es, eine einheitliche visuelle Sprache, hohe Klarheit und Effizienz über alle Bereiche der Plattform hinweg sicherzustellen.

Wir starteten mit einem Set an allgemeinen Design Tokens und Basis-Komponenten – darunter Farben, Typografie, Abstände und Buttons –, die auch in zukünftigen Projekten wiederverwendbar sind.

Anschließend entwickelten wir projektspezifische Tokens und maßgeschneiderte Komponenten, die auf die Anforderungen von Darorasan zugeschnitten sind, darunter:

  • Medikamenten-Karten

  • Module zum Hochladen von Rezepten

  • Statusanzeigen für die Medikamentenlieferung

Dieser mehrschichtige Ansatz ermöglichte es uns, konsistente Gestaltung mit flexibler Anpassung zu kombinieren – ideal für die komplexen Workflows und spezifischen Anforderungen der Plattform.

Typografie

Die Typografie spielte eine zentrale Rolle bei der Gestaltung einer klaren und gut lesbaren Benutzeroberfläche. Ich entwickelte ein Typografiesystem, das auf klarer Hierarchie und gestalterischer Einfachheit basiert:

  • Überschriften – Eingesetzt für Abschnittstitel und Diagrammbeschriftungen, fett und leicht erfassbar

  • Fließtext – Für mobile Lesbarkeit optimiert, mit ausgewogenem Zeilenabstand und Schriftgewicht

  • Hinweise & Mikrotexte – Verwendet für Tooltips, Hilfetexte und ergänzende Informationen

Das System orientiert sich an den Material Design Typography-Richtlinien. Wir trafen eine klare Vereinbarung, im gesamten Design konsequent vordefinierte Schriftgrößen und -gewichte zu verwenden.

Alle Textstile wurden mit einheitlichen Namenskonventionen (z. B. Heading-L, Body-M, Caption-S) versehen und mithilfe von Figma-Tokens im Interface umgesetzt. So konnten wir visuelle Konsistenz und Skalierbarkeit über verschiedene Bildschirmgrößen hinweg sicherstellen.

Tokens

Um Skalierbarkeit und visuelle Konsistenz im gesamten Designsystem sicherzustellen, habe ich von Beginn an mit Design Tokens gearbeitet. Diese strukturierten Design-Variablen halfen uns, zentrale Gestaltungsparameter konsistent zu definieren und flexibel anzuwenden – besonders bei der Umsetzung von Light- und Dark-Modes sowie bei der globalen Anpassung von Komponenten.

Eingesetzte Token-Kategorien:

  • 🎨 Farben – Semantische und funktionale Farbpaletten
    (z. B. color-error-80, color-primary-60)

  • 🔠 Typografie – Schriftgrößen, -gewichte und Zeilenhöhen
    (z. B. font-body-md, font-title-lg)

  • 📏 Abstände – Einheiten für Padding und Margin
    (z. B. space-4, space-8)

  • 🔘 Rundungen & Schatten – Eckradien und Elevation-Level

Durch die Nutzung von Tokens konnten wir Designänderungen systemweit mit minimalem Aufwand umsetzen und die Übergabe an Entwickler:innen deutlich effizienter und fehlerfreier gestalten.

Komponenten

Im Rahmen des Designsystems definierten wir eine Reihe allgemeiner UI-Komponenten – darunter Buttons, Eingabefelder, Modale Fenster und Navigationselemente –, die flexibel und wiederverwendbar in mehreren Projekten eingesetzt werden können.

Darüber hinaus entwickelten wir eine Sammlung projektspezifischer Komponenten, die auf die besonderen Anforderungen der Darorasan-Plattform zugeschnitten sind. Dazu gehören unter anderem:

  • Karten zum Hochladen von Rezepten

  • Blöcke zur Anzeige des Lieferstatus

  • Auswahllisten für Apotheken

  • Banner zur Versicherungsprüfung

Dieser modulare Ansatz ermöglichte uns, eine konsistente Designsprache beizubehalten und gleichzeitig das Interface gezielt an die spezifischen Nutzerflüsse und Funktionen der Plattform anzupassen.

+30 Assets

Finales Design

  • Derzeit steht der Iran vor einem gravierenden Ungleichgewicht zwischen Stromerzeugung und -verbrauch. Dieses Problem wird verschärft durch niedrige Strompreise und das Fehlen einer technischen Infrastruktur zur Echtzeitüberwachung des Verbrauchs.

    Da strukturelle Reformen kostenintensiv und zeitaufwendig sind, setzt unsere Lösung auf Verhaltensänderung durch Aufklärung und Bildung – basierend auf zwei zentralen Strategien:

    1. Peak Shaving – Verlagerung des Stromverbrauchs von Zeiten mit hoher Last auf verbrauchsschwächere Zeiträume

    2. Energiemanagement – Reduktion und Optimierung des Energieverbrauchs insgesamt

    Ziel ist es, das Bewusstsein der Nutzer:innen zu stärken und sie aktiv in die Energieeinsparung einzubinden – als pragmatische und wirkungsvolle Alternative zu rein technischen Lösungen.

Admin-Panel

Das Admin-Panel wurde speziell für Apotheken entwickelt, um eingehende Bestellungen effizient zu verwalten. Sobald ein:e Nutzer:in eine Bestellung über die App aufgibt, wird die Anfrage direkt an das Dashboard der jeweiligen Apotheke übermittelt.

Das Apothekenteam kann dort:

  • Alle eingehenden Bestellungen einsehen und verwalten

  • Lagerbestände prüfen und die Verfügbarkeit der angeforderten Medikamente bestätigen

  • Bestellungen freigeben und eine Lieferanfrage auslösen

  • Die Abholung und Auslieferung mit den Zusteller:innen koordinieren

Dieses Panel spielt eine zentrale Rolle bei der Optimierung des Fulfillment-Prozesses – es sichert Schnelligkeit, Genauigkeit und Nachverfolgbarkeit entlang der gesamten Medikamentenlieferkette.