PORTFOLIO

TupperMe

Proyecto de diseño de experiencia de usuario, desde la pregunta inicial hasta el desarrollo de la solución final en forma de aplicación móvil. Todo empieza con una pregunta que da título a este artículo: Cómo se organiza la gente para comer cuando están en la trabajo o en la universidad.

Al comienzo de mis investigaciones a través de encuestas y entrevistas confirmé que este tema es muy amplio y muchas casuísticas. Familias con hijos, solteros que trabajen y vivan solo, parejas en las que cocinan y trabajan los dos, etc. Al final me enfoque en aquellas personas trabajadoras, que les cuesta planificar las comidas y tiene poco tiempo y experiencia para dedicarle a la cocina

Objetivos

Personas que no tengan tiempo para cocinar y quieran comer equilibradamente

Disciplinas

UX·UI Design y Visual Design

Duración

Dos semanas
En general, intento hacer recetas sencillas y apropiadas para llevar en tupper durante la semana y aprovecha los fines de semana para innovar o hacer platos más complicados o que haya que consumir en el momento.

Elena, Entrevistada para este proyecto

TupperMe es el nombre de la aplicación que he diseñado para a ayudar con la cocina y alimentación equilibrada cuando no hay mucho tiempo para dedicarle.
TupperMe. Cocina para toda la semana en tres horas
TupperMe. Cocina para toda la semana en tres horas

Solución. Tener los ingredientes listos y las recetas seleccionadas acorde con tus preferencias en los ingredientes

Se trata de encontrar una solución que les ayudará a comer equilibradamente sin dedicarle mucho tiempo a buscar recetas y tener los ingredientes listos. Estas son las funcionalidades de TupperMe:
Funcionalidad filtrar ingredientes

Filtrado de ingredientes

  • Filtrado de ingredientes tanto los que te gustan como los que no quieras utilizar. Para que tus menús no contengan los no te gustan o evitar alergias. Y también para cocinar tus ingredientes favoritos.

Recetas nuevas cada semana

Recetas semanales

  • Tres recetas por semana para que las combines como quieras para tus tuppers de la semana, Si quieres más recetas puedes pasarte a la versión Pro.
    Notificación para comprar los ingredientes en función del día que cocinas. Eliges previamente el da que cocinas para que tengas comprados todos los ingredientes que necesitas.

Lista de la compra autogenerada

Lista de la Compra automática

  •  Cuando seleccionas el número de Tuppers, automáticamente se añaden todos los ingredientes que necesitas para tus Tuppers. Tan solo tienes que tachar los que ya tienes en la despensa.

Calcular el número de raciones y tiempo

Calculador de raciones

  • Elegir el número de tuppers variando como tu quieras. Un tupper equivale a una ración y TupperMe te permite seleccionar hasta 15 raciones entre los tres, par que no se te vaya el tiempo en la cocina.

Organizar el tiempo para cocinar los tuppers de la semana. Nuestro reto a resolver.

Para abordar este proyecto planteé la estrategia a seguir para obtener toda la información que necesitamos para llevar a cabo el proyecto. En esta primera fase acotamos y definimos el reto, definimos nuestros potenciales usuarios, qué pretendemos conseguir con nuestra solución y qué herramientas tendremos para validar si estamos en el camino correcto.
UX strategy blueprint

UX strategy blueprint. Esta es la herramiento que nos enfoca en el reto a resolver. Además es una guía jerárquica donde están todos los pasos que tenemos que seguir para llegar a nuestra solución validada y las herramientas que para ello.

Análisis de la competencia. Demasiadas recetas donde elegir, eso abruma a los entrevistados

El siguiente paso es analizar a nuestra competencia para saber qué están solucionando, cuáles son los patrones que se siguen las soluciones que ya están en el mercado. Aquí os dejo el estudio completo:

  • La mayoría de aplicaciones era que ofrecían muchas recetas para elegir, y eso abruma al usuario (según nuestras investigaciones), tiene la opción de crearte el planning de las comidas , según sean desayunos cenas, lo que implica una gran inversión de tiempo por parte del usuario .
  • En la parte que más beneficia al usuario con encontramos que el filtrado de los ingredientes previo, lista de la compra generada y algunas de ellas ya te ofrecen una calculadora de raciones / ingredientes.
  • En los servicios de envío de comida casera ya preparada  y la que te envía los ingredientes para cocinar, resulta poco económico para largos periodos.

Análisis competitivo

La importancia de tener un menú equilibrado y falta de tiempo para la cocina. El problema.

Investigación

A través de 140 encuestas y 8 entrevistas pude detectar cuáles eran las necesidades y problemas principales a resolver. Aquí os dejo la estructura de la encuesta que nos guía para saber qué información necesitamos obtener para validar nuestras hipótesis.

Las encuestas nos sirven para centramos en la información que necesitamos para validar nuestras hipótesis Para ellos nos valemos del Lean survey Canvas.

0
%
Menú equilibrado, lo más importante cuando cocino
0
%
Aprovecha en fin de semana para cocinar

Conclusiones generales

La mayoría de los entrevistados, llevan el tupper para comer al trabajo y aprovechan los fines de semana para cocinar. Pero el mismo problema era recurrente, que no tenían tiempo para cocinar y que muchas veces no tenían los ingredientes que necesitaban al seguir una receta.

Para personas que no tengan tiempo para cocinar y reducir el estrés de cocinar ofreciendo recetas fáciles y rápidas con tiempos marcados. Propuesta de valor.

Una vez recopilados todos los datos, necesitamos construir nuestra hipótesis de solución (o propuesta de valor) y validarla. Así tenemos una dirección más clara que nuestro producto debe tomar, eliminando riesgos y soluciones no deseadas a medida que avanzamos.

Nuestra hipótesis de solución:

Creemos que podemos conseguir más descargas de nuestro producto para personas que no tengan mucho tiempo para cocinar y reducir el estrés que supone  ponerse a cocinar ofreciendo recetas fáciles y rápidas con tiempos marcados.

Lean UX Canvas
La metodología Lean UX canvas es como las ladrillos que construye tu proyecto y el Affinity diagram es el cemento que fija y lo hace estable. De aquí obtenemos nuestra hipótesis de solución que seguiremos validando con herramientas que veremos más adelante.

Empatizar con las verdaderas necesidades del usuario. Hallamos las potenciales funcionalidades de nuestra aplicación

Una vez identificadas las necesidades y preocupaciones de Selma necesitamos encontrar las oportunidades de diseño y cómo nuestra solución (en forma de aplicación móvil) puede adaptarse a esas necesidades.

Además definiremos las las potenciales funcionalidades de nuestra aplicación. Necesitamos sacar nuestra aplicación lo antes posible para ver si funciona o no testeando con nuestros usuarios. Por ello, es necesario priorizar cuáles serán las funcionalidades esenciales.

Necesidades reales de nuestros usuarios:

Analizamos cuáles son las necesidades reales de nuestros usuarios (en torno a nuestra propuesta de solución) y saber cómo cubrirlas. Tomamos a Selma, que nos enseñará qué necesidades e inquietudes tiene.
Esta es Selma y sus inquietudes para cocinar y comer en el trabajo durante la semana:

😵 Hay muchas aplicaciones con demasiadas opciones de recetas
💸 Comer comida preparada sale bastante más caro como opción diaria
😓 Los platos preparados del supermercado no parecen muy saludables
🤔 No sabe qué comer durante la semana y siempre termina comiendo lo mismo
🌙 Cocina la noche de antes lo que pueda y le dura para uno o dos días

Mapa de empatía, que nos revela cuales son las necesidades reales del usuario
Mapa de empatía, que nos revela cuales son las necesidades reales del usuario

Funcionalidades que tendrá nuestra aplicación:

Finalmente estas serán las funcionalidades que tendrá nuestra aplicación:

  • Filtrado de ingredientes. Eligiendo los que no quieres y los que sí quieres que aparezcan en tus recetas.
  • Recetas semanales para combinarlas como quieras.
  • Calculadora de raciones (tuppers) y del tiempo de cada receta.
  • Lista de la compra autogenerada según seleccionas el número de raciones de las recetas semanales.

Nuestro User persona, Selma, que nos ayuda a personalizar y empatizar con ella a la hora de diseñar nuestra solución
Nuestro User persona, Selma, que nos ayuda a personalizar y empatizar con ella a la hora de diseñar nuestra solución
Recopilamos todos los datos e ideas generadas y las agrupamos en categorías comunes que nos darán potenciales funcionalidades de nuestra aplicación mediante un diagrama de afinidad.

Paralelamente, para sacar nuestra aplicación lo antes posible necesitamos priorizar según tiempo, coste y necesidad cuáles será las funcionalidades mínimas necesarias para arrancar. Esto lo hacemos mediante un diagrama MOSCOW,

Diagrama de afinidad de TupperMe
El diagrama de afinidad, donde recopilamos todos los datos e ideas generadas y las agrupamos en categorías comunes que nos darán potenciales funcionalidades de nuestra aplicación
Diagrama MOSCOW para TupperMe
Diagrama MOSCOW, para sacar nuestra aplicación lo antes posible necesitamos priorizar según tiempo, coste y necesidad cuáles será las funcionalidades mínimas necesarias para arrancar.
En estos dos gráficos, podemos ver cómo reacciona Selma antes de entrar en contacto con nuestra aplicación y ver sus problemáticas en relación a la cocina (gráfico de la izquierda, User Journey). Y en la parte de la derecha, después de entrar en contacto con TupperMe y cómo solucionamos esas inquietudes (User Scenario). Esto nos ayuda con las oportunidades de diseño y a crear el flujo de nuestro producto.
User Journey TupperMe
El User journey que nos muestra al usuario antes de usar nuestra solución y ver dónde tiene más problemas
User Scenario TupperMe
El User scenario que nos enseña cómo nuestra aplicación cubre las necesidades del usuario

Primeros bocetos del diseño en papel y en versión digital. Simplificar la monetización y hacer los menús más atractivos visualmente

Llegamos a la fase de bocetar nuestro primer diseño planteado para probarlo rápidamente en lugar de pasar demasiado tiempo en una sola idea que puede no funcionar bien. Después de varios testeos estos son los cambios que realicé:

  • Explicar mejor las funcionalidades en las pantallas iniciales (onboarding)
  • Optimizar la monetización de la aplicación, ya que limitaba demasiado a los usuarios.
  • Añadir la funcionalidad de poder filtrar los ingredientes, ya que en una primera versión no estaba.
  • Hacer más atractiva visualmente la sección de las recetas.

Creación de la marca, sistema de diseño y prototipo final

Lo más importante para nuestros usuarios era que la recetas sean equilibradas, que les permita ahorrar tiempo en la cocina y fácil de usar. Y esto es lo que queremos representar, a través de una familia de colores verdes, formas suaves de los botones y una tipografía redondeada, que hace nuestra aplicación más cercana.
Moodboard y los atributos de marca donde agrupamos de forma visual todo lo que queremos que represente nuestra marca y lo testeamos con usuarios para validarlo.
Moodboard y los atributos de marca donde agrupamos de forma visual todo lo que queremos que represente nuestra marca y lo testeamos con usuarios para validarlo.

Lenguaje visual de nuestra aplicación. Cercanía y facilidad de uso

El color escogido para representar nuestra marca es un verde oscuro intenso pero no muy saturado, representando frescura de la alimentación saludable, frescura y tranquilidad.

Lenguaje visual:

Forma — Redondeada

Espacio — Abierto y limpio

Movimiento — Suave, cercano

Color — Sólido, fesco y natural

Iconos de aplicaciones — Líneas redondeadas y limpias.

Tipo de letra:

SF Pro Rounded – Las tipografías redondeadas son más cercanas debido a sus formas suaves. Adecuadas para proyectos desenfadados, profesionales pero cercanos a su público. Su suavidad tiende a hacerla amable y acogedora. Las fuentes redondeadas a menudo se encuentran en los envases de alimentos.

A continuación creamos nuestro Style tile final que creamos donde nos hacemos una idea de cómo va a ser la gráfica visual de nuestra aplicación TupperMe. Para ello siempre teniendo en cuenta a nuestro público objetivo y la personalidad del usuario.

Style tile de TupperMe
Style Tile, donde nos hacemos una idea de cómo va a ser el visual de nuestra aplicación TupperMe.

Prototipo final de alta fidelidad

He creado una versión del diseño con la que las personas pueden interactuar. Esto ayuda a simular cómo podría ser el producto final y permite recibir comentarios para mejorar. Además he creado la página creada en Webflow donde podemos saber un poco más de TupperMe.

Las funcionalidades principales de TupperMe son:

  • Filtrado de ingredientes y seleccionar día para cocinar para que te avise de cuándo comprar los ingredientes que te falten.
  • Recetas semanales para combinar como tú quieras.
  • Lista de la compra autogenerada una vez seleccionas la combinación de las recetas.

Style Tile, donde nos hacemos una idea de cómo va a ser el visual de nuestra aplicación TupperMe.

Monetización

La monetización de TupperMe consta de una versión PRO que contiene:

  • Poder elegir entre más de tres recetas para combinar durante la semana.
    Que se pueden filtrar más de tres ingredientes (tanto de los que quieres elegir como los que quieres evitar).
  • Información nutricional de las recetas.
  • Poder compartir la.lista de la compra.

Aprendizajes y siguientes pasos

Llevar a cabo un proyecto el que que tú te encargas de todas las fases es muy enriquecedor en varios aspectos a destacar:

  • Te permite hacer una idea del tiempo mínimo que tienes que dedicar a cada tarea.
  • Lo necesario que es la interacción en las distintas fases. Por ejemplo mi modelo de monetización al principio era muy poco atractivo, lo cual tuve que rehacer varias veces el flujo de usuario para llegar a un opción más atractiva.
  • La parte más negativa sería que al estar tu solo, sólo te guías por tu ritmo, lo que puede hacer que te entretengas a veces más tiempo en el algunas tareas y relegar otras. Eso con un equipo es más difícil que pase.

Después de haber probado el prototipo en varias personas me gustaría hacer una tercera versión de este proyectos que consistiría en:

  • Quitar del onboarding el día de cocinar y dejarlo como opción final, no como algo obligatorio.
  • Poner en el centro el filtrado de los ingredientes (así teniendo en cuenta a las personas con alergias, intolerancias…)
  • La promesa de cocinar en tres horas. Para ello pondremos un reloj que se va modificando a medidas que aumentan el nùmero de tuppers (raciones que necesitas).
  • Modificar la sección de filtrado de ingredientes para que sea más rápido y disminuir el nº de pantallas. Tipo Google shopping list .
  • Modificar la monetización de la la app para la variedad de recetas ofrecidas.

Agregar otras funcionalidades que ayudarían con la escalabilidad y que serían:

  • Crear un “modo cocinar” por control de voz que te permite seguir los pasos si tener que tocar el móvil.
  • Poder compartir la lista de la compra con alguien para organizarse a la hora de comprar

Al finalizar este proyecto y escribir este post en Medium, pude comprobar que tengo que mejorar en algunas de las fases:

  • La fase de testeo del diseño de la aplicación en media fidelidad creo que fue insuficiente para poder aplicar más mejoras antes de pasar al prototipo interactivo.
  • Diagrama de afinidad. Escribo esto después de otros dos proyectos realizados y es ahora cuando he comprendido mucho mejor la herramienta del diagrama de afinidad. Tiene gran importancia ya que nos proporciona las potenciales funcionalidades que ayudan a cubrir las necesidades del usuario.

¿Hablamos?

Siempre abierta a escuchar nuevos proyectos.

Linkedin SusanaMedium Susana HerrerosFlickr Suburning