Mi rol: UX/UI Designer — autora del sistema de diseño y líder del diseño de las plataformas donde se aplicó
Empresa: RaBee Express (logística y paquetería)
Equipo: Colaboración con Producto, Tecnología y Operaciones
Herramientas: Figma (librerías y componentes), FigJam
Duración: 2022 – 2023
Plataformas: Web (portal del cliente) · App móvil (repartidores
Contexto y problema
RaBee Express es una empresa de logística y paquetería cuya plataforma digital había crecido a varios productos y dispositivos sin un lenguaje visual común. Esto convivía con una base de usuarios muy diversa: desde Key Account Managers que gestionaban grandes volúmenes con conocimiento técnico moderado y pequeños comerciantes que entraban de forma esporádica, hasta repartidores de última milla que usaban la app en movimiento.
Esa mezcla de productos y perfiles generaba inconsistencias entre pantallas, componentes duplicados y entregas lentas de desarrollo. Cada nueva funcionalidad se diseñaba casi desde cero, lo que multiplicaba el trabajo y rompía la coherencia de la marca.
Reto a resolver: dar una experiencia coherente y accesible a usuarios muy distintos, en web y móvil, sin frenar la velocidad de los equipos. La respuesta fue un sistema de diseño único, aplicable en todos los puntos de contacto.
Mi Rol
Fui la autora del sistema de diseño: definí los fundamentos, construí los componentes y escribí las directrices de uso. Además lideré el diseño end-to-end de las dos plataformas donde se aplicó —el portal del cliente y la app de repartidores—, lo que me permitió crear el sistema y, al mismo tiempo, probarlo en contextos reales y muy diferentes entre sí.
El objetivo del sistema
Definí el sistema de diseño alrededor de cuatro metas claras:
Coherencia y consistencia en todos los puntos de contacto con la marca, en web y en móvil, para generar confianza en el usuario.
Ahorro de tiempo y recursos al reutilizar componentes existentes en vez de rediseñar cada funcionalidad.
Accesibilidad como criterio base, cumpliendo estándares en web y móvil.
Mantenimiento simple para que un cambio se propagara de forma coherente a todas las plataformas.
Proceso
1. Fundamentos del sistema
Empecé con una auditoría de los estilos y componentes existentes para mapear las inconsistencias. A partir de ahí definí los fundamentos —tokens de color, tipografía y espaciado— y construí una librería de componentes con sus variantes y estados, pensados para responder tanto en web como en móvil. Documenté directrices de uso y criterios de accesibilidad para que Producto y Desarrollo pudieran adoptarlo.
Como el sistema solo demuestra su valor cuando se aplica, lo llevé a tres productos con usuarios y contextos distintos entre sí:
2. Aplicación en web — Portal del cliente
Negocio pidió rediseñar el portal del cliente y sumar un módulo de recolección, con el objetivo de dar visibilidad de la operación en tiempo real. Trabajé con Design Thinking dentro de un marco ágil, junto con Producto, Tecnología y Operaciones.
En la fase de empatía conduje entrevistas con Key Account Managers y pequeños comerciantes, construí mapas de empatía, revisé tickets de soporte y mapeé los procesos con el equipo de implantación. Detecté tres oportunidades: reducir la curva de aprendizaje (la interfaz no guiaba y provocaba errores), digitalizar la recolección (antes era offline y dependía de soporte) y disminuir los errores operativos en la creación de paquetes.
Definí el problema —“los usuarios necesitan crear y monitorear sus envíos de forma sencilla y guiada, con visibilidad en tiempo real y recolección integrada”— y diseñé flujos guiados paso a paso, validaciones automáticas, ayuda contextual y un dashboard con trazabilidad clara. Prototipé en Figma reutilizando el sistema de diseño para dar unidad, y validé con pruebas moderadas, experimentos A/B y una beta cerrada con clientes estratégicos.
3. Aplicación en móvil — App de repartidores
El segundo escenario fue la app de los repartidores de última milla, con un objetivo distinto: entregas más rápidas y eficientes. Aquí el usuario era alguien como Erick, 27 años, repartidor, cuyo ingreso depende de la efectividad de entrega y que usa la app en movimiento. Tras comprender el proceso y hacer un análisis competitivo, definí tres retos: unificar y estandarizar los flujos, eliminar pasos para reducir tiempos de tarea y hacer más evidente la retroalimentación de la app.
Diseñé el journey map, los flujos de navegación y la UI final aplicando el mismo sistema de diseño, ahora coherente con la identidad de marca en un contexto móvil. El sistema tuvo que flexionarse a un uso muy distinto —pantalla pequeña, una mano, en la calle— sin perder coherencia con el portal web.
4. Aplicación en PDA — Operación en CEDIS
El tercer escenario fue la PDA (terminal de mano) que usa el personal de operaciones para distribuir paquetes dentro del CEDIS. Empecé con visitas presenciales para entender y mapear el proceso, seguidas de un análisis de la app, antes de rediseñar la UI. Aquí los retos eran muy específicos: la alta rotación del equipo operativo (la interfaz tenía que ser fácil para usuarios nuevos), el tamaño reducido de la pantalla (obligaba a ser muy estratégica con cada elemento) y la necesidad de hacer más evidente la retroalimentación de la app.
Apliqué el sistema de diseño a las vistas de la PDA y, más allá de la interfaz, complementé la solución con un centro de ayuda con preguntas frecuentes y carteles descriptivos del proceso diario para la zona de trabajo. El resultado fue una herramienta más funcional que mejoró la eficiencia del proceso de distribución.
Decisiones de diseño clave
Tokens compartidos como única fuente de verdad. Color, tipografía y espaciado centralizados, de modo que un cambio se propaga a web y móvil a la vez.
Componentes flexibles, coherencia fija. Variantes y estados que permiten adaptar cada pantalla a usuarios y dispositivos opuestos (cliente en escritorio, repartidor en movimiento y operador con PDA de pantalla reducida) sin romper la unidad visual.
Accesibilidad desde la base. Integrada en los componentes, no añadida al final, para cumplir estándares en ambos dispositivos.
Directrices y documentación. Guías de uso para que Producto y Desarrollo adoptaran el sistema y se redujera el retrabajo.
Resultado e impacto
Del sistema de diseño
Coherencia visual y funcional entre web y móvil, y una marca más sólida en todos los puntos de contacto.
Entregas de desarrollo más rápidas gracias a la reutilización de componentes, y mantenimiento simplificado.
Del portal del cliente (web)
Más del 70% de las solicitudes de recolección pasaron a gestionarse desde la plataforma, reduciendo la carga de los canales de atención y habilitando KPIs (tasa de cumplimiento, tiempo y % de recolecciones fallidas).
−35% en errores de creación de paquetes, gracias al flujo guiado, la validación de campos y la ayuda contextual.
−30% en el tiempo promedio de creación de paquetes para usuarios recurrentes; y menos sesiones de capacitación con soporte por la mayor autonomía.
De la app de repartidores (móvil)
Una app más intuitiva y estandarizada que agilizó las entregas y mejoró la satisfacción de los clientes finales.
De la PDA de operación (CEDIS)
Mayor eficiencia en el proceso de distribución y una herramienta más fácil de adoptar pese a la alta rotación, reforzada con un centro de ayuda y material de apoyo en piso.
Aprendizajes y próximos pasos
Aprendizaje. Un sistema de diseño no se valida en su librería, sino en su aplicación. Diseñar para usuarios tan distintos —KAM, comerciantes, repartidores y operadores de CEDIS— en web, móvil y PDA me obligó a un sistema flexible pero coherente, y esa tensión fue justo lo que lo hizo robusto.
Próximos pasos. Extender el sistema al TMS (Transportation Management System), donde la paquetería gestiona las guías, para llevar la misma coherencia al corazón operativo del negocio; y reforzar la gobernanza y los patrones de accesibilidad.