Concepto de diseño para Zeeves

Proyecto: Diseño de la versión web de Zeeves y sobre para tarjetas físicas.

Anteriormente, ya habíamos trabajado con Zeeves implementando conjuntamente un servicio para la emisión y el uso de tarjetas Visa basado en un bot de Telegram.

Para atraer a una nueva audiencia y ampliar la funcionalidad, se tomó la decisión de crear una versión web del proyecto. De este modo, el producto se independiza del ecosistema de Telegram, lo que permite aumentar el público objetivo.

Antes de comenzar con el trabajo, recibimos algunos referentes por parte del cliente. Su análisis nos ayudó a materializar las ideas del cliente y a crear un diseño con la mejor experiencia de usuario posible.

Una parte fundamental en el desarrollo de grandes proyectos con un ecosistema complejo es el UI Kit. Antes de proceder con el diseño directo de las pantallas, preparamos una arquitectura de diseño a gran escala que incluye diversos componentes: botones, campos de entrada, iconos, ilustraciones, paletas de colores y mucho más.

El UI Kit garantiza la uniformidad del estilo visual de los elementos de la interfaz y simplifica el proceso de colaboración entre diseñadores y desarrolladores.

La versión web del banco, cuyo diseño se detalla a continuación, aún no ha sido lanzada debido a que el cliente se encuentra en fase de búsqueda de inversores. No obstante, basándose en el UI Kit desarrollado, Zeeves está creando widgets mediante la reutilización de estilos y componentes existentes, manteniendo así la coherencia visual en todos sus productos.

Nuestra tarea consistió en trasladar la funcionalidad del bot de Telegram a una aplicación web. Preparamos decenas de páginas distintas y nos esforzamos por contemplar la mayor cantidad posible de estados para ventanas y componentes: procesos de carga, errores y operaciones exitosas. De este modo, facilitamos considerablemente el trabajo de los desarrolladores frontend.

Para acceder a toda la funcionalidad del sitio, el usuario debe completar la verificación en el sistema. Para ello, es necesario confirmar los datos de identidad y responder a algunas preguntas sobre sus finanzas. Al finalizar, el usuario recibe un documento que acredita su identidad.

En esta página, el usuario tiene acceso a una visión general de sus finanzas, su distribución por divisas y la información de su tarjeta. Los clientes del banco pueden monitorizar fácilmente sus transacciones, consultar el historial de pagos y gestionar sus cuentas.

En el centro del ecosistema se encuentra el banco Zeeves, al cual se pueden conectar diversos monederos. De esta manera, el usuario puede gestionar sus criptoactivos de forma cómoda.
Para conectar un monedero cripto, es necesario seleccionar la red de criptomonedas de las opciones ofrecidas, indicar el monedero y los tokens. Tras la confirmación, este quedará conectado con éxito a la cuenta del usuario.

La página de transacciones ofrece una funcionalidad intuitiva para realizar el seguimiento del historial de transferencias. La característica principal es que permite rastrear tanto los movimientos de la tarjeta como los del monedero cripto.
Los pagos con tarjeta se muestran en rojo, las transferencias entre cuentas propias en naranja, los depósitos y retiros de fondos en gris, las transferencias SWIFT en violeta y, por último, las transferencias entre cuentas de usuarios en azul.

Para solicitar una tarjeta bancaria, el primer paso para el usuario es elegir el tipo deseado (virtual o física). La tarjeta virtual se emite de forma automática, mientras que para obtener la versión física es necesario gestionar el envío indicando la dirección de entrega. También hemos diseñado un sobre especial en el que se entrega la tarjeta, del cual daremos más detalles a continuación.

Además del diseño para la versión web del banco, desarrollamos las maquetas de los sobres para las tarjetas. Se presentan en un formato de hoja A4, con una tecnología específica de plegado y maquetación que respeta las zonas de seguridad. En este sobre se inserta la tarjeta y se incluye información de referencia, así como los datos personales del destinatario.

Fue muy interesante para nosotros trabajar con productos impresos; analizamos una gran cantidad de referentes y estudiamos a fondo las particularidades de la preparación de este tipo de maquetas para imprenta. Como resultado, logramos un producto estéticamente atractivo que refleja la identidad de la marca y permite a los clientes del banco recibir sus tarjetas de forma segura y en perfecto estado.

Hemos desarrollado una librería global de estilos que incluye más de 10 componentes, paletas de colores y diversos elementos de diseño, así como varias decenas de maquetas de páginas. Mantenemos una comunicación constante con el cliente, ¡quien ya está utilizando activamente el UI Kit desarrollado para la implementación de sus proyectos!