Case Study BIG direkt: UX/UI für Kundenportal

Unser Kunde, die BIG direkt gesund, ist Deutschlands erste Direktkrankenkasse. Das heißt, die Krankenkasse verzichtet bewusst auf ein aufwändiges und großes Filialnetz und setzt vielmehr auf Self Services für die einzelnen Versicherten. Deswegen ist ein funktionales und modernes Online-Portal enorm wichtig.

In mehreren Workshops mit dem Kunden (mit Beteiligten aus vielen Fachabteilungen) haben wir gemeinsam ein Zielpaket für das Relaunch Projekt erarbeitet.

Im Fokus steht die versicherte Person – dies geht Hand in Hand mit den unternehmensweiten Zielen der BIG direkt. Ein hohes Augenmerk liegt auf dem geschützten Bereich der Website mit den Self Services für die Versicherten, der besonders gestärkt werden soll.

Außerdem wurden folgende Ziele festgelegt:

• Überarbeitung und Modernisierung des Designs auf Basis des Corporat Design Manuals
• Aufbau eines Web-Styleguides
• Verbesserung des responsiven Verhaltens auf kleinen Endgeräten wie Smartphones
• Vereinfachung der Nutzendenführung und damit Erhöhung der Usabilty
• Vereinheitlichung der Seitentypen und -inhalte

In enger Zusammenarbeit mit der Digital-Unit und den Fachabteilungen der BIG direkt entstanden zahlreiche Wireframes um das neue, angepasste Inhaltsgerüst der Seiten aufzuzeigen. Dabei hatten die Erkenntnisse der vorangegangenen Phasen großen Einfluss.

Natürlich wurden in diesem Schritt auch die Bedürfnisse der Redakteur:innen berücksichtigt, die in Zukunft die neuen Seiten anlegen und mit Content befüllen müssen. So entstanden zahlreiche Leistungenseiten, die das Leistungsportfolio der Krankenkasse für die (potenziellen) Versicherten erläutern sollen. Dabei wurde besonders darauf geachtet, die Vorteile und die exklusiven Leistungen für Versicherte schnell greifbar darzustellen.

Ein weiteres Thema im Zuge des Relaunchs war die Überarbeitung der sog. Service Tools der Krankenkasse. Hierbei handelt es sich um funktionale Elemente der Website, bei denen Versicherte z. B. nach Ärzt:innen oder Hilfsmittelvertragspartnern suchen können. Ebenso werden verschiedene Rechner angeboten, um z.B. die Höhe des Krankenkassen-Zuzahlungsbetrages zu berechnen. Diese sollen Versicherten eine komfortable und stringente Nutzung ermöglichen, die seitenübergreifend denselben Regeln folgt.

Aus diesem wachsenden Baukasten konnten wir anschließend die einzelnen Seiten befüllen. Der Vorteil dieses Vorgehens ist die sich daraus ergebende Einheitlichkeit. Wird ein kleines Element (Atom) verändert, werden alle Elemente die dieses Atom beinhalten, automatisch mit angepasst. Dadurch wird der Aufwand in der Entwicklung erheblich minimiert, man kann (auch später) Änderungen sehr schnell umsetzen und verliert dabei trotzdem nicht das Gesamtbild aus den Augen.

Um die Seite durch den Einsatz des Weißraums und der wenigen Akzentuierung von Farben nicht zu nüchtern und kühl wirken zu lassen, sind alle Elemente abgerundet und als Formelement wird mit einem geschwungenen Bogen gearbeitet. Dieser findet sich ebenfalls in den Printwerbemitteln wieder, wurde allerdings fürs Web neu interpretiert. Außerdem werden großflächige und hochwertige Bilder eingesetzt. Diese sind sehr kontrastreich und gesättigt im Reportagen-Stil bearbeitet. Durch diese Motive wirkt alles greifbarer und „mitten aus dem Leben“ - passend zum Bild einer Direktkrankenkasse, die sich nah an den Versicherten positionieren möchte.

Ein weiteres Stilelement sind die vom Neumorphism-Design abgeleiteten Schatten. Diese Stilrichtung arbeitet mit einem „hellen“ Schatten in der linken oberen Ecke und einem sehr weichen, ausladendem Schatten in der rechten unteren Ecke. Die Elemente wirken dadurch auf der Oberfläche fast schwebend. Der Vorteil ist, dass hierdurch mehr Tiefe im Design geschaffen wird. Diese Schatten haben wir bewusst nur partiell eingesetzt, vor allem bei klickbaren Elementen. Dies stützt zusätzlich eine gute Usability, da die Nutzer:innen sofort die Interaktionselemente erkennen können.