UX/UI design for workflow management

The AI that keeps banking safe

Cybersecurity

Web Application

London

Subtle white arrow pointing down
CLIENTCallsign Ltd.
LOCATIONUK and USA
TEAMUX designer, UI designer, interaction designer, React developer, project manager, product owner, software architect

Callsign is a cybersecurity startup. They raised a series A of £30 Million to launch their security and authentication engine for banks.

Callsign wanted a user interface design for fraud analysts to design workflows for the AI. After months of trying, their in-house design team got stuck. With the first customer demos coming up, they needed a best in class UX/UI design for workflows- and fast.

The focus of the UX/UI design project with Creative Navy was the policy engine, the tool used by fraud analysts in banks to prescribe behavioural parameters to the AI.


OUR CONTRIBUTIONS

UX Design

UI Design - Design System

Prototyping

React development

Interaction Design

D3 development

Information Architecture

Quality Assurance





User experience and visual user interface design for workflow tool shwoing nodes and vertices

CONTROL AI WORKFLOWS WITHOUT WRITING CODE

The interface design lets fraud analysts design workflows with ease. The UX concept makes use of only 3 gestures to create workflow elements, to change the node type and to connect the nodes in the workflow.

Collaboration features complete the user experience without distracting from the main task, which is to implement a security policy into an AI workflow.

The 5 step process of controlling workflows through the user interface

FIND YOUR WAY WITH HUMAN CENTRIC JOURNEYS

Enterprise applications tend to have complicated linear user flows. This was the status quo at Callsign.

We redesigned the user flows completely to reflect user needs, rather than the database perspective. In the new user experience, policies are edited in context and users get immediate feedback. There’s no need for an abstract experience when users change what they see and see what they change.

These human centric user flows are the foundation of a consumer grade UX and UI.

Detail of user journey showing the steps of policy management flow

A SCALABLE DESIGN SYSTEM

In 8 weeks we went from design challenge to a detailed design system. We created a system of UI components where states are documented meticulously. It includes interactions, the principles that stand behind them and different ways of using the UI components in context.

The clear logic and minimalist approach of the page designs coupled with the thorough design system reduced development time by 30%. Thus it became possible for the startup to meet the deadline of the approaching client demos.

Detail of design system for cybersecurity app with typography, colours, icons, navigation and button styles
Screenshtot from Zeplin showing user interface for policy management with natural language component

EVALUATE WORKFLOWS USING DATA

Users evaluate workflows in the data visualisation feature. It predicts the likely behaviour of the bank’s security system, given a set of policies.

The user experience is structured into two components. First, a natural language interaction to create the simulation context. Users are familiar with this UX and UI from other parts of the application.

Second, the design of the data visualisation is as simple as can be to provide focus on the essence of the data visualisation outcome. We made this highly abstract feature user-friendly, by reducing cognitive load.

Sankey Diagram for cybersecurity data visualisation of security policy performance
Quotes

It was excellent for me to see Creative Navy's intellectual capabilities, their expert domain knowledge and how they articulate solutions to a problem.

CTO of the customer of the design project
Yogesh PatelCTO @Callsign
Detail from the London Cheapside office of the UX design case study customer
View of St Paul's from the London based office of the design case study customer

UX/UI DESIGN TRANSFORMATION IN 8 WEEKS

The new design was created in 6 weeks. It covered the design for the workflow creator and for the policy management area. Most of the design was delivered in 4 weeks, including parts of the UI design. Thus, developers started coding the frontend using React and the D3 library. The product demo was ready 4 weeks later.

The success of the demo was instant as major UK banks signed up to use the product. Callsign gained a strong foothold in the market, pleasing investors.

With the design system completed, we organised a handover for their in-house design team. Ever since, they have used the design system for other areas of the Callsign product range.






Design elements

OUTCOMES

Contracts with major UK banks won based on demo

UX/UI design delivered in 6 weeks

Coded frontend with D3 delivered in 4 weeks

Time to market reduced by 6 months

Our design system is still in use 2 years later




See Also

LLOYDS BANKING GROUP

Lloyds banking Group selects Callsign for mitigating fraud

TECHCRUNCH

Callsign pulls in $35M Series A for its adaptive authentication platform

WORLD ECONOMIC FORUM DAVOS

Callsign Awarded as Technology Pioneer

SUNDAY TIMES

Callsign Announced as a ‘Disruptor to Watch’ by The Sunday Times