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.

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:

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:

  1. Fijar la tarea que los usuarios tratan de realizar: en este caso se ha elegido ‘comprar un pack de comida’
  2. Dividir la tarea en varias sub-tareas: que corresponden al flujo anteriormente descrito; registro-ubicación-filtro-selección-pago
  3. Dibujar el diagrama de flujo de las sub-tareas (a continuación)

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.

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!! 🌻💜

Inquisitive mind 🧠 designing for people. www.lucialanza.com/

Inquisitive mind 🧠 designing for people. www.lucialanza.com/