Ui Kitchef

Aplicación de recetas de cocina desde un punto de vista premium con asistente de voz

Cliente
Uxer
Tipo de proyecto
UI/UX Design

El Reto

Partimos de un briefing en el que se nos piden realizar una aplicación de recetas de cocina basada en los siguientes puntos:

  • Creciente interés por la cocina de autor y los espacios gastronómicos de alto nivel(programas como MasterChef, aumento de restaurantes con experiencias gastronómicas de nivel elevado, etc.).
  • Ayudar al usuario a vivir experiencias gastronómicas de alto nivel como cocinero, todo ello sin salir de casa.
  • Comprar recetas gourmet y cocinarlas en casa
  • Gamificación

Y para el cocinado:

  • Sencillo
  • Narrado paso a paso (audio y/o video) por el chef original
  • Incluye cuenta atrás de tiempos de cocinado
  • Se estudiará incorporar reconocimiento por voz y posibilidad de conectarlo con Siri/Alexa/Nest
  • Sorpresas, trucos

El Desarrollo

Partiendo del briefing hicimos un User persona para enfocar bien cómo es nuetro usuario con sus necesidades y frustraciones y así tenerlo presente durante todo el proceso.

Para poder afinar aún más las necesidades del cliente y del proyecto realizamos un contrabrief mediante una entrevista para asegurar que no había otras necesidades que se hubiesen olvidado u omitido y así estar completamente alineados con el cliente.

Para saber cómo podíamos enfocar las funcionalidades de la app, realizamos un benchmak de varias aplicaciones, unas tenían que ver con las recetas de cocina, otras tenían que ver más con distintas funcionalidades que queríamos incluir pero no tenían que ver con recetas o comida.

Con toda la información que fuimos recopilando de todos estos procesos pudimos encaminar qué funcionalidades queríamos incluir en la aplicación y más o menos cómo se debían comportar, ahoro lo que nos faltaba era saber dónde debían a parecer para ello tuvimos en cuenta las necesidades de negocio, qué era lo más importante para el usuario y qué se podía monetizar mejor sin quitar valor a la aplicación. Para ello hicimos un árbol de contenido.

Para saber si esta arquitectura de información que proponíamos era correcta realizamos un tree testing a distintos usuarios.

Después de tree testing acordamos en qué flujos íbamos a trabajar o en cuáles nos íbamos a centrar.

Y realizamos el diagrama de flujo ideal

Con toda la información acumulada pasamos a realizar los wireframing de las pantallas de la aplicación

El Desarrollo, construyendo Kitchef

Para la creación del estilo de la marca y de la aplicación realizamos un Moodboard con tipografía, colores, imágenes, ilustraciones, etc, para pasar todos esos conceptos gourmet, premium, etc a imágenes que respirasen todos esas ideas.

Basándonos en el moodboard fuimos definiendo y perfilando la línea visual de la aplicación llegando al siguiente resultado.

Metiéndonos ya en harina, nos pusimos a trabajar en el sistema de diseño al que llamamos fogón, definiendo el grid, distintos tipos de letra, espaciados, sombras, etc.

Y gracias a la nueva funcionalidad de Figma, creamos las variables que usaríamos a lo largo del proceso de diseño visual y prototipado de la aplicación.

Con todos los elementos y variables comenzamos a diseñar las pantallas de los flujos que habíamos elegido, nos basamos en lo que se conoce como diseño atómico para asegurarnos la buena escalabilidad del proyecto.

A continuación os presento un video con casos de uso para que podáis ver el funcionamiento de la aplicación.

Conclusiones, aprendizajes y next steps

Antes de nada, agradecer a Paloma Alcázar, Alba González y Adriá Romañá el trabajo en equipo que formamos ya que este trabajo lo realizamos entre los cuatro y fue un placer en el que pude aprender mucho de ellos.

Durante este trabajo pude aprender mucho sobre la base de los sistemas de diseño, cómo pueden agilizar y hacer más cómodo el trabajo y como parte de ese aprendizaje, toda la parte que hay de debate y discusión a la hora de tomar decisiones de diseño por muy nimia que parezca, ya que todo se hablaba, debatía y argumentaba.

Por otro lado en la fase de testing con Maze, aprendimos por un lado a trabajar con el programa de testeo y en lo referente a la aplicación, aprendimos y mejoramos los siguientes puntos:

  •  Estado disable en la home difícil de entender en “Comienza a cocinar”.

  • Poca diferencia entre las dos formas de cocinar la receta.

  • Flujo de cocinar receta complejo. Intentamos representar un flujo de voz a través de uno táctil.

Y pudimos confirmar que sí que habían funcionado:

  • Marca consistente.

  • Tono de voz cuidado y cercano.

  • Onboarding atractivo e informativo.

  • Flujo de compra claro y fácil.

Los siguientes pasos en los que trabajaríamos en esta aplicación serían:

  • Integrar la funcionalidad de voz
  • Integrar red de chefs, restaurantes
  • Ampliar la red de comunidad
  • Apostar por el producto local