Zurück
UX/UI Designer (solo)
Juli – September 2025
Gute Gesundheit ist uns alle wichtig, ebenso wie eine hervorragende Versorgung. Versicherungsunternehmen haben die Möglichkeit, Ihre Mitglieder auf jedem Schritt ihres Weges zu unterstützen, egal ob sie zum Arzt gehen oder sich bequem von zu Hause aus um ihre Gesundheit kümmern.
35 %
schnellere Aufgabenerledigung
4/5
Tester:innen berichteten von einer übersichtlicheren Aufgaben-Navigation.
60 %
der User:innen erkennen eine verbesserte Barrierefreiheit.
Ich habe die Barmer-Web-App neu gestaltet, mit dem Anspruch, die digitale Reise der Nutzerinnen klarer, schneller und vertrauenswürdiger zu machen. Auf der Basis von Nutzerinterviews und Feedbackrunden habe ich die Informationsarchitektur neu strukturiert, Navigationswege neu gedacht und zentrale Abläufe verschlankt. Ziel war es, Hürden abzubauen und all jene Aufgaben, die im Gesundheitsalltag wichtig sind, spürbar leichter zu gestalten. Gleichzeitig habe ich das visuelle Design und die Markenidentität gestärkt, sodass die App auf jedem Gerät modern, konsistent und einladend wirkt. Das Ergebnis ist eine intuitivere, zugänglichere und nahtlosere Plattform, die Nutzerinnen dabei unterstützt, ihre Gesundheit mit mehr Sicherheit und Leichtigkeit zu managen.
Bei der Analyse des ursprünglichen Designs und seiner Wettbewerber tauchte ich zunächst tief in die bestehende Barmer-Web-App ein. Ich wollte verstehen, wie klar ihre Struktur wirkt, wie gut Inhalte auffindbar sind und wie die visuelle Hierarchie Nutzer*innen leitet – oder eben nicht. Schnell zeigte sich ein Muster: Viele zentrale Funktionen lagen gut versteckt, Navigationswege zogen sich unnötig in die Länge und der visuelle Stil wirkte uneinheitlich.
Um ein vollständiges Bild zu bekommen, betrachtete ich anschließend andere Healthcare Produkte. Dort fand ich hilfreiche Best Practices: übersichtliche Dashboards, reduzierte Navigationsebenen und visuelle Systeme, die Vertrauen schaffen und Orientierung erleichtern. Gleichzeitig fiel auf, wie ähnlich sich viele dieser Designs deutscher Krankenkassen sahen – gleiche Farbwelten, vertraute Muster, wenig Mut zur Differenzierung.
Diese Erkenntnisse machten nicht nur die Schwächen des ursprünglichen Designs deutlich, sondern eröffneten auch eine Chance: eine modernere, zugänglichere und mutigere digitale Erfahrung für Barmer zu gestalten.
„Als Nutzer*in möchte ich eine einfache und intuitive Navigation, die mich schnell zu meinen wichtigsten Aufgaben führt – sei es ein Antrag oder meine Bonuspunkte –, damit ich die Website auch unterwegs effizient nutzen kann, ohne mich überfordert zu fühlen.“
In der darauffolgenden User-Research-Phase suchte ich den direkten Austausch mit Nutzer*innen. In Interviews, Usability-Tests und Aufgabenanalysen begleiteten sie mich durch ihren Alltag mit der Barmer-App. Immer wieder hörte ich dieselben Hürden: Die Suche nach wichtigen Funktionen wie Anträgen, Bonuspunkten oder der Arztsuche fühlte sich mühsam an. Viele beschrieben das Gefühl, von Informationen überflutet zu sein und nicht zu wissen, welchen Weg sie einschlagen sollten – gerade auf dem Smartphone. Auch Barrierefreiheitsprobleme wurden sichtbar: unklare Beschriftungen, zu geringe Kontraste, uneinheitliche visuelle Hinweise.
Mit diesen Bedürfnissen vor Augen begann ich, die Kernprozesse neu zu denken. Ich skizzierte Nutzerflows, reduzierte Reibungspunkte und straffte Abläufe – besonders für mobile Nutzende. So entstanden Taskflows, die auch komplexere Aufgaben wie Anträge oder Arzttermine spürbar einfacher und schneller machen.
Der Designprozess durchlief mehrere Iterationsstufen – beginnend mit Low-Fidelity-Wireframes, die halfen, grundlegende Layouts und Informationshierarchien zu testen. Darauf folgten Mid-Fidelity-Wireframes, in denen Interaktionen und Seitenstrukturen weiter verfeinert wurden, bis schließlich High-Fidelity-Wireframes entstanden, die das endgültige visuelle Konzept widerspiegelten. Jede dieser Stufen bot die Möglichkeit, Layouts, Interaktionen und Navigationsmuster gezielt zu verbessern und sie noch stärker an die Bedürfnisse der Nutzer*innen anzupassen.
Die Gestaltung entwickelte sich Schritt für Schritt von Low- über- Mid hin zu High-Fidelity. Jede Iteration eröffnete neue Möglichkeiten, Ideen auszuprobieren und alternative Ansätze zu testen. Durch kontinuierliches User Testing während der gesamten Wireframing-Phase wurde schnell deutlich, welche Lösungen überzeugen und welche verworfen werden sollten. So konnte ich früh die richtige Richtung für das Produkt identifizieren, bevor visuelle oder interaktive Details ausgearbeitet wurden.
Barmer’s neue visuelle Sprache vereint Selbstbewusstsein mit Wärme. Kräftige Farben, klare Typografie und menschenzentrierte Icons schaffen ein Erscheinungsbild, das modern, zugänglich und einladend zugleich wirkt. Das resultierende Styleguide übersetzt diese Haltung in ein konsistentes visuelles System, das sich nahtlos über App und Web erstreckt.
Die Farbwelt setzt auf warme Orangetöne, ergänzt durch Weiß und sanfte Grauabstufungen. Damit bricht Barmer bewusst mit dem typischen Grün der meisten Wettbewerber und vermittelt stattdessen Energie, Optimismus und Nähe. Alle Farben erfüllen mindestens die WCAG-AA-Kontrastanforderungen. Feine Tonabstufungen sorgen für Tiefe, ohne das Interface unruhig wirken zu lassen – das Ergebnis ist ein harmonisches, einladendes Erscheinungsbild.
Die gewählte Schrift Lato bringt Klarheit und Lesbarkeit in jede Ansicht. Mit neutralen, gut proportionierten Buchstaben sorgt sie dafür, dass Inhalte leicht erfassbar sind. Fließtexte liegen bei 16 px, Überschriften skalieren von 24 px auf Mobilgeräten bis zu 48 px am Desktop. Abstände passen sich flexibel an, wodurch das Layout offen, luftig und angenehm zu navigieren bleibt.
Ein Set flacher, minimalistischer Icons rundet das Design ab. Der reduzierte Stil macht die Symbole freundlich, verständlich und leicht erfassbar. Nutzer*innen erkennen auf einen Blick wichtige Funktionen wie das Einreich von Dokumenten oder gesundheitsbezogene Services. Schwarz als Grundfarbe garantiert dabei maximale Sichtbarkeit und hohen Kontrast.
Um den vielfältigen Bedürfnissen der Nutzer*innen gerecht zu werden, basiert das Layoutsystem auf den responsiven Breakpoints von Foundation und wurde für reale Nutzungsszenarien weiter verfeinert. Das Spaltensystem passt sich dynamisch an unterschiedliche Bildschirmgrößen an, während Ränder und Abstände konsistent bleiben. Komponenten, Typografie und Spacing skalieren fließend, sodass Hierarchie, Klarheit und Zugänglichkeit auf allen Geräten erhalten bleiben.
Auf diese Weise entsteht ein Design, das gleichermaßen flexibel wie konsistent ist – ideal für schnelle Aktionen unterwegs genauso wie für komplexe Aufgaben am Desktop.
User-Tests mit fünf Teilnehmerinnen zeigten, dass das Redesign die App deutlich intuitiver, zugänglicher und stärker auf die Aufgaben der Nutzerinnen ausgerichtet machte. Wichtige Aktionen konnten 35 % schneller abgeschlossen werden, Navigationsprobleme wurden behoben, und alle Tester:innen berichteten, dass sie nun besser wussten, wo sie Informationen finden. Das konsistente Layout, die klaren Icons und die kontrastreichen Farben verbesserten die Barrierefreiheit spürbar – drei Teilnehmerinnen hoben besonders hervor, dass Texte und Buttons jetzt leichter lesbar sind.
✅
Wichtige Aktionen konnten 35 % schneller erledigt werden.
✅
Navigationsprobleme waren bei 4 von 5 Nutzer*innen gelöst
✅
Alle Tester*innen gaben an, Informationen ohne Reibung zu finden
Die Arbeit am Redesign von Barmer hat mir eindrücklich gezeigt, wie viel Wirkung ein vollständiges Überdenken von Navigation und Layout auf die Usability haben kann. Ich habe gelernt, Klarheit mit Wärme zu verbinden, sodass jeder Workflow und jede Interaktion intuitiv wirkt, ohne die Zugänglichkeit und Konsistenz aus den Augen zu verlieren. Besonders wertvoll war die Erfahrung, dass ein groß angelegtes Redesign meine Fähigkeiten im Problemlösen und im Verständnis für Nutzer:innen vertieft hat. Vor allem aber konnte ich meine Kompetenz im Interface-Design stärken – vom Erstellen klarer Layouts und Hierarchien bis hin zum Gestalten von Interaktionen, die menschlich wirken und Nutzerinnen wirklich empowern.
