Moneyboard


Die Budgetierungs-App für bessere finanzielle Entscheidungen.

ROLE

UX/UI-Designer in einem dreiköpfigen Team

TOOLS

Figma, Notion

DURATION

Apr 2023–Aug 2023 (22 Wochen)

Background

Im Rahmen der Vorlesung „User Experience Design“ ist die App „Moneyboard“ entstanden. Dabei wurden alle Phasen des Design-Thinking- Prozesses durchlaufen.

Project Goal

Das Ziel dieses Projekts war die Entwicklung einer Budgetierungs-App, die mit Hilfe von Gamification und verhaltenspsychologischen Techniken Nutzer dazu bewegen soll, bessere finanzielle Entscheidungen zu treffen.

Empathize

Persona

„Moneyboard“ richtet sich vorrangig an junge Erwachsene, die sich erstmals mit der Planung und Verwaltung ihrer Finanzen beschäftigen. Zu diesem Zweck wurde die Persona Sarah Lin, eine Werkstudentin, erschaffen, um die Bedürfnisse dieser Zielgruppe abzubilden.

Needs Cards

Zur Vertiefung des Verständnisses für die Anforderungen der Zielgruppe wurden Bedürfniskarten entwickelt, die die drei wichtigsten psychologischen Bedürfnisse der beschriebenen Persona widerspiegeln. Dabei wurde überlegt, wie diese Bedürfnisse durch die App „Moneyboard“ unterstützt werden können.

Komfort

Die App sorgt für eine klare Übersicht über die Finanzen und laufenden Verträge und ermöglicht es, diese zentral zu verwalten. So schafft sie ein Gefühl der inneren Gelassenheit.

Kompetenz

Die App unterstützt dabei, die Herausforderung des Sparens zu meistern und einen verantwortungsbewussten Umgang mit den Finanzen zu entwickeln. Zudem wird Wissen über Finanzen – wenn auch indirekt – vermittelt.

Sicherheit

Aus der erworbenen Kompetenz entsteht ein Sicherheitsgefühl, das es den Nutzern ermöglicht, mit ihren Finanzen souverän umzugehen.

Define

Problem Statements

Im Anschluss an die Zielgruppenanalyse und die Identifikation der Bedürfnisse wurden mögliche Nutzerprobleme generiert, um gezielte Designlösungen zu entwickeln.

Früher konnte man sein Geld abheben und spüren, wie der Geldbeutel immer leerer wurde. Durch das digitale Bezahlen fällt es vielen Nutzern jedoch schwer, den Überblick zu behalten. Sie sehnen sich nach einer Möglichkeit, ihre Finanzen besser im Blick zu behalten.

Viele Nutzer haben Konten bei verschiedenen Banken, doch die jeweiligen Banking-Apps zeigen nur bankspezifische Daten an. Um ihre finanzielle Situation ganzheitlich erfassen zu können, benötigen sie eine Lösung, die ihnen einen umfassenden Überblick über ihr gesamtes Vermögen und ihre Ausgaben bietet.

Um sich größere Anschaffungen oder Erlebnisse leisten zu können, müssen viele Nutzer sparen. Das Problem dabei ist, dass sie ihr Sparziel im Alltag häufig aus den Augen verlieren. Sie brauchen regelmäßige Erinnerungen und visuelle Motivation, um ihr Ziel konsequent zu verfolgen und zu erreichen.

Um langfristig verantwortungsbewusst mit Geld umgehen zu können, brauchen die Nutzer Zugang zu Wissen über Finanzen und Sparstrategien.

Früher konnte man sein Geld abheben und spüren, wie der Geldbeutel immer leerer wurde. Durch das digitale Bezahlen fällt es vielen Nutzern jedoch schwer, den Überblick zu behalten. Sie sehnen sich nach einer Möglichkeit, ihre Finanzen besser im Blick zu behalten.

Viele Nutzer haben Konten bei verschiedenen Banken, doch die jeweiligen Banking-Apps zeigen nur bankspezifische Daten an. Um ihre finanzielle Situation ganzheitlich erfassen zu können, benötigen sie eine Lösung, die ihnen einen umfassenden Überblick über ihr gesamtes Vermögen und ihre Ausgaben bietet.

Um sich größere Anschaffungen oder Erlebnisse leisten zu können, müssen viele Nutzer sparen. Das Problem dabei ist, dass sie ihr Sparziel im Alltag häufig aus den Augen verlieren. Sie brauchen regelmäßige Erinnerungen und visuelle Motivation, um ihr Ziel konsequent zu verfolgen und zu erreichen.

Um langfristig verantwortungsbewusst mit Geld umgehen zu können, brauchen die Nutzer Zugang zu Wissen über Finanzen und Sparstrategien.

User Journey Map

Um die Nutzererfahrung besser zu verstehen und zu optimieren, wurde eine User Journey Map erstellt. Diese bildet die verschiedenen Phasen des Nutzerverhaltens ab, sowohl aus emotionaler als auch funktionaler Sicht, und zeigt auf, wie der Nutzer die App während seiner Interaktion erlebt.

Feature list

Im nächsten Schritt wurden auf Grundlage der vorherigen Analyse mögliche Funktionen für die App entwickelt und in einer Liste festgehalten.

Verbindung mit der Bank
  • Übersicht über Einnahmen, Ausgaben und Saldo
  • Fixkosten (Daueraufträge, Abos, etc.)
  • Erkennung der Art der Ausgaben (Essen, Kleidung, etc.)
  • Einbindung mehrerer Bankkonten möglich
Sicherheit
  • Pin für App-Nutzung festlegen
  • Informationen über Datennutzung
Sparziele erstellen
  • Moodboard für Sparziele erstellen (Gamification)
  • Bilderpool-Integration
Sonstiges
  • Finanztipps/Dailytipps
  • Zur Motivation positives Feedback bei Einhalten des Sparziels
  • Warnfunktion bei übermäßigen Ausgaben (rot markiert)
  • Statistiken der monatlichen Ausgaben

Ideate

Sketches

Um erste Designideen schnell und effektiv zu visualisieren, wurden mit der Methode „Crazy 8“ mehrere Skizzen sowohl auf Papier als auch digital erstellt.

Lo-Fi Wireframes

Basierend auf den zuvor ausgearbeiteten Skizzen und Funktionen wurden Low-Fidelity-Wireframes erstellt, die im Team evaluiert und optimiert wurden.

Prototype

Visual Look & Feel

Um eine App zu gestalten, die sowohl übersichtlich als auch vertrauenswürdig wirkt, wurde Grün als Akzentfarbe gewählt. Ergänzende Farben wurden dezent eingesetzt, um eine klare und strukturierte Gestaltung zu unterstützen.

Color Palette

Typography

Icons

Buttons

Logo

Hi-Fi Prototype

Hier gehts zum vollständigen klickbaren Prototyp.