UX/UI-design för arbetsflödeshantering

AI som håller bankerna säkra

Cybersäkerhet

Webbapplikation

Stockholm

KLIENTCallsign Ltd.
PLATSStorbritannien, USA och Tyskland
TEAMUX-designer, UI-designer, interaktionsdesigner, React-utvecklare, projektledare, produktägare, programvaruarkitekt
WEBBPLATS

Callsign är ett nystartat företag inom cybersäkerhet. De fick en serie A på 30 miljoner pund för att lansera sin säkerhets- och autentiseringsmotor för banker.

Callsign ville ha en användargränssnittsdesign för bedrägerianalytiker för att utforma arbetsflöden för AI:n. Efter månader av försök fastnade deras interna designteam. Med de första kunddemonstrationerna på gång behövde de en förstklassig UX/UI-design för arbetsflöden - och det snabbt.

Fokus för UX/UI-designprojektet med Creative Navy var policymotorn, det verktyg som används av bedrägerianalytiker i bankerna för att föreskriva beteendeparametrar till AI:n.

VÅRA BIDRAG

UX Design

UI-design - Design av system

Prototypframställning

Utveckling av React

Interaktionsdesign

D3-utveckling

Informationsarkitektur

Kvalitetssäkring

Användarupplevelse och visuell utformning av användargränssnitt för arbetsflödesverktyg som visar noder och hörn.

KONTROLLERA AI-ARBETSFLÖDEN UTAN ATT SKRIVA KOD

Gränssnittets utformning gör det enkelt för bedrägerianalytiker att utforma arbetsflöden. UX-konceptet använder endast tre gester för att skapa arbetsflödeselement, ändra nodtyp och för att koppla ihop noderna i arbetsflödet.

Samarbetsfunktioner kompletterar användarupplevelsen utan att distrahera från huvuduppgiften, som är att implementera en säkerhetspolicy i ett AI-arbetsflöde.

Den femstegiga processen för att styra arbetsflöden via användargränssnittet

HITTA DIN VÄG MED MÄNNISKOCENTRERADE RESOR

Företagsapplikationer tenderar att ha komplicerade linjära användarflöden. Detta var status quo på Callsign.

Vi utformade om användarflödena helt och hållet för att återspegla användarnas behov, snarare än databasperspektivet. I den nya användarupplevelsen redigeras policyer i sitt sammanhang och användarna får omedelbar feedback. Det finns inget behov av en abstrakt upplevelse när användarna ändrar vad de ser och ser vad de ändrar.

Dessa människocentrerade användarflöden är grunden för en UX och UI av konsumentkvalitet..

Detaljerad användarresa som visar stegen i flödet för hantering av policyer.

ETT SKALBART DESIGNSYSTEM

På åtta veckor gick vi från en designutmaning till ett detaljerat designsystem. Vi skapade ett system av användargränssnittskomponenter där tillstånden dokumenteras noggrant. Det inkluderar interaktioner, principerna som står bakom dem och olika sätt att använda UI-komponenterna i sammanhanget.

Den tydliga logiken och det minimalistiska tillvägagångssättet för sidornas utformning i kombination med det grundliga designsystemet minskade utvecklingstiden med 30 %. Därmed blev det möjligt för startupen att hålla tidsfristen för de annalkande kunddemonstrationerna.

Detaljerat designsystem för cybersäkerhetsapp med typografi, färger, ikoner, navigering och knappstilar.
Screenshtot from Zeplin showing user interface for policy management with natural language component

UTVÄRDERA ARBETSFLÖDEN MED HJÄLP AV DATA

Användarna utvärderar arbetsflöden i datavisualiseringsfunktionen. Den förutsäger det sannolika beteendet hos bankens säkerhetssystem, givet en uppsättning riktlinjer.

Användarupplevelsen är strukturerad i två delar. Först en interaktion på naturligt språk för att skapa simuleringskontexten. Användarna är bekanta med denna UX och UI från andra delar av applikationen.

För det andra är utformningen av datavisualiseringen så enkel som möjligt för att fokusera på kärnan i datavisualiseringsresultatet. Vi har gjort denna mycket abstrakta funktion användarvänlig genom att minska den kognitiva belastningen.

Sankey-diagram för visualisering av data om cybersäkerhet och säkerhetsstrategiernas prestanda
Quotes

Det var utmärkt för mig att se Creative Navys intellektuella kapacitet, deras expertkunskaper och hur de formulerar lösningar på ett problem.

CTO hos designprojektets kund
Yogesh PatelCTO @Callsign
Detalj från London Cheapside-kontoret för kunden som genomförde fallstudien om UX-design.
Utsikt över St Paul's från den kund som genomförde fallstudien i London.
Designelement

OMVANDLING AV UX/UI-DESIGN PÅ 8 VECKOR

Den nya designen skapades på 6 veckor. Den omfattade utformningen av arbetsflödesskaparen och området för policyhantering. Större delen av designen levererades på 4 veckor, inklusive delar av UI-designen. Således började utvecklarna koda frontend med hjälp av React och D3-biblioteket. Produktdemonstrationen var klar 4 veckor senare.

Framgången med demonstrationen var omedelbar då stora brittiska banker anmälde sig för att använda produkten. Callsign fick ett starkt fotfäste på marknaden, vilket gladde investerarna.

När designsystemet var färdigt organiserade vi en överlämning för deras interna designteam. Sedan dess har de använt designsystemet för andra delar av Callsigns produktsortiment.

RESULTAT

Kontrakt med stora brittiska banker som vunnits på grundval av demonstrationer

UX/UI-design levererad på 6 veckor

Kodad frontend med D3 levererad på 4 veckor

Tiden till marknadsintroduktion minskad med 6 månader

Vårt designsystem används fortfarande 2 år senare

Se också

LLOYDS BANKING GROUP

Lloyds banking Group väljer Callsign för att minska bedrägerier

TECHCRUNCH

Callsign drar in 35 miljoner dollar i serie A för sin adaptiva autentiseringsplattform

WORLD ECONOMIC FORUM DAVOS

Callsign tilldelas utmärkelsen teknikpionjär

SUNDAY TIMES

Callsign har av Sunday Times utnämnts till 'Disruptor to Watch'.