UX-Herausforderung: Entwicklung einer mobilen Bankanwendung in 5 Tagen

    Vor nicht allzu langer Zeit hat die Alfa-Bank Ukraine einen Wettbewerb veranstaltet, in dem alle aufgefordert wurden, ein Designkonzept für eine mobile Bank für zwei Anwendungsfälle zu entwerfen. Offenbar ist klar, dass ihre derzeitige Anwendung den Erwartungen der Benutzer nicht entspricht.

    In der Beschreibung des Wettbewerbs wurde besonderer Wert auf UX gelegt, so dass uns die Aufgabe interessant erschien. Zwar waren es vom Zeitpunkt der Bekanntschaft mit dem Wettbewerb und der Frist für die Annahme der Bewerbungen nur 5 Tage. Nun, die Herausforderung wird angenommen.



    Under the cut ist eine lange, aber nützliche Geschichte über die Gestaltung einer mobilen Bankschnittstelle in kurzer Zeit. Wer es meistert, erwartet am Ende einen Bonus.

    Es gab keine Zeit für eine umfassende Recherche, daher wurde ein einfacher Weg gewählt: Analyse der vorhandenen Marketingaktivitäten, Beratung über Call Center-Produkte mit Call-Center, Interviews mit mehreren Bankkunden und Korridortest des Prototyps.

    Benutzerzentriertes Design


    Das Designkonzept basiert auf der UCD-Methodik. Schlüsselwerkzeuge:
    • Personen (Personen) - kollektive Bilder von typischen Vertretern der Zielgruppe des Produkts, kombiniert mit einer Reihe von verwandten Zeichen in Personen.
    • Anwendungsfälle (Anwendungsfälle) - Eine kurze Beschreibung der Aufgabe innerhalb des Produkts, die die Person ausführen muss.
    • Verwenden Sie Szenarien (Szenarien) - fiktive Geschichten über die Abfolge von Ereignissen einer Person im "Alltag" auf dem Weg zum Ziel.

    Herausforderung Nr. 1: Bestellen Sie eine Karte


    Der erste vorgeschlagene Anwendungsfall klang wie folgt:
    „Ich möchte als Nicht-Kunde der Alfa-Bank eine Kreditkarte bekommen, weil sie eine der besten Bedingungen auf dem Markt hat, um Zahlungen im Internet zu tätigen und Versorgungsunternehmen zu bezahlen.“
    Das Hauptproblem ist, dass die Bank 17 Kartenoptionen bietet, darunter 8 Kredit- und 9 Debitkarten. In der vorhandenen Bankanwendung wurde versucht, unter ihnen alle auszuwählen.

    Einblick Nr. 1
    Gemäß dem vorgeschlagenen Fall benötigt der Benutzer eine Kreditkarte, sodass Sie 9 Debitkarten sicher entfernen können. 8 übrig - schon einfacher.

    Einblick Nr. 2
    Bei näherer Betrachtung stellte sich heraus, dass sich 8 Kreditkarten leicht voneinander unterscheiden. Aber es gibt einen, der den maximalen Nutzen hat und die stärkste Marketingunterstützung hat.

    Angesichts des Kontexts der Kartenbestellung und des Anwendungsfalls ist es ratsam, dem Benutzer nur eine Karte anzubieten, die seine klaren Vorteile demonstriert. Dieser Ansatz vereinfacht die Interaktion mit der Schnittstelle erheblich und erhöht somit die Konvertierung. Und am wichtigsten - es entspricht der bestehenden Marketingstrategie der Bank.

    Insgesamt: Unsere Aufgabe ist es, nur eine, aber die "schmackhafteste" Kreditkarte zu "verkaufen".

    Person bilden


    Ja, die persona - fiktiven Charaktere. Aber eine gut zusammengesetzte Person hilft dem Team, sich auf die richtigen Dinge zu konzentrieren und weniger Fehler zu machen. Die Person muss so realistisch und kohärent wie möglich sein.

    Für die Bestellung einer Kreditkarte haben wir eine solche Person zusammengestellt:



    Wir schreiben das Skript


    Das Szenario ist eine fiktive Geschichte über die Abfolge der Ereignisse im „Alltag“ einer Person auf dem Weg zum Ziel. In diesem Szenario ist es wichtig zu notieren, wo sich der Benutzer jetzt befindet, seinen Abstraktionsgrad (Umgebung) , mit dessen Hilfe er mit dem Produkt (Technologie) interagiert , warum und wie er auf das Produkt (Kontext) gelangt ist .

    Zeichen eines guten Skripts:

    • Ein gutes Skript ist als Tanz konsistent und bildet eine vollständige Geschichte (wenn der Benutzer dies getan hat, erwartet er dies, aber sonst nichts).
    • Ein gutes Skript ermöglicht es Ihnen, den Charakter vollständig zu durchdringen und seine (aber nicht Ihre) Interaktionserfahrung neu zu erleben.
    • Ein gutes Skript enthält keine Beschreibungen von Schnittstellenlösungen und beschränkt sich auf die Erwartungen und Gefühle des Benutzers.
    • Mit einem guten Skript können Sie einen qualitativ hochwertigen Benutzerpfad (Benutzerfluss) erstellen und bestimmte Schnittstellenanforderungen formalisieren.

    Das vollständige Szenario erwies sich als sehr umfangreich, daher werden für den Artikel die wichtigsten Szenarien vorgestellt: Umwelt, Technologien und Kontext:



    Benutzerpfad




    Nachdem Sie einen Benutzerfluss erstellt und Anforderungen für jeden Bildschirm gebildet haben, können Sie mit dem Design der Schnittstelle fortfahren. Lassen Sie uns die Schnittstellenlösungen für jede Stufe des Benutzerpfads analysieren.




    Der erste Bildschirm der Anwendung nach dem Start ist so minimalistisch wie möglich und bietet zwei Hauptanforderungen:

    • Login - für bestehende Bankkunden
    • Kunde werden - für potenzielle Bankkunden

    In Anbetracht der gebildeten Erwartung auf der Stufe der Werbekommunikation sowie der Tatsache, dass es weniger attraktiv ist, Bankkunde zu werden als eine Karte mit einem Limit von 200.000 UAH, wird eine Karte mit den wichtigsten Vorteilen sofort auf dem ersten Bildschirm positioniert.

    Der Block mit der Karte ist als Banner gestaltet. Die Kreditkarte gleitet reibungslos über den Bildschirm, und Sie können sehen, worauf Sie klicken können.






    Der Titel "Eine Kreditkarte von der Alfa-Bank erhalten" formuliert klar die Erwartungen: "Wenn Sie auf dieses Ding klicken, kann ich eine Karte bestellen".






    Ein Schieberegler von 5 Bildschirmen zeigt die Hauptvorteile einer Kreditkarte Maximum in einfacher und verständlicher Sprache.

    Die erste Folie enthält wichtige Informationen. Jede nachfolgende Folie erweitert es.






    Nachdem wir die aktuellen Formulare auf der Website geprüft und mit dem Support-Service gesprochen hatten, stellten wir fest, dass das Öffnen der Karte auf jeden Fall über ein Call-Center erfolgt. In Anbetracht dessen, dass der Benutzer möglicherweise nicht die erforderlichen Dokumente zur Hand hat, müssen Sie zum Bestellen einer Karte nur eine Telefonnummer eingeben und bestätigen.

    Bestehende Bankkunden können Sie auch nach Telefonnummer abrufen, indem Sie ihnen ein anderes Interaktionsszenario anbieten.





    Um eine Karte zu bestellen, geben Sie einfach die Telefonnummer ein. Der Rest wird ein Callcenter sein.

    Das Ausfüllen persönlicher Daten ist für Benutzer eine schwierige Aufgabe. Hinzu kommt, dass die notwendigen Dokumente möglicherweise nicht immer zur Verfügung stehen.

    Das Ausfüllen des Fragebogens ist nicht obligatorisch. Die Schnittstelle informiert Sie darüber, dass die Karte bereits bestellt wurde. Und nur wenn der Benutzer den Prozess beschleunigen möchte, kann er den Fragebogen selbst ausfüllen.





    Beim Übergang zur Selbstausfüllung des Fragebogens sieht der Benutzer ein einfaches Formular mit einer minimalen Anzahl von Feldern.

    Alle Artikel sind einfach und benötigen keine Dokumente.

    Durch Klicken auf die Schaltfläche Speichern sieht der Benutzer, dass andere Formulare vorhanden sind. Zum Ausfüllen benötigen Sie Dokumente. Aber nichts ist erforderlich. Er versteht, dass alles gerettet ist und er kann bei Bedarf später weiter füllen.



    Formulare werden so gruppiert, dass sie ausgefüllt werden können und nur einen Teil der Informationen bei sich haben. Wenn ein Benutzer beispielsweise seine TIN auswendig kennt, kann er sie ausfüllen. Gleichzeitig gibt es für diejenigen, die sich nicht an ihn erinnern und diese nicht zur Hand haben, keine Schwierigkeiten, andere Daten einzugeben.


    Wenn Sie alle Felder selbst ausfüllen oder ein Callcenter verwenden, wird dem entsprechenden Bestätigungsbildschirm angezeigt.

    Auf diesem Bildschirm wird zum ersten Mal die Erlaubnis zum Senden von Push-Benachrichtigungen im Gegenzug für einen verständlichen Wert für den Benutzer angefordert: Tracking-Kartenstatus.

    In iOS und Android gibt es nur eine Möglichkeit, die Berechtigung zum Senden von Benachrichtigungen in der Anwendung zu erhalten. Das Systemabfragefenster wird nur angezeigt, wenn der Benutzer es bewusst bereitstellt.







    Während der Ausgabe der Alfa-Bank-Karte zeigt die Anwendung in Echtzeit den aktuellen Status der Karte an.

    Alle Fragen des Kunden werden vom Support-Service im Alpha-Chat umgehend beantwortet.

    Wenn die Karte zum Empfang der Karte kommt, wird der Kurier anrufen und sich auf einen geeigneten Zeitpunkt und Ort der Lieferung einigen.





    Das Ziel ist erreicht, der Kunde ist zufrieden:


    „Dies ist die beste Karte, die ich je hatte. So viel Freiheit und schickes Cashback. Und es war so einfach, es zu bestellen! “

    Hauptbildschirm


    Eine der Anforderungen neben dem Schließen zweier Anwendungsfälle war die Visualisierung des Konzeptes des Hauptbildschirms. Da es in der Aufgabe keinen separaten Anwendungsfall für den Hauptbildschirm gab, wandten wir uns den jüngsten Untersuchungen von Usabilitylab zu und stellten fest, dass die mobile Bankanwendung drei Erwartungen erfüllen muss:

    • Ermöglichen Sie den schnellen Zugriff auf Kontostände
    • Verfolgen Sie alle Ausgaben und Gebühren
    • Führen Sie grundlegende Bankaufgaben aus

    Wir haben sie alle auf einem Bildschirm platziert und bieten einen einfachen und schnellen Zugriff auf die wichtigsten Funktionen einer mobilen Bank.


    Kontostände sind sofort sichtbar. Um alle Karten anzuzeigen, müssen Sie nicht zu einem separaten Bildschirm wechseln. Blättern Sie einfach durch die Liste der Karten, und der Bildschirminhalt ist für die einfache Interaktion mit diesen Karten optimiert.

    Alle Aktionen an allen Karten an einem Ort. Smart Tape ähnelt den gängigen Messenger-Programmen und bietet nicht nur einen schnellen Zugriff auf alle perfekten Vorgänge, sondern erinnert Sie auch daran, für eine Gemeinschaftswohnung zu zahlen oder durch Eröffnung einer Einzahlung Geld zu verdienen. Um alles zu sehen, müssen Sie nicht zu einem separaten Bildschirm wechseln. Scrollen Sie einfach das Band und der Inhalt auf dem Bildschirm ist für die einfache Interaktion mit dem Band optimiert.

    Die Hauptsache in der Mitte.Die wichtigsten Maßnahmen: Auffüllen, Bezahlen, Übertragen ist immer verfügbar, auch wenn Sie mit Karten oder Kontoauszügen interagieren.



    Der Status des Hauptbildschirms bei der Interaktion mit einer Liste von Karten und Ereignissen.




    Herausforderung Nr. 2: Eröffnungszahlung


    Der zweite vorgeschlagene Anwendungsfall klang wie folgt:
    „Ich möchte als Kunde der Alfa-Bank, die über eine Karte verfügt, die ich regelmäßig verwende, eine Einlage in Höhe von 20.000 Griwna für einen Zeitraum von 12 Monaten eröffnen, um meine Mittel aufzustocken.“

    Die Alfa-Bank bietet verschiedene Optionen für Einlagen in verschiedenen Währungen, für unterschiedliche Zeiträume und Zinssätze.

    Insight # 1 In
    Anbetracht des Anwendungsfalls erarbeiten wir nur das Szenario der Eröffnung einer Einzahlung in der Landeswährung.

    Erkenntnis Nr. 2
    Je nach Anwendungsfall ist der Kunde an einer Einlage für ein Jahr interessiert, so dass wir bei dieser Entscheidung auch keine Spareinlage mit geringerer Rendite berücksichtigen.

    Summe: Unsere Aufgabe ist es, die rentabelste Einlage für den Kunden mit einem hohen Zinssatz für einen Zeitraum von 3 bis 18 Monaten zu verkaufen, wobei die Zinsen am Ende oder monatlich gezahlt werden.

    Person bilden




    Wir schreiben das Skript




    Benutzerpfad




    Und wir werden die Schnittstellenlösungen für jede Stufe des Benutzerpfads analysieren.




    Um eine Einzahlung in einer mobilen Anwendung zu eröffnen, gehen Sie am besten in den entsprechenden Abschnitt des Menüs. Der Bildschirm informiert Sie kurz über die Bedingungen für die Einlage von Einlagen und konzentriert sich auf die Möglichkeit, die Erträge aus dem Investitionsbetrag zu berechnen.

    Es gibt jedoch einen anderen Weg : Gehen Sie direkt zu den berechneten Einzahlungsoptionen direkt vom Hauptbildschirm der mobilen Bank aus. Mit speziellen Algorithmen bietet das System die Möglichkeit, eine Kaution für die Kunden zu eröffnen, die aufgrund einer Reihe von Zeichen am meisten dazu neigen (z. B. Kartenkontoguthaben).








    Die Darstellung der Einlagen ist maximal vereinfacht und besteht aus zwei Einstellungen:

    • Zinsgenerierungsmethode
    • "Einlagefrist / Zinssatz".

    Die Wahl der Methode, um Interesse zu erzielen, wird in Form von Karten implementiert, die in einem Schieberegler zusammengefasst sind.

    Daher ist der Schlüssel auf dem Bildschirm immer der Zinssatz und das Einkommen.

    Die Anzeige eines angemessenen Zinssatzes spielt eine wichtige Rolle beim Aufbau von Vertrauen. Auf der offiziellen Website der Bank werden nun die Taktiken der verborgenen Bedingungen angewandt, wenn der Benutzer erhebliche Anstrengungen unternehmen muss, um echte Daten zu erhalten, was eine gewisse Peinlichkeit erzeugt und das Vertrauen mindert.








    In Anlehnung an die klassische Bestellung im Online-Shop enthält jede Phase der Einzahlung die wichtigsten Informationen: die Höhe der Investition, die Laufzeit, den Zinssatz und die Vorteile.

    Geld auf verschiedene Weise einzahlen.

    Ein deutlich erhöhter Verantwortungsbereich kann zu einer Ablehnung führen, wenn der Benutzer dort keine Antwort auf Fragen hat. Mit dem Alpha-Chat, der direkt in diesem Bildschirm verfügbar ist, können Sie das Filament reduzieren. Keine Notwendigkeit, irgendwohin zu gehen.





    Dieser Bildschirm wird nur angezeigt, wenn der Benutzer mehrere Karten hat. Ist nur eine Karte vorhanden, erfolgt der Übergang zur Zahlungsbestätigung sofort.

    Der Bildschirm konzentriert sich auf Karten, die für die Bezahlung geeignet sind.

    Wenn der Benutzer andere Karten hat, die für diese Zahlung nicht geeignet sind, werden diese ebenfalls angezeigt, jedoch in einer separaten Liste. Das Gefühl eines Fehlers entsteht also nicht: „Stoppen, ich wollte mit einer anderen Karte bezahlen, wo ist das? Wahrscheinlich funktioniert etwas nicht. "






    Der Bildschirm für die endgültige Einzahlung enthält alle wichtigen Informationen zu Einzahlung, Zahlungsweise und Zahlungsbetrag.

    Die Beschriftung unter der Schaltfläche erinnert Sie daran, dass dies alles ist, was Sie für eine Einzahlung benötigen. Es ist nicht nötig, die Bank zu besuchen.




    Auf dem letzten Bildschirm werden dem Benutzer Informationen über die erfolgreiche Eröffnung der Einzahlung angezeigt. 

    Um den Benutzer emotional zu unterstützen, nachdem er sich von Geld getrennt hat, wird er stark an den Wert erinnert: das Einkommen, das er am Ende der Einzahlungsfrist erhält.

    Die Schaltfläche "Meine Einzahlungen anzeigen" bringt den Benutzer zur normalen Benutzeroberfläche der Anwendung zurück.






    Bei einer aktiven Einzahlung ändert sich die Ansicht "Einzahlung". Der Schwerpunkt liegt auf offenen Einlagen. 

    Die Einzahlung ist anhand des Investitionsbetrags leicht zu identifizieren.

    Der Fortschrittsbalken ermöglicht Ihnen, den Status der Einzahlung schnell zu verfolgen. Vorbehaltlich der Eröffnung einer Einzahlung mit einer monatlichen Zinszahlung erscheinen die entsprechenden Segmente in der Fortschrittsleiste. Erzielung einer Segmentzinszahlung. 

    Um die Einzahlungseinstellungen zu verwalten, klicken Sie einfach darauf (das in der gesamten Anwendung übliche Muster).





    Das Ziel ist erreicht, der Kunde ist zufrieden:


    „Mein Geld ist an einem sicheren Ort und arbeitet für mich. Eine Einzahlung zu eröffnen war so einfach! “

    72 Stunden für alles


    Der Schwerpunkt unserer Arbeit lag auf der Schnittstelle des Prototyps und zusätzlich dazu wurden mehrere Layouts der Hauptbildschirme gezeichnet. Ein anderer Teil der Zeit war die Gestaltung einer interaktiven Präsentation. Infolgedessen verbrachte die gesamte Quest 72 Stunden innerhalb von 5 Arbeitstagen.

    Ergebnis:


    In dieser Geschichte geht es auch darum, dass nur begrenzte Ressourcen und Zeit zur Verfügung stehen, und Sie können bequemere und nützlichere Schnittstellen erstellen.

    In Anbetracht des Zeitmangels und des Status der Aufgabe haben wir die üblichen Konstruktionsprozesse erheblich vereinfacht und zwei wichtige Schritte vernachlässigt: die Forschung und das vollständige Testen.

    In nur fünf Tagen und mit Hilfe einer einfachen Methodik ist es uns jedoch gelungen, eine benutzerfreundlichere Benutzeroberfläche zu erstellen, als die, mit der tausende Bankkunden täglich zu tun haben.

    Bis zum Ende lesen Hier ist der versprochene Bonus - ein interaktiver Prototyp, der gespielt werden kann .

    PS Wenn dieses Material nützlich war, gibt es noch mehr .

    Jetzt auch beliebt: