Ironhack’s Prework Challenge 2: Wireframing Cabify
¿Alguna vez habéis imaginado como serían los wireframes de las apps que más utilizáis? Para este ejercicio, los alumnos teníamos que hacer justo eso: “ingeniería inversa” de una app popular. Es decir, pasar del plano de la imaginación al diseño y seleccionando una app, dibujar los wireframes de un user flow cuya delimitación era de 5 a 7 pantallas. Cabify es la app que he elegido para llevar a cabo esta tarea.
¿Por qué Cabify?
Como imagino que muchos sabréis, Cabify es una app de transporte que permite a sus usuarios desplazarse por la ciudad gracias a una gran flota de chóferes privados, así como vehículos disponibles para alquilar de forma temporal. Se trata de un servicio con ciertas similitudes al clásico taxi, pero con más opciones de personalización y facilidades a la hora de contratar el servicio.
Los usuarios de Cabify tienen acceso a un mapa de la ciudad en la que pueden visualizar las opciones de movilidad en directo en función de lo que seleccionen: viajar, conducir o enviar.
La razón por la que he elegido Cabify no es solo lo agradable de su diseño y disposición de elementos, sino por lo sencillo que es desempeñar una de las tareas principales: contratar un servicio para llevar a cabo un viaje.
¿Qué es un Wireframe?
Los wireframes o prototipos, son bocetos que representan de forma visual la información más básica de una app o de una web. Se trata del “esqueleto” de la app o la web: distribución de bloques, medidas, orden… Un wireframe bien llevado a cabo nos enseñará donde encontrar los diferentes elementos de la app, pero no nos debe distraer, por lo que no encontraremos en estos prototipos colores ni representaciones visuales (iconos). Solo y exclusivamente lo más básico y esencial.
Por tanto, una de las tareas más importantes a la hora de crear los wireframes de Cabify era, sin duda, decidir qué elementos debía representar y cuáles no.
El User Flow:
Para realizar este ejercicio he elegido el user flow de Pedir un Cabify, pasando por el proceso de indicar cuál es mi domicilio habitual, una opción que la plataforma da a sus usuarios para que éstos tengan direcciones predeterminadas y ahorrarnos el tener que introducir una y otra vez la dirección.
Este user flow consta de cinco pantallas, a través de las cuales el usuario inicia el proceso de pedir un Cabify, introduce sus datos para configurar su domicilio habitual, y se le busca un coche para recogerlo de donde ha escogido previamente. Es una de las acciones principales que realizan los usuarios una vez la descargan (junto con crear una cuenta e introducir sus datos personales), de ahí la importancia de este user flow.
El resultado de este reverse reverse engineering son los siguientes wireframes:
Prototipando:
Además de realizar este ejercicio de imaginación a la inversa, he construido un prototipo con los wireframes presentados anteriormente:
Conclusiones y aprendizajes clave:
Este segundo challenge del Prework de Ironhack ha supuesto para mí una oportunidad fantástica de familiarizarme con la plataforma de Figma y, sin duda, me ha ayudado a “soltarme” un poco más.
No obstante, a la hora de dibujar los wireframes he encontrado algunas dificultades, sobre todo, a la hora de decidir qué textos quería reflejar en los bocetos y cuáles tenían que limitarse a texto de relleno. Por lo demás, ha sido muy interesante descubrir el esqueleto de esta aplicación tan fácil de usar.
Por último, también he aprendido con este challenge que generalmente las aplicaciones no usan en su paleta de color el negro sino el gris para no generar tan alto contraste, lo cual me ha parecido muy interesante.
