Wireframing Too Good To Go
Entrenando habilidades visuales, flujos de usuario y arquitectura de información
*Es necesario aclarar que este proyecto fue llevado a cabo antes de tener unos conocimientos profundos sobre diseño y experiencia de usuario. Puede servir como muestra de la mejora experimentada en estos meses.
Overview
El segundo desafío se presenta como un ejercicio de “ingeniería inversa”: a partir de una aplicación popular, debemos extraer el diseño de interacción y construir un prototipo de baja fidelidad que muestre su User Flow.
La aplicación escogida es Too Good To Go, una plataforma que permite a establecimientos vender su exceso de comida a precios reducidos, en lugar de tirarla. Desde el punto de vista del usuario, la aplicación se basa en escoger una opción de comida ofertada por un establecimiento, comprar el pack e ir a recoger el pedido. Sencillo y útil.
Paso 1: Analizar
Así pues, iniciaré el proceso de compra desde cero, para comprobar si resulta tan simple como se presenta. Una vez descargada la aplicación, me limito a seguir los pasos:
Registro ➜ Aceptar condiciones ➜ Seleccionar ubicación ➜ Home ➜ Escoger opción ➜ Reservar pedido ➜ Pago
Para analizar este proceso utilizo el modelo Task Analysis: aprender sobre los usuarios observándolos en acción para comprender en detalle cómo realizan sus tareas y logran sus objetivos, y así mejorar o re-definir la navegación de forma apropiada.
Según este modelo, hay varios puntos que tienen que ser definidos:
- Fijar la tarea que los usuarios tratan de realizar: en este caso se ha elegido ‘comprar un pack de comida’
- Dividir la tarea en varias sub-tareas: que corresponden al flujo anteriormente descrito; registro-ubicación-filtro-selección-pago
- Dibujar el diagrama de flujo de las sub-tareas (a continuación)
Paso 2: Wireframing
Para dibujaré los Wireframes de la aplicación y poder descomponer el diseño en flujos de interacción, copiaré las capturas de pantalla en low/mid fidelity utilizando un kit de wireframing con los elementos básicos.
Paso 3: Prototipar
Una vez diseñados los Wireframes, introduzco la interacción mediante la función de Prototipo de Figma.
Puedes experimentar la interacción aquí:
Mis conclusiones
El resultado del Task Analysis es que el Work Flow o flujo de trabajo que la aplicación plantea es sencillo, intuitivo y te permite conseguir el objetivo (User Goal) fácilmente.
Por otra parte, el proceso de wireframing y prototyping me ha permitido ver la estructura y comprender en profundidad el funcionamiento de la APP. El ejercicio me ha servido para familiarizarme con la herramienta Figma, la forma de diseñar interfaces mediante componentes y el desarrollo de interacción (que aún tengo que dominar).
Thanks for reading!! 🌻💜
