Online-Banking-Anwendung
Ihre finanzielle Freiheit, unser Auftrag - Banking ohne Grenzen
year
2023
service
UX Forschung, Barrierefreiheit, UX/UI
client
Bank On
Dies ist eine konzeptionelle Aufgabe, die ich im Rahmen des UI-Teils des UX Design Institute-Kurses erstellt habe. Ich habe diesen Kurs am UX Design Institute belegt, um mein Wissen über User Interface Design zu erweitern.
Während meiner Ausbildung habe ich Übungen gemacht, um die Theorie, die ich gelernt habe, in die Praxis umzusetzen. Ich erstellte Moodboards, generierte Icons, wählte eine Farbpalette aus und entwickelte einen Prototyp und ein UI-Design. Das Ergebnis waren 9 Screens (Designs) für die Banking-Anwendung. Das Projekt dauerte von Dezember 2022 bis April 2023 (Teilzeit).
• Fallstudie
In diesem Projekt wurde eine Benutzeroberfläche für eine neue Banking-Anwendung entwickelt. Der Kunde wollte den Finanzsektor mit einer intuitiven Webanwendung für Personal Banking neu beleben. Das Design sollte nahtlos auf Desktops, Tablets und mobilen Geräten funktionieren.
Das Ziel des Projektes war die Entwicklung einer Benutzeroberfläche für eine neue Bankanwendung mit dem Fokus auf Barrierefreiheit für alle Benutzergruppen, inklusive Menschen mit unterschiedlichen Sehbehinderungen. Dies setzte eine umfassende Analyse der Bedürfnisse verschiedener Nutzergruppen und den Einsatz moderner, adaptiver Gestaltungstechniken voraus.
Im Ergebnis wurde ein universelles Design geschaffen, das auf Desktop-, Tablet- und mobilen Geräten funktioniert. Dadurch werden Bankdienstleistungen für alle Nutzergruppen wirklich komfortabel und zugänglich. Dies gilt unabhängig von körperlichen Fähigkeiten oder bevorzugten Geräten. Dies erhöht nicht nur die Kundenzufriedenheit, sondern erreicht auch ein breiteres Publikum, wichtig in der heutigen wettbewerbsintensiven Bankenlandschaft.
Im Ergebnis wurde ein universelles Design geschaffen, das auf Desktop-, Tablet- und mobilen Geräten funktioniert. Dadurch werden Bankdienstleistungen für alle Nutzergruppen wirklich komfortabel und zugänglich. Dies gilt unabhängig von körperlichen Fähigkeiten oder bevorzugten Geräten. Dies erhöht nicht nur die Kundenzufriedenheit, sondern erreicht auch ein breiteres Publikum, wichtig in der heutigen wettbewerbsintensiven Bankenlandschaft.
01
Moodboard
Zur Ermittlung des potenziellen Projektverlaufs führte ich eine umfassende Wettbewerbsanalyse durch. Dies bedeutete, ihre jeweiligen Stärken, Schwächen, einzigartigen Wertangebote und Marktstrategien zu untersuchen. Nach Abschluss dieser Phase erstellte ich ein Moodboard. Dieses diente als visuelle Manifestation meiner Ideen und Konzepte. Auf diese Weise war ich in der Lage, eine kohärente und ansprechende Benutzeroberfläche zu entwerfen, die in vollem Einklang mit der ursprünglichen Vision des Projekts stand.
02
Schriften
Grundlage für ein gelungenes UI Design ist die Qualität der Typografie. Ausgehend von dieser Überlegung habe ich einen akribischen Prozess der Schriftauswahl durchlaufen und eine typografische Skala für die Banking-App entwickelt. Das Hauptziel bestand darin, den Anforderungen der Marke gerecht zu werden. Dazu gehörten Elemente wie Verspieltheit, Klarheit und Vertrauenswürdigkeit (Verspielt, Klar und Vertrauenswürdig).
03
Farbpalette
Die Farbpalette ist ein wesentliches Element bei der Vermittlung der Persönlichkeit einer Marke über die Benutzeroberfläche. Ich habe mich von den Produkt- und Markenzeichen anderer Banking Apps inspirieren lassen, um zu sehen, wie sich diese auf unser eigenes Angebot übertragen lassen. So entstand eine Farbpalette für die App, die die Markenwerte widerspiegelt.
04
Icons
Die Icons sind Ausdruck der drei Grundprinzipien der Marke: Verspieltheit, Klarheit und Zuverlässigkeit: Verspieltheit, Klarheit und Verlässlichkeit. Jedes Icon hat seine eigene Rolle in der Darstellung dieser Werte und ist gleichzeitig ein Symbol für diese Werte. Verspieltheit wird durch leichte, dynamische Linien und Formen ausgedrückt. Klarheit wird durch Einfachheit und intuitive Verständlichkeit zum Ausdruck gebracht. Ausgewogene Kompositionen vermitteln Verlässlichkeit.
05
Responsive design
Ich habe drei Arten von adaptiven Benutzeroberflächen für Desktops, Tablets und Mobiltelefone entwickelt. Für jedes Gerät wurden drei Bildschirme erstellt. Die Gesamtzahl der Bildschirme beträgt somit neun.
Eine der beliebtesten Seiten einer Banking-Anwendung ist die Transaktionsseite. Die physische Karte des Kunden sollte in Banking-Apps als Erstes angezeigt werden. Ich habe Dribbble und Behance ignoriert, weil ich eine echte App entwickeln wollte.
Mobbin.com hatte viele Screenshots von echten Bankanwendungen, die mir bei diesem Projekt geholfen haben. Ich fügte Icons zu jeder Transaktion hinzu, damit die Benutzer sie unterscheiden können. Dadurch werden die Transaktionen visuell getrennt. Um den gesamten Platz zu nutzen, habe ich gezeigt, wie der Arbeitsbildschirm aussieht, wenn der Benutzer mehr über die Transaktion erfahren möchte.
• Barrierefreiheit
Um die Zugänglichkeit für die größtmögliche Gruppe von Nutzern zu gewährleisten, einschließlich derer mit gesundheitlichen Einschränkungen, habe ich überprüft, dass der Farbkontrast aller Inhalte den API-Standards entspricht. Ich habe hauptsächlich in Figma gearbeitet und ein Plugin namens "Stark" entdeckt, das hilft, den Farbkontrast zu überprüfen.
Da die Zielgruppe der Banking-Anwendung Menschen mit Sehbehinderungen, Farbenblindheit und Leseschwäche umfasst, habe ich der Zugänglichkeit große Aufmerksamkeit gewidmet. Aus diesem Grund ist die Priorisierung von Kontrasten während des Designprozesses sehr wichtig.
• Schlussfolgerung
Ich hatte eine umfangreiche Sammlung von Moodboard-Materialien zusammengestellt. Diese waren bei der Gestaltung der Bildschirme von unschätzbarem Wert. Mein wichtigstes Ziel war es, eine intuitive Interface zu entwickeln, die von jedem Benutzer mit minimalem Aufwand bedient werden kann. Obwohl viel Zeit in Moodboards investiert wurde, wurden reale Bankapplikationskonzepte besonders berücksichtigt.
[1]
Der Prozess
Bei der Wahl der Farbpalette entschied ich mich für Blautöne, da diese Farbe von den Benutzern als vertrauenswürdig empfunden wird, was für eine Bankanwendung sehr wichtig ist.
Das 8-Punkt-Rastersystem war die optimale Wahl, da ich dieses System häufig für Benutzeroberflächenentwürfe verwende. Als sorgfältige Designerin schätzte ich die präzise Platzierung von Objekten auf Rasterelementen, Rahmen und Komponenten.
Das 8-Punkt-Rastersystem war die optimale Wahl, da ich dieses System häufig für Benutzeroberflächenentwürfe verwende. Als sorgfältige Designerin schätzte ich die präzise Platzierung von Objekten auf Rasterelementen, Rahmen und Komponenten.
[2]
über spielerisch
Es war wichtig, die Prinzipien der Marke mit dem Design in Einklang zu bringen. Ziel war es, eine spielerische, verständliche und vertrauenswürdige Erfahrung zu schaffen. Hätte es diese Vereinbarung nicht gegeben, hätte ich keinen spielerischen Ansatz für die Banking-App gewählt. Ich glaube nicht, dass dieses Prinzip gut zum Bankgeschäft passt. Es eignet sich eher für Spiele.
Ich glaube, dass ein modernes und prägnantes Design besser geeignet wäre, um das Vertrauen der Benutzer zu gewinnen. Zuverlässigkeit ist die Hauptfunktion einer Banking-App.
Ich glaube, dass ein modernes und prägnantes Design besser geeignet wäre, um das Vertrauen der Benutzer zu gewinnen. Zuverlässigkeit ist die Hauptfunktion einer Banking-App.