Wireframing — Challenge 2 (Iron Hack Pre work)
¡Nuevo reto a la vista! Esta vez he elegido la aplicación de Pull and Bear. Una marca de retail que pertenece al grupo Inditex y tiene un gran éxito de público joven.
Me decidí por esta aplicación porque la uso de forma frecuente para comprar ropa y me parece que tiene una buena usabilidad. Además, tiene un diseño de interfaz de usuario muy llamativa, simple y fácil con el que consigue que el usuario no se distraiga y puedas hacer la compra de una forma rápida.
USER FLOW
El flujo de usuario en el que nos vamos a fijar para este Challenge es el de la compra de un producto.
Comenzamos en la home de la App (yo ya estoy registrada pero el proceso hasta el final de la compra es el mismo para usuarios sin registrar).
La usuaria (en este caso mujer) entra en la aplicación Pull and Bear porque busca un pantalón denim para esta primavera. Los pasos de navegación que seguirá son los siguientes:
1 — Home
Al abrir la App entra directamente en la home, donde tendrá que elegir entre la categoría de productos de hombre o mujer.
2 — Landing de categoría
La usuaria conoce el producto que desea buscar y hace clic en el botón del menú que pone “Always denim” para poder ver los productos denim.
3 — Landing Filtros
Es en este paso cuando selecciona el denim que la interesa que es de talle alto y en acabado lavado. Hace clic en el producto para ver la descripción y fotos.
4 — Ficha de producto
La usuaria ve las fotos y decide que le gusta, pero quiere elegir su talla.
5 — Ventana modal en la ficha de producto
La usuaria elige la talla 38 en la que está interesada y hace clic en añadir.
6 — Carrito
El producto encaja a la perfección con lo que ella buscaba y decide comprarlo.
WIREFRAMES
En este momento procedo a crear un wireframe, mediante la herramienta de Figma, para cada una de las pantallas del flujo de compra.
COMPONENTES
Después de crear los diferentes wireframes podemos observar distintos componentes y controles: radio buttons, placeholder, etiquetas, iconos y desplegables.
PROTOTIPO
Cuando ya hemos elaborado la estructura del user flow con los wireframes, desde Figma he creado un prototipo para ver de qué forma interactúa el usuario con mi App y ver si la fluidez del flujo es correcta. ¡Podéis verlo aquí!
Conclusión personal: la herramienta de Figma me está pareciendo cada vez más asombrosa y eso que todavía no la estoy sacando el máximo partido. La creación de los wireframes me ha llevado tiempo ya que todavía no estoy familiarizada con los componentes como botones y demás. Estoy contenta con el resultado y sobre todo en el momento de crear el prototipo y ver que funciona (o eso creo 😄) la sensación ha sido de WOOOOOOOW!!!!
