Berliner Sparkasse – iOS-App-Redesign

Wir haben die iOS-App der Sparkassen neu gestaltet. Im Fokus standen Plattformkonformität und generelle User-Experience Aspekte.

Entstanden im Kurs „RE:UX/UI“ bei Frank Rausch und Timm Kekeritz.

#Methodik & Prozess

In diesem Kurs arbeiteten wir grob nach der Five-Days-Sprint-Week. Dabei sind bestimmte Aufgaben für jeden einzelnen Tag vorgesehen. Diese Herangehensweise führt nach nur 5 Tagen zu einem finalen Prototypen. Dieser zeigt konkrete Lösungen für die vorher definierten Probleme.

Bei der Frage, welche iOS-App wir neu gestalten wollen, fiel unsere Wahl auf die iOS-App der Sparkassen: Sparkasse – Ihre mobile Filiale

Definieren der Probleme

Um Lösungen finden zu können mussten wir erstmal Probleme definieren. Wir schauten uns die bestehende App an und definierten Kernbereiche in denen das Redesign Verbesserungen bringen sollte.

Wir stellten uns folgende Fragen:

Wie können wir die Navigation logischer gestalten?
Wie kann man die Lesbarkeit verbessern?
Wie kann der Nutzer schneller und leichter Geld überweisen?
Wie lässt sich das Konto verständlich visualisieren?

Wir hielten unseren Anspruch in einem deskriptiven OneSentence™ fest:

Die Sparkassen App ist eine Banking-App, mit der jeder Sparkassenkunde alltägliche Geldgeschäfte schnell und einfach erledigen kann, indem wir den Nutzer optimal informieren und den Umgang mit Geld vereinfachen.

User Flows

Ein wichtiger Schritt während unseres Redesigns war das definieren der User Flows. Diese sollten uns helfen zu erkennen, wie der User in der App für bestimmte Anwendungsfälle navigieren möchte.

Geld bewegen

Übersicht

Ort finden

Die Navigation und Plattformkonformität

Der erste wichtige Punkt war die Navigation. In der bestehenden App war diese in einem Hamburger-Menu versteckt. Unser Ansatz war es die Navigation plattformkonformer zu gestalten. Wenn möglich, wollten wir versuchen das bestehende, überladene Hamburger-Menu auf eine iOS-konforme Tab-Bar zu reduzieren. Tatsächlich ist uns dies auch gelungen.

Hamburger-Menu der bestehenden App | Umstrukturierung (Skizze)

Ergebnisse

In unserem Redesign konzentrierten wir uns hauptsächlich auf die oben genannten drei Flows/Bereiche. Der Vollständigkeit halber haben wir für die anderen Hauptmenüpunkte ebenfalls einen Screen erstellt. Diese haben wir aber nicht wie die 3 Flows bis in jede Navigationsebene weitergeführt.

1. Banking

Der Bereich Banking ist vor allem die Kontenübersicht, die Kontodetail-Ansicht, sowie Statistiken. Er bezieht sich auf den Übersicht User Flow.

2. Überweisen

Im Überweisen-Flow war die Zielsetzung das Überweisen so einfach wie möglich und gleichzeitig moderner zu gestalten. Das Diagramm bei der Überweisung-Übersicht prognostiziert den Kontoverlauf nach der geplanten Überweisung. Der gezeigte Ablauf bezieht sich auf den Geld bewegen User Flow.

3. Location

In diesem Bereich geht es darum Filialen und Bankautomaten zu finden und Informationen zu diesen abzurufen. Er bezieht sich auf den Ort finden User Flow.