UX und UI Design für sicheres Online Banking
Callsign ist ein Cybersecurity Start-up, das ein AI-Tool für Authentifizierung patentiert hat. In einer Series A bekamen sie 30 Millionen Euro, um das Angebot für Banken marktreif zu machen.
Sie brauchten ein User Interface Design mit dem User Sicherheitsprotokolle gestaltet und kontrolliert werden konnten. Einige Monate lang haben sie versucht das User Experience Design intern zu erstellen, aber ohne Erfolg.
Die ersten Kundendemos rückten immer näher. Deshalb haben sie unsere UX/UI Design Agentur beauftragt ihnen mit dem User Interface Design zu helfen. Wir hatten aber nur wenig Zeit.
UNSER BEITRAG
UX Design
UI Design - Design System
Design für Prototyp
React Entwicklung
Interaktionsdesign
D3 Entwicklung
Informationsarchitektur
Qualitätskontrolle
ABLÄUFE OHNE KODE GESTALTEN
Durch das User Interface gestalten Sicherheitsexperten Abläufe, die von dem AI-Engine übernommen werden. Usability ist Minimalismus. Deshalb haben wir im UX Designkonzept drei Aktionen identifiziert mit denen Benutzer Elemente in einem Ablauf erstellen und verknüpfen können.
Das Modul für Abläufe hat mehrere Teamfeatures. Die User Experience erlaubt es mehreren Benutzern, gleichzeitig an einem Ablauf zu arbeiten.
ARCHITEKTUR FÜR USER EXPERIENCE
In Enterprise Software ist es üblich, dass die Informationsarchitektur einem Index gleicht, der für die Anwender wenig benutzerfreundlich ist. Das war auch der Stand bei Callsign als unsere UX Agentur sich an die Arbeit gemacht hat.
Wir haben die User Flows komplett geändert und eine Logik entworfen, die zu den Erwartungen der Benutzer passt. Beispiel: Protokolle werden direkt im Kontext bearbeitet, samt Feedback. Somit wirkt das User Experience weniger abstrakt und die Navigation fällt kinderleicht.
Diese Art von intuitiver User Experience kennt man meistens aus Apps, die sich an Verbraucher wenden. Eine logische Informationsarchitektur ist allerdings auch in allen anderen Bereichen von entscheidender Bedeutung.
EIN SKALIERBARES DESIGN SYSTEM
In acht Wochen haben wir es vom ersten Design bis zum Design System geschafft. Das System beinhaltet alle UI Design Komponenten, inklusive den Zuständen der Komponenten. Die Dokumentation beinhaltet auch die Interaktionen mit den Designkomponenten und die Regeln, die hinter dem Design stehen.
Die klare Logik der Navigation und der Minimalismus im Designs, plus die Klarheit des Designsystems, haben den Entwicklungsaufwand um 30% reduziert. So haben wir es den Entwicklern ermöglicht das Kundendemo rechtzeitig auf die Beine zu stellen.
USER EXPERIENCE FÜR DATENVISUALISIERUNG
Ein wichtiger Bestandteil des Tools ist die Datenvisualisierung. Benutzer können historische Daten verwenden, um die Auswirkungen eines neuen Ablaufs zu simulieren.
Die User Experience für dieses Modul besteht aus zwei Teilen. Als Erstes gibt es eine Natural Language Eingabe, um den Kontext der Simulation zu definieren. Benutzer kennen dieses UX und UI aus anderen Teilen der Applikation.
Im zweiten Teil werden Ergebnisse visualisiert. Das Volumen der Daten kann leicht überwältigend wirken, deshalb haben wir im UI Design auf Minimalismus gesetzt. Benutzer sollen sich auf die Daten konzentrieren, ohne von Designelementen abgelenkt zu werden.
Ich fand es toll zu sehen, wie kompetent Creative Navy ist, dass sie unser Produkt verstehen und dass sie immer Lösungen für Probleme finden.
UX UND UI DESIGN IN ACHT WOCHEN GELIEFERT
Das neue User Interface wurde in sechs Wochen erstellt. Es beinhaltete das Design für das Ablauftool und das Design für die Wartung der Sicherheitsprotokolle. Der grösste Teil des Designs wurde in vier Wochen geliefert, inklusive den UI Designs. Die Entwickler konnten sich also in der vierten Woche an die Arbeit machen und haben dann noch vier Wochen gebraucht um das Kundendemo mit React und D3 vorzubereiten.
Das Demo war ein grosser Erfolg und Callsign konnte mehrere Grossbanken in UK und Deutschland als Kunden gewinnen.
Am Ende des Designprojektes haben wir das interne Designteam bei Callsign in das Design System eingeführt. Später haben sie unser Design System auch für andere Produkte benutzt.
ERGEBNISSE
Verträge mit ersten Bankkunden anhand des Demos
UX/UI Design in 6 Wochen geliefert
Frontend Kode mit D3 in 8 Wochen geliefert
Time-to-market um 6 Monate reduziert
Unser Design System wird auch nach 2 Jahren benutzt
Siehe auch
Callsign als Technologie Pionier gekürt
Callsign als ‘Disruptor to Watch’ genannt
Siehe auch
Callsign als Technologie Pionier gekürt
Callsign als ‘Disruptor to Watch’ genannt