Sua: La app que te descubre a talentos culinarios en tu zona
| UX UI Case study |
Durante el confinamiento ocasionado por el COVID-19, mis compañeros de piso y yo comprobamos en primera persona el inmenso potencial socializador que tiene la comida. En nuestro caso personal, vimos cómo unos vecinos de los que no sabíamos prácticamente nada pasaron a ser íntimos en cuestión de meses a base de organizar quedadas culinarias semana tras semana.
«¡Rodri, cocinas genial y solo tus amigos lo saben!» En este lapso de tiempo, esta frase que uno de mis compañeros le dijo a otro se me quedó grabada y me llevó a reflexionar:
1. En muchas ocasiones, nuestras rutinas y la pereza nos dificultan el ampliamiento de nuestro círculo social. Y en ciudades grandes, esa apertura a nuevos círculos es a menudo complicada.
2. Hay mucho ‘pequeño Arzak’ desconocido cuyo enorme talento para la cocina queda limitado al conocimiento de su círculo más cercano.
3. ‘Cocinar’ relaciones sociales es mucho más sencillo alrededor de un fuego y un buen plato de comida.
Estas tres premisas fueron el punto de partida para la génesis de Sua, mi proyecto final del Bootcamp UX/UI de Ironhack, un producto digital que une a esos genios ocultos de la cocina con ávidos comensales dispuestos a disfrutar de un plan gastronómico en casa del cocinero anfitrión.
Pero antes de continuar tenéis que conocer el proceso de UX Research que puse en marcha para confirmar y definir bien el problema que debía solucionar la aplicación. El proyecto tuvo dos semanas de duración: una primera dedicada a la investigación y la segunda a la parte estética.
Marchando una de encuestas
Mi primer movimiento es rellenar el Lean Survey Canvas para asentar las ideas y definir bien qué es lo que voy a preguntar en las encuestas. Es una herramienta muy útil ya que después de trabajarla te indica qué tienes que preguntar, a quién, qué información ya sabes, y qué información necesitas. Es la gran base sobre la que se asientan las encuestas y las entrevistas.
En este proyecto lanzo dos encuestas: Una primera de guerrilla donde me enfoco en aspectos más relacionados con lo social, y una segunda ya más asentada en la que exploro cuestiones más específicas relacionadas con la gastronomía. Me marco el objetivo de determinar hasta qué punto las personas estarían dispuestas a entrar en casa de un desconocido a probar su plato estrella o, en caso de ser grandes chefs en la sombra, abrir las puertas de su casa a un desconocido.
Hubo algunos datos extraídos de estas encuestas que me sorprendieron mucho. Por ejemplo, el amplísimo porcentaje de personas de más de 56 años que mostraron interés y apertura a visitar casas de desconocidos o abrir sus puertas a experiencias gastronómicas. A priori este rango de edad no entraba en el target que yo había imaginado para mi producto, pero sus respuestas me hicieron reflexionar y replantear mi enfoque.
Tras recibir más de 200 respuestas realicé un análisis de los resultados de las encuestas descubriendo que:
- El 80% de los encuestados estarían dispuestos a vivir una experiencia gastronómica en casa de otra persona.
- El 79% de los encuestados conocen a alguien en su entorno cercano que cocina especialmente bien.
- El 63% de las personas que consideran que cocinan bien, estarían dispuestas a que un desconocido pruebe sus platos, una mayoría de manera altruista y otros a cambio de una remuneración económica extra.
- El 48% de los encuestados considera que no es fácil conocer gente nueva.
Con los datos de las encuestas y los testimonios de las entrevistas en la mano pude comenzar a trabajar en el Lean UX Canvas, esbozar las primeras posibles soluciones y formular algunas hipótesis. Esta herramienta va modificándose a lo largo de todo el proceso y en ella volcamos todo lo relacionado con cuestiones de negocio. Los resultados que esperamos, qué obtendrán nuestros usuarios a cambio…
Una vez tenemos los datos, toca analizarlos y procesarlos. Tenía muchas ideas mezcladas en la cabeza, pero todas se entrecruzaban en algunos puntos, y para ordenarlas me ayuda muchísimo el Affinity Diagram. Consiste en volcar todos los datos que tenemos, tanto de las encuestas (cuantitativos) como de las entrevistas (cualitativos) e intentar buscar similitudes entre ellos para agruparlos bajo un mismo concepto. En mi caso obtengo seis temáticas distintas.
Después de ver toda la información junta empiezo a ver la luz y defino el Problem Statement.
Ya tengo una idea bastante definida de cómo es mi User Persona. Esta herramienta es una representación semi-ficticia del que será el usuario ideal de mi producto. En mi caso tengo dos: Rodrigo, que es el que cumple el rol de anfitrión, y Alicia, la invitada. Ambos guardan similitudes pero tienen motivaciones distintas.
Otra de las herramientas que nos permiten ponernos en la piel de nuestro usuario y conectar con él es el Empathy map. Se trata del ejercicio de responder a las preguntas: Qué ve, qué siente, qué oye, qué hace y dice nuestro usuario. Es una herramienta para la que necesitas ponerte en los zapatos de tus User persona sí o sí.
Para terminar con la fase de empatización realizo un User Journey. Esta es una de las herramientas que más me ha sorprendido (Junto al Crazy 8 que luego veremos) ya que consiste en crear una historia en la que a nuestro usuario le pasan cosas que alteran su estado de ánimo y tenemos que pensar en cómo nuestro producto va a paliar esos bajones. Se trata de convertir los problemas en soluciones. Es muy útil porque te pone en el contexto de situaciones reales que pueden ocurrir, (¡y además me encanta poder usar emojis! 🥰)
Dándole forma a la idea
Llega la hora de la verdad: ¿Qué funcionalidades voy a desarrollar? ¿Qué tipo de producto necesitan Rodrigo y Alicia? Con la información que tengo ya puedo empezar a esbozar. Decido empezar por hacer un Brainstorming con todas las ideas que se me han ocurrido. ¡No escatimo en post its y dejo que vuele la imaginación!
Siguiente paso: hacer el temido Crazy 8. Por si no lo conoces, se trata de coger un folio, doblarlo en 8 áreas y, boli en mano, empezar a pintar una pantalla en cada área. Lo ideal es ponerte el cronómetro y dedicarle sólo un minuto a cada pantalla. Cuando termina el minuto, siguiente pantalla. ¡AAAAAH! Me costó mucho cogerle el gusto a este método porque me gusta siempre ir al detalle de las cosas, y esta herramienta es todo lo contrario: es improvisación pura y dura, es hacer lo que puedas en el tiempo que tienes. Y yo me sentía constantemente en una prueba de Masterchef con el reloj en marcha.
Lo bonito de esta herramienta es que aunque tú la comiences escéptico, cuando la terminas, ya tienes un esqueleto sobre el que trabajar. ¡Y te sorprende lo que puedes sacar bajo presión! Es un esqueleto muy basto, por supuesto, y con muchísimos defectos, pero de eso se trata la metodología Lean con la que trabajamos. Equivocarse rápido, prototipar e iterar.
Después del brainstorming de funcionalidades y del crazy 8 hago una selección de las funcionalidades que tendrá el producto en este MVP inicial:
- Posibilidad de crear cuenta con tres perfiles distintos: anfitrión, invitado, o ambas.
- Vista de platos de tu zona en modo listado y en modo mapa.
- Página de detalle del plato y del anfitrión.
- Medallas de reconocimiento al anfitrión.
- Juego rompe hielos para el momento del encuentro, muchas veces incómodo entre desconocidos.
- Confirmación del encuentro a través de un botón deslizable.
- Pago compartido y fraccionado (mitad en el momento de la reserva y mitad en el momento del encuentro)
- Posibilidad de dejar una valoración y entregar medallas al anfitrión y al invitado. (Gran conversador, crack de la cocina, amabilidad, higiene…)
El siguiente paso es bajar un poco más a tierra las pantallas. Seguimos utilizando boli y papel, pero ya los bocetos tienen un sentido y lo ideal es que puedas navegar entre ellos. Así surge el Low Fidelity, el paso previo al Mid Fidelity (ya hecho a ordenador) se usa para identificar posibles errores de arquitectura de información o de navegación y poder corregirlos antes de comenzar a montar el esqueleto en ordenador y así ahorrar tiempo.
Una vez he testeado el prototipo en baja fidelidad con algunos compañeros, corrijo errores y mejoro detalles. Ya puedo decir que tengo la estructura bastante definida, por lo que puedo comenzar a trabajar el Sitemap. Para ello realizo varios Card sortings con compañeros de clase. Son muy divertidos, porque les das todas las categorías de tu app o web sueltas y descolocadas en post its, y ellos de manera intuitiva tienen que agruparlas por similitud. Te ayuda mucho a perfilar la Arquitectura de información de tu producto.
Paralelamente comienzo a trabajar el User flow que seguirá mi usuario. Como mi aplicación tiene dos User persona decido enfocarme en el que tuvo más peso en las encuestas, que fue el invitado, y simulo la reserva de un plato de paella que le ha llamado la atención cerca de él. Además, el anfitrión tiene muy buenas opiniones :)
Cuando tenemos clara la estructura, vamos concretando y pasamos a crear los Wireframes de media fidelidad. Es el esqueleto de nuestra aplicación y lo ideal es hacerlo en gris para no tener ningún tipo de distracciones de color o formas. Nos centramos en funcionalidad y en usabilidad. Cuanto más pulido sea el wireframe, más fácil nos resultará aplicarle el color y la fantasía. Por aquí dejo algunas de las pantallas.
Sal, especias, y muchas cosas bonitas
Llegados a este punto, llegamos a la fase que más he disfrutado de este proyecto: el momento de definir la identidad de esta aplicación.
Comencemos por el naming. «Sua» significa literalmente «fuego» en euskera. El fuego es el elemento esencial para la cocina, y en torno al calor de las llamas se han reunido nuestros ancestros desde la Antigüedad. Pensé en que las características de este elemento encajan a la perfección con la finalidad de mi aplicación: que personas que no se conocen se junten alrededor del calor del fuego de una cocina.
Elegí el concepto en euskera porque El País Vasco es una zona en la que la gastronomía tiene una relevancia cultural enorme. Aparte de ser conocida por Berasategui, Arzak, Aduriz y demás chefs Estrellas Michelín, las prototípicas sociedades gastronómicas de Euskadi han servido durante décadas y décadas como punto de encuentro de amigos, familiares y vecinos. La sencillez del concepto y la facilidad de pronunciación terminaron de enamorarme de Sua. 💕
Para el logo juego con el concepto de la casa y de la cuchara, disponiendo esta última de tal manera que se asemeja a una cerradura. Digamos que el logo es una metáfora en la que la comida es la llave que abre las puertas de las casas para crear experiencias memorables.
Y seguimos para bingo, toca elegir qué colores tendrá la app y cuál será la estética que la defina. Para ello, uso un herramienta muy útil, el Moodboard, que es un tablero inspiracional donde volcamos imágenes, texturas, colores… que nos inspiren de cara a nuestro producto.
En mi caso sabía que mi app tenía que ser moderna pero a la vez tenía que respirar un toque de tradición… porque en las encuestas, como comentaba antes, descubrí que el producto podría interesar a jóvenes y a no tan jóvenes. Para conectar a estas generaciones usé unas ilustraciones muy especiales que muy pronto te enseñaré.
En el desarrollo del UI de una aplicación hay otros aspectos quizás menos divertidos pero súper importantes a la hora de mantener una consistencia y coherencia a lo largo del desarrollo del producto, y especialmente en entornos de trabajo colaborativos, donde varios diseñadores tienen que manipular los diseños. Para ello trabajamos distintas herramientas, entre ellas el UI Kit y la definición de espaciados, sombras y distancias.
Y ahora sí, pasamos a las ilustraciones:
No te voy a engañar, me dieron trabajillo, pero el resultado me encanta. Con ellas buscaba darle a Sua ese toque de tradición que necesito y mostrar que la comida en el terreno social ha estado siempre presente en nuestras vidas.
Para buscar fotografías antiguas utilicé The Library of Congress y la sección de Commons de Flickr. La inspiración para utilizar este tipo de collages con elementos antiguos me viene de Joseba Elorza, un crack del collage animado al que admiro muchísimo, y cuyos cursos en Domestika he devorado. Te invito a echarle un ojo si te interesa el tema :)
Es tiempo de dar rienda suelta al Copywriting. Los profesores nos sugieren diseñar una landing page sencilla que muestre nuestro producto, y esto es lo que sale.
Aprovecho la ocasión para ir creando algunos de los mensajes que podremos utilizar en la estrategia de marketing de Sua:
¡Y ya casi estamos! En la fase final tocó diseñar el prototipo en alta fidelidad (High Fidelity Wireframes) y añadirle microinteracciones en Figma, una herramienta que me está ganando poco a poco sobre todo por las facilidades que ofrece para el trabajo colaborativo. No sé cómo nos las hubiéramos apañado para los trabajos en grupo en remoto de no ser por ella. (¡Lo siento, Sketch!)
Sin más dilación, os dejo con el prototipo:
No quiero terminar sin contarte un par de detalles de cómo he imaginado el apartado de negocio de Sua:
- La idea es que la app funcione de intermediaria entre el anfitrión y los comensales. Al igual que Blablacar gestiona los pagos entre conductores y viajeros, Sua haría lo propio llevándose una cantidad como gasto de gestión.
- De cara a futuro sería interesante que los encuentros de Sua estuvieran patrocinados por marcas de alimentación. Por ejemplo, en el barrio de Lavapiés hay un anfitrión que triunfa a gran escala con su plato de paella. ¿Y si la app hiciese algún tipo de colaboración comercial por ejemplo con arroz la fallera?
Y de postre…
¡Un gracias como una casa si has leído hasta aquí! Espero que te haya gustado la idea de vivir una experiencia gastronómica diferente en casa de alguien que no conoces, es una buena oportunidad para conocer gente nueva, pasarlo bien, y disfrutar de esa sobremesa que a veces se hace corta en los restaurantes. :)
Yo personalmente he disfrutado muchísimo estas dos semanas desarrollando el proyecto. Tenía el aprendizaje previo del primer proyecto individual y me noté más ágil a la hora de ejecutar ciertas herramientas. Como stopper… ¡La elección de color! 😲 Hice m u c h í s i m a s combinaciones distintas y es que a la hora de elegir la paleta siempre me pasa, hasta que algo dentro de mí no me dice: ¡ES ESTA! no puedo parar de probar.
¡Pues ya estaría! Cualquier duda o sugerencia me encantará leerte en elinaharro@gmail.com 🎉
