Web & Mobile Apps für Pensionskassen

Komplexe Prozesse, einfache Bedienung

Arbeitgeber und Mitarbeitende sollen ihre PK-Geschäfte künftig jederzeit selbst erledigen können – so einfach wie in einer modernen Consumer-App, trotz der komplexen Prozesse dahinter. Die grösste Herausforderung war deshalb, die schiere Menge an Anforderungen und Use Cases einer Pensionskasse wirklich zu verstehen. Dafür tauchten wir tief in den Anforderungskatalog ein, im regelmässigen Austausch mit Fachpersonen und Nutzenden, die täglich an der Front damit arbeiteten.

Aus diesem Verständnis entstanden erste Mockups, die reale Prozesse abbildeten – und die wir schon früh mit potenziellen Endbenutzern testen konnten.

Interaktive Mockups und Design-Sprints

Daraus entstanden interaktive Mockups, durch die sich klicken liess wie durch die fertige App. So blieben Endbenutzer und Fachpersonen während des ganzen Designprozesses eingebunden, und auch das Entwicklungsteam konnte laufend abgleichen, ob Design und Umsetzung zusammenpassten.

In Design-Sprints entstanden daraus einzelne Screens, die wir immer wieder verfeinerten. Besonders anspruchsvoll: die Web-App fürs Firmenportal, die mit mehreren Schnittstellen gleichzeitig kommunizieren musste.

Ein modulares, mehrsprachiges Design war am Ende der Schlüssel, um die erste Version des Portals effizient und kostengünstig zu lancieren.

Über 80 Mockups für 5 Gerätetypen auf 3 Plattformen

Alle Mockups wurden direkt in Sketch gestaltet und erstellt. Um sicherzustellen, dass das Design über alle Plattformen hinweg einheitlich ist, wurden Design-Elemente (Symbole) verwendet, die plattformübergreifend immer wieder eingesetzt werden konnten. Diese Symbole erleichterten den Entwicklern die Erstellung von einheitlichen Design-Typen und deren Variationen.

Wireframes für komplexe User-Flows

Vor dem Designprozess wurden für komplexe Anforderungen wie z.B. die Implementierung eines Wizards einfache Wireframes erstellt. Diese wurden in Workshops und Reviews mit Fachpersonen besprochen, um die einzelnen Schritte des Wizards klar zu definieren. Erst danach wurden detaillierte Mockups erstellt, um das endgültige Design zu visualisieren. Diese Vorgehensweise ermöglichte eine frühzeitige Identifizierung potenzieller Probleme und die Sicherstellung, dass das Endprodukt den Anforderungen aller Stakeholder entspricht.

Eine App, verschiedene Designs

Die Mandantenfähigkeit der Apps wurde bereits im Design-Konzept berücksichtigt. Das UX Design enthält GUI-Elemente, die individuell pro Mandant eingefärbt werden können. Die Mockups wurden so aufgebaut, dass dies bereits in der Mockup-Phase simuliert werden konnte. Mandanten können ihre Farbschemata individuell wählen – simuliert und getestet schon in der Mockup-Phase, lange bevor der erste Code geschrieben wurde.