Challenge 2 — Wireframing Blablacar App
Los wireframes ofrecen una representación visual sencilla de cómo será el flujo de la aplicación o el sitio web que estás creando. El propósito de los wireframes de baja y media fidelidad es crear rápidamente una representación sencilla de lo que será el flujo de tu producto para obtener la aprobación de las partes interesadas y del equipo del proyecto antes de que la fase creativa se ponga en marcha.
Al diseñarse en blanco y negro, o escala de grises, permite poner el foco en la funcionalidad y la experiencia del usuario más que en las características estéticas de los elementos en pantalla.
En definitiva, los wireframes:
- Presentan la información que se mostrará en la página.
- Ofrecen un esquema de la estructura y el diseño de la página.
- Transmiten la dirección general y la descripción de la interfaz de usuario.
Wireframes y Taskflow de Blablacar
Blablacar es un servicio de vehículo compartido que hace posible que las personas que quieren desplazarse al mismo lugar en un mismo momento puedan organizarse para viajar juntos.
Pasos del flujo de usuario para la consecución de un viaje:
1. Establecer un punto de origen y uno de llegada.
2. Selección del día y del número de pasajeros.
3. Hacer click en el botón de Buscar.
4. Selecciona la opción que más te convenga, en función del precio o de las puntuaciones del conductor, para ver la información más detallada del viaje (número máximo de personas en la parte trasera, posibilidad de fumar y modelo del coche).
5. Antes de realizar la reserva puedes contactar con el conductor para completar la información que consideres necesaria.
6. Una vez resueltas tus cuestiones, haz click en el botón de Reservar.
7. Seleccione un método de pago: Tarjeta o PayPal.
8. Introduzca los datos de la tarjeta: nombre del titular, número de tarjeta, fecha de caducidad y CVV de la misma.
9. ¡Genial! Tu reserva de viaje ha sido realizada con éxito.
Una vez tuve claro el flujo de usuario, hice un boceto en papel para aterrizar las ideas, los conceptos e ideas relevantes frente a los elementos secundarios o la información, Loren Ipsum, que no lo era tanto.
Una vez hecho esto, me aventuré y di el paso a Figma para crear el wireflow y el prototipo.
He jugado con los tipos de letra que ofrece la familia Poppins (bold, semibold, medium y regular), así como una variación de grises para categorizar la información en función de su relevancia y facilitar la comprensión de la app a las partes interesadas.
He plasmado la información relevante, etiquetas, CTAs, iconos interactivos de manera real, frente a la información secundaria, o no tan relevante, que entorpecía o despistaba del propósito principal, que no es otro que, entender la estructuración de la app y su flujo de usuario.
Conclusiones finales
Se trata de una app bien estructurada, fácil e intuitiva de usar. La app de Blablacar es un ejemplo de cómo jerarquizar la información y las tareas de usuario correctamente. Esto hace que el taskflow sea sencillo y la experiencia de usuario mucho más agradable.
He creado un prototipo simple de 7 pantallas para mostrar el wireflow general de la app. Os invito a ver el resultado aquí. Espero que os guste (:
