top of page
1_edited.jpg

Traditional Colombian Cuisine

Project: Traditional Colombian Cuisine
Duration: 2 Months 
Role: Lead UX Designer

Project Overview

Colombian cuisine is rich and diverse. With so much information on the internet, finding and viewing recipes can be overwhelming. Some websites may only offer a limited selection of popular dishes like empanadas and bandeja paisa. This can make it difficult for users to explore lesser-known dishes or regional variations of their favorite Colombian dishes.  The traditional Colombian cuisine website is a platform that showcases and celebrates the unique and diverse cuisine of Colombia. This website seeks to promote Colombian culture through its cuisine by sharing traditional and regional recipes. The website also aims to encourage users to experiment with Colombian cooking whether they are local or foreigners.

The Problem

Despite there being so much culinary information on the internet, there is a lack of accessible and comprehensive resources that showcase and celebrate the country's diverse culinary traditions. There is a need for a Colombian cooking website that focuses both on Colombian classics and regional dishes while providing users with inspiring content

The Goal

Design a responsive Colombian cooking website where users can find detailed recipes for Colombian classics and regional dishes.

Rectangleupdated1.png

Understanding the users

Have you ever cooked a meal following a cooking tutorial?

 

Is there any way in which you feel these challenges could be resolved?

Can you describe your experience finding and viewing cooking tutorials?

What challenges do you face when cooking from a tutorial? How does this make you feel?

To start this project I interviewed four people who enjoy using online cooking recipes.  I wanted to understand some challenges that users face when searching, viewing, and following cooking recipes and how the experience could be improved. Doing the interview gave me ideas on how to organize the website for a user friendly experience and how to start the journey building my first responsive  website.

After the interview I created empathy maps which helped me to better understand how users think and how they interact with cooking websites. It also helped me better understand how much time people are willing to spend when searching for and following a recipe.

EMPATHY MAPS_2x_edited.jpg

Pain Points

Time

Working adults are busy and often challenged to spend time finding authentic cooking recipes

Language Barrier

Many recipe websites may only be available in English and not in Spanish, which can make it difficult for Spanish-speaking users to access the website and its content. 

Process

The recipes are not intuitive or detailed

Accesibility

Platforms for viewing and finding cooking recipes are not equipped with assisted technologies.

Meet the users

3519275_edited.jpg

Name: Marco

Age :30

Education: Masters of Engineering 

Occupation : Computer Engineer 

Family status: Lives with his partner

Hometown : Austin, Texas

Marco is a computer engineer. He lives with his partner and enjoys cooking as a hobby. It gives him a break from his stressful job. Marco enjoys watching cooking tutorials in his free time or when on social media. He usually follows recommendations from the internet. Marco travels for work and  likes to cook for himself but finds it frustrating when he can't find all the ingredients. He also wishes the cooking videos have voice commands. He finds it hard to follow a video from your cell phone and cook at the same time.

Name: Isabella

Age :40

Education: Bachelor in Communication

Occupation : Single mother

Family status: Lives with her daughter

Hometown : New York,NY

Isabella lives with her daughter and works from home.She usually enjoys cooking and trying different recipes. She cooks three times a week and follows recipes from the internet. She likes when recipes are simple and easy to follow because she doesn't have much time . She finds important to have a clear section of ingredients  and options for ingredients, especially when she is making new recipes.

Ideation

I reviewed a couple competitors, some direct and indirect, in order to understand their position in the market and to identify areas of opportunity for the traditional Colombian cuisine.

Ai website – 1.jpg

To continue with the ideation phase I did the crazy eights to come up with ideas. Below I explained some of these screen ideas. 

CRAZY EIGHT_2x.jpg

Information Architecture

I then created an information architecture which helped me to continue understanding how the elements for the website work together and how to create a clear structure for the  users to move through the website.

IA WEBSITE.jpg

Paper wireframes

I sketched out some ideas of the layout, structure and content of the Traditional Colombian Cuisine website and then I moved to digital wireframes.

Digital wireframes

Web 1280 – 4_2x.png

Iteration

Research Questions
Determine if the users can navigate through the website.
What can I learn from the steps that users take to search and view recipes?
Can users navigate to different parts of the website from the home page?

I planned and conducted an unmoderated usability study. There were 5 participants who enjoy searching for, viewing, and following cooking recipes and reside in suburban and metropolitan areas. They completed the task of searching and navigating through the website on their own.

 

Determine if the user finds the recipe instructions page easy to follow and clear.
Are there any parts where users are getting stuck?

Below is an affinity map containing grouped data from all five traditional Colombian cuisine usability study participants. The data has been grouped based on similar participant responses and reaction to usability tasks.

Screen Shot 2023-02-24 at 1.27.40 PM.png
Screen Shot 2023-02-24 at 1.28.03 PM.png

I was then able to identify themes based on how many users share the same observation.

Participants provided feedback about functionality and challenges they experienced such as not being able to save recipes or navigating to recipe information without having to endlessly scroll.

After collecting interviews from the research I was able to analyze and synthesize the results and turn them into actionable insights.

INSIGHTS.jpg

Refining the design

Web 1920 – 7_2x.png

The high fidelity prototype use the same flow as the low fidelity prototype, including design changes made after the usability study.

Final Design

Style Guide

For this project I used two main colors yellow and blue to create a dynamic and vibrant website. Colombian food is known for its unique flavors and choosing yellow as a primary color I wanted to represent the freshness, diversity and richness of the colombia cuisine.

Style guide_2x.jpg

Take aways

This project showed me how important it is to think about and understand users' needs.

I had some biases related to Colombian food but after doing my research and listening to users I was able to adjust and direct the design to solve their problems and frustrations.

 

I learned a new tool, Adobe XD! I was very excited to explore and see so many ways I can improve and make people's life easier by creating designs that are accessible and enjoyable for users.

 

This is a continued learning experience and it is important to stay up to date with technologies and best practices to ensure the website remains responsive and user-friendly over time.

"I really love Traditional Colombian Cuisine! Each recipe bursts with authentic ingredients that transport me to the streets of Colombia. I feel like a culinary explorer with every dish I create" - Roger 

1_edited.jpg

Searching for a designer that shows passion in their work? Interested in working together?I'd love to hear from you!

Jdonovanagudelo@gmail.com

Feedback is welcome!

bottom of page