Proyecto 5: Foodea (UX/UI)

Semanas 5 & 6 — Creación de una App de recetas (Versión en español)

Estelle Martini
6 min readOct 26, 2020

INTRODUCCIÓN

Durante las semanas 5 y 6 del Bootcamp, tuvimos que realizar nuestro primer proyecto individual. Teníamos que encontrar un problema relacionado con el mundo de la salud o de las finanzas. El lunes, teníamos que compartir con nuestros instructores los problemas y ver si ellos daban el visto bueno. En un principio, los problemas que había encontrado relacionados al mundo del padel no fueron validados, así que tuve que pivotar rápidamente y encontrar uno nuevo. Al final, es gracias a una idea de un Crazy Eights que había dibujado para un challenge que encontré el problema que iba a constituir mi primer proyecto individual en Ironhack.

En un principio, el problema se había formulado de la siguiente manera:

La gente no tiene inspiración a la hora de cocinar y no aprovecha al cien por cien lo que tiene en la nevera.

FASE DE UX

Duración: 5 días

Empatizar

Para poder validar mi problema, empecé con la empatización. Hice el Lean Survey Canvas para poder definir bien las preguntas de mi encuesta y empecé con las entrevistas. De las 50 encuestas y 10 entrevistas, he podido sacar la información siguiente:

También analicé a la competencia gracias a un Competitive Analysis. Me dí cuenta de que ya había muchas aplicaciones en el mercado, pero que el mundo de las recetas era complicado y que había mucha posibilidad de mejora.

Definir

El segundo día, gracias a toda la información recopilada del research, tocaba definir mejor el problema. Para poder hacerlo, realicé el Lean UX Canvas. Esta herramienta me ha sido muy útil para tener más claro por donde iba el proyecto, cuál era el problema, quienes eran mis usuarios, cuáles eran las oportunidades de negocio y qué posibles soluciones podía aportar mi herramienta.

A continuación, creé un Affinity Diagram para analizar todas las respuestas del research y de allí realicé el User persona para ponerme en la piel de mi usuario. También hice un Empathy map para ayudarme en el proceso.

Affinity Diagram & Empathy Map
User Persona
User Journey

Para ponerme en la situación de mi usuaria, Ana Marrero, empecé a escribir el User journey. Fue muy útil para detectar los problemas a los cuales se enfrentaba y encontrar posibles oportunidades para desarrollar mi herramienta. De allí, he podido elaborar el User scenario que me permitió ver cómo mi herramienta podría afectar a mi usuaria.

Idear

El miércoles, entramos en la fase de ideación. Gracias a las herramientas previas, realicé un brainstorming con todas las ideas y la información que había recopilado. También hice un mindmap, para darle forma a mis ideas y pensamientos. Me encanta este ejercicio porque es el momento de soltarlo todo en una página blanca y empezar a darle forma al problema inicial. También nos damos cuenta con este ejercicio de cómo va evolucionando nuestro pensamiento a medida de que sacamos informaciones y vamos realizando las herramientas. También dibujé de nuevo un Crazy Eights y he podido comparar con el primero que había hecho.

Brainstorming

SOLUCIÓN

A partir de allí, empecé a tener una idea más clara de la solución: una aplicación que permita a los usuarios tener inspiración de recetas, pero sobre todo poder encontrar recetas a partir de ingredientes que tienen en la nevera o en la despensa. Además, la aplicación contaría con un organizador que permita a los usuarios planificar sus recetas semanales y así preocuparse menos a diario por lo que van a tener que cocinar. Por fin, una funcionalidad de favoritos para que los usuarios puedan no sólo guardar las recetas de la App, sino también añadir recetas propias para tenerlas todas en un mismo lugar.

Prototipar y Testar

Con esta idea de solución en mente, realicé un Card sorting para organizar la información y poder realizar el Site map. A continuación, dibujé primero el Low-fi, lo testé y luego dibujé el Mid-fi. Al principio, tenía la idea de una nevera que los usuarios iban a rellenar y de allí poder proponer recetas a los usuarios. Sin embargo, haciendo test, rápidamente me dí cuenta de que eso suponía un esfuerzo de parte de los usuarios y que no iba a ser posible. Además, suponía un problema para registrar las cantidades. De allí, tuve que darle una vuelta al Mid-fi y plantearme otra manera de resolver el problema. Así quedó la última versión del Mid-fi.

Mid-Fi Prototype

FASE DE UI

duración: 5 días

La semana 6 estaba dedicada a la parte de UI. El lunes, empecé a realizar un moodboard para poder definir los atributos de la marca y de allí definir los colores y la tipografía. También, empecé a pensar en un nombre y un logo para mi marca. Gracias a una encuesta, los usuarios definieron la marca como: fresca, agradable y viva.

Moodboard, Brand Attributes & UI Kit

De allí, salieron los colores. Se veía muy bien que dominaba el verde y el naranja en el moodboard y esos colores correspondían a los atributos de la marca. Sin embargo, no ha sido fácil escoger los colores porque quería que fueran accesibles así que tuve que testarlos. Finalmente, decidí usar la tipografía SF Pro Display porque quería una tipo limpia y fácil de leer, muy adecuada para una app de recetas.

Los días siguientes, concreté las aliniaciones, los espacios y las sombras. Todo el diseño está en base 8. También realicé el Style tiles así como el UI Kit a medida que iba testando con unas pantallas del Mid-fi para tener una idea de cómo podría quedar y realicé tests con usuarios para ver si todo funcionaba bien.

Finalmente, me quedaba poco tiempo, así que me puse a dibujar el High-fi y a preparar el keynote para la presentación del viernes.

A continuación, podemos ver el prototipo. Nuestra usuaria se registra en la aplicación, llega a la página principal dónde la app le indica con un tooltip su funcionalidad principal. Luego, la usuaria busca una receta con ingredientes que tiene en casa. La app le sugiere ingredientes pero también se pueden añadir manualmente. Finalmente, la usuaria guarda una de las recetas en el planificador y decide cocinarla luego.

High-Fi Prototype

Próximos pasos y monetización

Cómo próximos pasos, se podría plantear la creación de una lista de compra basada en una lista de recetas seleccionadas por el usuario. En lo que se refiere a la monetización, se podría plantear de diferentes maneras: un modelo freemium, con recetas premium dentro de la app o ofrecer servicios (como talleres de cocina) dentro de la app.

APRENDIZAJE

Este primer proyecto individual ha sido el mayor reto hasta ahora. Sin embargo, ha sido la mejor manera de poner a prueba mi aprendizaje. He aprendido mucho de UX y de UI, y he podido constatar que las dos partes me encantaban. Al principio, le tenía mucho respeto al UI porque dudaba de mis capacidades, pero las herramientas me han ayudado mucho y poco a poco he ido avanzando. Estoy muy contenta con lo que he realizado en apenas 10 días. Siento que me está entrando el UXUI en las venas y no puedo desconectar.

Espero que os haya gustado mi primer proyecto y vuelvo pronto con el segundo,

Estelle.

P.D. Espero vuestras preguntas y estoy disponible para trabajar. Os dejo mi mail por aquí: e.martini26@gmail.com.

You can also find this article in English here:

https://e-martini26.medium.com/project-5-foodea-ux-ui-5bd01dd99ac4

--

--