CASO
Sistema TMS para Logística y Transporte
Rol
UX/UI Designer
Tecnología
Bulma UI KIT
AG-Grid
Duración
3 meses
Contexto
Grupo Torres & Torres es una empresa de logística y transporte con sede en Guayaquil – Ecuador, especializada en la gestión y coordinación de flotas para el traslado de mercancías a nivel nacional e internacional.
La empresa enfrentaba un desafío crítico: su sistema de gestión estaba fragmentado en múltiples herramientas, lo que dificultaba la coordinación entre sus equipos y afectaba la precisión de sus operaciones. Para mantenerse competitivos en un sector altamente demandante, la empresa apostó por la transformación digital, implementando un sistema que permitiera unificar sus procesos en una plataforma centralizada.
El Problema
La Inaccesibilidad de visualización de datos en tiempo real, por la ineficiencia de utilizar sistemas obsoletos y dispersos que obstaculizan la obtención de información clara sobre la disponibilidad de recursos, lo cuál provoca altos márgenes de errores al ejecutar operaciones logísticas.
Impacto del problema:
- Procesos logísticos lentos y tediosos.
- Altos márgenes de error en operaciones manuales.
- Comunicación ineficiente sobre ejecuciones realizadas que no se notifica.
Objetivo general
Diseñar un Sistema TMS unificado que optimice la gestión de operaciones logísticas, incremente la eficiencia de los usuarios y aumente la productividad del negocio.
Objetivos comerciales:
- Dejar de utilizar plataformas de proveedores como DOBRA que representan costes de más de $15.000 mensuales, ya que pagan por múltiples licencias de $90 mensuales por cada una.
- Agilizar y reducir tiempos de los procesos logísticos para aumentar la productividad del negocio.
Objetivos específicos:
- Registrar y visualizar la disponibilidad de recursos en tiempo real.
- Automatizar la conexión entre datos relacionados para programar las operaciones del día siguiente.
- Aprobar o rechazar requerimientos.
- Visualizar métricas de tiempo y eficacia de operaciones finalizadas semanal o mensualmente.
Desafíos
¿Cómo podríamos agilitar la ejecución de todos los procesos logísticos dentro de una sola plataforma centralizada, que brinde una experiencia fluida para los usuarios?
- Unificar diversos sistemas tecnológicos internos y de proveedores en una sola plataforma, asegurando su consistencia, escalabilidad y experiencia fluida.
- Jerarquizar la información en una estructura centrada en los diversos roles de usuarios.
Proceso
EL proceso no fue lineal, se hicieron varias iteraciones donde fue necesario involucrar a usuarios en los procesos de diseño, ya que sus terminologías en transporte y logísticas eran complejos. Esto nos ayudó a equivocarnos y corregir más rápido los diseños y aprobarlos en tiempos óptimos.
Empatizar
Entrevistas Cualitativas
y Cuantitativas
Shadowing
User flow
Análisis de datos
Definir
Proto persona
User Journey Map
Matriz FDV
Estrategia de diseño
Idear
Card Sorting
Wireframing
Prototipar
Basado en Bulma UI Kit
+ AG Grid y sistema de
rastreo satelital
Color System
Design Tokens
Atomic Design
Testear
User testing
A/B testing
Terminologías
Refinamientos
EMPATIZAR
Investigación
Objetivos de la investigación
- Comprender el flujo de trabajo real de los usuarios en el entorno operativo.
- Identificar problemas ya sean comerciales, tecnológicos o de fricciones en los flujos.
- Validar y priorizar funcionalidades críticas mediante colaboración directa con usuarios internos.
- Recopilar datos para definir una estrategia de diseño.
- Medir diferencias entre procesos antiguos y el nuevo sistema propuesto.
Entrevistas
Cualitativas y cuantitativas
- Entrevisté a los Stalkeholder para entender el modelo de negocio y los objetivos comerciales, para definir métricas que evaluaran el proyecto. Entre las preguntas realizadas destaco la siguiente: ¿Cómo encaja este proyecto con su estrategia comercial general y con todas las actividades que realizan como organización?
- Entrevistas semi-estructuradas a 9 Usuarios para entender sus roles, procesos y antecedentes tanto en esta empresa como en otras trabajadas anteriormente, donde hayan tenido funciones similares. Además de obstáculos que afecten en su día a día para diseñar un MVP acorde a sus expectativas.
- Entrevista a Desarrolladores para definir el alcance tecnológico del proyecto. Se definió la utilización de componentes UI de la librería BULMA, y para la visualización de data se utilizó una tabla con funciones dinámicas llamada AG-GRID. También un sistema de monitoreo facilitado por un proveedor.
Shadowing
Mediante la observación del entorno operativo de los usuarios, pude relacionar factores que decían en las entrevistas con lo que hacían en sus procesos. Además, me permitió profundizar más sus logísticas y encontrar otros escenarios con problemas relacionados a tiempos muertos que no surgieron en las entrevistas.
Síntesis y análisis
Mapa de afinidad
Ineficiencia Operativa
- “Usamos demasiadas plataformas para una sola operación.”
- “Hay que pasar la misma información varias veces.”
- «Quiero saber cuántos recursos tengo en este momento»
Errores Humanos
- “A veces no sé si el conductor ya fue asignado.”
- “Olvidamos actualizar las órdenes.”
Centralización
- “Lo ideal sería tener todo en un solo sistema.”
- “Con un panel único podríamos trabajar más rápido.”
- “Sería excelente no tener que moverse por diferentes áreas”
Trazabilidad y Seguimiento
- “Cuando hay un retraso, nos enteramos tarde.”
- «Quiero saber cuanto tiempo se toma el vehículo de llegar del punto A al punto B.»
- “Necesitamos alertas automáticas.”
Planificación y Programación
- “Si alguien se ausenta, nadie sabe qué estaba asignado.”
- Debería cumplir con todas las planificaciones asignadas de forma efectiva, ameritando para el próximo día
Comunicación y Coordinación
- “Nos toca llamar o mandar WhatsApp, y se pierde la información.”
- “Debería haber comunicación integrada al sistema.”
Usabilidad
- «Informar sobre el estado actual de las operaciones.»
- “Una sección de documentación sería de mucha ayuda.”
DEFINIR
Gestionan las órdenes de transporte y supervisan la ejecución de las operaciones.
Asignan y distribuyen los vehículos según la disponibilidad de los recursos.
Definen estratégias de optimización de gestión de rutas y recursos.
Se encargan de la calendarización y seguimiento de operaciones logísticas.
- Tener una sola plataforma en lugar de múltiples herramientas dispersas.
- Automatizar tareas repetitivas como asignación de vehículos y programación de rutas.
- Un diseño más fácil de usar, sin necesidad de capacitaciones extensas para usuarios nuevos.
- Compartir información fácilmente con otros departamentos sin depender de llamadas o correos.
- Recibir avisos cuando haya cambios en rutas, retrasos o problemas con conductores.
- Usar 6 plataformas distintas genera confusión y errores.
- Las plataformas actuales son difíciles de usar.
- El tiempo que se toma corregir errores por información desactualizada.
- La pérdida de tiempo en asignación de vehículos debido a procesos manuales.
- La información no fluye entre departamentos, lo que causa descoordinación.
Operadores logísticos
- Acceder rápidamente a las órdenes del día.
- Verificar la disponibilidad de recursos sin depender de terceros.
- Tener visibilidad clara del estado de las órdenes.
- Minimizar el tiempo de ingreso manual de datos.
Planificadores
- Asignar vehículos y conductores desde una vista centralizada.
- Monitorear en tiempo real la ubicación y estado de los vehículos.
- Recibir alertas ante desvíos o incidencias.
- Evaluar desempeño operativo con datos confiables.
Coordinadores de transporte
- Cargar pedidos o requerimientos sin errores duplicados.
- Visualizar disponibilidad de flota y recursos en una línea de tiempo.
- Ajustar la planificación fácilmente en caso de cambios o imprevistos.
- Priorizar entregas según criterios logísticos y comerciales.
Programadores
- Coordinar recursos y disponibilidad sin depender de múltiples herramientas.
- Actualizar cronogramas en tiempo real y notificar a otros usuarios.
- Validar que los cambios se reflejen sin errores en toda la cadena.
- Disponer de reportes de eficiencia por programación.
Matriz FDV
Necesitamos priorizar las funcionalidades de mayor importancia, tomando en cuenta la deseabilidad de los usuarios, con la factibilidad técnica y la viabilidad del negocio.
Principios de diseño
Se priorizó una visualización eficiente que reduzca la carga cognitiva, facilite la toma de decisiones y disminuya el riesgo de errores. También se destacó la visibilidad en tiempo real del estado de cada proceso y alertas para una respuesta operativa oportuna.
Simple
Compacto
Escalable
Consistente
IDEAR
Arquitectura de la información
Card Sorting
Con el objetivo de establecer prioridades y alcanzar un consenso entre todos los perfiles de usuarios, realizamos una sesión de Card Sorting presencial. En esta actividad, organizamos las funciones principales de acuerdo con las prioridades identificadas para cada perfil. Además, definimos un perfil «Manager», que integra y abarca todas las funciones clave del sistema.
Wireframes
Gracias a la integración de los usuarios expertos en transporte y logística en las sesiones de ideación, logramos reducir los tiempos de diseño y testeo de prototipos en baja y alta.
PROTOTIPAR
Design system
Para optimizar tiempos de diseño y desarrollo, y considerando que el producto está destinado a usuarios internos, se priorizó la funcionalidad sobre aspectos estéticos. Se utilizaron librerías existentes que permitieran una implementación rápida y eficiente, tras validar su factibilidad con los requerimientos del proyecto.
CSS Framework
Tablas dinámicas
Style Guide
Se adaptó la identidad visual de la empresa a la estructura de estilos de la librería Bulma, asegurando coherencia entre el diseño del sistema y la marca.
UI Kit
Atomic Design
Prototipo
El prototipo se diseñó con un entorno visual simple y consistente, donde el foco se centra en alertas, estados, acciones y reconocimiento del sistema, logrando contraste y jerarquía entre elementos para evitar errores humanos al interactuar con mucha información.
Estructura compacta y escalable, pensada para mostrar e interactuar con grandes cantidades de data.
Interfaces diseñadas en alta interactividad para realizar pruebas de alta fidelidad.
TESTEAR
Resultados
Los usuarios completaron correctamente las tareas asignadas sin ayuda
En test del producto en desarrollo se espera llegar a porcentajes entre 60% a 70%
Indica una aceptación positiva de la experiencia del producto
Los usuarios destacaron especialmente la claridad de la interfaz, la visibilidad de las alertas, y la disminución de pasos y elementos que provocaban carga cognitiva.
