01
Rediseño pantalla crítica
Menos pantallas, menos pasos, mismo objetivo — rediseñado desde la raíz.
- UX Research
- UI Design
- Mobile
- Tablet
El problema
Un módulo que había crecido con lógica propia en cada pantalla.
El módulo de pedidos había crecido de forma orgánica hasta acumular múltiples pantallas, cada una con su propia representación del producto y sus propias reglas de navegación. El mismo objeto podía verse y editarse de formas distintas según desde dónde llegaras: la información disponible y las acciones posibles variaban dependiendo del camino tomado.
El resultado era una red de destinos donde el agente tenía que conocer de memoria qué mostraba cada pantalla, qué acciones estaban disponibles desde cada punto y cómo volver al lugar correcto. La experiencia dependía más del conocimiento acumulado del sistema que de la lógica de la propia tarea.
El proceso
- 01DiagnósticoLa combinación de análisis heurístico y feedback directo de usuarios reveló que el problema no era visual: la arquitectura de información no reflejaba cómo piensan los comerciales cuando trabajan
- 02Mapeo del flujoDocumentar el flujo existente pantalla a pantalla expuso la fragmentación real: 6 pantallas para una tarea básica, acciones duplicadas, información repetida en formatos distintos
- 03Decisión centralAntes de diseñar nada nuevo, había que resolver una pregunta de arquitectura: ¿qué es un producto en este sistema? La respuesta — una entidad única con distintas vistas — desbloqueó todo lo demás
- 04Ficha unificadaUna sola ficha de producto, accesible desde el catálogo y desde el pedido. Misma estructura, mismas acciones, cantidades y descuentos integrados. Sin diálogos anidados ni interrupciones del flujo.
- 05Validación y producciónPrototipo validado con usuarios reales antes del lanzamiento. En producción, todas las acciones críticas mejoraron: reducción mínima del 11% y máxima del 46% en número de clicks
La solución
Ficha de producto unificada
Una sola representación del producto, compartida entre catálogo y pedido. Misma estructura, mismas acciones, sin cambio de contexto.
Cálculo de descuentos integrado
Cantidades y descuentos se gestionan directamente sobre la ficha, en el momento y el lugar donde son relevantes.
Navegación coherente
Catálogo y pedido son vistas del mismo flujo, no destinos separados. El usuario puede moverse entre ellos sin rupturas de contexto.
Histórico contextual
El historial de compras del cliente es accesible desde el pedido activo, sin abandonar el contexto.
Tecnología
- FigmaDiseño de interfaz y prototipado interactivo
- FigJamMapeo de flujos, arquitectura de información y dinámicas con el equipo
Reflexión
La interfaz era un espejo del modelo de datos
El exceso de pasos no era un fallo de diseño — era el resultado de exponer en la interfaz una incoherencia del modelo: catálogo y pedido operaban sobre representaciones distintas del mismo producto, y el usuario tenía que compensar esa inconsistencia cada vez que navegaba entre ellos.
Resolver la arquitectura de información antes de tocar el diseño visual fue lo que hizo posible simplificar el flujo. Una vez que catálogo y pedido compartían el mismo modelo de producto, reducir pantallas, eliminar pasos redundantes y medir la mejora fueron consecuencias directas de esa decisión.