UX und UI Design für AI & Sicherheitssysteme

Design für sicheres Onlinebanking

Cybersecurity

Web App

Deutschland

KUNDECallsign Ltd.
ORTUK, USA und Deutschland
TEAMUX Designer, UI Designer, Interaction Designer, React Entwickler, Projektleiter, Produktentwickler, Softwarearchitekt
WEBSEITE

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 startbereit zu machen.

Sie brauchten ein User Interface Design mit dem User Sicherheitsprotokolle gestalten und kontrollieren. Einige Monate lang haben sie versucht das User Experience Design intern zu erstellen, aber ohne Erfolg. Die ersten Kundendemos rückten immer näher.

Um die Banken als Kunden zu gewinnen hätte nur ein top UX/UI Design gereicht. 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 3 Aktionen identifiziert mit denen Benutzer Elemente in einem Ablauf erstellen und verknüpfen.

Das Modul für Abläufe hat mehrere Teamfeatures. Die User Experience erlaubt es mehreren Benutzern gleichzeitig an einem Ablauf zu arbeiten.

Diagramm dass die User Interaktion mit dem AI Tool zeigt.

EINE LOGISCHE INFORMATIONSARCHITEKTUR

In Enterprise Software ist es üblich, dass die Informationsarchitektur einem Index gleicht, obwohl es für User undurchdringlich 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, aber im professionellen Bereich ist eine logische Informationsarchitektur genauso wichtig.

EIN SKALIERBARES DESIGN SYSTEM

In 8 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.

Quotes

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.

Yogesh PatelCTO @Callsign

UX/UI DESIGN IN 8 WOCHEN GELIEFERT

Das neue User Interface wurde in 6 Wochen erstellt. Es beinhaltet das Design für das Ablauftool und das Design für die Wartung der Sicherheitsprotokolle. Der größte Teil des Designs wurde in 4 Wochen geliefert, inklusive den UI Designs. Die Entwickler konnten sich also in der 4. Woche an die Arbeit machen und haben dann noch 4 Wochen gebraucht um das Kundendemo mit React und D3 vorzubereiten.

Das Demo war ein großer Erfolg und Callsign konnte mehrere Großbanken 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

LLOYDS BANKING GROUP

Lloyds Banking Group arbeitet mit Callsign

TECHCRUNCH

Callsign bekommt $35M in Series A um das Produkt umzusetzen

WORLD ECONOMIC FORUM DAVOS

Callsign als Technologie Pionier gekürt

SUNDAY TIMES

Callsign als ‘Disruptor to Watch’ genannt