<img height="1" width="1" style="display:none" alt="" src="https://px.ads.linkedin.com/collect/?pid=1603620&fmt=gif"/>
UX und UI Design für AI & Sicherheitssysteme

UX und UI 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 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

UI Design für Diagramm Tool für Abläufe.

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.

Diagramm dass die User Interaktion mit dem AI Tool zeigt.

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.

User Flow Diagramm mit 10 Seiten der Webapplikation

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.

Auszug aus dem Design System mit UI Design Komponenten
Screenshtot from Zeplin showing user interface for policy management with natural language component

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.

UI Design mit Datenvisualisierung für Sicherheitsprotokolle
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.

Ingenieur der mit dem Designteam arbeitet
Yogesh PatelCTO @Callsign
Mann geht im Flur des Büros wo Designworkshops gehalten werden.
Ansicht aus dem Büro des Designkunden
Design-Elemente

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ößte 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 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