Rediseño del flujo de escaneo y desbloqueo de Reby, una app de movilidad compartida.
Reby
Rediseñé la pantalla de escaneo y desbloqueo de Reby, una app de movilidad compartida utilizada por más de 800.000 usuarios y con más de un millón de viajes realizados en España e Italia.
Era una pantalla pequeña dentro del producto, pero tenía una responsabilidad importante: prácticamente todos los viajes empezaban ahí.
El reto
Para empezar un viaje, el usuario tenía que localizar un patinete, abrir la app y escanear su código QR.
El problema era que el flujo funcionaba bien mientras todo saliera bien. Cuando el código no se podía leer o el escaneo fallaba, la interfaz daba pocas pistas sobre qué estaba pasando y qué podía hacer el usuario a continuación.
Además, el mapa seguía teniendo demasiado peso visual detrás del escáner y la ayuda estaba separada del momento en el que realmente hacía falta.
Mi trabajo se centró en simplificar ese punto del recorrido y hacer que el usuario pudiera recuperarse fácilmente cuando algo fallaba.
Cifras
Cómo trabajé
01Entender dónde fallaba el flujo
Empecé revisando la pantalla existente y los diferentes estados que podía encontrarse una persona al intentar desbloquear un patinete.
El problema no estaba únicamente en escanear el QR. También había que diseñar qué ocurría mientras la cámara buscaba el código, cuando lo encontraba y, sobre todo, cuando no podía leerlo correctamente.
La pantalla estaba resolviendo bien el caso ideal, pero no tanto los casos en los que algo salía mal.
02Dar protagonismo al escaneo
Reorganicé la pantalla alrededor de su acción principal: escanear.
Reduje el peso visual de los elementos secundarios y marqué con más claridad la zona en la que debía colocarse el código QR. El objetivo era que, al abrir la cámara, se entendiera inmediatamente qué había que hacer sin tener que interpretar la interfaz.
También trabajé los diferentes estados del escáner para que el usuario pudiera saber si la app estaba buscando el código, lo había detectado o había ocurrido algún problema.
03Diseñar también el error
Una parte importante del rediseño fue dejar de tratar el error como el final del flujo.
Si el código no podía leerse o no era válido, la propia pantalla explicaba qué había ocurrido y ofrecía una siguiente acción: volver a intentarlo o acceder a ayuda.
Así, el usuario no tenía que salir del proceso ni buscar por su cuenta qué hacer.
04Llevar la ayuda al contexto
La ayuda estaba demasiado alejada del momento en el que aparecía el problema.
La acerqué al flujo de desbloqueo y planteé instrucciones breves sobre cómo escanear correctamente el QR y qué hacer si no funcionaba.
En lugar de esperar que alguien buscara una sección de ayuda dentro de la app, la información aparecía donde tenía sentido: junto al propio escáner.
Resultado
- Un flujo de desbloqueo más centrado en una única tarea y con una jerarquía visual más clara.
- Los estados de escaneo y error pasaron a formar parte explícita de la experiencia.
- Un escaneo fallido dejó de ser un punto muerto: el usuario podía volver a intentarlo o pedir ayuda desde el mismo contexto.
- La ayuda pasó de estar separada del proceso a aparecer en el momento en el que podía ser útil.
Un aprendizaje
Este proyecto me hizo prestar más atención a algo que en una pantalla estática es fácil pasar por alto: diseñar el caso ideal no es suficiente.
En un producto como Reby, la interfaz se utiliza en la calle, con diferentes móviles, condiciones de luz y situaciones que no puedes controlar. El flujo tenía que seguir siendo comprensible también cuando el QR no se escaneaba a la primera.
Reby