Desafío

Con más de 25 años de experiencia en ERP, SFA y logística para distribuidores de bebidas y alimentos, LinkedBy opera sistemas de uso continuo con un impacto directo en las operaciones de sus clientes.

El SFA es utilizado por los vendedores en tabletas y teléfonos inteligentes para registrar pedidos, rastrear rutas y capturar información durante las visitas. El Panel de Ventas es la interfaz web que utilizan los gerentes para configurar reglas, monitorear operaciones y analizar datos. Mientras que uno requiere agilidad en la movilidad, el otro concentra una gran cantidad de información.

Se trata de dos productos distintos, con diferentes contextos de uso, pero que forman parte de la misma operación.

Sin una base visual compartida, cada evolución se produjo de forma aislada. Se definieron nuevas pantallas, nuevos módulos y nuevos flujos sin una referencia común. Los colores, el espaciado, los comportamientos y los patrones variaban según quién los implementara.

Este modelo generó un escenario de inconsistencia acumulada. Elementos similares se comportaban de manera diferente. El usuario debía reaprender las interacciones al navegar entre flujos. Durante el desarrollo, la ausencia de componentes reutilizables generó un trabajo de reelaboración constante.

Con la expansión de la plataforma, este coste dejó de ser un hecho aislado y comenzó a tener un impacto directo en la evolución de los productos.

Transformación_

Se contrató a Evo Systems para estructurar esta base. El objetivo no era modificar las pantallas existentes, sino crear un sistema que soportara todos los desarrollos futuros.

Así nació UXSync, un sistema de diseño desarrollado a partir de los flujos de trabajo reales de LinkedIn.

En lugar de adaptar marcos genéricos, UXSync se diseñó teniendo en cuenta las necesidades específicas de ambos productos. Cada componente responde a situaciones concretas a las que se enfrentan el vendedor en el terreno y el gerente en la oficina.

En el Panel de Ventas, esto se traduce en componentes preparados para una alta densidad de información: tablas con expansión en línea, modales estructurados para múltiples reglas de negocio y un sistema de insignias con semántica clara para una lectura rápida del estado.

En SFA, los mismos flujos se adaptaron al contexto móvil, manteniendo la coherencia visual y de comportamiento, pero respetando las limitaciones de la pantalla y la interacción táctil. La transición entre ambos entornos resulta natural para el usuario.

El sistema se diseñó prestando especial atención a los estados de la interfaz. Cada interacción relevante se mapeó con precisión, incluyendo los escenarios de excepción. Un ejemplo es el flujo de carga de imágenes, que abarca desde la selección hasta la confirmación, incluyendo alertas específicas para acciones incompletas.

Se aplicó el mismo nivel de detalle a módulos como el de Planificación, donde los diferentes estados operativos tienen representaciones visuales distintas, lo que facilita su lectura y la toma de decisiones.

UXSync no solo organiza la apariencia de las interfaces, sino que también estructura el comportamiento.

Beneficios_

UXSync ha establecido una base única para los productos de LinkedBy.

Se ha unificado el lenguaje visual entre SFA y el Panel de Ventas, eliminando la fragmentación anterior y creando una experiencia fluida entre dispositivos móviles y web.

Ahora, los componentes tienen una definición clara de su uso y comportamiento, lo que reduce las variaciones entre las implementaciones y elimina la necesidad de tomar decisiones desde cero con cada nueva versión.

Los estados de la interfaz estaban completamente documentados, incluidas las excepciones, lo que aumenta la previsibilidad del sistema tanto para los usuarios como para el equipo técnico.

Durante el desarrollo, la existencia de una biblioteca reutilizable reduce la necesidad de rehacer el trabajo y acelera la construcción de nuevas pantallas, manteniendo la coherencia sin depender de decisiones individuales.

El resultado es una plataforma más coherente, más fácil de evolucionar y alineada con la complejidad de la operación a la que da soporte.

Herramientas utilizadas_

• UX/UI Design

Sin una base sólida, el producto crece desequilibrado.

El sistema de diseño rara vez parece urgente mientras el producto aún funciona. Pero a medida que crece, el costo de la falta de estandarización se hace evidente en cada nueva pantalla, cada ajuste y cada nueva persona que se une al equipo.

LinkedBy estructuró esta base en el momento en que comenzó a tener un impacto directo en la evolución del producto. UXSync consolida esta decisión.

Si tus productos siguen creciendo sin un punto de referencia común, la cuestión no es si estructurar un sistema de diseño, sino cuándo.