UX/UI design til workflow management

Den kunstige intelligens, der holder bankerne sikre

Cybersikkerhed

Webapplikation

London

KLIENTCallsign Ltd.
PLACERINGStorbritannien, USA og Danmark
TEAMUX-designer, UI-designer, interaktionsdesigner, React-udvikler, projektleder, produktejer, softwarearkitekt
HJEMMESIDE

Callsign er en cybersikkerhedsstartup. De rejste en serie A på 30 millioner euro for at lancere deres sikkerheds- og autentificeringsmotor til banker.

Callsign ville have et brugergrænsefladedesign til svindelanalytikere, så de kunne designe arbejdsgange til AI. Efter måneders forsøg var deres interne designteam kørt fast. Med de første kundedemoer på vej, havde de brug for det bedste UX/UI-design til workflows - og det hurtigt.

Fokus for UX/UI-designprojektet med Creative Navy var policy engine, det værktøj, der bruges af svindelanalytikere i banker til at ordinere adfærdsparametre til AI'en.

VORES BIDRAG

UX Design

UI Design - Design System

Prototyping

React udvikling

Interaction Design

D3 udvikling

Information Architecture

Kvalitetssikring

User experience og design af visuel brugergrænseflade til workflow-værktøj, der viser knuder og hjørner

STYR AI-WORKFLOWS UDEN AT SKRIVE KODE

Interface-designet gør det nemt for svindelanalytikere at designe workflows. UX-konceptet gør brug af kun tre bevægelser til at oprette workflow-elementer, ændre nodetypen og forbinde noderne i workflowet.

Samarbejdsfunktioner fuldender brugeroplevelsen uden at distrahere fra hovedopgaven, som er at implementere en sikkerhedspolitik i et AI-workflow.

5-trins processen med at kontrollere arbejdsgange gennem brugergrænsefladen

REJSER MED MENNESKET I CENTRUM

Virksomhedsapplikationer har en tendens til at have komplicerede lineære brugerflows. Det var status quo hos Callsign.

Vi har redesignet brugerflowet fuldstændigt, så det afspejler brugernes behov frem for databaseperspektivet. I den nye brugeroplevelse redigeres politikker i kontekst, og brugerne får øjeblikkelig feedback. Der er ikke behov for en abstrakt oplevelse, når brugerne ændrer det, de ser, og ser det, de ændrer.

Disse menneskecentrerede brugerflows er grundlaget for en UX og UI i forbrugerkvalitet.

Detalje af brugerrejse, der viser trinene i flowet til politikstyring

ET SKALERBART DESIGNSYSTEM

På 8 uger gik vi fra en designudfordring til et detaljeret designsystem. Vi skabte et system af UI-komponenter, hvor tilstande er dokumenteret minutiøst. Det omfatter interaktioner, de principper, der ligger bag dem, og forskellige måder at bruge UI-komponenterne på i sammenhæng.

Den klare logik og minimalistiske tilgang til sidedesignet kombineret med det grundige designsystem reducerede udviklingstiden med 30%. Dermed blev det muligt for startuppet at overholde deadlinen for de kommende kundedemoer.

Detalje af designsystem til cybersikkerhedsapp med typografi, farver, ikoner, navigation og knapstile
Screenshtot from Zeplin showing user interface for policy management with natural language component

EVALUERE ARBEJDSGANGE VED HJÆLP AF DATA

Brugere evaluerer arbejdsgange i datavisualiseringsfunktionen. Det forudsiger den sandsynlige opførsel af bankens sikkerhedssystem, givet et sæt politikker.

Brugeroplevelsen er struktureret i to komponenter. For det første en naturlig sproginteraktion til at skabe simuleringskonteksten. Brugerne er fortrolige med denne UX og UI fra andre dele af applikationen.

For det andet er designet af datavisualiseringen så enkelt som muligt for at give fokus på essensen af datavisualiseringsresultatet. Vi har gjort denne meget abstrakte funktion brugervenlig ved at reducere den kognitive belastning.

Sankey Diagram til cybersikkerhedsdatavisualisering af sikkerhedspolitikkens ydeevne
Quotes

Det var fremragende for mig at se Creative Navys intellektuelle evner, deres ekspertviden på området, og hvordan de formulerer løsninger på et problem.

CTO hos kunden i designprojektet
Yogesh PatelCTO @Callsign
Detalje fra Kopenhagen-kontoret til UX-design-casestudiekunden
Udsigt over København-baseret kontor for design case study-kunden
Designelementer

TRANSFORMATION AF UX/UI DESIGN PÅ 8 UGER

Det nye design blev skabt på 6 uger. Det dækkede designet til workflow-skaberen og til policy management-området. Det meste af designet blev leveret på 4 uger, herunder dele af UI-designet. Så udviklerne begyndte at kode frontenden ved hjælp af React og D3-biblioteket. Produktdemoen var klar 4 uger senere.

Demoen blev en øjeblikkelig succes, da store britiske banker tilmeldte sig for at bruge produktet. Callsign fik et stærkt fodfæste på markedet, og investorerne var tilfredse.

Da designsystemet var færdigt, organiserede vi en overdragelse til deres interne designteam. Lige siden har de brugt designsystemet til andre områder af Callsigns produktsortiment.

RESULTATER

Kontrakter med store britiske banker vundet baseret på demo

UX/UI-design leveret på 6 uger

Kodet frontend med D3 leveret på 4 uger

Tid til markedet reduceret med 6 måneder

Vores designsystem er stadig i brug 2 år senere

Se også

LLOYDS BANKING GROUP

Lloyds banking Group vælger Callsign til at afbøde svig

TECHCRUNCH

Callsign henter $35M Series A til sin adaptive autentificeringsplatform

WORLD ECONOMIC FORUM DAVOS

Callsign tildet som Technology Pioneer

SUNDAY TIMES

Callsign annonceret som en ‘Disruptor to Watch’ af The Sunday Times