Recetas veggie has been created as a final project to approve web design class, using as well, elements of UX research and UI design. The idea was conceived because of the notorious increase of people’s interest to consume healthy, tasty and respectful food, so the main goal of this project is to create an online cookbook of plant-based food including vegetarian adapted recipes which replaces animal ingredients for other substitutes, making it different of other online cookbooks for maintaining a clean and simple interface, which includes useful features to improve the user experience.

To execute the research process, I used Design Thinking agile method generating some “deliverables” to organize ideas and collected information to achieve useful conclusions and possible functionalities to be included on the website. This process has four stages: discovery, definition, ideation, and design.

At discovery stage, there were generated some research questions considering possible actions or functions the user could access to, with these questions, were created a How might we, a deliverable which reframes the questions formulation to determinate how might be executed the functionalities according with available resources, after that, the questions were categorized in three groups: functionalities, contents and community. Using a Benchmarking, were possible to make a comparison of different web cookbooks and similar websites identifying their most relevant functionalities and noticing the interfaces of these webs. Afterwards, were made a netnography, which collects opinions found on the web of people who uses apps or web cookbooks to know their positive and or negative experiences. Then, was made a SWOT analysis to determinate the possible strengths, weaknesses, opportunities and threats the project might have.

At definition stage, was made a viability and usability matrix which allowed to organize in a visual space the possible functionalities according to its utility and usability to establish its importance and the real possibilities to create them taking in account their development difficulties.

At ideation stage, taking as main reference the information collected in the previous stages, were defined the possible functionalities that would be incorporated to the website by using a findings and insights deliverable, after that, were used an in-out scheme who served as a first filter to discard the functionalities that because of technical or management issues couldn’t be incorporated into a first version of the website, finally, using a MoSCoW system, in order of importance were determined those functionalities who must be included, those who should be taken into account, those who could be implemented and which definitely wasn’t going to be used.

At design stage corresponding to the research, were made a Moodboard where were compiled some referents and visual elements as inspiration to recognize the actual design tendences which could be used in different components of the project, subsequently were generated a site map to set the structure of the website and its contents.

You may access to the Miro board of the project to see in detail the research process by clicking here.

In order to create a consistent and structured website, were made an entire design process using Figma as main tool. Initially, were established a design system, including elements as the grid for the responsive versions of the website, fonts, colors, icons, images and were created the components to use. Then, wireframes were designed to have a preview of the scheme for the website and the location of its elements. Subsequently, were designed a prototype of the website to have an approximated version of the final visual results of Recetas veggie project.

Design System

Considering earlier stages of the project, were made the development process taking the prototype to the web using HTML5, CSS3, JavaScript code, using elements of jQuery’s library.

The website has a home page using the regular HTML structure: header, body and footer. In the header is located a horizontal navigation bar, a searcher and a banner hero. In the body, there’s a carousel which includes icons and text the categories of the available recipes, a section of popular recipes, the blog’s outstanding and last entries, and a newsletter subscription form. In the footer section are located social media links.

The user may access to recipes page with the link allocated at the navigation bar, by using the carousel of the home page or by the searcher of the web. In this page, will be displayed a recipe list which might be filtered by the user to get successful search results according to its needs. In this view I wanted to maintain the cleanest interface possible to avoid overwhelm the user.

When the user clicks any of the recipes, will be redirected to a detailed view of the selected recipe, which will include basic information (name, category, description, time, difficulty, etc.); ingredients with the possibility to mark those the user doesn’t have available at the moment to add them into a printable or downloadable shopping list, this view also has a calculator which allows the user to change the quantity of every ingredient according to the portions that wants to cook; cookware; checkable step by step of any recipe; video tutorial of the recipe; and finally, some side suggestions.

On the blog page will appear the entries on the website. At about page will be displayed general information, partners, motivations and other information about the project.

As this project was made as a final project of a class, there were some specific indications and restrictions to be accomplished as the impossibility of using dynamic HTML, PHP or databases, so it was very relevant to work with JSON files who were used as the main base of the project. It wasn’t possible neither use any design frameworks, so the HTML structure is created by hand, increasing the skill with this tool.