Un proyecto personal en el confinamiento: El Cocinario
Este proyecto abarca desde la concepción, diseño hasta su desarrollo y puesta en producción. Visítalo en https://www.elcocinario.com.
Como a muchos nos ha pasado, el confinamiento provocado por la COVID-19 ha supuesto una oportunidad/necesidad de reconciliarnos con la cocina. A mí me encanta cocinar, lo considero una forma de relación social, un modo de demostrar aprecio y cariño por las personas para las que cocino. Y cuando he vivido solo, ha servido para recordar esa conexión con mi familia y amigos. Por eso aproveché la ocasión para recopilar mis recetas favoritas.
Fue entonces, mientras revisaba apps, webs y cuadernos, que comencé a preguntarme si habría alguna forma diferente de organizar esta información. Una forma que fuera más útil, más natural.
“¿Cómo podríamos hacer más agradable la experiencia de cocinar en el día a día?”
Este pensamiento me inspiró a seguir cuestionándome la manera en la que solemos ver las recetas en internet. Y casi sin darme cuenta se convirtió en un proyecto personal con el que me estaba comprometiendo cada vez más. Por supuesto, terminé agarrando papel y lápiz para empezar a desarrollar el concepto.
Concepto inicial
La idea principal surgió muy pronto, conversando con mi pareja sobre el proyecto. Lo primero que quería cambiar era el foco con el que se abordan los diferentes recetarios digitales, porque aunque manejemos recetas, en realidad la cocina empieza desde los ingredientes.
“La cocina empieza desde los ingredientes.”
No hay recetas sin ingredientes. Los ingredientes son los que tienen el aporte nutricional y su sabor y textura específicos. De hecho, una misma receta puede versionarse si jugamos a sustituir ingredientes. O un mismo ingrediente puede utilizarse de muchas maneras. También son los ingredientes los que nos gustan o disgustan. La receta es una entidad formada por la relación entre los ingredientes que la componen y los medios de preparación utilizados, que permiten explotar la combinación nutricional y sensorial de los ingredientes.
Incluso podríamos hablar de menús o planes de alimentación, que serían agrupaciones de recetas. La cena de Nochebuena planifica los sabores y sensaciones que experimentaremos en la secuencia de platos, mientras que un menú semanal puede organizar el consumo adecuado de nutrientes.
Esta reflexión nos da argumentos para abordar una barrera típica en el proceso de cocinar: seleccionar la receta. El concepto inicial era, por tanto, construir una arquitectura de información que permita la exploración clásica por recetas, pero también una nueva vía de descubir la cocina a partir de los ingredientes. Y por eso esto no es un recetario. Es el Cocinario.
Investigación
Antes de continuar, había que entender varias cosas:
Qué información es relevante para los ingredientes y las recetas
Para saber cómo presentar y ordenar los ingredientes y las recetas estudié los patrones relacionados con la información nutricional de los ingredientes y la forma de presentar recetas, además de como se aplicaba la idea de relacionar ingredientes con recetas en varias webs y apps.
Cómo se relacionan las personas con las recetas
Esta observación fue uno de los detonantes del proyecto. Ver la locura colectiva por la levadura y el pan casero durante el confinamiento me llevó a preguntarme cómo es esa relación entre las personas y las recetas. Entrevisté de manera informal a varios familiares y amigos acerca de lo que la cocina significaba para ellos y recopilar ejemplos de sus recetarios.
Qué información veraz hay disponible sobre ingredientes
Los datos siempre tienen que ser fiables, y cuando hablamos de nutrición es más importante aún. Para evitar controversia acudí a informes científicos y oficiales:
- El informe de Ingestas de energía y nutrientes recomendadas en la Unión Europea, publicado en 2017 y aún vigente.
- La Normativa y Recomendaciones Nutricionales de la Sociedad Española de Oncología Médica.
- El anexo de Pesos de medidas caseras y raciones habituales de consumo del Manual de Nutrición publicado por la Universidad Complutense de Madrid.
- Para la información nutricional de ingredientes utilicé la Base de Datos Española de Composición de Alimentos (BEDCA), elaborada junto a otros organismos europeos. Para aquellos alimentos que no están presentes en BEDCA, acudí a la FoodData Central, su equivalente estadounidente.
Principios de diseño
El concepto principal que guía al Cocinario se centra en la cocina como experiencia, y en cómo cada persona dentro de sus circunstancias vive el hecho de preparar alimentos para consumirlos. La misión del Cocinario se resume en “ayudarte a descubrir y disfrutar la cocina sin complicaciones”
“Descubrir y disfrutar la cocina sin complicaciones.”
Para lograrlo, la clave está en ser sensibles, precisamente, a las circunstancias de las personas.
Para abordar algo tan amplio primero hay que simplificarlo, por lo que definí tres principios que se asegurarán de que, a la hora de tomar decisiones de diseño, me ayude a tomarlas teniendo la sensibilidad necesaria a esta diversidad tan ambiciosa.
Todos comemos diferente
Cada uno de nosotros llevamos una alimentación diferente. Ya sea por motivos de salud, de control de peso, por conciencia o por disponibilidad de alimentos, la realidad es que nuestros patrones de consumo no son homogéneos. El Cocinario debe representar estas dietas tanto en la selección de recetas como en la forma de presentarlas y de navegar por ellas.
Todos cocinamos diferente
En parte derivado del punto anterior, este principio se relaciona además con factores como las herramientas con las que contamos, el tiempo que queremos dedicar a cocinar o la cantidad de personas para las que preparamos comida. Por supuesto, también influyen las distintas capacidades de cada persona. El Cocinario debe representar una variedad de métodos de cocinado, con una redacción y presentación precisa, comprensible y clara.
Cada momento es diferente
Por último, es importante considerar el momento en el que nos ponemos a cocinar. En lo relacionado con la persona, no es lo mismo cenar algo rápido al final de un día agotador, que dedicar una mañana tranquila de fin de semana a preparar algo especial. La disponibilidad del tiempo de cada uno, así como la dedicacion que estamos dispuestos a asumir en cada momento es diferente.
Además, no es lo mismo cocinar en invierno que en verano, tanto por la disponibilidad de ingredientes de temporada como por lo que nos apetece cuando hace calor o frío. Estos factores también han de tenerse en cuenta para priorizar resultados o hacer sugerencias.
Bonus track: Ad-free
Algo que he tenido muy claro desde hace mucho tiempo es que este proyecto es para cocinarlo a fuego lento. Lo importante es crear una experiencia diferente y satisfactoria, y la primera decisión fue cero publicidad intrusiva. Quizá algún día haya colaboraciones, patrocinios o afiliaciones, pero siempre serán discretos, relevantes y secundarios al objetivo del Cocinario.
Ideación y validación
La arquitectura plantea una jerarquía basada en entidades (de momento ingredientes y recetas) que presentan interrelación entre ellos y pueden explorarse a través de búsquedas. Alrededor de esta idea surgen varios tipos de contenido que pueden presentarse en el producto:
- Portada: que presenta el producto y sus características.
- Ficha: donde se presente un detalle del ingrediente o la receta.
- Colecciones: que permite presentar agrupaciones de una o varias entidades en base a criterios, un concepto muy escalable.
- Información: más estático, como el apartado de Apoya el proyecto.
El proceso de diseño de un layout que diera cabida a esta variedad de pantallas llevó, tras varias iteraciones, a una estructura basada en una columna de navegación (que en responsive se convierte en cabecera) y un espacio para el contenido dividido en tres zonas: una cabecera, un sidebar que en responsive se convierte en slider, y un cuerpo para contenido general.
Este layout permite establecer unas reglas de adaptación a dispositivos bastante flexibles, con una estructura que puede adaptarse fácilmente a los diferentes tipos de contenidos.
La validación a lo largo de la ideación se basó principalmente en el contraste con conocidos, incluso otros diseñadores.
Identidad visual
Aunque tengo algunas habilidades en UI, era mejor idea basar la identidad visual en alguna propuesta de las muchas que hay por internet. Elegí un diseño en Sketch App Sources llamado Recipe App Screens como base para la identidad visual del producto.
Los tonos azulados permitían que las fotos de ingredientes y recetas fueran el foco principal sin renunciar a cierto carácter, presente en la textura del azul oscuro (me recordó a una encimera de cocina) y en el uso de tipografía con serifa para los títulos. Realicé algunas adaptaciones para facilitar el desarrollo, replanteé el uso de fotografías para adecuarlo a mis capacidades de producción y usé los iconos de FontAwesome.
Una de las primeras decisiones fue sobre cómo dar entidad tanto a los ingredientes como a las recetas, al mismo nivel pero dejando claro que son conceptos diferentes. Para diferenciarlos opté por presentar las recetas como una fotografía completa, normalmente obtenida de la fuente de la receta original, y reciclar la idea del diseño original de presentar un objeto que traspase los bordes de su contenedor.
En lugar de hacerlo con el plato de pasta elegí aplicarlo a los ingredientes, de manera que se refuerze la idea de que es un componente, como si esperara en una encimera a ser utilizado en un plato. El peso visual de la versión receta e ingrediente es similar pero es fácil diferenciarlos. Además, esta decisión aporta un toque visual diferencial y sofisticado en el resultado final.
Dado que decidí priorizar otros aspectos de la web antes que el logotipo, de forma provisional estoy utilizando el icono del gorrito de chef de FontAwesome en su versión duotone, pero de cara a futuro sería interesante poder desarrollar una identidad de marca a través de alguna colaboración.
Construcción
Debido a mis años como desarrollador, he podido trasladar el diseño a código funcional y crear un MVP que incluye las funcionalidades básicas descritas.
Para los interesados, el stack tecnológico utilizado es NodeJS + Express, junto a Nunjucks como motor de plantillas y el grid y configuración responsive de Bootstrap. La base de datos está en MongoDB y todo se despliega en Heroku.
Aprendizajes
Cuando estamos inmersos en un proyecto de larga duración comenzamos a perder perspectiva y amplitud de miras. Y este proyecto me ha permitido explorar fuera mi ámbito laboral, algo muy refrescante.
También ha servido para retomar y depurar mis capacidades de programación, que enseguida se oxidan y se vuelven obsoletas. Como diseñador, entender la tecnología sobre la que creo propuestas de valor me permite gestionar mejor sus limitaciones y explotar sus ventajas.
Por último, pensar en la cocina desde la perspectiva del Cocinario me ha llevado a replantear cómo nos alimentamos en casa. Ahora somos más conscientes del valor nutricional de lo que comemos y de cómo lo preparamos. Elegimos ingredientes de temporada y mis hijos están aprendiendo el valor de cocinar y preparar por ellos mismos lo que luego se van a comer.
Estado actual
El Cocinario está en producción en https://www.elcocinario.com. Esta versión recibe actualizaciones semanales que suelen incluir mejoras en la calidad de los datos calculados, en la interfaz y su comportamiento responsive, y la inclusión de nuevas recetas. La selección de imágenes para ingredientes es también un trabajo en curso.
Además del catálogo de ingredientes y recetas, existen varias colecciones especiales que agrupan recetas por algunos de los conceptos presentados en los principios de diseño, como las Recetas express (20 minutos o menos), la Comida Vegana o las Recetas sin gluten. Aprovecho para agradecer a los amigos de todo el mundo que están colaborando en las Recetas del Mundo.
Por el momento El Cocinario está funcionando sobre servidores gratuitos, y eso implica algunas limitaciones que, de momento, impiden lograr la visión original del proyecto. Mucha de la inteligencia descrita en los principios de diseño en cuanto a las búsquedas avanzadas, el filtrado inteligente, las recomendaciones… no serán posibles hasta pasar a servidores y bases de datos avanzadas. Ocurre lo mismo con la creación de cuentas de usuario, que permitirían una personalización avanzada del comportamiento de la plataforma, además de poder agregar y gestionar tus propias recetas.
Próximos pasos
Mientras llega el momento de dar el salto a servidores avanzados que permitan abordar los temas más sofisticados, hay varias lineas de trabajo abiertas:
- Nuevas recetas cada semana: para alcanzar el equilibrio y la representatividad descritos en los principios de diseño.
- Mejorar la manipulación de las recetas: permitiendo recalcular según el número de comensales, sustituir ingredientes para adaptar la receta a diversas dietas y preferencias, etc…
- Enriquecer la información nutricional: incluyendo datos de alérgenos, y cantidades recomendadas de consumo. Además, hay por ahí alguna idea de otro tipo de información que podría ser interesante (Stay tuned!).
Y sí, en el horizonte se piensa en una App móvil que permita una mayor personalización, con un gran potencial para enriquecer la experiencia de cocinado. Algunas funciones llegarán a la web, pero la App móvil sería realmente diferencial. Todo depende del apoyo que reciba el proyecto.
¡Apoya el proyecto!
Tú también puedes formar parte del proyecto. Si te gusta la idea puedes apoyarla en Patreon, compartirla en redes sociales, o incluso aportar tus conocimientos y talentos. Podrás participar en la toma de decisiones del proyecto y aparecer en una página de agradecimiento como colaborador. Si te animas, en la sección ¡Apoya el proyecto! hay un resumen de las formas de colaborar. Aunque, al final, lo más importante, es que puedas descubrir y disfrutar la cocina.
Esteban Díaz es un diseñador de producto digital con experiencia en desarrollo. Puedes contactar y conocer su trabajo en LinkedIn o en www.estebandiaz.net.
