Plataforma TMS para la gestión integral de operaciones de transporte y logística de contenedores en Chile.
Ficha del Proyecto
Proyecto
Fleetly, Plataforma de Gestión Logística Inteligente
Rol
UX/UI Designer (end-to-end)
Duración
6 semanas
Tipo
Proyecto freelance, Producto SaaS B2B
Estado
Prototipo interactivo de alta fidelidad
Responsabilidades
Investigación UX, definición de requerimientos, arquitectura de información, diseño de flujos, sistema de diseño completo en Figma (tokens, componentes, estilos), diseño UI de todas las pantallas, prototipado interactivo y documentación de entrega.
El Cliente
Fleetly nació a partir de la necesidad real de una empresa de transporte y logística de contenedores con base en San Antonio, Chile. La empresa opera servicios de transporte FCL desde puertos hacia clientes a lo largo del país, incluyendo carga seca y refrigerada, además de servicios de consolidado, desconsolidado y almacenaje. Su operación cubre principalmente los puertos de San Antonio y Valparaíso, con despachos hacia Santiago, ciudades del centro y sur del país. El rubro es altamente operacional, con múltiples actores simultáneos y tiempos de respuesta críticos donde cada hora de retraso tiene impacto económico directo.
Usuarios
Visión general del negocio, asignación de recursos, control de estado de servicios y aprobación de costos. Usuario principal de dashboards y reportes.
Gestión activa de servicios: crear órdenes, asignar conductores, hacer seguimiento de rutas y resolver incidencias en tiempo real.
Revisión de facturas de proveedores, control de costos adicionales, márgenes por servicio y emisión de facturas a clientes.
El Problema
La empresa gestionaba toda su operación de forma manual y desarticulada. No existía ninguna plataforma centralizada. El flujo completo, desde la recepción de un servicio hasta su facturación, ocurría entre llamadas telefónicas, grupos de WhatsApp y una planilla de Excel compartida.
Objetivos de Negocio
Descubrimiento
Sesiones de levantamiento con jefe de operaciones y coordinadores para entender el flujo actual, los puntos de dolor y las expectativas. Se mapeó el proceso completo desde que llega un servicio hasta que se cierra con factura.
Revisión de plataformas TMS como Routific y Samsara, identificando estándares de la industria y oportunidades de diferenciación para una operación de escala mediana.
Se analizó el flujo real que usaban en Excel y WhatsApp, identificando qué información se registraba, cuál se perdía y dónde se generaban los errores más frecuentes.
A partir del levantamiento se priorizaron los módulos críticos: gestión de servicios, seguimiento GPS, asignación de conductores, costos adicionales, facturación y mantenedores.
Hallazgos Clave
Proceso UX
Se definió la navegación principal en cinco módulos: Dashboard, Servicios, Finanzas, Configuración y seguimiento GPS. Cada módulo tiene submódulos claramente jerarquizados para evitar profundidad excesiva de navegación.
Se estructuró el árbol completo de pantallas antes de diseñar, priorizando los flujos más frecuentes como accesos directos desde el primer nivel.
Se diseñaron los flujos completos de: creación de servicio, asignación de conductor con validación de documentación, seguimiento de ruta con GPS en tiempo real, aprobación de documentación y cierre con facturación.
Se definieron los estados vacíos, errores de validación, alertas de documentación vencida, retrasos en ruta y rechazos de documentos, todos con mensajes accionables.
Para operaciones críticas que no requieren cambio de pantalla se usaron modales y sidedrawers, manteniendo el contexto del usuario en todo momento.
Diseño UI
Cada pantalla tiene una acción principal clara. Se eliminaron opciones secundarias del camino crítico y se priorizó el contenido sobre la decoración.
El sistema de diseño fue construido con tokens de color, tipografía y espaciado que permiten crecer sin romper la consistencia.
Contraste validado según WCAG AA, jerarquía tipográfica clara, estados de foco visibles y etiquetas en todos los campos de formulario.
Un único sistema tipográfico (Inter), una paleta de dos colores principales con escala completa de neutros y un conjunto de componentes reutilizables para toda la interfaz.
El Desafío
El mayor desafío no fue técnico sino de síntesis: la operación era compleja, con muchas variables simultáneas, y había que traducir eso a una interfaz que un coordinador pudiera operar bajo presión, en tiempo real, sin cometer errores. La decisión correcta fue simplificar el modelo mental: un servicio tiene un estado, ese estado avanza linealmente, y cada usuario ve solo lo que necesita en cada momento. Eso requirió varias iteraciones de los flujos antes de llegar a la estructura final.
Prototipo Interactivo
La pantalla de acceso utiliza un layout de dos columnas para separar con claridad la identidad de marca del flujo funcional. El panel izquierdo actua como espacio de marca sin distracciones: una ilustracion abstracta de carretera en perspectiva refuerza el concepto central del producto sin recargar la interfaz. El derecho concentra toda la atencion en la tarea principal, acceder, con un formulario minimo y sin elementos decorativos que compitan.
La vista principal resuelve un problema critico del contexto anterior: nadie tenia certeza del estado de la operacion sin hacer llamadas. El dashboard centraliza esa informacion en tres capas de lectura progresiva. Los KPIs responden la pregunta como vamos hoy en segundos. El grafico de doble eje cruza ingresos con margen porcentual, permitiendo detectar si la rentabilidad se mantiene aunque el volumen varie. El feed de alertas codificadas por color convierte incidencias dispersas en elementos accionables desde un solo punto, con acceso directo al contexto del problema. El boton Crear nuevo servicio es el unico CTA primario de la pantalla, posicionado para la accion mas frecuente del coordinador.
El formulario resuelve uno de los problemas mas costosos del flujo anterior: crear un servicio requeria coordinar informacion dispersa entre WhatsApp, correo y Excel antes de poder registrar cualquier cosa. La pantalla se estructura en etapas progresivas con desbloqueo condicional. Primero se confirma el cliente desde la base de datos, eliminando errores y garantizando que el servicio quede vinculado a un registro valido. Una vez confirmado, la seccion colapsa y el foco pasa al tramo. En la tercera etapa cada contenedor es una unidad independiente con numero, medida, proveedor, fechas y servicios asociados. La distincion entre servicio predeterminado y adicional resuelve el problema de los costos extra que antes se perdian porque no habia donde registrarlos en el momento.
Es el centro de control operacional del dia. Los cinco KPIs superiores reproducen el pipeline completo en estados secuenciales, permitiendo detectar cuellos de botella sin entrar a la tabla. La tabla consolida en una sola fila toda la informacion necesaria: cliente, shipper, referencia BL, nave y estado. Los badges de estado usan color como senal de urgencia. Cada fila es accesible directamente desde el icono de vista y el buscador permite filtrar por cliente, proveedor o conductor, cubriendo los tres angulos desde los que operativamente se busca un servicio.
La columna izquierda gestiona la operacion activa: asignacion de proveedor y conductor desde base de datos, con validacion de estado visible en linea antes de confirmar. El historial de despacho muestra el avance como linea de tiempo con estados diferenciados: completado, en curso y pendiente. La columna derecha funciona como panel de contexto permanente con miniatura del GPS y ficha completa del servicio. La seccion de documentacion al pie reemplaza el flujo anterior de fotos por WhatsApp: el conductor sube los documentos y el coordinador los aprueba o rechaza directamente desde aqui. El boton Finalizar servicio se activa solo cuando los documentos estan aprobados, forzando el cierre correcto antes de pasar a facturacion.
Disenado para responder al instante la duda mas frecuente del equipo: donde esta la unidad. El mapa domina la pantalla como elemento central del monitoreo. A la derecha, el operador encuentra la identidad del conductor con enlace directo a su perfil, coordenadas en tiempo real y detalles del destino, informacion clave para resolver contingencias sin salir de la pantalla. El trazado en el mapa esta vinculado directamente al ID del servicio activo, facilitando la deteccion inmediata de desvios o detenciones no programadas.
La ficha individual del conductor consolida en una sola vista toda la informacion operacional y documental necesaria para validar disponibilidad antes de asignar un servicio. Datos personales, estado de licencia, vencimientos de documentacion y historial de servicios conviven en un layout que prioriza la lectura rapida del estado actual. Las alertas de documentos por vencer o vencidos aparecen destacadas, evitando asignaciones que comprometan la operacion.
Los KPIs superiores consolidan el periodo seleccionado en seis metricas clave: ingresos, costos, utilidad bruta, margen, viajes y extra costos pendientes de recuperar. El modulo se estructura en capas de analisis progresivo: grafico general, comparativa mensual, distribucion por tipo de operacion y cuatro tablas detalladas. La tabla de facturacion pendiente permite seleccionar servicios y facturar en lote, reemplazando la emision manual uno a uno. El historial de facturacion y detalle de proveedores al pie cierran el ciclo completo: desde el ingreso hasta la factura emitida y la factura recibida del proveedor, todo trazable desde la misma pantalla.
Agrupa en tabs todos los mantenedores del sistema: usuarios, clientes, proveedores, conductores, camiones y rutas. La decision de unificarlos bajo un solo modulo responde a que son datos que se configuran una vez y se consumen en toda la plataforma. Cada tab tiene la misma estructura: buscador, tabla con columnas ordenables y acceso individual por fila. El CTA de agregar registro esta siempre visible en el extremo superior derecho, consistente con el patron usado en el resto de la plataforma.
Este caso de estudio incluye un prototipo interactivo de alta fidelidad navegable en desktop. Podras recorrer los flujos principales de la plataforma, desde la creacion de un servicio hasta el cierre financiero.
Ver prototipo interactivo