UI/UX Redesign der Charité-Website
Von Zielgruppenanalyse bis Usability Test
Das Projekt
Im Rahmen eines vierwöchigen Gruppenprojekts habe ich mich intensiv mit dem UI/UX-Redesign der Website der Charité Berlin beschäftigt. Mein Fokus lag auf den Patienten als zentrale Zielgruppe. Das Projekt umfasste den gesamten Designprozess – von Zielgruppenanalyse und Customer-Journey-Map über Wireframes und Prototyping bis hin zu Usability Tests und finalen Anpassungen.
Vorher–Nachher-Vergleich
Zum Einstieg haben wir die bestehende Website der Charité Berlin in der mobilen Ansicht analysiert und redesignet. Hier der direkte Vergleich.
Vorher – Analyse
Vor der Neugestaltung der Charité-Website erfolgte eine Evaluation der bestehenden Seite anhand anerkannter Usability- und Gestaltungsrichtlinien (u. a. ISO 9241, ISO 25000). Dabei traten sowohl Stärken als auch deutliche Schwächen zutage:
- Stärken: klare Grundstruktur, F-Muster erkennbar, wichtige Informationen farblich hervorgehoben, schnelle Ladezeiten.
- Schwächen: überladene Startseite, uneinheitliche Navigation,, schwache Farbkontraste, zu viele Optionen („Paradox of Choice“)
Nachher – Optimiertes Design
Das neue Konzept setzt auf ein visuell ansprechendes Erscheinungsbild, bei dem Barrierefreiheit sowohl in der Farbgestaltung als auch in der Navigation eine zentrale Rolle spielt.
Ziel war es, den verschiedenen Nutzergruppen eine klare und intuitive Orientierung zu ermöglichen. Durch wiederholte Testungen entstand ein Design, das eine einfache Navigation unterstützt und gleichzeitig modernen Gestaltungsstandards entspricht.
Weitere Details zu Zielgruppen und Vorgehen folgen im nächsten Abschnitt.
Zielgruppen-Analyse
Um eine benutzerfreundliche Website zu entwickeln, wurde zunächst untersucht, welche Zielgruppen die Charité-Website vorrangig anspricht und welche spezifischen Bedürfnisse sie mitbringen.
Brainstorming Zielgruppen
Zu Beginn wurde ein allgemeines Brainstorming durchgeführt, um die wichtigsten Zielgruppen der Website zu bestimmen. Neben Patient:innen wurden u. a. auch Business-Partner, Wissenschaftler:innen und potenzielle Mitarbeiter:innen berücksichtigt.
Fokus auf Patient:innen (51–60 Jahre)
Für die weitere Analyse stand die Zielgruppe der Patient:innen im Mittelpunkt. Erste Überlegungen bezogen sich auf Bildung, sozialen Stand, genutzte Devices, gesundheitliche Probleme, Lifestyle und Motivationen.
Entwicklung von Hypothesen
Basierend auf den Vorüberlegungen wurden Hypothesen entwickelt, etwa zur bevorzugten Nutzung von Smartphones und Tablets oder zum Wunsch nach klar verständlichen Informationen.
Überprüfung durch Nutzerbefragung
Diese Hypothesen wurden anschließend in einer öffentlichen Umfrage überprüft. Auf diese Weise konnten erste Annahmen zu Nutzerbedürfnissen validiert und als Grundlage für die spätere Gestaltung herangezogen werden.
Customer Journey Map
Auf Grundlage der Umfrageergebnisse wurde eine Customer Journey Map entwickelt, die den typischen Weg der Patient:innen durch die Website abbildet. Dabei wurden zentrale Berührungspunkte, mögliche Probleme sowie Chancen für Verbesserungen identifiziert.
Zielgruppen Ausarbeitung
Informationsarchitektur
Um eine klare und nutzerfreundliche Seitenstruktur zu entwickeln, wurde ein Cardsorting mit Proband:innen durchgeführt. Dabei sollten die Kategorien der bestehenden Charité-Website in eine aus ihrer Sicht logische Reihenfolge gebracht werden. Die Ergebnisse zeigten, welche Bereiche intuitiv zusammengehörten und wo Unklarheiten bestanden.
Cardsorting
Die ursprüngliche Struktur der Charité-Website wurde den Proband:innen als Karten vorgelegt. Aufgabe war es, diese in eine aus ihrer Sicht logische Ordnung zu bringen.
Auswertung des Cardsortings
Die Sortierungen wurden analysiert, um wiederkehrende Muster, Unklarheiten und besonders häufig gewählte Anordnungen zu erkennen.
Neue Struktur entwickelt
Auf Basis der Auswertung entstand eine klar gegliederte Seitenstruktur, die die Erwartungen der Nutzer:innen widerspiegelt und als Grundlage für das neue Design diente.
Cardsorting Aufzeichnungen
Wireframes & Design
Für die Neugestaltung der Charité-Website wurden zunächst Wireframes für Mobile, Tablet und Desktop entwickelt, um unterschiedliche Nutzungskontexte abzudecken. Da ein Mobile-First-Ansatz verfolgt wurde, lag der Schwerpunkt beim finalen Design klar auf der mobilen Variante. Die erarbeiteten Wireframes dienten dabei als Grundlage für die Gestaltung eines klar strukturierten, barrierearmen und nutzerfreundlichen Designs.
Wireframes
Mobile
Tablet
Desktop
Design – Mobile First
Mobile
Tablet
Prototyp Testing
Um die Nutzerfreundlichkeit der überarbeiteten Charité-Website sicherzustellen, wurde ein Usability Test durchgeführt. Auf Grundlage der Ergebnisse konnten Optimierungspotenziale identifiziert und direkt in die Informationsarchitektur sowie das Prototyp-Design zurückgespielt werden. Durch diesen iterativen Prozess entstand eine nochmals verbesserte Version, die stärker an den Bedürfnissen der Nutzer:innen ausgerichtet ist.
Usability Test erstellt
Szenarien und Aufgaben wurden definiert, um die wichtigsten Interaktionen auf der Website zu prüfen.
Testergebnisse ausgewertet
Rückmeldungen der Proband:innen wurden gesammelt und systematisch analysiert.
Informationsarchitektur angepasst
Auf Basis der Erkenntnisse wurden Navigationswege und Strukturen nachgeschärft.
Prototyp überarbeitet
Das Design wurde optimiert und die Änderungen direkt im klickbaren Prototyp umgesetzt.
Usability Test Aufzeichnungen
Prototype 2.0
Nach vier Wochen intensiver Arbeit entstand ein Ergebnis, das sich deutlich von der ursprünglichen Website abhebt. Der finale Prototyp präsentiert sich einladend, modern und vollständig barrierefrei. Mit klarer Struktur und konsistenter Gestaltung bietet er Nutzer:innen eine intuitive Navigation und setzt die Bedürfnisse der Zielgruppen konsequent in den Mittelpunkt.