Web & Mobile Apps für Pensionskassen

Design und Konzeption einer ganzheitlichen Lösung für die Digitalisierung von Pensionskassen.

Einleitung

Design und Konzeption einer ganzheitlichen Lösung für die Digitalisierung von Pensionskassen. Die Lösung umfasst diverse Mobile Apps für iPhone, iPad und Android für Versicherte sowie ein Firmenportal als Web Lösung für Unternehmungen.

Verantwortungsbereiche

– UX & UI Design aller Apps (iOS, Android, Web)
– Durchführen von UCD Workshops mit Fachpersonen und Benutzer
– User Testing & User Interviews
– Erstellen von HTML und Style-Sheets als Basis für die Entwickler

Projekt Setup

– Projektleitung: Acrea AG
– Entwicklung: MP Technology, Zürich
– Auftraggeber: DigitalPK & diverse Pensionskassen

Download im App Store

Download for Android

Download for iOS

Project Facts

Auftraggeber

DigitalPK - einem Konsortium von innovativen Pensionskassen

Applikationen

– iOS App
– Android App
– Firmenportal WebApp
– Versicherten Web App

Projektdauer

2017 - 2020

Partner

DigitalPK, Berag AG
ACREA AG Projektleitung
MP Technology Entwicklung

Vorgehensweise

Ein Knackpunkt war, die vielen Anforderungen und Use Cases die bei einer Pensionskasse anfallen zu verstehen. Nur so konnte eine moderne, zeitgemässe User Experience entstehen, die ein Benutzer in einer modernen Mobile App erwartet. Als Designer musste ich mich also intensiv mit dem Anforderungskatalog einer Pensionskasse befassen. Dies geschah durch den Austausch in Form von regelmässigen Workshops mit Fachpersonen und Usern die an der "Front" arbeiteten.

Das dadurch entstandene Verständnis verhalf, erste Entwürfe der Mockups zu erstellen, die bereits reale Prozesse abbildeten. Diese ersten Mockups konnten so bereits in einer frühen Phase möglichen End-Benutzern zum Testen vorgelegt werden.

Interaktive Mockups und Design-Sprints

Mit interaktiven - also  klickbaren - Mockups wurde während dem Design-Prozess immer wieder End-User und Fachpersonen einbezogen. So wurde sichergestellt, dass alle Anforderungen bereits während dem UI Design erfüllt werden. Die Mockups dienten auch dazu, regelmässig mit dem Entwicklungs-Team Rücksprache bezüglich Design und Umsetzung zu halten. So bleiben alle Projektbeteiligten immer auf dem aktuellsten Design-Stand.

In Design-Sprints wurden einzelne Screens im Detail erstellt und anschliessend immer weiter verbessert und verfeinert. Besondere Beachtung fand die Web App des Firmenportals. Sie musste mit diversen Schnittstellen kommunizieren, die unterschiedliche Daten anlieferten. Ein modulares und flexibles Design, welches auch die Mehrsprachigkeit berücksichtigt, war ein entscheidender Faktor, um effizient und kostengünstig die erste Version des Portals lancieren zu können.

No items found.

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

Alle Mockups wurden direkt in Sketch gestaltet und erstellt. Damit das Design einheitlich über alle Plattformen war, wurden mit Design-Elementen (Symbole) gearbeitet, welche plattformübergreifend immer wieder verwendet werden konnten. Sie dienten wiederum den Entwicklern,  gleiche Design-Typen und deren Variationen zu erstellen.

Sketch Design Map
Sketch Mockup Map (Auszug)

Atomic Design Approach
Sketch Design Symbols für das Dev-Team im Atomic Design Ansatz

Wireframes für komplexe User-Flows

Für komplexe Anforderungen - wie zum Beispiel ein Wizard - wurden vor dem Design einfache Wireframes erstellt. Diese wurden anschliessend mit Fachpersonen in Form von Workshops und verschiedenen Reviews besprochen. Erst nachdem die einzelnen Steps des Wizards klar waren, wurden Mockups erstellt.

Design Wireframes

Eine App, verschiedene Designs

Die Mandantenfähigkeit der Apps wurde bereits im Design-Konzepts berücksichtigt. So enthält das UX Design GUI Elemente, welche individuell pro Mandant eingefärbt werden. Die Mockups wurden so aufgebaut, das dies bereits in der Mockup-Phase simuliert werden konnte.

iPhone App Design
iPhone App Design
iPhone App Design
iPhone App Design

Other projects: