Una pantalla,
una decisión.
Rediseño de EvocaTouch, la app de banca móvil de Evoca Bank (Armenia). El producto ya existía; el camino para entrar en él, no.
El problema no era estético.
El alta de usuario metía cuatro tipos de documento, datos personales y verificación en un único formulario. Pedía datos que el banco ya tenía o no necesitaba. Y no incluía ningún paso para crear contraseña. Revisamos el flujo pantalla por pantalla con el equipo y lo reconstruí entero.
- Auditoría y rediseño del alta y de la verificación de identidad
- Pantallas de producto: inicio, tarjetas, pagos, transferencias, límites, cajeros y ajustes
- Sistema de diseño construido desde cero: tipografía, color, iconografía en tema claro y oscuro, tarjetas, rejilla y componentes
- Interfaz bilingüe armenio/inglés y multidivisa AMD/USD
No dispongo de métricas de negocio públicas de este proyecto. Lo que queda medible es el sistema sobre el que siguió construyendo el equipo de desarrollo.
Todo en una pantalla, y ninguna para la contraseña.
1 2 3 4 Desliza para ver las cinco pantallas →
- 1Cuatro tipos de documento conviviendo como pestañas dentro del mismo formulario.
- 2Número de cuenta: ¿cuál de todas debe introducir el cliente? La pantalla no lo dice.
- 3Correo electrónico: un dato que el banco no tiene y que no hace falta aquí.
- 4El paso para crear contraseña sencillamente no existía en el flujo.
Pantallas originales del producto, en armenio.
Cada paso pide una cosa y solo una.
Teléfono, código, passcode, vinculación por tarjeta o por cuenta, Face ID y contraseña. Campos innecesarios fuera; el paso que faltaba, colocado donde el usuario lo espera.
Desliza para ver el flujo completo →
Entrar debe costar menos que abrir la cartera.
Face ID como camino por defecto, contraseña como alternativa siempre visible, y un estado de error que dice qué hacer a continuación en vez de solo fallar.
El saldo primero, el resto después.
La pantalla anterior mezclaba promociones, pestañas de producto y saldo oculto. La nueva pone el total arriba, cuatro acciones frecuentes debajo, y el gasto del mes como una sola barra legible.
Izquierda: versión original. Centro y derecha: rediseño, con el panel de cuentas desplegado.
Los datos sensibles, ocultos hasta que hagan falta.
Número, caducidad y CVC aparecen al tocar o deslizar sobre la tarjeta, cada uno con su propio botón de copiar. Debajo: acciones, última operación, límite de gasto y ajustes.
Izquierda: versión original. Centro y derecha: datos ocultos y revelados.
De una cuadrícula de nueve iconos a tres bloques con jerarquía.
Favoritos arriba —con cara y nombre, no con un número de cuenta—, después transferencias, después servicios. Buscador con dictado por voz en la cabecera.
Once campos se convirtieron en tres decisiones.
De dónde, a dónde, cuánto. El banco de destino se reconoce solo por el número; el resto de datos deja de pedirse al usuario.
Todo lo que el equipo no debería volver a decidir.
Construido desde cero durante el proyecto y entregado documentado: escala tipográfica, color con contraste comprobado, iconografía en los dos temas, biblioteca de tarjetas, rejilla y componentes con todos sus estados.
Una escala, doce estilos, dos alfabetos.
Mardoto para armenio y latino, SF Display Round para las cifras grandes. Tamaño e interlineado fijados por estilo, no decididos pantalla a pantalla.
Cada tono con su contraste comprobado.
Primario, secundario, neutro y colores de sistema —éxito, error, aviso— en escalas de 50 a 900, con el nivel AA/AAA anotado en cada muestra.
- Gradientes definidos como pares de tokens, no como valores sueltos
- Los mismos tokens en tema claro y oscuro
El set completo de iconos, en tres tamaños y dos temas.
16, 24 y 32 px, dibujados uno a uno y no tomados de una librería: grosor, radios y terminales consistentes con la marca.
Rejilla, plásticos y símbolos.
Rejilla de 4 columnas sobre base de 8 px, márgenes de 16 y medianiles de 8, con alturas fijas para barra de estado, navegación y tab bar. Y la biblioteca completa de tarjetas: Visa, Mastercard, ArCa, UnionPay, regalo y co-branding.
Lo que queda cuando el proyecto termina.
El rediseño salió a producción. Pero el entregable que sigue trabajando es el otro: un sistema donde el color tiene contraste comprobado, los iconos existen en los dos temas, la rejilla está escrita y los componentes tienen todos sus estados. El equipo de desarrollo siguió construyendo sobre él sin volver a preguntar.
