Diseño UX/UI para la gestión del workflow

La IA que protege a la banca

Ciberseguridad

Aplicación web

London

CLIENTCallsign Ltd.
LOCATIONReino Unido, Estados Unidos y España
EQUIPODiseñador de UX, diseñador de UI, diseñador de interacción, desarrollador de React, gestor de proyectos, propietario del producto, arquitecto de software

Callsign es una startup de ciberseguridad. Recaudaron una serie A de 30 millones de euros para lanzar su motor de seguridad y autenticación para bancos.

Callsign quería un diseño de interfaz de usuario para que los auditores forenses diseñaran workflows para la IA. Tras meses intentándolo, su equipo de diseño interno se atascó. Con las primeras demostraciones a clientes a la vuelta de la esquina, necesitaban el mejor diseño de UX/UI para workflows, y rápido.

El proyecto de diseño UX/UI con Creative Navy se centró en el motor de políticas, la herramienta utilizada por los auditores forenses de los bancos para prescribir parámetros de comportamiento a la IA.

NUESTRAS CONTRIBUCIONES

UX Design

UI Design - Design System

Creación de prototipos

Desarrollo React

Diseño de interacción

Desarrollo D3

Arquitectura de la información

Garantía de calidad

Experiencia de usuario y diseño de la interfaz visual de una herramienta de workflow que muestra nodos y vértices.

CONTROLA LOS WORKFLOWS DE IA SIN ESCRIBIR CÓDIGO

El diseño de la interfaz permite a los auditores forenses diseñar workflows con facilidad. El concepto de UX utiliza solo 3 gestos para crear elementos de workflow, cambiar el tipo de nodo y conectar los nodos del workflow.

Las funciones de colaboración completan la experiencia del usuario sin distraerle de la tarea principal, que es implantar una política de seguridad en un workflow de IA.

El proceso de 5 pasos para controlar los workflows a través de la interfaz de usuario

ENCUENTRA TU CAMINO CON VIAJES CENTRADOS EN EL SER HUMANO

Las aplicaciones empresariales tienden a tener complicados flujos de usuario lineales. Este era el status quo en Callsign.

Rediseñamos por completo los flujos de usuario para reflejar sus necesidades, en lugar de la perspectiva de la base de datos. En la nueva experiencia de usuario, las políticas se editan en contexto y los usuarios obtienen información inmediata. No hay necesidad de una experiencia abstracta cuando los usuarios cambian lo que ven y ven lo que cambian.

Estos flujos de usuario centrados en el ser humano son la base de una experiencia de usuario y una interfaz de usuario de calidad para el consumidor.

Detalle del recorrido del usuario que muestra los pasos del flujo de gestión de políticas

UN SISTEMA DE DISEÑO ESCALABLE

En 8 semanas pasamos de un reto de diseño a un sistema de diseño detallado. Creamos un sistema de componentes de interfaz de usuario en el que los estados se documentan meticulosamente. Incluye las interacciones, los principios que las sustentan y las distintas formas de utilizar los componentes de la interfaz de usuario en su contexto.

La lógica clara y el enfoque minimalista de los diseños de las páginas, junto con el minucioso sistema de diseño, redujeron el tiempo de desarrollo en un 30%. De este modo, la startup pudo cumplir los plazos de las demos de clientes que se aproximaban.

Detalle del sistema de diseño de la aplicación de ciberseguridad con tipografía, colores, iconos, estilos de navegación y botones
Screenshtot from Zeplin showing user interface for policy management with natural language component

EVALUAR LOS WORKFLOWS UTILIZANDO DATOS

Los usuarios evalúan los workflows en la función de visualización de datos. Predice el comportamiento probable del sistema de seguridad del banco, dado un conjunto de políticas.

La experiencia del usuario se estructura en dos componentes. En primer lugar, una interacción en lenguaje natural para crear el contexto de simulación. Los usuarios están familiarizados con esta UX y UI de otras partes de la aplicación.

En segundo lugar, el diseño de la visualización de datos es lo más sencillo posible para centrarse en la esencia del resultado de la visualización de datos. Hemos facilitado el uso de esta función tan abstracta reduciendo la carga cognitiva.

Diagrama de Sankey para la visualización de datos de ciberseguridad sobre el rendimiento de las políticas de seguridad
Quotes

Fue excelente para mí ver las capacidades intelectuales de Creative Navy, sus conocimientos especializados y cómo articulan soluciones a un problema.

CTO del cliente del proyecto de diseño
Yogesh PatelCTO @Callsign
Detalle de la oficina de Barcelona del cliente del caso práctico de diseño UX
Vista de la oficina en Barcelona del cliente del estudio de caso de diseño
Elementos del diseño

TRANSFORMACIÓN DEL DISEÑO UX/UI EN 8 SEMANAS

El nuevo diseño se creó en 6 semanas. Abarcó el diseño para el creador de workflows y para el área de gestión de políticas. La mayor parte del diseño se entregó en 4 semanas, incluidas partes del diseño de la interfaz de usuario. Así, los desarrolladores comenzaron a codificar el frontend utilizando React y la biblioteca D3. La demo del producto estuvo lista 4 semanas después.

El éxito de la demostración fue instantáneo, ya que importantes bancos se inscribieron para utilizar el producto. Callsign se afianzó en el mercado, complaciendo a los inversores.

Una vez completado el sistema de diseño, organizamos una entrega para su equipo de diseño interno. Desde entonces, han utilizado el sistema de diseño para otras áreas de la gama de productos del indicativo.

RESULTADOS

Contratos con grandes bancos basados en demostraciones

Diseño UX/UI en 6 semanas

Frontend codificado con D3 entregado en 4 semanas

Reducción del plazo de comercialización en 6 meses

Nuestro sistema de diseño sigue utilizándose 2 años después

Véase también

LLOYDS BANKING GROUP

Lloyds banking Group elige Callsign para mitigar el fraude

TECHCRUNCH

Callsign obtiene 35 millones de dólares para su plataforma de autenticación adaptativa

WORLD ECONOMIC FORUM DAVOS

Callsign premiado como pionero tecnológico

SUNDAY TIMES

El Sunday Times anuncia Callsign como "Disruptor a seguir"