0_Vorbereitung
Ist-Zustand analysieren, Arbeitsgrundlagen schaffen
Zu Beginn unseres Projektes führten wir eine umfassende Analyse einer bestehenden Banking-App im Rahmen eines strukturierten Sprints durch. Ziel war es, den aktuellen Zustand der App kritisch zu hinterfragen und Verbesserungspotenziale zu identifizieren.
Linh's Banking-App Sprint
Im ersten Schritt wählte jed_r Teilnehmer_in einen spezifischen Use Case aus. In meinem Fall entschied ich mich für die Untersuchung des klassischen Überweisungsprozesses sowie des Giropay (auch Kwitt)-Features innerhalb der Sparkassen-App. Bereits auf den ersten Blick fiel auf, dass die Nutzeroberflächen (UI) der beiden Vorgänge stark voneinander abweichen und UI-Elemente nicht konsistent gestaltet oder vereinheitlicht sind. Diese Unstimmigkeiten können die User Experience erheblich beeinträchtigen.
Anschließend analysierten wir systematisch alle Stärken (“Good Points”) und Schwächen (“Bad Points”) der App im Kontext unseres jeweiligen Use Cases.
Zur objektiven Bewertung der Nutzererfahrung erstellten wir ein Spinnendiagramm, mit dessen Hilfe wir verschiedene Kriterien der User Experience (UX) wie Klarheit, Effizienz, visuelle Konsistenz und Vertrauen quantifizieren konnten. Ergänzend dazu führten wir eine Heuristik-Analyse durch, um weitere Usability-Standards kritisch zu prüfen und festzuhalten.
Im abschließenden Gesamtfazit fassten wir die positiven wie auch negativen Aspekte der App zusammen. Darüber hinaus reflektierten wir unseren Gesamteindruck und diskutierten, ob wir die App aus Nutzersicht weiterempfehlen würden oder welche konkreten Verbesserungen nötig wären, um die User Experience nachhaltig zu optimieren.
Ebenfalls haben wir skizzenartig für unseren Use Case einen möglichen Lösungsansatz entworfen. Leider wusste ich nicht, dass mit Skizze auch einen fast fertigen Prototyp gemeint ist, weshalb es bei meiner Skizze an Details fehlt, da ich ungern mit Skizzen arbeite. Der eigentliche Prozess würde ich lieber gleich digital anordnen und realisieren, um den nötigen Überblick von Anfang an zu haben.
Ricardo's Banking-App Sprint
Auch ich entschied mich für die Sparkassen-App und identifizierte mittels Workshop und Designsprint Probleme.
Basierend darauf, schlug ich erste Lösungsansätze für den Use Case „Geld übertragen“ vor, welche in der .PDF-Präsentation zu sehen sind.
1_Boink+ App
Erkunden (System & Akteure analysieren, Problemverständnis schärfen)
Weiter ging es mit der Discovery-Phase, deren Hauptziel es war, den Problembereich breit und explorativ zu erfassen. Anstatt uns zu Beginn auf ein konkretes Produkt oder eine bestimmte Lösung festzulegen, lag der Fokus darauf, den Problemraum, die Marktbedingungen, die Bedürfnisse der Nutzer:innen sowie erste mögliche Lösungsansätze umfassend für unser Gruppenprojekt zu untersuchen.
Ein zentraler Bestandteil der Discovery-Phase war die User Research. Hierbei ging es darum, ein tiefes Verständnis für die Verhaltensweisen, Vorlieben, Bedürfnisse und Gefühle der zukünftigen Nutzer:innen zu entwickeln. Die Herausforderung bestand darin, durch gezielte Fragestellungen relevante Einsichten (Insights) zu gewinnen, aus denen sich strategische Chancen (Opportunities) ableiten lassen. Diese Einsichten bilden die Grundlage für Hypothesen und erste Ideen, die später in konkrete, testbare Konzepte überführt werden können.
Zur Strukturierung unserer Recherche folgten wir einem Lern- und Rechercheplan, der vier Schlüsselaspekte umfasste:
• Annahmen: Welche Vorstellungen haben wir aktuell über die Nutzer:innen und ihre Bedürfnisse?
• Wollen wissen: Was genau möchten wir über die Nutzer:innen und den Nutzungskontext herausfinden?
• Untersuchen: Welche spezifischen Situationen, Verhaltensweisen oder Bedürfnisse wollen wir näher betrachten?
• Antworten: Welche Art von Antworten benötigen wir (z. B. motivations-, nutzungs- oder kontextbezogen)?
In einem praktischen Arbeitsprozess bildeten wir 2er-Teams, um unsere ersten Ideen und Use Cases vorzustellen und gemeinsam zu reflektieren. Ziel dieser Zusammenarbeit war es, Gemeinsamkeiten und Unterschiede zu analysieren und daraus entweder einen kombinierten oder einen fokussierten gemeinsamen Use Case weiterzuentwickeln. Sollte keine sinnvolle Kombination möglich gewesen sein, entschieden wir uns für den vielversprechendsten Ansatz eines Teammitglieds.
Anschließend nutzen wir ein MIRO-Template, um unseren Use Case systematisch mithilfe des Lern- und Rechercheplans weiter auszubauen. Dieser strukturierte Ansatz half uns, frühzeitig einen klaren Fokus zu entwickeln, fundierte Hypothesen aufzustellen und eine belastbare Grundlage für die weitere Konzeptentwicklung und Prototyping-Phasen zu schaffen.
Im weiteren Verlauf des Kurses beschäftigten wir uns intensiv mit dem Unterschied zwischen Personas und Archetypen als zentrale Werkzeuge für nutzerzentriertes Design.
Eine Persona stellt eine fiktive, aber realitätsnahe Repräsentation eines typischen Nutzers oder einer typischen Nutzerin dar. Sie basiert auf realen Daten, wie Interviews oder Nutzungsverhalten, und umfasst konkrete Merkmale wie Alter, Beruf, Bedürfnisse, Frustrationen, Ziele und Nutzungskontexte. Der Hauptzweck von Personas liegt darin, Empathie für die Zielgruppe aufzubauen und Designentscheidungen gezielt auf deren Bedürfnisse abzustimmen.
Im Gegensatz dazu abstrahiert ein Archetyp typische Verhaltensmuster, emotionale Bedürfnisse und Motivationen einer Nutzergruppe – unabhängig von individuellen Lebensumständen. Archetypen helfen, tieferliegende Bedürfnisse zu erkennen und übergreifende Strategien für unterschiedliche Nutzergruppen zu entwickeln.
In 2er Teams entwickelten wir anhand eines vorgegebenen Templates eigene Archetypen-Profile. Dabei folgten wir einem strukturierten Vorgehen:
• Erfassen relevanter Interessen, Verhaltensmuster, Bedürfnisse, Herausforderungen, Erfolgsmomente und Ziele.
• Entfernung unnötiger oder idealisierter Details, um die Profile realistisch und authentisch zu gestalten.
• Ergänzung tiefergehender emotionaler Aspekte wie Wünsche, Ängste und Pain Points.
• Entwicklung einer kurzen realistischen Hintergrundgeschichte, um dem Archetypen Tiefe und Glaubwürdigkeit zu verleihen.
• Priorisierung der wichtigsten Erkenntnisse, unterstützt durch Kategorien, Zitate und die fünf zentralen Merkmale.
Eine wichtige Aufgabe war die Überprüfung der Profile auf Realitätsnähe und die kritische Reflexion möglicher Idealisierungen. Durch gezieltes Feedback von Kommiliton_innen konnten wir unsere Archetypen weiter schärfen.
Für unser Projekt haben wir den Archetypen Noah gewählt, 33 Jahre alt, non-binär, mit einem Masterabschluss in Kulturwissenschaften. Noah arbeitet im Kulturbereich und engagiert sich aktiv in queeren Netzwerken.
Dieser Archetyp steht für Menschen, die Vielfalt nicht nur tolerieren, sondern aktiv gestalten. Noah fordert mehr Sichtbarkeit und Inklusion, stellt gesellschaftskritische Fragen und setzt sich leidenschaftlich für Themen wie soziale Gerechtigkeit, Identität und Antidiskriminierung ein.
Zentrale Eigenschaften von Noah:
• Kritischer Blick auf gesellschaftliche Strukturen
• Aktives Engagement für Inklusion und soziale Gerechtigkeit
• Kreativer Zugang zu kulturellen Themen
• Emotional reflektiert und empathisch im Umgang mit Diversität
• Starke Motivation, sichtbare Veränderungen zu bewirken
Durch die Entwicklung dieses Archetypen gelang es uns, eine Perspektive zu integrieren, die insbesondere für Projekte mit dem Fokus auf Diversität, Inklusion und Community Building entscheidend ist.
Das Archetypen-Profil wird im weiteren Projektverlauf eine zentrale Rolle spielen, um Designentscheidungen konsequent an den Bedürfnissen und Erwartungen einer vielfältigen Nutzergruppe auszurichten.
Die nächste Aufgabe war es die Archetypen der Anderen zu lesen, wodurch wir die Möglichkeit erhielten, unsere Perspektive zu erweitern und Archetypen nicht nur zu gestalten, sondern auch kritisch zu hinterfragen – insbesondere solche, die wir nicht selbst erstellt haben. Durch das gezielte Lesen fremder Archetypenprofile auf dem MIRO-Board und das Hinterlassen von Post-its mit Fragen, Anmerkungen oder Erweiterungsideen konnten wir aktiv zu einer differenzierteren und reflektierteren Ausarbeitung beitragen.
Die Methode förderte einen offenen Austausch unter den Teilnehmenden und machte sichtbar, wo Unklarheiten bestehen, wo stereotype Formulierungen hinterfragt werden sollten oder welche Aspekte im Profil noch Potenzial für Tiefe haben. Dieses kollektive Peer-Feedback half uns dabei, blinde Flecken aufzudecken und das eigene Profil weiterzuentwickeln.
Im nächsten Schritt gingen wir auf unser eigenes Archetypenprofil zurück, sichteten die gesammelten Rückmeldungen und überarbeiteten die offenen Fragen. Die Hinweise unserer Kommiliton_innen halfen dabei, den Archetypen realistischer, empathischer und präziser auszuformulieren. Offene Fragen klärte ich mit meinem Peer Ricardo. Anschließend clusterten wir die gesammelten Merkmale, nicht nur für eine bessere Übersicht, sondern auch für ein besseres Verständnis der wichtigsten Merkmale und Aspekte des Archetypens.
Insgesamt entstand so ein deutlich fundierteres Nutzerprofil, das als belastbare Grundlage für weitere Designentscheidungen im Projekt dient. Der Perspektivwechsel und die iterative Überarbeitung haben gezeigt, wie wertvoll kollaboratives Arbeiten für nutzerzentriertes Denken sein kann.
Erkennen (Ursachen, Hürden, Bedürfnisse identifizieren, Potenziale eingrenzen)
In dieser Übung lag der Fokus darauf, unsere Archetypen nicht nur als beschreibende Profile zu betrachten, sondern ihr Denken, Fühlen und Handeln systematisch zu erfassen. Mithilfe der Empathy Map strukturierten wir zentrale Erkenntnisse aus unseren Archetypenprofilen in vier Kategorien: „Sagt“, „Denkt“, „Fühlt“ und „Tut“. Dieser Perspektivwechsel ermöglichte es uns, uns intensiver in die Gefühle, Sichtweisen, Bedürfnisse und Herausforderungen unsere potenzielle Nutzer_innen hineinzuversetzen.
Im Team übertrugen wir relevante Aussagen, Gedanken und Verhaltensweisen aus den Archetypenprofilen in die jeweiligen Felder der Empathy Map. Dabei achteten wir darauf, sowohl äußere Handlungen als auch innere Motive und Emotionen sichtbar zu machen. Anschließend clusterte unser Team die Einträge in thematische Gruppen und vergab aussagekräftige Titel, um Muster und übergeordnete Themen zu identifizieren. Im nächsten Schritt priorisierte ich die wichtigsten Erkenntnisse mithilfe von Klebepunkten, um zu erkennen, welche Insights das größte Potenzial zur Weiterentwicklung unseres Projekts bieten.
Die Empathy Map half uns, abstrakte Nutzerbedürfnisse greifbarer zu machen und war ein entscheidender Schritt, um nutzerzentriert und empathisch weiterzuarbeiten.
In dieser Arbeitsphase lag der Schwerpunkt auf der sinnvollen Verknüpfung aller bisherigen Erkenntnisse aus der Discovery-Phase. Ziel war es, aus den diversen Rechercheelementen – wie Findlings & Insights, Lern- und Rechercheplan, Archetypen und Empathy Maps – eine konsistente Grundlage für unser weiteres Vorgehen zu schaffen. Dieser Prozess half uns, inhaltliche Lücken zu erkennen, gezielt zu schließen und unseren Fokus zu schärfen.
Zunächst sichteten wir alle erarbeiteten Materialien aus den vorherigen Arbeitsschritten und lasen sämtliche Archetypenprofile aufmerksam durch. Auf dieser Basis wählten Noah als unseren Archetypen aus, da wir das gefühlt hatte dieser wird sich besonders gut für unseren Use Case im Kontext einer Bank-App eignen, außerdem hatten wir uns bereits intensiv mit diesen Archetypen auseinandergesetzt.
Als nächstes übertrugen wir die relevanten Post-its aus den verschiedenen Templates auf ein neues, leeres MIRO-Board. Dort organisierten wir die Inhalte, clusterte sie thematisch und vergaben aussagekräftige Titel. So entstand ein strukturierter Überblick über die zentralen Nutzer:innenbedürfnisse, Pain Points und Verhaltensmuster, die für unser Projekt besonders relevant sind.
Diese verdichteten Informationen bildeten die Grundlage für die Ausarbeitung unseres Szenarios sowie die Weiterentwicklung und Optimierung unseres Use Cases und der bisherigen Ideen. Dabei achteten wir darauf, dass unsere Lösungsideen direkt auf die herausgearbeiteten Herausforderungen und Wünsche der Nutzer_innen einzahlen.
Dieser Arbeitsschritt war essenziell, um aus der Breite der Informationen eine fokussierte Richtung abzuleiten. So konnten wir sicherstellen, dass unsere Designentscheidungen auf einer soliden, nutzerzentrierten Basis aufbauen.
Anschließend stand die Entwicklung des User Flows auf dem Plan. Dieser Schritt erwies sich zunächst als ein eher linearer Prozess – allerdings hatten wir zu diesem Zeitpunkt bereits viele verschiedene Ideen im Kopf, die wir alle spannend fanden und gerne umsetzen wollten.
Ein zentraler Fokus lag dabei auf der Personalisierung der Banking-App, insbesondere in Hinblick auf die individuellen Bedürfnisse und Präferenzen der Nutzer*innen. Unser Ziel war es, eine Anwendung zu gestalten, die sich möglichst stark an den jeweiligen User, in unserem Fall der liebe Noah, anpasst und personalisierte Funktionen bietet.
Durch die Feedback des User Flows stellten wir jedoch fest, dass unser gewählter Use Case sowie das dazugehörige Szenario inhaltlich noch zu vage und umfangsmäßig zu eingeschränkt waren, um diesen Anspruch an Personalisierung sinnvoll abzubilden.
Aus diesem Grund entschieden wir uns, den gesamten Ansatz zu überdenken: Wir hinterfragten unser Szenario, den Use Case und den geplanten User Flow, um eine klarere, fokussiertere Lösung zu entwickeln, die sowohl umsetzbar als auch nutzerzentriert ist. Ziel war es, die Komplexität zu reduzieren und gleichzeitig den Mehrwert für die Nutzer*innen zu steigern.
Alle guten Dinge sind drei: Nach mehreren Überlegungen und Anpassungen entschieden wir uns schließlich für einen klaren Use Case, der den finalen User Flow bestimmte.
In diesem Szenario plant unser Archetyp Noah eine Reise nach Japan und erstellt dafür innerhalb der Banking-App Boink+ eine sogenannte PiggyBank, also ein digitales Sparkonto.
Ursprünglich hatten wir auch die Idee integriert, dass Noah Vereinskonten betreibt und verwaltet – dieser Aspekt war im ersten Entwurf des User Flows noch enthalten. Um jedoch die Komplexität zu reduzieren und den Fokus zu schärfen, entschieden wir uns, diesen Bereich nur am Rande zu behandeln und den User Flow stattdessen ausschließlich auf die PiggyBank-Funktion zu konzentrieren.
Der finale User Flow, den wir anschließend für die Gestaltung der App umgesetzt haben, umfasst somit die Einrichtung einer PiggyBank bzw. eines Sparplans. Zusätzlich wollten wir dem Sparen eine weitere Dimension verleihen: Das angesparte Geld kann in der App smart investiert werden, um durch potenzielle Gewinne die geplante Reise zu finanzieren. Auf diese Weise verbindet der Use Case klassisches Sparen mit einer einfachen Form der Geldanlage, um dem User einen spürbaren Mehrwert zu bieten.
Bei der Entwicklung der ersten Wireframes haben wir zunächst eine erste low fidelity Version erstellt (siehe Bild 3), die wir im Rahmen von zwei kurzen User Tests bzw. Interviews mit Anja und Edmundo separat getestet haben. Das dabei erhaltene Feedback sowie die Verbesserungsvorschläge haben wir sorgfältig ausgewertet und direkt in die Überarbeitung der Wireframes einfließen lassen.
Dieser Prozess war von mehreren Iterationen geprägt, da wir während der Gestaltung immer wieder neue Ideen und Funktionen entwickelten, die den ursprünglichen User Flow beeinflussten. Oft entstehen die besten Lösungsansätze erst im praktischen Umsetzungsprozess – ein Umstand, der gerade im Bereich UX/UI Design besonders wertvoll ist.
In der zweiten Version der Wireframes (siehe Bild 2) konnten wir diese Erkenntnisse bereits umsetzen. Diese Version haben wir anschließend gemeinsam mit Erik detailliert besprochen und kritisch hinterfragt.
Nach insgesamt drei Runden von Feedback-Gesprächen, Überarbeitungen und einer kontinuierlichen Weiterentwicklung der Wireframes haben Ricardo und ich schließlich unsere finale Version (siehe Bild 1) fertiggestellt. Diese Endversion fasst die gesammelten Erkenntnisse zusammen und bildet die Grundlage für das endgültige Designkonzept der App.
Das war der Aufbau unserer Figma-Screens, den wir auch im Rahmen der Abschlusspräsentation vorgestellt haben.
Um eine konsistente Gestaltung zu gewährleisten, haben wir – soweit es der begrenzte Zeitrahmen zuließ – ein umfangreiches Design System entwickelt. Dieses umfasste grundlegende Elemente wie Farben, Typografie, Buttons, Icons sowie Abstände und Layout-Richtlinien. Dadurch konnten wir sicherstellen, dass alle Screens trotz Arbeitsaufteilung visuell und funktional aufeinander abgestimmt sind und ein einheitliches Nutzererlebnis bieten. Die Partnerarbeit erfolgte, auch wenn wir mal nicht zusammen im Zoom Raum waren, reibungslos, dank der Figma Kommentar Funktion :)
2_Boink+ App (Banking 2030)
Das Szenario 2030
Im Jahr 2030 haben sich digitale Bankdienstleistungen stark weiterentwickelt. Klassische Banken agieren längst nicht mehr nur als Finanzdienstleister, sondern als smarte Begleiter im Alltag ihrer Nutzer:innen. Die Bank-App ist dabei zur persönlichen Finanz- und Lebensassistentin geworden – individualisierbar, sprachgesteuert, barrierefrei und proaktiv.
Sie erkennt Muster im Nutzungsverhalten, reagiert adaptiv auf Lebensveränderungen und bindet externe Dienste (z.B. Wohnraumsuche, Gesundheitsboni, Behördenkommunikation) kontextabhängig ein.
Technologische Rahmenbedingungen im Jahr 2030:
➔ KI-basierte Assistenzsysteme unterstützen Entscheidungen
➔ Sprachgesteuerte und biometrische Interaktion sind Standard
➔ Schnittstellen mit Verwaltung & Services ermöglichen Datentransfer mit Einwilligung
➔ Nachhaltigkeitsaspekte sind Teil der Finanzübersicht (z.B. CO₂-Konto)
(Edmundo Galindo)
2_1_Usecase und Szenario
Workshop Insights
Abgeleitet vom Workshop ergaben sich unsere zentralen Insights und daraus Use Cases und Szenarien für die Banking-App 2030 und den Archetypen Noah.
Da Noah wenig Zeit und viele Projekte hat und viel verreist, kann eine App unterstützen, die eine Reise plant und gleichzeitig für diese spart. Da Noah sich aktiv für seine Werte einsetzt, möchte er diese auch in seiner Banking-App vertreten haben, denn sein investiertes Geld hat Einfluss auf die Umsetzung seiner Werte. Dabei sind ihm eine persönliche, empathische Ansprache und Unterstützung wichtig.
Szenario
Noah möchte eine Reise planen, hat jedoch viel zu tun mit seinen Förderprojekten und dadurch wenig Zeit.
Zudem möchte Noah aktiv seine Welt mitgestalten und möchte daher nur Reiseoptionen, die zu ihm und seinen Werten passen.
Geld spart und investiert er digital und möchte das nun automatisch machen. Noah möchte dabei nachhaltig investieren und seinen Impact sehen.
Usecase
Die App plant aktiv seine/ihre Reisen und schlägt Aktivitäten vor. Die Auswirkung (CO₂, Tierwohl, regionale Unternehmen, Ethik, Arbeitsrechte) seiner Ausgaben wird dabei visualisiert.
Die App zeigt visuell, welchen Impact seine Entscheidungen haben. Um Geld zu investieren, plant die App seine Reise und passt das Budget automatisch an.
Boink+ zeigt Einblicke in die Umsetzung seiner/ihrer Werte (Ethik, Nachhaltigkeit …) von Unternehmen. Die App berät und informiert, vergleicht mit anderen und schafft dadurch ein Bewusstsein für wertebasiertes Sparen.
Es ergaben sich 3 Flows, die miteinander zusammenhängen, die wir darstellen wollten: Planen, sparen und investieren.
Konkret wollten wir Noah die Möglichkeit geben, seine Reisen zu planen, dafür Geld zu sparen und in die eigenen Werte zu investieren.
2_2_Wireframing Userflow
Statt einen konventionellen Userflow textbasiert zu erstellen, haben wir uns für ein zeiteffizientes Wireframing entschieden. Da dieses für uns durch die visuelle Darstellung leichter verständlich war, wo welcher Screen hinführt und wie diese verbunden sind.
So konnten wir die 3 Hauptfunktionen in Flows darstellen. Zudem war es für die Kommunikation ebenfalls konkreter, was unsere Vorstellung ist. Durch die grobe Form der Wireframes wurde konstruktives Feedback zur Funktion gegeben. Die Wireframes ermöglichten es zudem, viele Ideen auszuprobieren und visuelle Ansätze schnell zu iterieren.
Die erste Variation hatte auch eine einfache Gamification mit Karma-Punkten, die einem anzeigen, wie effektiv man in seine Werte investiert hat oder wie viele Punkte man für bestimmte Entscheidungen von bspw. wertebasierten Urlaubszielen erhält. Diese wurde dann aufgrund der Komplexität verworfen und der Fokus wurde stärker auf die Hauptfunktionen gesetzt.
Die Wireframes präsentierten wir unserem Betreuer und Kommilitonen. Auf Basis des Feedbacks haben wir die Wireframes erneut angepasst. So konnten wir verschiedene Ansätze explorieren, Ideen ausbauen oder entfernen und verfeinern.
Die 3 Flows haben wir während der Übersetzung in die High-Fidelity-Screens zu einem zusammenhängenden Flow verbunden.
2_3_Designsystem
Das Designsystem wurde von Grund auf selbst konzipiert und erstellt. Mit Ausnahme der Schriftart und einiger weniger Icons.
Inspiration und Entwicklung
Zunächst haben wir uns Inspiration geholt und mit Farben und Formen experimentiert. Da wir gemerkt haben, dass unsere Farben vor allem in V2 und V3 etwas zu kraftlos aussahen, haben wir uns angeschaut, wie andere Darkmode-Designsysteme Farben verwenden.
Entsprechend haben wir die Farben deutlich kräftiger, farbenfroher und kontrastreicher gemacht. Dabei fiel auf, dass Lila sich sehr gut eignet, da dieses einen konstanten Kontrast zu den anderen Farben aufwies und sich mit dunklen und hellen Tönen kombinieren ließ.
Im Prozess wurde das Designsystem mehrfach erweitert und aufeinander angepasst.
Mittels iterativem Testen und dem Aufbauen diverser Screens wurden die Elemente vom Designsystem so erstellt, dass diese miteinander kombiniert werden können und genügend Kontrast aufweisen.
Status von Elementen
Statische Elemente haben eine dezente Kontur. Interaktive Elemente haben eine deutliche Kontur, welche diese als interaktiv kennzeichnet. Terziäre Buttons ausgenommen. Bei aktiven Elementen ändert sich die Kontur zur sekundären Farbe.
Container und Glassmorphism
Um die Erkennbarkeit von Elementen und die Lesbarkeit von Texten zu gewährleisten, erhalten transparente Container einen Blur. Sobald man diese übereinanderlegt, entstehen Ebenen. Übereinanderliegende Container werden heller und erhalten einen Kontrast zueinander, der zusätzlich durch die dezente Kontur verstärkt wird.
Elemente innerhalb der Container wie Labels, Chips und anklickbare Boxen haben eine undurchsichtige Farbe. So sind die Texte darauf besser lesbar.
Bei Popups werden inaktive Elemente transparent dargestellt, um diese visuell abzusetzen.
Ebenen
DIe Ebenen sind in 3 Typen aufgeteilt:
[1] Hintergrundfarbe oder grafische Elemente
[2] Hauptelemente und/oder Ebenen
[3] Navigation und Pop-up
Elemente im Vordergrund sind fixiert. Wie beispielsweise die Hauptnavigation oder wichtige Buttons sowie Pop-ups. Hinter Pop-ups werden inaktive Elemente transparent dargestellt, um diese visuell abzugrenzen.
2_3_1_Design Iteration
Werte auswählen
Um die Werte auszuwählen, wurden zunächst mögliche Werte mithilfe von ChatGPT recherchiert. Diese wurden dann in verschiedenen gestalterischen Ansätzen ausprobiert und iteriert. Dabei sind 8 Variationen entstanden.
Zunächst die „ESG“-Werte, welche typisch für Banking sind. Sie beziehen sich auf Environmental, Social and Governance. Später haben wir diese auf 5 erweitert, welche Noah wichtig sind (Equity, culture, environment, wellbeing, community).
Anfangs nutzten wir in V2 prozentuale Werte, bis wir merkten, dass eine genaue Angabe nicht sinnvoll ist. Prozentuale Werte sind sehr präzise, wobei die Eingabe der Werte eher ein grobes Bauchgefühl darstellt. Zudem könnte man die Regler nicht alle auf voll setzen, da man so 300 % bekommen würde.
Die Varianten V3 bis V5 stellen Balkendiagramme dar, bei denen die einfache Bedienung mit dem Finger beachtet wurde und die gleichzeitige Lesbarkeit der Elemente bei Interaktion. Problematisch war die Beschriftung, denn es war unklar, welches Icon welchen Wert darstellt.
Daher kombinierten wir in V6 die Radargrafik mit den Balken, doch diese wurde verworfen, da man auch gut nur mit den Punkten interagieren kann.
Im weiteren Prozess stellte sich heraus, dass die Radargrafik am besten ist, um zu vergleichen, wie gut ein Unternehmen die Werte vertritt. Deswegen verwendeten wir bereits bei der Auswahl der Werte eine visuell ähnliche Darstellung, um den Zusammenhang klar darzustellen.
AI Assistant Chat
Der Assistent reagiert auf den Nutzer und seinen Input (Text, Emotion, …) in Abhängigkeit vom Inhalt der App und fragt bei Unklarheiten oder gibt Empfehlungen. Dabei kennt der Assistent die Daten der App und des Nutzers und mögliche Unklarheiten in Bezug auf die App.
Beim Klicken auf ein Element kann man mit dem Assistenten chatten oder sprechen und erhält mehr Informationen. So können unverständliche Icons oder Grafiken oder Fachbegriffe angeklickt und erklärt werden.
Die Herausforderung lag darin, den Chatbot möglichst so in die App zu integrieren, dass dieser nicht den gesamten Screen einnimmt und dennoch bei Bedarf aktivierbar ist und Fragen beantwortet. Das Chat Popup nutzt dabei die Ebene über den Widgets.
Assistent Darstellung
Wir entschieden uns für ein Maskottchen, welches die Nutzenden mit Animationen motiviert und eine niedliche und dennoch seriöse Formsprache besitzt.
Portfolio
Hier wurden verschiedene Darstellungen ausprobiert und nach und nach vereinfacht und passend zur Interaktion gestaltet.
Da man eine schnelle Übersicht zu den einzelnen Aktien erhalten soll, wurden Mini-Cards verwendet, welche die wichtigsten Informationen kurz darstellen und eine neue Seite mit mehr Informationen öffnen.
2_4_Finale App Screens
Figma Prototyp öffnen
2_5_Appflow Video und Intro
Das Video beinhaltet eine für die Werkschau optimierte Präsentation der App mit Erklärung der Screens und Flows sowie einem Intro, um den Hintergrund zu verstehen. Die Intro Texte sind dabei auf mehrere Folien aufgeteilt, um den Text vollständig lesen zu können.
2_6_Abschlusspräsentation
3_Reflexion
Kurs
Der Kurs bildete eine überdurchschnittlich breite und tiefe Menge an Wissen und praktischem Arbeiten. Wir haben mehrere Workshops durchgeführt, die verschiedene Techniken der qualitativen Nutzerforschung darstellten, um unsere verschiedenen Konzepte zu entwickeln. Wir haben 2 Designsysteme erstellt und als Prototyp angewandt sowie verschiedene Präsentationen geführt. Zudem wurden alle Elemente, Farben, Icons und Illustrationen selbst erstellt.
Flows
Im Design wird eigentlich exploriert und dann reduziert. Wir waren jedoch motiviert und wollten ein Paar unserer Darlings einmal verschonen. Dadurch sind mehrere Flows entstanden, was wiederum die Kommunikation dieser erschwert hat, da wir diverse Konzepte präsentiert haben.
Dennoch konnten wir dadurch auch mal etwas Neues ausprobieren, wie Designer es tun sollten und haben gemerkt, dass man nach der Exploration unbedingt konkret werden muss. Als nächsten Schritt würden wir uns also für eine Idee oder einen Flow entscheiden und diesen präziser darstellen. Für das Gesamtkonzept machen die Flows jedoch Sinn.
Auch wenn normalerweise nur ein Flow ausgereicht hätte, wollten wir sehr explorativ vorgehen. Dadurch wurde das Abstimmen der Screens aufeinander komplexer, wodurch wir wiederum mehr gelernt haben.
Entwicklung
Wir haben für uns völlig neue Designstile ausprobiert und sind von den Standards abgewichen, wodurch wir ein erstes Gefühl für Pastell, Neon, Glassmorphism und Darkmode entwickeln konnten.
Zudem haben wir uns nicht mit der ersten Lösung zufriedengegeben und mehrfach mittels Feedback von Kommilitonen und Betreuern, aber auch intern in der Gruppe, iteriert.
Das Design-System wurde in seiner Funktion mit Ebenen und diversen Kontrasten zueinander weitergedacht. Dennoch sollten hier weitere Elemente und Tests erfolgen sowie eine noch präzisere Regulierung, da das Designsystem auch unter bisher nicht bedachten Umständen verwendet werden können sollte.
Innovation
Auch haben wir verschiedene Formen der Darstellung exploriert. So gibt es statt einfacher Slider oder Texteingabe kreative, innovative und verspielte Darstellungen, wie beispielsweise eine Achterbahn zum Auswählen der Investment-Risiko- und Schwankungen (Volatilität) Bereitschaft.
Zudem innovative Ideen wie eine proaktive Unterstützung beim Sparen und Planen für Sparziele sowie wertebasiertes Investieren.
Zu guter Letzt: Danke an unsere Kommilitonen und Edmundo Galindo, welche viel wertvolles Feedback gegeben haben, auch außerhalb des Unterrichts.
