Recetas veggie se ha creado como un proyecto final para el módulo de diseño web, incorporando también elementos de UX research y UI design. La idea nace ante el notorio incremento de interés de las personas por consumir alimentos saludables, sabrosos y respetuosos con la vida de los animales, por lo que el objetivo principal es crear un recetario de comida a base de vegetales incluyendo preparaciones adaptadas al vegetarianismo reemplazando los ingredientes animales, que se diferencie de los demás por mantener una interfaz limpia y sencilla, que incorpore funcionalidades útiles para mejorar la experiencia del usuario.

En el proceso de research, se utilizó la metodología ágil Design Thinking a partir de la generación de diversos “entregables” que permitieron organizar las ideas e información recolectada para llegar a conclusiones útiles y posibles funcionalidades que tendrá el sitio web. Este proceso incluye cuatro etapas: observación, síntesis, ideación y diseño.

En la etapa de observación, se generaron unas Research questions en las que se tuvieron en cuenta posibles acciones o funcionalidades a las que podría acceder el usuario, con estas preguntas, se generó un How might we que replantea la formulación de dichas preguntas determinar como se podrían ejecutar las funcionalidades para de acuerdo con las capacidades y recursos disponibles que posteriormente fueron categorizadas en: funcionalidades, contenido y comunidad. A partir de un Benchmarking, se realizó una comparación de recetarios similares en la web con sus funcionalidades favorables e interfaces, luego, se hizo una Netnografía que recoge opiniones en la web de personas que utilizan aplicaciones o sitios de recetas con el fin de conocer sus experiencias positivas y/o negativas; a continuación, se desarrollo un DAFO en el cual se analizaron las posibles debilidades, amenazas, fortalezas y oportunidades del proyecto.

En la etapa de síntesis, se realizó una matriz de utilidad y viabilidad que permitió organizar de manera visual las posibles funcionalidades de acuerdo con su utilidad y viabilidad para así poder establecer su importancia y las posibilidades de crearlos de acuerdo con su dificultad.

En la etapa de ideación, tomando como referencia la información obtenida en las etapas previas, se definieron las posibles funcionalidades que tendría el sitio web con unos findings e insights, luego, a partir del uso de un esquema In – Out, se aplicó un primer filtro para eliminar aquellas funcionalidades que por motivos técnicos o de gestión no se podían incorporar en una primera versión y finalmente, con el uso de un sistema MoSCoW, se determinaron en orden de importancia cuales funcionalidades tenían que incluirse, cuáles deberían ser tenidas en cuenta, cuales podrían implementarse y cuales definitivamente no se iban a utilizar.

En la etapa de diseño correspondiente al research, se realizó un Moodboard o tablero de referentes e inspiración para conocer las últimas tendencias de diseño que podrían utilizarse en los elementos del recetario, posteriormente se generó una organización del contenido y un site map que permitió plantear la estructura del sitio web con sus contenidos.

Puedes ingresar al tablero de Miro haciendo clic aquí para consultar con detalle el proceso de research.

Con el fin de crear un sitio web consistente y estructurado, se realizó todo un proceso de diseño utilizando figma como herramienta principal. Inicialmente se estableció el sistema de diseño en el cual se tuvieron en cuenta elementos como el grid o la retícula para las diversas versiones responsive del sitio web, las tipografías, los colores, los iconos, las imágenes y los componentes a utilizar. A continuación, se crearon unos wireframes que permitieron tener una previsualización del esquema del sitio web y la ubicación de sus elementos. Posteriormente se generó un prototipado del sitio web para obtener una visualización más aproximada al resultado final que tendría el recetario.

Sistema de diseño

Teniendo en cuenta las etapas realizadas previamente, se realizó el proceso de desarrollo llevando el prototipo a la web utilizando código en HTML5, CSS3, JavaScript incluyendo elementos de la librería jQuery.

El sitio está cuenta con una página de inicio siguiendo la estructura general de HTML: header, body y footer. En el header se puede ver una barra de navegación horizontal, un buscador y un banner hero; en el body hay un carrusel que muestra con íconos y texto las categorías de recetas disponibles, una sección de recetas populares, entradas destacadas y recientes del blog y un formulario de suscripción a la newsletter. En el footer, se pueden encontrar los enlaces a las redes sociales.

A la sección de “Recetas” se puede acceder mediante el enlace que se encuentra en la barra de navegación, el carrusel de la página de inicio o el buscador de la web, en esta aparecerá un listado de recetas que pueden ser filtradas por el usuario para obtener unos resultados más acertados de acuerdo con sus necesidades de búsqueda. En esta vista se pretende mantener una interfaz lo más limpia posible, intentando no sobrecargarla de información.

Al hacer clic en alguna de las recetas, el usuario será redirigido a una vista detallada de las recetas, esta incluirá información básica de la misma (nombre, categoría, descripción, tiempo, dificultad, entre otros), ingredientes necesarios con la posibilidad de marcar aquellos que le hacen falta para poder añadirlos a una lista de compra que posteriormente puede imprimir, adicionalmente cuenta con una calculadora que cambia la cantidad de cada ingrediente de acuerdo a las porciones que se deseen cocinar, utensilios a utilizar, paso a paso de cada receta chequeable, video tutorial de la receta y finalmente unas sugerencias de acompañamientos.

En la sección “Blog” aparecerán las entradas que se carguen al sitio web, en “Nosotros” se incluirá información sobre el proyecto en general, los aliados, las motivaciones, entre otros.

Gracias a este proyecto pude ampliar la visión y explorar un poco sobre el campo de la enfermería, viendo un poco la labor tan importante que cumplen estas personas en nuestra sociedad llegando incluso al punto de sentir admiración por ellos. En el aspecto técnico, pude poner en práctica diferentes herramientas para llevar a cabo el research de la cual quisiera resaltar en especial la entrevista que fue bastante útil para el desarrollo del proyecto, asimismo, pude ampliar mis conocimientos prácticos en Figma y conocí otras herramientas útiles como gitbook y whimsical.