1. Recherche

Zu Beginn des Kurses haben wir unsere eigenen Banking-Apps genauer unter die Lupe genommen. Dafür wählten wir einen typischen Anwendungsfall – zum Beispiel das Einloggen in die App oder das Ausführen einer Überweisung – und zerlegten den Prozess in einzelne Schritte. Dabei stellten wir uns die Fragen: Was funktioniert bereits gut – und warum? Und wo treten Probleme auf?

Im ersten Workshop visualisierten wir den gesamten Ablauf in einem User-Experience-Diagramm, hielten Schwachstellen fest und formulierten unsere ersten Erkenntnisse, die später die Grundlage für unsere Konzeptentwicklung bildeten.

Anja: 

Ich habe mich mit dem Login Prozess der Volksbank beschäftigt. Die App ist relativ übersichtlich gestaltet, allerdings gibt es einige Probleme mit der Spracheinstellung. Meine App ist, wie mein ganzes Handy auf Englisch eingestellt, Hilfe bekommt man über ein kleines Icon oben rechts allerdings nur auf Deutsch. Der biometrische Login funktioniert gut, wenn das aber nicht möglich sein sollte und man sein Passwort vergessen hat gibt es keine andere Möglichkeit, als die App komplett zurückzusetzen. Dabei wird einem nicht erklärt, was dieses zurücksetzen genau zur Folge hat, was auf mich einen beunruhigenden Eindruck macht. Insgesamt habe ich dennoch einen recht positiven Eindruck von der App, es gibt aber definitiv Luft nach oben.

Anina:

Ich habe eine Überweisung mit der Sparkassen-App durchgeführt, die ich sehr gern und regelmäßig nutze. Die App bietet ein übersichtliches und intuitives Interface, und die grundlegenden Schritte sind einfach zugänglich. Allerdings sind die einzelnen Prozessschritte für mich nicht klar erkennbar: Ich sehe nicht, wie viele Schritte noch verbleiben oder wann der Vorgang abgeschlossen ist. Auch die Fehlermeldungen könnten deutlicher sein: Wenn ein Fehler auftritt, ist der Grund dafür nicht sofort erkennbar, sodass ich erst überlegen muss, was schiefgelaufen sein könnte. Insgesamt gefällt mir die App, aber in Bezug auf Transparenz der Abläufe und aussagekräftige Rückmeldungen besteht noch Verbesserungspotenzial.

Die gewonnenen Erkenntnisse sollen uns dabei unterstützen, die Gestaltung unserer eigenen Banking-App zu optimieren. Auf Basis unserer Analysen wollten wir die Ergebnisse miteinander verknüpfen und daraus ein neues, durchdachtes Konzept für die Endaufgabe entwickeln.

2. Projektvorbereitung

Bevor wir mit der visuellen Gestaltung unserer App für das Jahr 2030 begannen, nutzten wir verschiedene Tools aus dem Kurs, um User Research zu betreiben. Dafür wählten wir einen der acht vorgegebenen Archetypen aus und entwickelten daraus ein möglichst realistisches Nutzerprofil. Dieses Profil half uns, die Lebenswelt unseres Archetyps besser zu verstehen, seine Bedürfnisse klar herauszuarbeiten und darauf basierend unsere Use Cases zu schärfen sowie ein glaubwürdiges, empathisches Nutzungsszenario zu entwerfen. 

2.1. Der Archetyp

Wir entschieden uns für Elena, die Pragmatische (42). Elena ist alleinerziehende Mutter und Sicherheit bedeutet ihr alles – nicht nur finanziell, sondern als Basis für das Leben ihres Sohnes. Während andere längst nur digital bezahlen, schätzt sie Bargeld, weil es für sie sichtbar und greifbar ist.

2.2. Empathy Map

Mithilfe einer Empathy Map konnten wir uns tiefer in die Persona Elena hineinversetzen und ein umfassenderes Bild von ihr entwickeln. Dabei betrachteten wir nicht nur ihre grundlegenden Bedürfnisse, sondern auch ihren Alltag und ihre Gewohnheiten. So erhielten wir wertvolle Einblicke in ihre Gedanken, Gefühle und Motivationen, die uns halfen, ein besseres Verständnis für ihren Lifestyle und ihr mögliches Verhalten zu gewinnen. Auf diese Weise wurde deutlich, welche Faktoren Elena besonders wichtig sind, wo mögliche Herausforderungen liegen und wie wir die App gestalten können, um ihre Erwartungen bestmöglich zu erfüllen.

2.3. Use-Case anhand eines Szenarios

Mit den Erkenntnissen dieser Übungen haben wir einen Use-Case definiert, der uns bei der konkreten Gestaltung helfen sollte.

Herausforderung:

Elena möchte ihrem Sohn einen großen Wunsch erfüllen: ein eigenes Rennrad für 1.700 €. Ihr Ziel ist es, den Betrag in sechs Monaten zusammenzusparen – also 285 € pro Monat. Sie verdient gut, aber bei steigenden Kosten und einem vollen Alltag ist diese Disziplin eine echte Herausforderung.

Bedürfnisse:

Elena sucht eine Lösung, die zu ihrem pragmatischen Charakter passt, ein digitales Werkzeug, das ihr den Alltag erleichtert:

- Verständlichkeit statt Fachsprache

- Übersicht statt Überforderung

- Sicherheit, die sie spürt – wie ihr Haushaltsbuch, nur smarter

- Motivation, die sie begleitet, erinnert und Fortschritte sichtbar macht

Ziel:

Elena möchte die Kontrolle über ihre Finanzen behalten und Schritt für Schritt an einer besseren Zukunft für ihren Sohn arbeiten, diszipliniert, verlässlich und ohne den Überblick zu verlieren.

3. Erste Ideen und Entwürfe

3.1. Moodboard

Unsere App sollte bunt, zugleich aber klar strukturiert und einladend wirken. Um dieses Ziel zu erreichen, haben wir zunächst ein Moodboard erstellt, das als visuelle Grundlage für die weitere Gestaltung dient. Auf diesem Moodboard haben wir erste Ideen gesammelt, die uns helfen sollten, ein stimmiges Gesamtbild zu entwickeln und unsere persönlichen Vorstellungen zu reflektieren. Als Inspirationsquelle dienten dabei verschiedene neu-moderne Interfaces, die uns Anregungen in Bezug auf Farbwahl, Layout und Benutzerführung gaben. Besonders wichtig war uns, dass die Designumsetzungen nicht nur einem kurzlebigen Trend entsprechen, sondern durch Originalität und eine klare Eigenständigkeit überzeugen. Unser Ziel war es, ein Erscheinungsbild zu entwickeln, das auch im Jahr 2030 noch zeitgemäß wirkt und Wiedererkennungswert hat. Gleichzeitig wollten wir sicherstellen, dass die Gestaltung eine klare Struktur und Benutzerfreundlichkeit gewährleistet. Darüber hinaus haben wir untersucht, wie andere Apps zentrale Informationen präsentieren, um herauszufinden, welche Darstellungsformen besonders klar, ansprechend und effektiv sind.

3.2. Brainstorming und erste Skizzen

Wir haben erste Skizzen angefertigt, um die Struktur und Funktionen unserer App auszuprobieren und ein Gefühl dafür zu entwickeln, wie die einzelnen Elemente später zusammenspielen könnten. Dabei stand für uns im Vordergrund, das Thema Sparen nicht trocken oder belehrend wirken zu lassen, sondern positiv, leicht verständlich und motivierend in Szene zu setzen. Gleichzeitig wollten wir einen klaren Spaßfaktor integrieren, damit das Sparen nicht als Pflichtaufgabe, sondern als ansprechendes Erlebnis wahrgenommen wird. Elemente der Gamification wie kleine Belohnungen, Fortschrittsanzeigen oder spielerische Visualisierungen sollen dazu beitragen, die Nutzerinnen und Nutzer dauerhaft zu motivieren.

Ein besonderer Fokus lag darauf, die wichtigsten Informationen wie den aktuellen Kontostand und relevante Kontodetails klar und übersichtlich darzustellen, damit jederzeit schnell ein Überblick möglich ist. Ergänzend dazu entwarfen wir erste Ideen für weitere Screens, insbesondere für die Visualisierung von Sparzielen. Diese sollten auf einen Blick verdeutlichen, wie nah man seinem Ziel bereits ist und dadurch einen zusätzlichen Anreiz schaffen, dranzubleiben.

Darüber hinaus machten wir uns Gedanken über Benachrichtigungen, die regelmäßig an die Ziele erinnern. Sie sollten bewusst freundlich und motivierend gestaltet sein, sodass sie als unterstützende Begleiter wahrgenommen werden, ohne einen belehrenden oder störenden Charakter zu haben. Insgesamt half uns dieser Prozess, die Grundidee der App stärker zu konkretisieren und erste Ansätze für eine benutzerfreundliche, inspirierende und zugleich spielerische Umsetzung zu entwickeln.

3.3. Konkrete Frames und zweite Skizzen

In der nächsten Phase setzten wir unsere Ideen in Figma um und erstellten erste digitale Frames. Durch die Arbeit mit Figma erhielten wir außerdem einen besseren Eindruck davon, wie die App später tatsächlich wirken könnte und wie die einzelnen Elemente miteinander harmonieren.

Parallel dazu beschäftigten wir uns mit Fragen der Typografie, der Schriftgrößen und grundlegenden Designprinzipien. Unser Ziel war es, eine Oberfläche zu gestalten, die nicht nur modern wirkt, sondern auch gut lesbar und intuitiv nutzbar ist. Dabei orientierten wir uns an heuristischen Ansätzen, um sicherzustellen, dass die Nutzerinnen und Nutzer jederzeit eine klare Struktur vorfinden und sich ohne Mühe zurechtfinden.

Ein besonderer Bestandteil dieser frühen Entwürfe war unser eigener Avatar Piggy. Das kleine Schweinchen tauchte schon in den ersten digitalen Frames regelmäßig auf und entwickelte sich schnell zu einem zentralen Wiedererkennungsmerkmal der App. Piggy soll die Nutzerinnen und Nutzer spielerisch durch den Sparprozess begleiten, sorgt für eine sympathische, persönliche Note und verstärkt den gewünschten Spaßfaktor, den wir durch Elemente der Gamification in die App integrieren möchten.

4. Sparen – zentrales Feature der App

Eines der zentralen Features unserer App ist das Sparen. Nutzerinnen und Nutzer können individuelle Sparziele festlegen, ihren Fortschritt überwachen und diesen durch kreative Sparregeln zusätzlich fördern. Dabei soll der Prozess übersichtlich, motivierend und spielerisch gestaltet sein.

Im Zentrum steht die Übersicht über alle Sparziele sowie die dazugehörigen Regeln. Nutzer:innen haben jederzeit die Möglichkeit, bestehende Ziele zu bearbeiten oder neue zu erstellen. Eine visuelle Fortschrittsanzeige, etwa in Form von Balkendiagrammen oder einer Angabe der verbleibenden Tage, sorgt dafür, dass der eigene Fortschritt auf einen Blick erkennbar ist.

4.1. Sparziele setzen

Beim Anlegen eines Sparziels können Name, Zielbetrag und aktueller Stand definiert werden. Zusätzlich lassen sich verknüpfte Sparregeln aktivieren, die den Prozess unterstützen. Optional kann ein Fälligkeitsdatum hinterlegt werden. Um die Motivation zu verstärken, wird jedes Ziel durch eine Fortschrittsanzeige visualisiert, die den aktuellen Stand veranschaulicht.

4.2. Sparregeln festlegen

Um den Prozess abwechslungsreich und motivierend zu gestalten, können Sparziele durch verschiedene Regeln ergänzt werden. Diese wirken entweder automatisch oder manuell und werden jeweils durch einen kurzen Text beschrieben, der den Mechanismus erklärt.

- Activity Saving – Sparen durch Bewegung

Für jede sportliche Aktivität oder jeden Schritt wird ein festgelegter Betrag gespart. Beispiel: 10.000 Schritte ergeben 5 € für das Sparziel.

“Move your body and reach your goals faster.“

- Social Saving – Gemeinsam sparen

Mehrere Personen können für ein gemeinsames Ziel sparen. Beispiel: Jede Teilnehmerin und jeder Teilnehmer spart 2 € pro Woche, sodass das Ziel schneller erreicht wird.

“Let others help you reach your savings goals.“

- Competitive Saving – Sparen im Wettbewerb

Nutzer:innen treten gegeneinander an, wer in einem bestimmten Zeitraum mehr spart oder sein Ziel schneller erreicht. Beispiel: Zwei Freund:innen legen jeweils 50 € fest. Wer zuerst die Summe gespart hat, gewinnt einen Bonus.

“Ready, set, save!“

- Weather Saving – Sparen durch das Wetter

Der Sparbetrag hängt von den Wetterbedingungen ab. An Regentagen kann beispielsweise automatisch ein höherer Betrag gespart werden als an Sonnentagen. Beispiel: regnerisch = 3 €, sonnig = 1 €.

“Let Mother Nature help you reach your goals.“

5. Visuelles Konzept

5.1. Unser Avatar Piggy

Wie bereits erwähnt, war für uns von Beginn an klar, dass wir einen Avatar für unsere App wollen, der die Nutzer:innen begleitet und der App mehr Persönlichkeit und Charakter verleiht. Wir hatten viele Überlegungen darüber, welches Maskottchen am besten geeignet wäre – ein Capybara, ein Vogel oder ein Eichhörnchen. Letztlich entschieden wir uns jedoch für das klassische Schweinchen, Piggy.

Piggy ist das Maskottchen und gleichzeitig der persönliche Begleiter der Nutzer:innen innerhalb der App. Das kleine Schweinchen greift das traditionelle Symbol des Sparschweins auf, wird jedoch in moderner, freundlicher Form im einfachen Stil dargestellt. 

Als Avatar taucht Piggy an verschiedenen Stellen der App auf: Es gratuliert, wenn ein Sparziel erreicht wurde, gibt motivierende Hinweise, wenn noch ein Stück des Weges fehlt, und erinnert freundlich an aktivierte Sparregeln. Damit schafft Piggy eine persönliche Bindung zwischen Nutzer:innen und der App, sodass das Sparen weniger abstrakt wirkt und mit positiven Emotionen verknüpft wird.

Darüber hinaus trägt Piggy zur Gamification bei, indem es den Fortschritt visualisiert oder kleine Belohnungen kommuniziert. So wird das Sparen nicht nur klar strukturiert dargestellt, sondern zugleich unterhaltsam und einladend inszeniert.

5.2. Belohnungen

Ein weiterer wichtiger Bestandteil der App sind Belohnungen, die den Nutzer:innen Motivation und Feedback für ihre Sparaktivitäten geben. Wir haben dafür verschiedene Trophäen vorgesehen, die an unterschiedliche Meilensteine gekoppelt sind. Dazu zählen beispielsweise das schnelle Erreichen eines Sparziels, regelmäßiges Sparen über einen bestimmten Zeitraum oder das konsequente Einhalten aktivierter Sparregeln. Jede Trophäe soll den Fortschritt sichtbar machen und die Nutzer:innen zusätzlich dazu motivieren, ihre Ziele weiterhin zu verfolgen.

Das Design der Belohnungen orientiert sich an dem bereits etablierten Stil von Piggy und dem Erscheinungsbild der App. Die Trophäen sind daher einfach und klar gestaltet, sodass sie harmonisch in die Gesamtästhetik passen. Durch die einheitliche visuelle Sprache werden Belohnungen sofort als Teil der App erkannt und unterstützen die spielerische Erfahrung, ohne den Nutzer:innen die Übersicht zu erschweren.

5.3. Farben

Die farbliche Gestaltung spielte für uns eine besonders wichtige Rolle. Wir wollten eine Palette entwickeln, die hell, modern und freundlich wirkt, ohne die Nutzer:innen zu überfordern oder von den Inhalten abzulenken. Zu Beginn dachten wir an eine Kombination aus Rosa und Grün, die auf den ersten Blick freundlich und einladend erschien. In Verbindung mit unserem Piggy-Avatar wirkte diese Palette jedoch schnell zu klischeehaft, fast wie das klassische „Sparschweinchen“-Motiv, und passte nicht zu dem futuristischen, eigenständigen Erscheinungsbild, das wir für 2030 anstreben wollten.

Um eine frischere und zukunftsorientierte Wirkung zu erzielen, verwarfen wir diese erste Idee und probierten zahlreiche alternative Farbkombinationen aus. Dabei testeten wir verschiedene Varianten und betrachteten besonders, wie sie die Stimmung und das Nutzererlebnis der App beeinflussen. Nach eingehendem Vergleich entschieden wir uns schließlich für Pink als Akzentfarbe sowie Blau in drei Abstufungen. Diese Kombination vermittelt Frische und Seriosität, wirkt freundlich und motivierend und harmoniert gleichzeitig gut mit unserem Piggy-Avatar. So wird der spielerische Charakter von Piggy unterstützt, ohne dass die App insgesamt verspielt oder überladen wirkt, und das Sparen wird positiv, sympathisch und gleichzeitig vertrauenswürdig inszeniert.

5.4. Hintergrund

Da uns die Screens zunächst etwas flach erschienen, entschieden wir uns, einen Hintergrund mit Farbverlauf einzusetzen, der auf unserer gewählten Farbpalette basiert. Der Verlauf schafft mehr Tiefe und Dynamik, ohne die Aufmerksamkeit vom Wesentlichen abzulenken. In den meisten Frames nimmt er weniger als die Hälfte des Bildschirms ein und unterstützt so die Inhalte, ohne sie zu überlagern. Durch die Anlehnung an unsere klaren, einfachen Vektorelemente (wie Piggy) – fügt sich der Verlauf nahtlos in das Gesamterscheinungsbild der App ein und sorgt für eine stimmige visuelle Einheit.

5.5. Designsystem

Unser Designsystem umfasst Farben, Typografie, Layout und selbstgebaute UI-Komponenten.

Die Farbpalette besteht aus Pink als Akzentfarbe und Blau in drei Abstufungen: Hellblau, Mittelblau und Dunkelblau. Für die Typografie haben wir die Schriftart Quicksand gewählt, die modern, freundlich und gut lesbar ist.

UI-Elemente wie Buttons, Icons und Input-Felder folgen klaren Prinzipien, sodass die App konsistent und intuitiv nutzbar ist.

6. Finale Umsetzung

Das finale Design der App vereint klare Strukturen mit spielerischen Elementen, um das Sparen motivierend und einfach zu gestalten. Die Oberfläche ist übersichtlich und intuitiv bedienbar und richtet sich gezielt an Menschen wie Elena, um ihren Alltag zu erleichtern. Gleichzeitig verbindet das Design Effizienz mit Freude und sorgt dafür, dass die App sowohl funktional als auch emotional ansprechend ist.

7. Fazit und Reflexion

Der Kurs war äußerst arbeitsintensiv, gleichzeitig aber auch unglaublich lehrreich. Besonders der Input zu Beginn der Kurseinheiten war spannend und hat uns wertvolle Erkenntnisse vermittelt, die uns bei der Bearbeitung der Aufgaben sehr geholfen haben. Diese theoretischen Grundlagen gaben uns Sicherheit und Orientierung für die praktischen Umsetzungen im Projekt.

Gegen Ende des Kurses standen wir jedoch vor unerwarteten Herausforderungen. Gesundheitliche Schwierigkeiten erschwerten es uns, die hohen Ansprüche des Kurses und unsere eigenen Erwartungen gleichzeitig zu erfüllen. Dennoch konnten wir durch Edmundos Verständnis und die Möglichkeit, mehr Zeit einzuplanen, ein Ergebnis erarbeiten, das uns zufriedenstellt und auf das wir stolz sind. Diese Phase hat uns einmal mehr gezeigt, dass nicht alles planbar ist und dass Flexibilität, Durchhaltevermögen und flexible Herangehensweisen entscheidend sind, um Rückschläge zu überwinden.

Besonders wertvoll war die Zusammenarbeit im Team. Wir beide sind uns einig, dass wir die Schwierigkeiten nur durch gegenseitige Unterstützung, offene Kommunikation und gemeinsames Engagement bewältigen konnten. Hätten wir nicht so gut zusammengearbeitet, wäre der Projektverlauf noch deutlich schwieriger gewesen.

Trotz aller Herausforderungen sind wir sehr zufrieden mit unserer App und dankbar für die umfassenden Erfahrungen, die wir im Kurs sammeln konnten.