Sitio web & desarrollo
Cocina con un propósito: Recetas de barrio con recompensa real
Aplicación que conecta recetas publicadas por restaurantes de barrio con las personas que las cocinan en casa: compartir el resultado en redes suma un vale de descuento para ir a comer al restaurante de esa receta.
Overview
Gamba fue el proyecto final del bootcamp Desarrollo Web Full Stack con ReactJS (Fundación Esplai, 2024). El encargo de la escuela tenía dos condiciones: aplicar las herramientas de programación aprendidas durante el curso y enmarcar el proyecto en los Objetivos de Desarrollo Sostenible de la ONU. Cada equipo presentó tres ideas que cumplían ambas y la clase votó: la elegida fue Gamba.
El reto
Una sola app para dos usuarios con objetivos opuestos: un usuario para quien busca recetas para cocinar en casa y un usuario para el restaurante que las publica para atraer clientes. Cada rol tenía que sentirse en la parte de la app pensada para él sin dejar de reconocer que era la misma marca.
Que la recompensa se sintiera concreta, no un saldo abstracto: un contador de puntos genérico no comunica bien qué se gana ni invita a usarlo. Había que traducir el hecho de cocinar una receta en algo que el usuario entienda de un vistazo y quiera ir a canjear.
Comprobar que la receta se cocinó de verdad, sin añadir fricción: el sistema de vales solo tiene sentido si detrás hay una receta realmente cocinada, pero pedir una prueba dentro de la app, como subir una foto o una validación manual, rompía la experiencia.
Investigación
Antes de dar forma a la app dediqué una fase a entender el terreno: cómo funcionan los servicios de recetas que ya existen y cómo cocina y sale a comer la gente en su día a día.
Análisis de mercado competitivo
Investigué a los competidores existentes para comprender sus estrategias en torno a los servicios de recetas: suscripciones, promociones, vales de descuento y sistemas de fidelización. Me fijé en cómo captan y retienen al usuario y en qué lugar dejan, si es que dejan alguno, al negocio local.
Entrevistas con quienes cocinan en casa
También me entrevisté con personas que cocinan en casa. Les pregunté por el tipo de platos que preparan y de dónde sacan las ideas, por sus costumbres a la hora de salir a comer fuera, y por la demanda en su barrio: si conocen la oferta de restaurantes que tienen cerca. Estos datos cualitativos aportaron información valiosa sobre sus desafíos, preferencias y dificultades.
Perfiles de usuario
Gracias al conocimiento y la información obtenidos a través de las entrevistas, se crearon perfiles de usuario para comprender las cualidades, preferencias y comportamientos únicos de las personas con más probabilidades de beneficiarse del sitio web.
Point of view
A partir de los perfiles se definió un point of view para cada rol: una frase que resume quién es el usuario, qué necesita y por qué lo necesita. Fue el puente entre la investigación y las decisiones de diseño.
Cliente
Personas que quieren descubrir recetas y restaurantes de su barrio de forma entretenida, casi como un reto personal, y sentir que cocinar en casa también apoya a esos negocios: las apps de recetas no dicen de dónde sale el plato, y las de delivery solo sirven para pedir.
Restaurante
Personas que necesitan atraer a clientes nuevos a su local sin depender de las apps de delivery, porque se quedan con buena parte del margen, no fidelizan y no pueden competir en publicidad con las cadenas grandes.
¿Cómo podríamos...?
Hacer que cocinar en casa la receta de un restaurante de barrio termine llevando a esa persona a comer al restaurante real?
Organización
Con los objetivos y las necesidades de cada rol ya definidos, tocaba traducirlos en estructura. Hicimos un ejercicio de ordenar las páginas del sitio web y estudiar el recorrido de cada usuario, desde que entra por primera vez hasta que cocina una receta y vuelve al restaurante a canjear su vale.
Conceptualización
Comencé con wireframes de baja fidelidad para explorar diferentes diseños y opciones de navegación. Estos wireframes se centraron en funciones esenciales como el registro y el proceso de visualizar los perfiles.
Diseño
A continuación diseñé las pantallas de alta fidelidad en desktop y mobile para los dos flujos completos, Cliente y Restaurante. Apliqué la identidad de marca, ilustraciones propias e imágenes reales.
Cliente y Restaurante comparten tipografía, iconografía e ilustración, pero cada uno tiene su propio color de marca, para que, sin leer una sola palabra, se note en qué parte de la app está cualquiera de los dos roles.
Desarrollo
El desarrollo lo llevamos a cabo los cuatro miembros del equipo en paralelo. Yo me encargué del frontend de las pantallas de Cliente (Home, Perfil, Landing) en React, con Tailwind y NextUI para los componentes; mis compañeros Gerard, Hannibal y Joel repartieron el resto del frontend y lideraron el backend, construido con Node, Sequelize y MySQL. Coordinamos el trabajo por GitHub, Visual Studio Code y Discord.
Testing
Programamos la app y la testeamos con usuarios reales al final del proyecto. El feedback fue positivo, todos los usuarios completaron con éxito ambos flujos de tareas dentro del plazo previsto. El formato está bien organizado y es fácil de usar. En el flujo de ver sus promociones, los usuarios valoraron la posibilidad de tener un botón directo a esa sección. Gracias a una interfaz visualmente atractiva y un proceso claro, los usuarios pudieron seguir los pasos fácilmente.
Conclusión
Llegamos a programar y testear parte de la app: Home, Login, Registro y Perfil funcionan de verdad contra una base de datos real, con las 26 recetas y sus fotos. Me encargué de la investigación, el diseño UX/UI y parte del frontend (Home, Perfil, Landing).
Mediante un proceso de diseño centrado en el usuario, logré crear una solución que no solo satisfacía las necesidades de encontrar recetas nuevas, sino que también fomentaba un sentido de comunidad y sostenibilidad. El proceso de investigación, creación de esquemas, prototipos y pruebas me ayudó a garantizar que la plataforma abordara los problemas de los usuarios y creara una experiencia significativa.