Seguimos con el segundo reto! En este caso, el challenge consistía principalmente en crear wireframes de una aplicación.
Primero de todo, ¿qué aplicación elegí para este reto?
La aplicación que elegí fue Idealista pero, ¿por qué esta app? Idealista es un portal de búsqueda de vivienda que opera en España, Portugal e Italia. A través de ella puedes buscar diferentes tipos de viviendas, desde un estudio hasta un chalet, y en diferentes formatos, es decir, comprar, alquilar o compartir. La razón principal por la que he elegido esta app es porque tiene un diseño sencillo, con la información bien ordenada y clara para el usuario. La forma de utilizarla me parece muy intuitiva para el usuario, incluso teniendo muchas opciones entre las que elegir, y el objetivo final, encontrar un lugar para vivir y contactar con el propietario, se puede conseguir en pocos pasos y fáciles de seguir.
Una vez decidida a trabajar con esta app, estudié los elementos UI que se utilizan y encontré principalmente:
- Input controls: como checkboxes, toggles, cuadros de texto.
- Navigational components: como iconos o botones.
- Information components: como mensajes en recuadros.
En cuanto al user flow, el objetivo de usuario debía ser poner encontrar una vivienda, elegirla y ponerse en contacto con el propietario. Este es el recorrido que tiene que hacer el usuario para poder completar la tarea en lo-fi:
Task analisys
- Primero hay que decidir qué tipo de vivienda estamos buscando, si queremos comprar, alquilar o compartir una habitación o casa, y dónde lo queremos encontrar. Para este ejercicio será una casa alquilada y “cerca de donde estoy”.
- Revisión de los resultados de búsqueda: aparecen muchas opciones de vivienda, por lo que vamos a utilizar los filtros en el apartado “Filtrar” y seleccionamos algunos de ellos, aceptamos y revisamos los resultados.
- El usuario elige uno de los pisos resultado de su búsqueda y puede ver la información en cuanto a fotos, precio, zona exacta, entre otros.
- Contacto con el piso: el usuario deja los datos que prefiera en el apartado “contactar” para que puedan ponerse en contacto con él, terminando la tarea.
Pasé el modelo en lo-fi a wireframes a través del programa Figma y este es el resultado:
Prototipo
Una vez terminado el wireframing, creé el prototipo en esta misma herramienta par probar cómo sería el flujo de tareas que plantee antes y que realizaría el usuario:
Este es el link donde se puede probar el prototipo.
Aquí está todo el desarrollo en Figma del wireframe y prototipo.
Mi experiencia con este challenge
Sin duda ha sido todo un reto! Es la primera vez que me “enfrento” a una herramienta de diseño como Figma y totalmente desde cero. Este reto me ha hecho ver con una perspectiva diferente todo lo que hay detrás del diseño de una aplicación y estoy deseando poder aprender mucho más de ello.
He disfrutado mucho descubriendo cómo utilizar Figma, los Kit de UI y siguiendo aprendiendo a compartir por aquí mi experiencia en UX/UI que acaba de comenzar :)