LO2: Rediseño de su gestor de stock

Resumen

• Eliminamos el flujo manual, el equipo migró de Excel + Google Drive a una plataforma unificada.
• Redujimos el tiempo de búsqueda eliminando 3 capas de navegación redundantes.
• Sistema de etiquetas simplificado de 3 categorías con N subcategorías a búsqueda única + autocompletado.
• Sistema de diseño construido con auto-layout (comportamiento CSS flexbox) para escalabilidad sin roturas.
• Conflictos entre departamentos al 90%, productividad al 100%, propuestas un 60% más rápidas.
• Beta lanzada con adopción positiva del equipo: “una herramienta que por fin queremos usar”.

El punto de partida

Me trajeron para rediseñar una plataforma de gestión de stock para una empresa de interiorismo. La herramienta debía manejar búsquedas de productos basadas en imágenes, seguimiento de inventario y diferentes roles de usuario. El verdadero problema era que la interfaz antigua era tan torpe y difícil de usar que los empleados la evitaban por completo. De hecho, usaban una mezcla de Excel y Google Drive, copiando manualmente nombres de archivos de imágenes para referenciar productos en sus informes. Mi trabajo era solucionar un problema grave de usabilidad.

Limitaciones

Este proyecto venía con varias realidades difíciles con las que tuve que diseñar.

• No podía acceder a la plataforma en vivo por las reglas de seguridad del cliente, así que solo tenía capturas de pantalla estáticas para trabajar.
• Los clientes estaban demasiado ocupados para involucrarse en un proceso de diseño estándar.
• El presupuesto no permitía prototipado interactivo complejo.

Investigación

Durante las primeras reuniones con los jefes de departamento, miré las capturas antiguas y les pregunté sobre elementos y flujos específicos. No podían explicar qué se suponía que hacían algunas partes de la interfaz. Ese fue un punto de inflexión para mí. Me di cuenta de que no necesitábamos solo una versión más bonita de lo que tenían. La app antigua estaba hinchada con funciones redundantes y necesitábamos eliminar el ruido.

Para entender los datos, di un paso atrás de las pantallas e hice varias cosas que terminaron impulsando todo el proyecto.

Diseño

Para la UI real, construí un sistema de diseño robusto en Figma usando autolayout para imitar el comportamiento de CSS flexbox.

Para mantener la interfaz consistente en más de 40 pantallas, construí un sistema de diseño desde cero. Tokens de color semánticos para estados SLA (verde para a tiempo, ámbar para advertencia, rojo para vencido). Librería de componentes con tablas de datos, filtros, modales y elementos de formulario. Un desarrollador podía tomar cualquier componente y saber exactamente cómo se comportaba. Cuando se añadió un flujo de almacén nuevo más tarde, llevó un día en lugar de una semana.

Más tarde, durante los sprints, el cliente señaló su complejo y redundante sistema de etiquetas, en el que tenían 3 categorías y N subcategorías dentro de cada una, con etiquetas vacías, obsoletas y duplicadas. Propuse reconstruir el sistema de etiquetas desde cero con un cuadro de búsqueda y un array de etiquetas seleccionadas.

Hubo un desafío interesante con la cuadrícula principal de productos. La dirección inicial era usar un layout masonry como Pinterest. Me opuse basándome en mi propia experiencia como artista que usa Pinterest a diario. Un layout masonry es genial para inspiración pero pésimo para productividad. Es caótico y facilita perder de vista elementos específicos. Sabiendo cómo funciona el desarrollo frontend, también sabía que construir una cuadrícula masonry responsiva y ordenable es un dolor de cabeza enorme de mantener. Documenté mi posición, pero se decidió probar el enfoque masonry de todas formas. Un mes después del desarrollo, aparecieron exactamente los problemas de ordenación y escalado que advertí, y terminamos cambiando a la cuadrícula estándar que había propuesto originalmente. Fue una buena lección sobre documentar el razonamiento detrás de las decisiones de diseño para que la realidad sea clara cuando las cosas llegan a desarrollo.

El final

Tras el lanzamiento del rediseño, el equipo midió mejoras claras:

• Reducción de conflictos entre departamentos al 90%, ya que ahora todos trabajan sobre la misma fuente de verdad.
• Aumento de productividad del 100% al concentrar todo el trabajo en la misma plataforma.
• Aumento de velocidad del 60% al crear propuestas en comparación con el flujo de trabajo en hojas de cálculo.

Cuando presenté el diseño final internamente en la empresa del cliente, la respuesta fue muy positiva. La gente aplaudió y dijo que parecía una herramienta que por fin querrían usar. El proyecto está actualmente en beta.

Si tuviera que empezar de nuevo, cambiaría algunas cosas.

• Preguntaría a los clientes por métricas base de cuánto tiempo pasan con su solución actual en Excel antes de empezar.
• Haría moodboards más pequeños y enfocados para definir el estilo visual antes.
• Aprendí que en proyectos grandes, no puedes diseñar algo esperando que se quede exactamente igual. Tienes que diseñar para sorpresas. Ese flujo de usuario increíblemente detallado que hice fue la única razón por la que pudimos hacer cambios sobre la marcha durante el desarrollo sin perder la lógica.