Pantallas de la app SmartBank

Banking App para Startups/PYMES — SmartBank

Product Design • UX Research • Fintech • Mobile

smartbank · 2021–2022 · Lead / Senior Product Designer

Las PYMES representan el 70% de la economía brasileña, pero sus dueños eran atendidos con cuentas bancarias copiadas del modelo de persona física. SmartBank quería cambiar eso: una experiencia bancaria mobile-first diseñada para las necesidades reales de quien gestiona un negocio.

El Contexto

Las pymes representan el 70% de la economía brasileña y emplean a casi la mitad de la población del país. Aun así, los grandes bancos ofrecían cuentas empresariales que, en la práctica, eran copias de cuentas personales — ignorando que los dueños de negocios tienen necesidades completamente distintas a las de un cliente individual.

Los dueños de pymes tienen una lista interminable de tareas que atender cada día. Necesitan emitir boletos, hacer transferencias, seguir reportes de ventas, gestionar una tarjeta de crédito corporativa y usar Pix — todo en movimiento, muchas veces desde el celular. La experiencia bancaria existente simplemente no estaba pensada para ese ritmo.

Resumen

Los grandes bancos ofrecían cuentas empresariales que eran copias de cuentas personales — sin considerar las necesidades reales de quien gestiona un negocio. Los dueños de PYMES necesitaban herramientas para boleto, Pix, transferencias, reportes de ventas y gestión de tarjeta de crédito — todo en una app móvil que respetara el ritmo acelerado del día a día de un emprendedor.

El Desafío

SmartBank contrató al equipo para construir una experiencia bancaria relevante y mobile-first para dueños de pymes. Mi rol fue Lead / Senior Product Designer: aportar los hallazgos de investigaciones previas con emprendedores, realizar nuevas investigaciones de campo y traducir los insights en diseño de producto.

La primera entrega fue el diseño del flujo de Boleto para móvil — una de las funcionalidades más críticas para las pymes brasileñas y una de las que más fricción generaban en las experiencias bancarias existentes.

Mi Rol

Lead / Senior Product Designer. Responsable de la investigación de UX con dueños de pymes, del diseño de los flujos principales, de la prototipación y de las pruebas de usabilidad.

Mi Enfoque

El proceso combinó investigación de campo profunda con ciclos rápidos de diseño y validación. La metodología incluyó técnicas mixtas de investigación, como etnografía, shadowing y entrevistas — con usuarios finales y stakeholders — antes de tomar cualquier decisión de diseño.

Estructura

El proyecto se organizó en tres fases:

Investigación e inmersión: etnografía, shadowing y entrevistas con dueños de PyMEs y stakeholders.

Ideación y task flows: definición de los 6 flujos principales, empezando por el Boleto en el móvil.

Prototipado y validación: prototipos en Figma, un Service Design Blueprint y pruebas de usabilidad con dueños reales de PyMEs.

Fase 1 — Investigación de UX

Observamos a dueños de pymes en su entorno real de trabajo. Seguimos cómo hacían pagos, emitían boletos, transferían dinero y consultaban su saldo — tareas financieras que ocurren en contextos muy distintos y casi nunca en una oficina controlada.

Antes de cualquier wireframe, salí a campo. La investigación etnográfica y el shadowing con dueños de pymes mostraron cómo gestionaban realmente el dinero del negocio: qué dispositivo usaban, en qué momentos del día y en qué contexto.

Entrevistas con stakeholders y usuarios finales

Las entrevistas con dueños de negocios revelaron necesidades comunes muy consistentes: Boleto en el celular, Pix, transferencias (TED), un estado de cuenta fácil de leer, un reporte de ventas y control de la tarjeta de crédito corporativa. Esas eran las brechas que los grandes bancos no resolvían.

Las entrevistas con stakeholders y usuarios finales revelaron seis funcionalidades que concentraban la mayor parte de las necesidades — las brechas que los grandes bancos no resolvían para quienes tienen un negocio.

Principales brechas

  • Boleto en el celular — emisión y pago simplificados
  • Pix — pago instantáneo (esencial en el Brasil post-2020)
  • TED — transferencias bancarias
  • Estado de cuenta — lectura rápida del flujo de caja
  • Reporte de ventas — integrado a la cuenta
  • Tarjeta de crédito — emisión y gestión de una tarjeta corporativa

Insight clave

Los dueños de pymes no necesitaban una cuenta personal con etiqueta de empresa. Necesitaban una app bancaria hecha para el ritmo de quien dirige un negocio: rápida, mobile-first y enfocada en las seis tareas que repiten todos los días.

Fase 2 — Ideación y flujos de tareas

Con los hallazgos en mano, el equipo realizó sesiones de ideación para definir cómo se viviría cada funcionalidad. Se crearon flujos de tareas para los 6 flujos principales — asegurando que la arquitectura de la app sostuviera el contexto mobile-first de los usuarios.

Flujos de tareas

Cada funcionalidad principal tuvo su propio flujo de tareas. El flujo de Pix cubrió el primer acceso, el registro de claves, las solicitudes de portabilidad y reclamo, los límites, las notificaciones y los estados de error.

Diseñando el Boleto para móvil — la primera funcionalidad crítica

El Boleto fue el punto de partida — y la funcionalidad más compleja. Muchas apps bancarias convierten el boleto en un proceso lento, burocrático y lleno de campos. Rediseñamos el flujo para el celular: escanear el código de barras, revisar los datos y pagar en menos de 30 segundos.

UI flow de la emisión de boletos (wireframe): onboarding, camino principal de emisión, registro del pagador, contactos y marca

Con el Boleto definido, el mismo enfoque dio forma a las demás funcionalidades — Pix, TED, Estado de cuenta, Reporte de ventas y Tarjeta de crédito — todas pensadas para un acceso rápido y uso en movimiento.

Flujos de tareas y funcionalidades diseñadas

  • Bienvenida y primer inicio de sesión
  • Registro de la empresa para titulares y socios
  • Validación de nuevo dispositivo (selfie + cuestionario)
  • Inicio con saldo
  • Mi cuenta: datos personales y de la empresa
  • Contraseñas de acceso y de autorización
  • Token SmartBank
  • Cerrar cuenta
  • Transferencias bancarias (TED)
  • Transferencias programadas y recurrentes
  • Límites de transacción
  • Estado de cuenta con filtros y detalle
  • Exportar estado de cuenta en PDF
  • Pago de cuentas y boletos
  • Depósito con boleto
  • Emisión de boletos con marca y contactos
  • Reporte de ventas y detalle del boleto
  • Anticipo de boletos
  • Anticipo de cobros con tarjeta
  • Registro y gestión de claves Pix
  • Portabilidad y reclamo de claves Pix
  • Pagar y transferir con Pix
  • Cobrar y recibir con Pix (código QR)
  • Límites de Pix
  • Movimientos Pix, programaciones y devoluciones
  • Solicitud y activación de la tarjeta
  • Transacciones de la tarjeta y compras rechazadas
  • Centro de la tarjeta: contraseña, bloqueo, cancelación
  • Tarjeta virtual y código de seguridad
  • Aviso de viaje y cajeros
  • Bloqueo judicial de saldo
  • Ayuda y derivación al centro de atención

Fase 3 — UI Design

Se construyeron prototipos en Figma para todas las funcionalidades. Un Service Design Blueprint documentó lo que ocurre detrás de cada flujo — tanto lo que ve el usuario como lo que pasa en el backend en cada operación.

Design System

Construido a partir del UI kit de SmartBank y del flujo completo de Pix: la paleta del kit como primitivos, 40 tokens semánticos, una escala tipográfica y 17 componentes con sus estados.

Design system — Color1 / 5

UI Design

Pantallas de alta fidelidad de las funcionalidades principales: inicio, apertura de cuenta, emisión de boletos, solicitud de tarjeta, estado de cuenta, reporte de ventas, anticipo de boletos, conciliación automática y pagos — además del flujo completo de Boleto.

SMARTBANK · ONBOARDING

Bienvenida y primer inicio de sesión

Un recorrido breve presenta la cuenta, seguido del primer inicio de sesión, la recuperación de la contraseña de acceso y el manejo de errores.

Bienvenida y primer inicio de sesión — pantalla 1
Bienvenida y primer inicio de sesión — pantalla 2
Bienvenida y primer inicio de sesión — pantalla 3
Bienvenida y primer inicio de sesión — pantalla 4
Bienvenida y primer inicio de sesión — pantalla 5
1 / 32

Resultados

El proyecto entregó una experiencia bancaria construida desde cero para dueños de pymes — no una adaptación de una cuenta personal. Las 6 funcionalidades principales se diseñaron pensando en el contexto móvil y el uso en movimiento.

El diseño se validó con usuarios reales mediante pruebas de usabilidad, y cada flujo quedó documentado de punta a punta — desde los flujos de tareas y los prototipos de alta fidelidad hasta un Service Design Blueprint completo.

6 funcionalidadesdiseñadas y prototipadasBoleto, Pix, TED, Estado de cuenta, Reporte de ventas y gestión de Tarjeta
Blueprintservice blueprint completoFlujos de front-stage y back-stage documentados para cada funcionalidad
70% de la economíamercado direccionablePymes desatendidas por los grandes bancos — una oportunidad validada en la investigación

Mis Trabajos