Cover image of the Al Dente case study. Blurred food background with a laptop in the center displaying the Al Dente website design. On the right side is the case study information made in Forms and Figma.
Back
Blurred food background with the Al Dente logo and a laptop showing the website design.

The Problem

Users are searching for online cooking tutorials that are accessible and easy to follow in order to improve their culinary skills.

The Goal:

To develop an accessible cooking tutorial website for all users, regardless of the mobile device they use to access the internet.

My Role:

Target Audience:

UX/UI Designer

My focus was on anyone interested in learning or improving their cooking skills.

Responsibilities:

Duration:

User research, surveys, personas, ideation, usability testing, interactive low- and high-fidelity prototypes, wireframes, and competitor audits.

January 2023 – March 2023


User Research:

Through a survey, I identified users’ needs and preferences, which included the lack of a weekly meal plan, difficulties finding recipes suitable for their skill level, common cooking mistakes, and lack of culinary inspiration. There was a strong interest in learning to cook a variety of dishes. Using this information, I created a representative persona that reflected the most common user challenges. I developed problem statements and hypotheses to design effective solutions. Additionally, I conducted competitor research to better understand the current cooking tutorial website market.

Persona image of Marianela de Palma, representing a user group that illustrates their cooking challenges and goals.
User journey map of Marianela de Palma describing her challenges and steps toward a solution before the website redesign.

Designs:

To start the design process, I created paper sketches for the key pages, selecting the most promising versions to develop an attractive and easy-to-navigate layout. Later, I created digital wireframes as part of the iterative design process.

Simple paper wireframe design
Low-fidelity digital wireframe design

Usability Study:

I conducted an independent remote usability study with five participants. From this process, I identified three key insights:

  • Since food allergies can be life-threatening, users must be able to specify them to exclude certain recipes.
  • Each recipe is highlighted in red to warn about ingredients that may pose risks to some users.
  • Enhancing filter options allows users to find more accurate and specific recipe results.
Image showing the wireframe design and its evolution into a high-fidelity mockup.

High-Fidelity Mockups and Prototype:

Based on the usability study results, several adjustments and improvements were implemented, leading to the creation of the final mockups. You can explore the high-fidelity prototype at the following link:

Al Dente High-Fidelity Prototype Web mockups of the Al Dente website showing the homepage, recipes page, meal planner page, and cooking tips page.

Al Dente Case Study on Behance


Conclusions and Next Steps:

I recognized the importance of maintaining health through proper nutrition, as it can have a significant impact on our lives. I also understood how user needs and preferences are key to providing effective design solutions. Valuing feedback from a diverse audience proved crucial to continuously improving the design project. This process also helped me learn how to effectively adapt a website layout from desktop to mobile devices.


“It’s very effective to find recipes so quickly.”

Karla, user feedback

Future considerations include: