Resumen

Quiero compartirles mi experiencia reciente como consultor de AGP, donde trabajamos en el desarrollo de software plataforma B2B para clientes del sector automotriz. En este proyecto, tuvimos que llevar a cabo una ingeniería inversa para entender a fondo el proceso detrás del producto. Este paso fue clave para identificar las áreas de mejora desde una perspectiva global

Se realiza una Rediseño de la nueva plataforma del portal clientes de AGP mejorando la experiencia general de su portal, optimizando su navegación haciendo que el portal fuera más fácil y eficiente de utilizar por sus usuarios.

Problema

Se identificaron problemas significativos en el flujo principal de la plataforma relacionado con la transferencia vehicular. Específicamente, el módulo de «Ingreso de Operación» siendo la acción esencial para que el usuario tipo vendedor o administrador, pueda registrar una operación de transferencia, como compra-venta o venta directa. Este flujo, que es fundamental, presentaba varios problemas de navegación y consistencia en la interacción al realizar las operaciones 

Además, los diseños en figma no seguían convenciones ni principios fundamentales para la creación de flujos de usuario, lo que generaba dificultades en la experiencia de navegación, tampoco habían un registro de los flujos dado que los procesos de diseño los realizaban desde el área de desarrollo. Estos problemas de diseño también aplicaban a todos módulos de la plataforma, como el control de stock, la firma digital, el checklist electrónico y el flujo de homologación, entre otros.

Otro desafío adicional es la carencia de un kit de diseño UI organizado, lo que dificultaba la forma de saber como prototipo para una plataforma, incluyendo los procesos iterativos, revisiones, Handoff. Este desorden en la estructura de diseño UI complicaba la implementación de mejoras consistentes y efectivas en la plataforma.

Solución

Se realizan un cambio de la plataforma con el nuevo sistema de diseño UI MUI haciéndola mas moderna y sin problemas de navegación, mejorando el proceso y los flujos de usuarios en un 80%, Ademas de la implementación de nuevo kit de diseño MUI React que mejoro la forma de trabajar y nuevo look / feel de la plataforma, y la co-creación de diseño de este proyecto realizando workshops para implementar un enfoque en el buen uso.

Propuesta de diseño

En el proceso de negociación, se propuso definir un plan de trabajo dividido en 2 fases

Fases de diseño

Dado los tiempos y requiemreintos del cliente, se propuso en una primera instancia desarrollar una investigación UX mas profunda involucrando a los usuarios, sin embargo se ajusto un roadmap a los tiempos mas acostado, quey presupuesto del clientes y que al corto a plazo existiesen resultados. Con esto se logra simplificar un proceso dedicado a las mejoras principales, donde el proceso de UX se enmarco en análisis de la competencia directa y benchmarks, Meetings stakeholders, técnicas y producto y el proceso UI implementando una librería de diseño mas los flujos de los módulos end to end de la plataforma.

Se propuso definir un plan de trabajo dividido en 3 fases, desarrollado en 2 ciclos del año 2024.

Upload Image...

AS IS

En esta etapa, se realizó un análisis exhaustivo de la plataforma antigua y en producción para entender su estado actual. A partir de ahí, comparamos su desempeño y áreas críticas que necesitaban mejoras

Plataforma antigua

Plataforma nueva

Se auditan los flujos de usuario en plataforma Miro, identificando desglosando los puntos y  categorizando los mas críticos del sistema mediante tickets. Este ejercicio fue clave dado que ambas plataformas tenían issues interesantes que destacar y que no se heredaron a la plataforma nueva esto también dado por no tener diseño y flujos diseñados en UI (Dado que es el reflejo del desarrollo). Además no existían coherencia tanto en el diseño y la distribución de los componentes en el layout como en la navegación, también mantenían puntos críticos en la operación de gestión de información como los CRUD, entre otros.

Consultoría de Diseño Interfaces de Usuario

2.1 Análisis heurístico de las interfaces nuevas
2.2 Propuesta de mejoras

2.3 Benchmark

  1. Dependiendo del tipo de usuario, podríamos investigar como funciona la competencia en los aspectos que queremos mejorar.
  • Investigación de referentes
  • Conseguir credenciales y/o accesos
  • Análisis de hallazgos

Competencia directa: Autofact pro y cavem

  • Para autofact se realizar pruebas de las principales flujos de la plataforma, pruebas de usabilidad relacionadas a la operación de transferencia vehicular.

Realización de búsqueda de 3 softwares de gestión de información sobre la industria automotriz, competencias indirectas. Rental software, Patriot softwares, Fleetio. Se busco nuevas formas de navegación y usabilidad principalmente en las operaciones de CRUD, para la gestion de información.

Documentación Miro

Diseño UI

3.1 Propuesta de template para la reorganización del figma

  • Búsqueda kit UI y factibilidad técnica según framework e infraestructura desarrollo (React)
  • Implementación MUI React
  • Diseño de template para la reorganización y el buen uso
  • Workshop a equipo desasrrollo

3.2 Componenitzar los diseños existentes (MUI)

  • Validaciones líder técnico
  • Implementación de librería MUI en figma
  • Modificación de tokens y variables según AGP.
  • Selección Componentes esenciales a AGP.

3.3 Implementar diseño end 3 end de los módulos

  • Módulos de transferencia, homologación, control stock distribución e importación de stock crudo de usuario, etc. Otros nuevos módulos que se implementaron gestor documental, crud de usuarios, infocar, entre otros.

Diagnóstico Figma

  • La distribución de las carpetas o archivos no siguen un patrón que identifiquen de manera legible y simple lo que se esta viendo.
  • Los covers o portadas de los archivos no tiene un patrón de diseño que especifique de que trata, ya sea el id del requerimiento, el nombre, descripción o épica a desarrollar.
  • No hay una librería vinculada a todos los diseño, algunos archivo omiten este paso.
  • Los archivos de diseños carecen de una estructura de layout determinada, además están diseñados con imágenes .
  • Varios archivos de diseños están incompletos pareciendo ser borradores que no se avanzaron o concretaron.
  • Es una versión professional de Figma, lo que tendría más beneficios en la gestión y capacidad.
  • No todos los diseños mantienen una nomenclatura en las mesas de trabajo.

Reorganización de infraestructura de archivos, template y librería en Figma + Workshops para la adopción y absorción de los equipos.

  • Al carecer de un kit de diseño estable, se propone la nueva forma de trabajar en Figma implementado una librería de diseño profesional (MUI) con esto se aprovecha al máximo Dado que el ambiente en Figma es una versión Pro.
  • Implementación librería MUI y actualización de tokens, variables fuentes para ajustar a las convenciones.

Diseña flujos end to end módulos

Rediseño con la nueva librería de diseño Figma MUI de los módulos a mejorar y nuevos módulos e iniciativas diseñadas que complementaron la experiencia.

Prototipo no representa el diseño final

Proceso de evaluación prototipo en Maze de módulo / No representa diseño final

Módulos consolidados: Ingreso de operación, gestor documental, crud de usuario, control de stock, homologación, Checklist electrónico; importado-distribuidor, control certificado, crud de usuarios, infocar.

Conclusiones

  • Rediseño y mejora de la experiencia de módulos y plataforma end to end del nuevo portal automotriz
  • Adopción de la librería de diseño para con los equipos de desarrollo
  • Implementación librería MUI Figma Pro
  • Co-creación de diseño con stakholders, lideres de equipo y producto.