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:

  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)

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

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store