LogiFlow
Plataforma de gestión logística y entregas en Java y Spring Boot: pedidos con sagas, rastreo en vivo, incidencias, SLA y app del conductor
- Mi rol
- Diseñador UX/UI · Análisis de arquitectura
LogiFlowContexto
LogiFlow es una plataforma de gestión logística y entregas para transportadoras y operaciones de última milla: pedidos, separación en los centros de distribución, flota, rutas, incidencias y SLA en una sola operación, del pedido a la puerta del cliente, con una app para el conductor.
Hice el producto, el UX/UI y el análisis de arquitectura. La base técnica es FTGO, la arquitectura de microservicios en Java y Spring Boot del libro Microservices Patterns, con sagas, outbox transaccional y CQRS; sobre ella diseñé las reglas logísticas, los flujos, las pantallas y el design system.
Problema de negocio
En una operación de entregas, el pedido pasa por muchas manos: el cliente que compra, finanzas que aprueba, el centro de distribución que separa, el conductor que entrega. Cada etapa suele vivir en un sistema o planilla distinta, y la coordinación solo descubre el retraso cuando el cliente llama.
LogiFlow junta todo en una sola operación: muestra qué se va a retrasar antes de que se retrase, trata la entrega que falló con reglas claras y le da al conductor una app que funciona incluso sin señal.
La base técnica
De FTGO vienen los servicios en Spring Boot: pedido con ciclo de vida controlado por sagas (crear, cancelar y revisar), aprobación contra la cuenta del cliente, ticket de separación con estados, repartidor con disponibilidad y plan de recogidas y entregas, historial de pedidos en CQRS, API Gateway y documentación Swagger en cada servicio.
El producto LogiFlow
La capa de logística de última milla y toda la interfaz: centros de distribución, flota, rastreo en vivo, incidencias con límite de intentos, SLA por ventana de entrega, panel gerencial, informes, perfiles de acceso y la app del conductor.
Arquitectura
Cada servicio es una aplicación Spring Boot con base de datos propia. Las escrituras que involucran más de un servicio se convierten en sagas orquestadas por el Order Service, y los eventos salen por Apache Kafka con outbox transaccional: el evento se guarda en la misma transacción que el dato y se publica después, así nada se pierde entre la base y la cola. Al lado, cómo cada concepto de FTGO se convierte en un concepto de LogiFlow.
Decisiones de arquitectura y trade-offs
Seis decisiones registradas como ADRs: el contexto, lo que se decidió, el costo de cada una y cómo aparece para quien usa el producto.
Arquitectura de información y flujos
Antes de las pantallas: el mapa del producto, los cinco perfiles de acceso y los tres flujos más importantes: del pedido a la entrega, incidencia en la entrega y revisión o cancelación.
Las pantallas en Figma
Doce pantallas desktop con prototipo navegable, para quien coordina la operación.
- 01 / 10
Dashboard operativo
La primera pantalla responde “¿qué va a fallar hoy?”: pedidos del día, rutas en la calle, entregas a tiempo frente a la meta, retrasos e incidencias abiertas, el SLA de cada centro de distribución y la lista de pedidos con riesgo de retraso, ya con el margen en minutos.
- 02 / 10
Pedidos
Búsqueda, filtros por estado, centro, ventana y conductor, ordenación y paginación. Cada estado tiene un color fijo, y esperando aprobación, aprobado y rechazado son los estados reales del pedido en el Order Service.
- 03 / 10
Detalle del pedido
El ciclo de vida del pedido como línea de tiempo, con los pasos de la saga y del ticket de separación, el plan del conductor con cada recogida y entrega (el Plan del Delivery Service), el margen del SLA, los ítems y la auditoría de quién cambió qué.
- 04 / 10
Nuevo pedido
El formulario avisa que el pedido nace esperando aprobación, porque eso es lo que hace la saga. La ventana fuera del horario del cliente se bloquea en el campo, y el resumen recuerda que la misma validación corre en el servidor.
- 05 / 10
Rastreo en vivo
Las rutas activas con el progreso de cada conductor, filtros para atrasadas y sin señal, y en el mapa la ruta seleccionada con las paradas hechas, la próxima y el margen hasta el fin de la ventana.
- 06 / 10
Incidencias
La cola de problemas en la entrega y el tratamiento de cada uno: quién lo registró, la foto, la distancia a la dirección, el plazo del SLA y tres salidas posibles. Reprogramar exige motivo, y el tercer intento es el último.
- 07 / 10
Informes y SLA
Entregas a tiempo por semana frente a la meta, causas de fallo y productividad por conductor, leídos de la vista CQRS para no cargar la operación.
- 08 / 10
Flota
Conductores y vehículos con la disponibilidad del turno, que viene del Delivery Service, más el vehículo, la licencia y el desempeño a tiempo de cada conductor.
- 09 / 10
Usuarios y permisos
La matriz de permisos por perfil, aplicada en la API y no solo en la pantalla. El cliente B2B y el conductor ven solo sus propios pedidos.
- 10 / 10
Login
Ingreso por correo o por el inicio de sesión único de la empresa (OIDC), con bloqueo tras intentos fallidos. La recuperación de acceso usa un mensaje neutro, que no revela quién tiene cuenta.
Estados de la interfaz
Cargando, vacío, error y respuesta de las acciones. El error mantiene los filtros y muestra un código para soporte, y los avisos de pedido rechazado o en proceso vienen directo de los estados de las sagas.
App del conductor
El plan del repartidor es una lista ordenada de recogidas y entregas. La app convierte esa lista en la ruta del día, con comprobante por foto, firma y ubicación, y una incidencia que queda guardada sin internet y se envía cuando vuelve la señal.
Decisiones de UX/UI
Lo que guió las decisiones de interfaz:
Sistema Visual
Un design system propio en Figma, con variables de color, espaciado y radio, estilos de texto y componentes con variantes: botón, estado del pedido, campo, ítem de menú, filtro y card de indicador. Neutros fríos para la lectura larga, naranja para actuar y un color por estado.
Paleta
Naranja Señal
#F2551D
Acción principal y alertas
Noche
#0E1525
Menú lateral
Tinta
#101828
Títulos y textos
Verde Entregado
#067647
Entregado y a tiempo
Morado Separación
#5B3CC4
En separación en el CD
Rojo Fallo
#B42318
Retraso e intento fallido
Tipografía
Space Grotesk
700
Títulos y números de indicador
Inter
400 / 500 / 600 / 700
Interfaz, tablas y formularios
JetBrains Mono
400 / 700
Códigos de pedido y horarios
Próximas versiones
Lo que viene a continuación en el roadmap del producto:
Referencias y créditos
La base técnica de LogiFlow es FTGO, de Chris Richardson y Eventuate, Inc., publicado bajo la licencia Apache 2.0.
Aprendizaje
Diseñar sobre una arquitectura real cambia la interfaz: la consistencia eventual se vuelve un estado “en proceso”, la compensación de la saga se vuelve un motivo de rechazo, y la separación entre lectura y escritura define dónde viven las listas y los informes.
