Una plataforma clave para la operación
La plataforma web de Inter acompaña a cajeras y técnicos de redes, en la oficina y en campo. Con ella generan facturas, registran cobros y verifican la información de cada cliente: plan contratado, IP/VLAN, fecha de pago y estado del servicio.
El sistema se diseñó para escritorio. En la práctica, buena parte del equipo lo abre desde el teléfono, y ahí empiezan los errores.
La web actual no responde al uso móvil
Toques imprecisos
Botones e iconos pequeños y muy juntos provocan errores de selección.
Texto ilegible
Tipografías demasiado pequeñas y bajo contraste en pantallas de 6 pulgadas.
Sin coherencia
Colores y componentes que no responden a la identidad de Inter.
Dos perfiles, necesidades diferentes
Cajeras
Menú → Transacciones → Generar y cobrar- Necesitan ver de un vistazo clientes suspendidos y facturas pendientes.
- Registran pagos en efectivo con el cliente delante: un error cuesta tiempo y confianza.
- Dolor: pantallas confusas y botones pequeños.
Técnicos de redes
Menú → Clientes → Verificar información- Consultan plan, IP/VLAN y estado del servicio desde la calle.
- Necesitan datos claros y precisos para resolver el ticket rápido.
- Dolor: lectura y navegación complejas en el móvil.
Un objetivo concreto y medible
Reducir al menos a la mitad los errores de selección al generar y cobrar facturas o consultar clientes, con una versión móvil lista en 6 meses.
Cómo lo abordé
Entender
Auditoría de la web actual en móvil y mapeo de las tareas críticas por perfil.
Priorizar
Tres flujos núcleo: acceso, clientes y transacciones. Lo demás, después.
Diseñar
UI kit con variables de color, componentes y estados; 30 pantallas en Figma.
Validar
Pruebas de usabilidad con cajeras, técnicos y personal administrativo.
Los flujos que más importan, primero
Lo urgente, arriba
El inicio responde a la primera pregunta de una cajera: ¿qué tengo pendiente hoy? Clientes, facturas y tickets aparecen con su desglose (activos, suspendidos, vencidas) y cada tarjeta lleva directo a su listado. El balance del período cierra la pantalla.
Todo lo que un técnico necesita, en una tarjeta
Contacto, servicio activo con plan e IP/VLAN, y la factura pendiente con su vencimiento. La acción principal, Registrar pago, ocupa todo el ancho al pie de la pantalla, en la zona que el pulgar alcanza sin esfuerzo.
El estado se lee en color y en texto
Cada factura muestra su estado como palabra (Pagada, Pendiente, Vencida) además del color, para no depender solo de él. Un control segmentado filtra por estado y el período se cambia desde un único selector.
Un pago nunca se registra dos veces
Si la conexión se corta después de enviar un pago, la app no invita a repetirlo: pide consultar el estado primero. El resultado confirma que el pago ya figura registrado y ofrece el recibo. Diseñé este flujo pensando en la conectividad real de un técnico en la calle.
Diseñar cuando algo sale mal
Un prototipo solo con el camino feliz no se puede construir. Diseñé 17 estados de carga, vacío y error para que desarrollo no tenga que inventarlos. Toca cualquier pantalla para ampliarla.
Variables antes que pantallas
Definí la paleta como variables de Figma con significado de negocio: cada estado de cliente y factura tiene su color. Así, cambiar un tono actualiza las 30 pantallas a la vez y desarrollo recibe nombres que puede mapear a tokens.
verde · #39B54Anegro · #303030lienzo · #EDF6E9verde-pagados · #85E292amarillo-pendiente · #FDC748rojo-vencido · #FF8183rojo-suspendido · #EA0000retirado-inactivo · #D8D8D8Siguiente iteración. El texto blanco sobre el verde de marca alcanza 2.7:1, por debajo del 4.5:1 que pide WCAG AA. Propongo un verde de acción más oscuro (#25803A, 5.0:1) para botones y mantener #39B54A en superficies sin texto pequeño.
Medir antes de escalar
Participarán cajeras, técnicos de redes y personal administrativo en pruebas de usabilidad en su entorno real, con encuestas post-uso y métricas de interacción. Estas son las metas; los resultados se publicarán cuando termine la ronda.
Qué me llevo
Los estados son la mitad del diseño. Pensar en la conexión que se cae a mitad de un cobro cambió el flujo de pago completo.
Usuarios internos también son usuarios. Una cajera con fila delante tiene menos paciencia que cualquier cliente final.
Próximo paso: ejecutar las pruebas, unificar la tipografía en una sola familia y llevar el UI kit a una librería con componentes documentados para desarrollo.
