Zurück zu Projekten

Mediflow

Frontend DevelopmentUX Design
Mediflow

Über das Projekt

KI-gestütztes Tool zur automatischen Korrektur und Optimierung von Arztbriefen. Verbessert die Qualität medizinischer Dokumentation durch maschinelles Lernen.

Tech Stack

Next.jsOpenAITypeScriptTailwind CSSPrisma

Design Prozess

01

Research & Wireframes

User Research und erste Wireframes zur Validierung der Kernfunktionen

4 User Interviews
2 Iterations
8 Wireframes
02

Visual Design

Entwicklung der visuellen Sprache und UI-Komponenten

Style Guide
Component Library
Dark/Light Mode
03

Development

Implementierung mit Fokus auf Performance und Accessibility

98 Performance
WCAG 2.1
SEO Optimized

Design System

Farben

Primary
#4D72FF
Secondary
#00DBDE
Text
#161616
Background
#F2F2F2

Typografie

Heading
44px / 600 / Plus Jakarta Sans
Body
17px / 400 / Inter

Wireframes & Sketches

Early wireframe sketch

Frühe Skizzen der Hauptnavigation und des Hero-Bereichs

Component wireframes

Komponenten-Wireframes für die wichtigsten UI-Elemente

Design Decisions

Navigation & Information Architecture

Implementierung einer flachen Navigationsstruktur mit maximal zwei Ebenen

Vorteile der Lösung

Reduzierte kognitive Belastung
Schnellerer Zugriff auf Kernfunktionen
Bessere mobile Nutzbarkeit
Solution for Navigation & Information Architecture

Formular-Design & Conversion

Progressive Disclosure Pattern mit kontextbezogenem Feedback

Vorteile der Lösung

30% höhere Conversion-Rate
Reduzierte Fehlerquote
Positive User-Feedback
Solution for Formular-Design & Conversion

Key Learnings

User Research Insights

Die frühe Einbindung von Nutzern hat uns geholfen, wichtige Features zu priorisieren und unnötige Komplexität zu vermeiden.

Nutzer bevorzugen einfache Navigation
Mobile-First Design war entscheidend
Performance ist wichtiger als Animation

Technische Erkenntnisse

Die Implementierung hat gezeigt, dass moderne Web-Technologien bei richtigem Einsatz sowohl Performance als auch UX verbessern.

Next.js Server Components reduzieren Bundle-Size
Tailwind CSS beschleunigt Entwicklung
Framer Motion für gezielte Animationen

Performance

Performance
98/100
First Paint
0.8s
TTI
1.2s
Lighthouse
98%