App de Registro de Pagos — Alimentos Agua Blanca
Diseño de un sistema móvil de registro de cobros para equipos de venta en campo, operando en 4 ciudades de Venezuela
2 Months
UX/UI Designer
Lideré el proyecto de punta a punta de forma remota: diseñé y organicé la investigación con stakeholders (entrevistas y encuestas), definí la arquitectura de información y los flujos de usuario, y diseñé la interfaz completa. El desarrollo fullstack estuvo a cargo de un desarrollador interno en la empresa, con quien coordiné de forma continua durante los 3 meses de duración del proyecto.
El equipo de ventas en campo registraba los cobros de forma manual y descentralizada — a través de WhatsApp, llamadas telefónicas y papeles — lo que generaba entre 20 y 40 minutos por registro, pérdida o daño de vouchers físicos entre 2 y 5 veces por semana, y hasta 2 días completos de trabajo administrativo semanal dedicados a corregir errores y conciliar diferencias contables. Operando en 4 ciudades con hasta 24 vendedores por ciudad, la falta de un canal digital estandarizado ponía en riesgo la precisión financiera y la escalabilidad de la operación.
Diseñar una app móvil intuitiva y ágil que permitiera a los vendedores registrar pagos de clientes de forma estructurada, con evidencia fotográfica, clasificación por tipo de pago (voucher vs. anticipo) y soporte multi-moneda — centralizando la operación en tiempo real y eliminando la dependencia de canales informales de comunicación.
User Person
Journey Map
Journey Map
El sistema contempla dos tipos de registro de cobro, diferenciados por su naturaleza contable:
- Voucher: pago asociado a una o más facturas ya emitidas. Puede incluir múltiples facturas bajo un mismo voucher (pago parcial o consolidado de varias facturas).
- Anticipo: pago asociado a uno o más pedidos aún no facturados, usado cuando el cliente abona antes de la emisión formal de la factura.
Principales funcionalidades
Sistema de Diseño
Inter, por su amplio rango de grosores (permite jerarquía clara sin depender del tamaño) y su alta legibilidad en pantallas pequeñas. Es un factor de accesibilidad relevante para este proyecto: parte del equipo de ventas son adultos mayores con menor familiaridad tecnológica, y una tipografía neutra y muy legible reduce la fricción de lectura para todo el rango de edades del equipo.
La paleta parte de los dos colores ya asociados a la marca — rojo y azul — complementados con blanco y una escala de grises para contraste y jerarquía. El rojo comunica identidad de marca (headers, elementos distintivos); el azul se reserva para interacción (botones, links, estados activos), evitando que ambos compitan por la atención del usuario.
La iconografía se mantiene deliberadamente breve: la app prioriza flujos simples y de fácil comprensión, por lo que los íconos cumplen un rol de apoyo, no de protagonismo. Siguiendo un patrón similar al de Telegram, cada función, configuración u opción se comunica con la combinación ícono + palabra — nunca el ícono solo — para eliminar ambigüedad y reducir la curva de aprendizaje, especialmente para usuarios con menor experiencia digital.
Todos los componentes están definidos con sus estados completos (default, focus, filled, disabled, error) para que el usuario sepa en todo momento qué está pasando y por qué, sin ambigüedad. No se buscó reinventar patrones: se usaron convenciones ya reconocibles y familiares (inputs, dropdowns, botones jerárquicos) para que la app se sienta predecible desde el primer uso.
UI Screens
