Case Study: UX/UI-Design für die nobank App – Finanzüberblick ohne Aufwand

Ausgangslage

nobank – Finanzoptimierung, keine Bank – ordnet Finanzen automatisch an einem Ort: Konten verbinden, Vermögen, Cashflow sowie Abos und Versicherungen im Blick behalten. Das Team aus Banking- und Software-Erfahrung brachte eine funktional starke App mit: Konten-Anbindung über finAPI, Kategorisierung von Einnahmen und Ausgaben, Vertragsübersicht. Für den nächsten Wachstumsschritt sollte das UX/UI-Design vereinfacht und vertrauenswürdiger werden – verständlich für Einsteiger, schnell für den Alltag, konsequent mobil gedacht.

Herausforderung

Finanz-Apps scheitern selten an Funktionen, sondern an kognitiver Überlastung: zu viele Zahlen, unklare Begriffe, Angst vor Kontenzugriff und Datenschutz. Bei nobank kamen drei spezifische Hürden dazu:

• Komplexität reduzieren: Vermögen (Cash, Sparen, Invest), Cashflow und Verträge in einer Navigation vereinen, ohne dass Nutzer suchen oder rechnen müssen.
• Vertrauen aufbauen: Erklären, dass nobank nichts überweisen oder ändern kann, Daten verschlüsselt in Deutschland/EU liegen und Provisionen die Reihenfolge der Angebote nicht beeinflussen – ohne seitenlange Texte.
• Activation schaffen: Vom ersten „Konten verbinden” bis zum Aha-Moment „Aus Chaos wird Ordnung” in wenigen Schritten führen – kostenfrei, ohne Verpflichtung.

Unsere Lösung

Wir haben das UX/UI-Design der Kernstrecken geschärft – von der Informationsarchitektur über Onboarding bis zum Design-System:

• UX-Struktur & Navigation: Drei klare Bereiche – Dein Vermögen, Dein Cashflow, Deine Verträge – mit einheitlichen Karten, Kennzahlen und Detail-Drilldowns. Glanceable Übersicht zuerst, Details auf Wunsch.
• Onboarding & Konten verbinden: Reduzierter Flow mit Fortschrittsanzeige, Erwartungsmanagement („Was passiert mit meinen Daten?“) und Empty States, die den Nutzen schon vor dem ersten Sync zeigen.
• UI-Design & Design-System: Ruhige Typografie, großzügige Abstände, farbcodierte Kategorien für Einnahmen/Ausgaben, konsistente Komponenten für Konten, Diagramme und Vertragslisten. Mobile-first, barrierearm, mit klaren Kontrasten.
• Vertrauen per Design: Sicherheits- und Kosten-Informationen kontextuell platziert („Kostenfrei. Sicher. Einfach.“), Fachbegriffe in plain language übersetzt, sensible Aktionen mit Bestätigung und Transparenz-Hinweisen.
• UX Writing: Kurze, aktive Sprache im Du-Ton – „Geld im Griff. Kopf frei.” statt Bank-Jargon. Microcopy für Fehler, Ladezustände und leere Konten inklusive.

Das Vorgehen entspricht meinem UX-Review: bestehende Abläufe analysieren, Reibung priorisieren, messbar verbessern. Für die Positionierung im Vorfeld hilft die Digitalstrategie.

Ergebnis

Die App vermittelt, was die Produktseite verspricht: „So einfach kann Geld sein.” Nutzer sehen Vermögen, Einnahmen/Ausgaben und Verträge auf einen Blick – übersichtlich, verständlich, an einem Ort. Das reduzierte Onboarding senkt die Hürde zum Konten-Connect, die klaren Module erhöhen die Rückkehr-Quote für den täglichen Check. Gleichzeitig zahlt das ruhige, konsistente Interface auf das Kernversprechen ein: Klarheit, Kontrolle, Ruhe.

Live: nobank – Unsere Lösung

Learnings

• Finanz-Klarheit entsteht durch Weglassen: Eine Kennzahl pro Karte schlägt drei Diagramme auf einmal.
• Vertrauen ist ein UX-Feature: Kontextuelle Sicherheitshinweise wirken stärker als eine separate Vertrauensseite.
• Onboarding entscheidet über Activation: Wer den Wert vor dem Konten-Connect versteht, verbindet eher.

Mögliche nächste Schritte

• Empty-to-Full-Journey testen: Usability-Tests mit Erstnutzern für Connect-Abbruchstellen.
• Barrierefreiheit vertiefen: Check nach meinem Barrierefreiheits-Check für Kontraste, Fokus und Screenreader.
• Empfehlungs-Strecken optimieren: Provisionstransparenz noch klarer im Wechsel-Flow verankern.