Rocket Mode en Delivery App

Contexto

Rocket Mode es una funcionalidad dentro de Delivery App, la app que usan los repartidores para gestionar sus entregas. Se desarrolló como una mejora sobre la ordenación manual de rutas, con el objetivo de automatizar el proceso y hacerlo más eficiente.

Objetivo

Facilitar el reparto diario, especialmente para usuarios nuevos que aún no conocen bien su zona. A nivel de negocio, el objetivo es reducir los tiempos de entrega, aumentar el número de servicios completados y mejorar la precisión en la estimación horaria para los destinatarios.

Mi rol

Codiseñé toda la funcionalidad a nivel UX y fui responsable del diseño completo de UI. Trabajé en colaboración con equipos de desarrollo, data y operaciones distribuidos entre España y Alemania. El proyecto exigía tiempos de entrega muy ajustados y un diseño compatible con dispositivos con versiones antiguas de Android.

Cuatro capturas de pantalla de una aplicación móvil de gestión de rutas, que muestran diferentes etapas del proceso: desde la selección del método de ordenación (Modo Cohete o Manual), pasando por la configuración del punto de inicio y los descansos, hasta la visualización de los servicios pendientes y los detalles de un bulto específico
Cuatro capturas de pantalla de una aplicación móvil de gestión de rutas, que muestran diferentes etapas del proceso: desde la selección del método de ordenación (Modo Cohete o Manual), pasando por la configuración del punto de inicio y los descansos, hasta la visualización de los servicios pendientes y los detalles de un bulto específico
Cuatro capturas de pantalla de una aplicación móvil de gestión de rutas, que muestran diferentes etapas del proceso: desde la selección del método de ordenación (Modo Cohete o Manual), pasando por la configuración del punto de inicio y los descansos, hasta la visualización de los servicios pendientes y los detalles de un bulto específico

Resultados y métricas

Reducción del 7-10% de entregas fuera de la franja horaria establecida

Aumento del 15-17% de paquetes entregados al día

Mayor eficiencia en el consumo de combustible

Lanzado en agencias seleccionadas de España y Portugal

Proceso de trabajo

Investigación e ideación

La fase de ideación comenzó con una sesión presencial con equipo de Alemania y España. El equipo alemán trajo una visión detallada del uso real de la app por parte de los repartidores. Compartieron insights sobre cómo se organizaban actualmente las rutas, qué criterios usaban los repartidores para ordenar su jornada y qué diferencias observaban entre perfiles nuevos y experimentados.

A partir de esa base, hicimos una revisión conjunta de otras aplicaciones y de procesos operativos relacionados, tanto internos como externos. Analizamos el flujo completo del reparto desde el punto de vista de distintos perfiles implicados — destinatarios, operaciones, personal de reparto, atención al cliente— y señalamos los puntos fuertes, los puntos de fricción y las posibles oportunidades de mejora en cada etapa del recorrido.

Uno de los hallazgos más importantes fue que la ordenación manual de la ruta consumía demasiado tiempo y generaba bastante inseguridad, sobre todo en repartidores nuevos. Además, este proceso inicial no siempre se reflejaba bien en la estimación de tiempos para los destinatarios, lo que impactaba negativamente en la percepción del servicio.

Un tablero de ideas digital con la palabra "Notas" en la parte superior. Está organizado en varias secciones como "Información", "Pain point", "TO-DO", "Oportunidad" y "Duda". Dentro de cada sección, hay múltiples post-its digitales en colores amarillo, rosa, gris y azul, con texto en español que parecen ser ideas, problemas, tareas y oportunidades relacionados con diferentes aplicaciones o proyectos.
Un tablero de ideas digital con la palabra "Notas" en la parte superior. Está organizado en varias secciones como "Información", "Pain point", "TO-DO", "Oportunidad" y "Duda". Dentro de cada sección, hay múltiples post-its digitales en colores amarillo, rosa, gris y azul, con texto en español que parecen ser ideas, problemas, tareas y oportunidades relacionados con diferentes aplicaciones o proyectos.
Un tablero de ideas digital con la palabra "Notas" en la parte superior. Está organizado en varias secciones como "Información", "Pain point", "TO-DO", "Oportunidad" y "Duda". Dentro de cada sección, hay múltiples post-its digitales en colores amarillo, rosa, gris y azul, con texto en español que parecen ser ideas, problemas, tareas y oportunidades relacionados con diferentes aplicaciones o proyectos.
Una serie de tres fotografías que muestran dibujos de wireframes de interfaces de usuario hechos directamente sobre paredes y un panel de vidrio en una oficina. Los dibujos, hechos con marcadores, representan elementos de la interfaz de una aplicación, incluyendo campos de texto, botones y secciones. También se ven extintores de incendios y plantas de interior en el entorno de la oficina.
Una serie de tres fotografías que muestran dibujos de wireframes de interfaces de usuario hechos directamente sobre paredes y un panel de vidrio en una oficina. Los dibujos, hechos con marcadores, representan elementos de la interfaz de una aplicación, incluyendo campos de texto, botones y secciones. También se ven extintores de incendios y plantas de interior en el entorno de la oficina.
Una serie de tres fotografías que muestran dibujos de wireframes de interfaces de usuario hechos directamente sobre paredes y un panel de vidrio en una oficina. Los dibujos, hechos con marcadores, representan elementos de la interfaz de una aplicación, incluyendo campos de texto, botones y secciones. También se ven extintores de incendios y plantas de interior en el entorno de la oficina.

Con todo ese análisis, definimos los focos clave que debía cubrir la nueva funcionalidad:

  • Automatizar la organización de la ruta para que sea la más eficiente posible.

  • Reducir los tiempos de entrega y el número de paquetes no entregados por falta de tiempo.

  • Facilitar la incorporación de nuevos repartidores, reduciendo la curva de aprendizaje.

  • Mejorar la precisión de la hora estimada de llegada al destinatario.

Prototipado

Al trabajar sobre una app ya consolidada, con componentes y flujos bien definidos, no dediqué un tiempo excesivo a crear wireframes ni hacer diseño de baja fidelidad. Pasé directamente al prototipado en alta fidelidad, adaptando las nuevas propuestas directamente sobre la interfaz real.

Diseñé un prototipo de alta fidelidad en Figma, incluyendo interacciones clave para simular el comportamiento real de la funcionalidad. Lo que buscaba era transmitir rapidez, inmediatez, y una mejora visual que hiciera que el sistema se sienta moderno.

El prototipo cubría el flujo completo de selección del tipo de ordenación de ruta, el aviso que aparece cuando el sistema detecta una ruta más óptima, y como añadido, también una vista en la app del destinatario para el seguimiento del paquete.

Una captura de pantalla de una aplicación móvil con el título "Ordenación". Presenta cuatro métodos de ordenación de rutas para elegir: "Modo Cohete" (la mejor versión), "Manual", "Por punteo" (mantener el orden existente) y "Por punteo inverso" (empezar desde el último punteo).
Una captura de pantalla de una aplicación móvil con el título "Ordenación". Presenta cuatro métodos de ordenación de rutas para elegir: "Modo Cohete" (la mejor versión), "Manual", "Por punteo" (mantener el orden existente) y "Por punteo inverso" (empezar desde el último punteo).
Una captura de pantalla de una aplicación móvil con el título "Ordenación". Presenta cuatro métodos de ordenación de rutas para elegir: "Modo Cohete" (la mejor versión), "Manual", "Por punteo" (mantener el orden existente) y "Por punteo inverso" (empezar desde el último punteo).
Una captura de pantalla de una aplicación móvil con el título "Modo Cohete". La pantalla permite al usuario seleccionar una hora de salida (08:15 AM/PM) y una primera parada (Carrera de Béjar, 67, 08029 Barcelona). También ofrece la opción de añadir un descanso y tiene un botón para "ORDENAR RUTA".
Una captura de pantalla de una aplicación móvil con el título "Modo Cohete". La pantalla permite al usuario seleccionar una hora de salida (08:15 AM/PM) y una primera parada (Carrera de Béjar, 67, 08029 Barcelona). También ofrece la opción de añadir un descanso y tiene un botón para "ORDENAR RUTA".
Una captura de pantalla de una aplicación móvil con el título "Modo Cohete". La pantalla permite al usuario seleccionar una hora de salida (08:15 AM/PM) y una primera parada (Carrera de Béjar, 67, 08029 Barcelona). También ofrece la opción de añadir un descanso y tiene un botón para "ORDENAR RUTA".
Una captura de pantalla de una aplicación móvil con el título "Servicios". Muestra una lista de "8 Servicios Pendientes", cada uno detallando el número de bultos, la dirección de entrega en Barcelona, el destinatario, el cliente y el número de envío. En la parte inferior, una ventana emergente indica que la ruta se está configurando y pregunta al usuario si prefiere ordenarla manualmente.
Una captura de pantalla de una aplicación móvil con el título "Servicios". Muestra una lista de "8 Servicios Pendientes", cada uno detallando el número de bultos, la dirección de entrega en Barcelona, el destinatario, el cliente y el número de envío. En la parte inferior, una ventana emergente indica que la ruta se está configurando y pregunta al usuario si prefiere ordenarla manualmente.
Una captura de pantalla de una aplicación móvil con el título "Servicios". Muestra una lista de "8 Servicios Pendientes", cada uno detallando el número de bultos, la dirección de entrega en Barcelona, el destinatario, el cliente y el número de envío. En la parte inferior, una ventana emergente indica que la ruta se está configurando y pregunta al usuario si prefiere ordenarla manualmente.
Una captura de pantalla de una aplicación móvil con el título "Servicios". Muestra una lista de "8 Servicios Pendientes" con detalles de entrega similares a otra imagen. En la parte inferior, una ventana emergente notifica al usuario que se ha encontrado una ruta que les ahorra "XX minutos" y les pregunta si desean "CAMBIAR RUTA" o "MANTENER RUTA ACTUAL".
Una captura de pantalla de una aplicación móvil con el título "Servicios". Muestra una lista de "8 Servicios Pendientes" con detalles de entrega similares a otra imagen. En la parte inferior, una ventana emergente notifica al usuario que se ha encontrado una ruta que les ahorra "XX minutos" y les pregunta si desean "CAMBIAR RUTA" o "MANTENER RUTA ACTUAL".
Una captura de pantalla de una aplicación móvil con el título "Servicios". Muestra una lista de "8 Servicios Pendientes" con detalles de entrega similares a otra imagen. En la parte inferior, una ventana emergente notifica al usuario que se ha encontrado una ruta que les ahorra "XX minutos" y les pregunta si desean "CAMBIAR RUTA" o "MANTENER RUTA ACTUAL".

El trabajo implicó tanto la creación de pantallas nuevas para Rocket Mode como la modificación de componentes existentes y ajustes en la arquitectura del menú principal. Aunque ya había creado unas directrices y guías de uso de componentes, fue necesario adaptar el contenido para integrar esta nueva lógica sin romper la experiencia global.

Para compartir el funcionamiento y facilitar la validación con otros equipos, grabé un vídeo en Loom explicando el flujo y los puntos clave del diseño. El prototipo se testó internamente, lo que permitió detectar mejoras importantes, como la necesidad de adaptar algunos elementos interactivos a dispositivos más antiguos y de bajo rendimiento, muy comunes entre los usuarios.

El prototipo sirvió también como guía directa para el equipo de desarrollo, actuando como referencia visual y funcional durante la implementación.

Decisiones visuales

A nivel visual, el principal reto fue integrar una funcionalidad nueva sin romper la coherencia del sistema existente, y, al mismo tiempo, no añadir más complejidad de la necesaria en un flujo que debía ser rápido, claro, y fácil de ejecutar. El objetivo era que los usuarios pudieran activar y entender “Rocket Mode” sin esfuerzo, incluso en situaciones de alta presión o en movimiento.

Para ello, tomé una serie de decisiones orientadas a reforzar la claridad, el foco visual, y la rapidez de interpretación:

  • Iconografía: utilicé la librería de iconos de Material Design para tener unificada toda la iconografía de la aplicación. En algunos casos utilicé esa librería como base para extender con algún icono específico de la app.

  • Jerarquía en el menú: reorganicé la arquitectura del menú principal para dar visibilidad al nuevo flujo de ordenación, sin desplazar ni interferir con funcionalidades ya consolidadas.

  • Colores e indicadores sutiles: incorporé microanimaciones suaves y elementos visuales discretos para indicar cuándo el sistema había detectado una ruta mejor. Era importante destacar esta información sin generar sobresaltos ni ruido visual, ya que muchos usuarios interactúan con la app en movimiento, en plena calle o incluso dentro del vehículo.

  • Consistencia y rendimiento: todos los elementos nuevos se construyeron a partir de componentes existentes del sistema de diseño. Esto permitió mantener la consistencia visual y asegurar la compatibilidad con dispositivos Android antiguos o de bajo rendimiento, algo muy común en este entorno.

Estas decisiones buscaban un equilibrio entre visibilidad, continuidad visual y eficiencia técnica, teniendo siempre en cuenta el contexto real de uso: alta velocidad, condiciones poco ideales y usuarios que necesitan respuestas rápidas sin distracciones.

Retos y aprendizajes

Uno de los principales retos fue diseñar una funcionalidad avanzada como Rocket Mode en un entorno técnicamente limitado. Muchos de los usuarios utilizan dispositivos con versiones antiguas de Android y con poca potencia, lo que obligaba a optimizar cada detalle del diseño: reducir animaciones complejas, simplificar interacciones y reutilizar componentes del sistema para no comprometer el rendimiento.

Otro punto clave vino del feedback interno: algunos usuarios percibían la funcionalidad como poco fiable o “demasiado bonita” para ser realmente útil. Esto hizo que repensara la forma de comunicar el valor de Rocket Mode, no solo a nivel visual, sino también funcional. Incorporamos mensajes más claros, explicaciones directas sobre su funcionamiento y reforzamos los elementos que indicaban que el sistema realmente estaba optimizando la ruta.

En productos operativos como este, el diseño no solo debe ser usable y eficiente, también debe generar confianza en contextos de alta presión y bajo margen de error.

Una captura de pantalla de una aplicación móvil con el título "Rocket Mode" y un icono de cohete. La pantalla invita al usuario a seleccionar una hora de salida para encontrar la mejor ruta posible. Se muestra un selector de hora con 12:30 resaltado, y un botón "EMPEZAR" en la parte inferior.
Una captura de pantalla de una aplicación móvil con el título "Rocket Mode" y un icono de cohete. La pantalla invita al usuario a seleccionar una hora de salida para encontrar la mejor ruta posible. Se muestra un selector de hora con 12:30 resaltado, y un botón "EMPEZAR" en la parte inferior.
Una captura de pantalla de una aplicación móvil con el título "Modo Cohete". La pantalla permite al usuario seleccionar una hora de salida (08:15 AM/PM) y una primera parada (Carrera de Béjar, 67, 08029 Barcelona). También ofrece la opción de añadir un descanso y tiene un botón para "ORDENAR RUTA".
Una captura de pantalla de una aplicación móvil con el título "Modo Cohete". La pantalla permite al usuario seleccionar una hora de salida (08:15 AM/PM) y una primera parada (Carrera de Béjar, 67, 08029 Barcelona). También ofrece la opción de añadir un descanso y tiene un botón para "ORDENAR RUTA".

¿Quieres saber más?

Siempre estoy abierto a hablar sobre nuevos proyectos, no dudes en escribirme

Made with ☕️ & ❤️ by Renato

¿Quieres saber más?

Siempre estoy abierto a hablar sobre nuevos proyectos, no dudes en escribirme

Made with ☕️ & ❤️ by Renato

¿Quieres saber más?

Siempre estoy abierto a hablar sobre nuevos proyectos, no dudes en escribirme

Made with ☕️ & ❤️ by Renato

Create a free website with Framer, the website builder loved by startups, designers and agencies.