Rol

Diseñadora UX Principal

Herramientas

Figma icon
Google Suite Icon
Flutter icon

El cliente desarrolló un software de Sistema de Gestión de Transporte (TMS), pero no contaba con una experiencia de interfaz de usuario coherente. Originalmente, otra empresa desarrolló el portal principal como una forma de realizar inspecciones de seguridad para ferrocarriles, pero, con el tiempo, el portal fue creciendo para adaptarse a las necesidades de la compañía. Como el software se construyó según las necesidades puntuales, no existía una estrategia integral y holística de experiencia de usuario hasta ahora.

  • Descubrimiento

  • Investigación

  • Prototipado

  • Pruebas

  • Librerias

  • Prototipos de Alta Fidelidad

  • Pruebas Adicionales

  • Entrega

  • Lanzamiento

DESCUBRIMIENTO

Alcance del proyecto

Los despachadores de la empresa en Canadá y Estados Unidos son responsables de gestionar a los conductores y asegurar que las entregas se realicen a tiempo. Sin embargo, su proceso actual de despacho es demasiado manual, requiere mucha entrada de datos, consume tiempo y es propenso a errores. Para automatizar los procesos de la empresa, el cliente desarrolló un nuevo software que ayuda a los despachadores a seleccionar las rutas más eficientes y gestionar los recursos de manera efectiva.

Sin embargo, el software carecía de una UX y UI efectivas.

El alcance de este proyecto se dividió en dos módulos. El Módulo 1 se enfocó en la investigación y en proporcionar recomendaciones basadas en los hallazgos, y el Módulo 2 se enfocó en modificar la interfaz del software según las recomendaciones del Módulo 1.

Objetivos del proyecto

UI Icon

Rediseñar la interfaz actual del software de despacho.

Gap Icon

Identificar brechas en la experiencia de usuario y proporcionar recomendaciones.

User Journey Icons

Proponer un nuevo recorrido de usuario para los despachadores que interactúan con el software.

Design System Icon

Implementar un nuevo sistema de diseño para asegurar consistencia en todo el software y facilitar el aprendizaje del nuevo sistema.

¿Cómo se ve el éxito?

Los despachadores reciben el nuevo software de forma positiva y lo implementan con facilidad en sus actividades diarias.

Los despachadores tienen más tiempo para atender otras tareas importantes, además del despacho de pedidos.

Los recursos de la empresa se utilizan de forma más eficiente, reduciendo potencialmente la dependencia de transportistas externos.

Posibles limitaciones

El cliente está atravesando un proceso de gestión del cambio en sus operaciones, por lo que es necesario coordinar con la empresa encargada de los procesos.

Un equipo externo es responsable del mantenimiento del software, y se requiere coordinación para asegurar el cumplimiento de los requisitos técnicos.

La plataforma está desarrollada en Flutter.

Entregables

Interview Icon

Entrevistas

User Persona Icon

Perfiles de usuario

User Journey Icon

Recorrido de usuario

Research Findings Icon

Hallazgos

User Flow Icon

Flujo de usuario

Sitemap Icon

Mapa del sitio

Wireframe Icon

Wireframes

High Fidelity Prototypes Icon

Mockups

Usability Testing Icon

Pruebas de usabilidad

Design System Icon

Sistema de diseño

INVESTIGACIÓN

Objetivos de la investigación

Broken Link Icon

Identificar las brechas existentes en la experiencia de usuario.

User Icon

Comprender las motivaciones y puntos de dolor de los usuarios.

Process Icon

Aclarar los procesos relacionados con el software.

Code Icon

Identificar requisitos técnicos y posibles limitaciones.

Entrevistas

Se entrevistó a seis miembros del personal del cliente y a tres miembros de la empresa externa de software para recopilar información sobre la plataforma, los procesos y los requisitos técnicos.

Hallazgos de las entrevistas

De la investigación surgieron diversos hallazgos, tanto dentro como fuera del alcance del proyecto. Estos hallazgos se agruparon en Hallazgos Generales, Puntos de Dolor y Posibles Soluciones.

Interview Template
Interview Findings

Mapa de afinidad

El mapeo de afinidad es un método para sintetizar datos cualitativos. El proceso de “afinizar” datos consiste en agrupar piezas similares de información para formar grupos que luego dan lugar a temas generales.

A partir de las entrevistas, algunos de los temas identificados en la investigación fueron:

  • Perfiles de usuario.

  • Tecnologías y procesos.

  • Puntos de dolor.

  • Posibles soluciones.

Puntos de Vistas (POVs)

Una declaración de punto de vista es una metodología usada en la investigación UX para ayudar a los diseñadores a identificar patrones en la investigación y clarificar las necesidades de los usuarios o de un grupo de personas, identificando a los usuarios, comprendiendo sus necesidades y compartiendo información relevante.

Para este proyecto, las siguientes declaraciones POV representan las áreas clave en las que enfocarse durante el Módulo 2, con el fin de crear una experiencia de usuario e interfaz efectivas.

“Los despachadores podrían querer modificar la asignación de recursos a las rutas sugeridas por el optimizador, por lo que necesitan una forma rápida y eficiente de cambiar conductores, camiones y remolques según la recomendación del optimizador.” “Dado que los gerentes y despachadores necesitan modificar los datos de recursos (como las restricciones del conductor, por ejemplo) proporcionados al optimizador, los usuarios necesitan una forma sencilla de ingresar estos datos desde la interfaz.” “Los despachadores están acostumbrados a trabajar de cierta manera, por lo que necesitan una interfaz predecible, con elementos de diseño y diseños consistentes, para que aprender el nuevo software sea más fácil.”
“Distintos despachadores podrían planificar sus rutas de forma diferente, por lo que necesitan flexibilidad para filtrar las rutas sugeridas por el optimizador, ya que podrían tener ideas distintas sobre cómo priorizar qué rutas ejecutar.” “Los despachadores necesitan ver qué sucederá en los próximos días, especialmente en relación con rutas de larga distancia; por ello, necesitan una interfaz que muestre toda la información de rutas en una sola pantalla.” “Los coordinadores de seguridad y los coordinadores de mantenimiento necesitan acceso limitado a Kemlogistics, ya que necesitan actualizar documentación e información de remolques/camiones.”
“Los despachadores que están acostumbrados a trabajar de forma independiente necesitan una experiencia de interfaz que facilite la colaboración con otros despachadores al usar el optimizador, para evitar errores y sobrescritura de información.” “Los despachadores necesitan visibilidad sobre resultados adicionales clave proporcionados por el optimizador, para poder ejecutar procesos relacionados fuera de Kemlogistics (por ejemplo, inviabilidades de inventario, precargas, lavados, mantener pedidos completos de clientes, mantener vacío).” “Los despachadores ocupados, o aquellos que no interactúan entre sí, podrían duplicar datos o cometer errores. Por ello, la interfaz necesita mostrar los errores que el optimizador está detectando (por ejemplo, errores de datos identificados por el validador de datos o pedidos sin cumplir).”
“Los gerentes necesitan ver la misma información con la que trabajan los despachadores, ya que esto evitará malentendidos en la comunicación entre gerentes y despachadores.” “Los gerentes que viajan necesitan acceder a Kemlogistics desde sus teléfonos, ya que podrían no tener sus laptops a mano.” “Los despachadores necesitan una forma sencilla de ingresar interrupciones de último momento en la recomendación del optimizador, ya que este tipo de interrupciones son comunes y suelen afectar el cronograma de las rutas. El diseño UX requerirá aportes del proceso objetivo.”
“Los despachadores en distintas regiones tienen procesos y responsabilidades diferentes, por lo que necesitan un sistema unificado que les permita comunicarse y usar los recursos entre regiones de forma más efectiva.”

“Los despachadores necesitan una forma sencilla de verificar qué pedidos/recursos quedan fuera de las rutas propuestas, ya que deben asegurarse de que todos los pedidos se cumplan.”

Preguntas “¿Cómo podríamos…?” (HMW)

“How Might We?” o las preguntas “¿Cómo podríamos…?” ayudan a los diseñadores a enfocar su atención en oportunidades y generar ideas específicas. Estas preguntas me ayudaron a replantear los problemas descubiertos mediante las declaraciones POV como oportunidades.

Ejemplos de preguntas “¿Cómo podríamos…?” basadas en la investigación:

“¿Cómo podríamos ayudar a los despachadores a personalizar fácil y rápidamente las recomendaciones del optimizador?” “¿Cómo podríamos ayudar a los despachadores a alimentar conjuntos de datos personalizados —como restricciones de conductores o clientes— al optimizador?“ “¿Cómo podríamos crear un sistema simple e intuitivo que ayude a los despachadores a aprender y adoptar Kemlogistics y el optimizador más rápido?”
“¿Cómo podríamos ayudar a los despachadores a priorizar qué rutas quieren ejecutar primero?” “¿Cómo podríamos fomentar que los despachadores que trabajan en las mismas regiones colaboren entre sí para no producir errores al ejecutar el optimizador?”  “¿Cómo podríamos evitar que los despachadores dupliquen datos y pasen por alto otros errores en su proceso?”

Perfiles de usuario

De la investigación surgieron seis perfiles de usuario que interactuarían regularmente con Kemlogistics. Sin embargo, para este proyecto nos enfocamos en los perfiles de Despachador y Gerentes, ya que probablemente serán los que interactúen con mayor frecuencia con el optimizador y otras áreas de Kemlogistics.

  • Despachadores,
  • Gerente de Transporte,
  • Evaluador y Capacitador
  • Conductores
  • Especialista en Seguridad
  • Coordinador de Mantenimiento.

Perfil de Despachador

Dispatcher User Persona

Perfil de Gerente de Transporte

Transportation Manager User Persona

Recorrido de usuario

Basándome en las entrevistas de usuarios, pude identificar el recorrido de usuario actual del despachador y proponer uno nuevo para su interacción con el software.

Recorrido original

Dispatcher Original User Journey

Recorrido recomendado

New Proposed User Journey

ARQUITECTURA

Mapa del sitio

El mapa del sitio original consistía en una enorme cantidad de páginas con información repetida, desorganizada y desactualizada.

Tras cierta investigación y basándome en la investigación de usuarios, propuse un nuevo mapa del sitio que buscaba organizar la información de la aplicación de manera intuitiva.

Mapa original

Original Sitemap

Nuevo Mapa de Sitio

Original Sitemap

DISEÑO DE INTERFAZ

Wireframes

Mockups de alta fidelidad

Homepage
Log In page
Site finder page
Routes planning page
Route Activity page
Inventory page
Documents page

Sistema de diseño

Dado que la empresa de software originalmente usó Flutter para desarrollar la aplicación web, decidí usar Material Design de Google como base para desarrollar el nuevo sistema de diseño.

Para este proyecto, algunos elementos del sistema de diseño incluyeron:

Librería de componentes
Librería de patrones
Librería de iconos

Debido a razones de privacidad, no puedo mostrar el sistema de diseño de este proyecto.

PRUEBAS E IMPLEMENTACIÓN

Se utilizaron prototipos interactivos durante las entrevistas de pruebas de usabilidad para evaluar la efectividad del diseño. Se pidió a los usuarios que realizaran tareas como ejecutar el optimizador, congelar una ruta, contactar a un gerente y enviar documentación a un conductor, entre otras tareas relevantes asociadas al despacho para Kemira.

Después de aplicar los cambios y de que el cliente aprobara el diseño, procedimos a colaborar con el equipo de desarrollo del cliente para implementar el diseño. Continuamos hoy en este proceso y estamos emocionados de lanzar este producto más adelante este año.