UX/UI Designer Margarida Saldanha

Al fresco

UX/UI Designer
Course project
2024
Mobile appUX researchUI design
Al fresco recipe and meal planner app shown on a phone, styled as a Behance presentation cover

Overview

Al fresco is a recipe and meal planner app, designed in Portuguese as a course project. It brings weekly meal planning and recipe discovery together in one place, so cooking at home feels simple, and a little more adventurous.

Problem

Plenty of people love cooking but rarely have the time to plan for it, so they end up relying on ready meals and take-away. I built the project around a persona, Jéssica, a 30-year-old designer: she spends too long deciding what to eat, gets put off by long and complicated recipes, and spends too much on ingredients she doesn't use. What she needs is organisation, more free time, healthy home-cooked food, and less waste.

Persona board for Jéssica, 30, designer: independent, busy and thrifty; needs organisation, free time, healthy home food and less waste; pain points are time spent planning, long difficult recipes and overspending on ingredients

Process

I mapped the app in a user flow first. People can create an account or try it as a guest, then set their preferences: goal, diet, allergies and cooking level. From the homepage they reach search with filters, saved recipes, the weekly planner and shopping lists. Any recipe can be cooked step by step or added straight to the planner or a shopping list.

Al fresco user flow from sign-up and preferences to the homepage, profile, notifications, lists, planner, saved recipes, search with filters, and a recipe page with cook, edit and add actions

Onboarding asks a few short questions so the recipes feel personal from the start, and it can always be skipped for later.

Onboarding

Welcome screen with an illustration of two people cooking, and buttons to create an account or continue as a guest Create an account with Google, Facebook or email Intro to the preference questions, with the option to answer them later Question: what is your main goal, such as eating healthily or losing weight Question: do you follow any of these diets, such as Mediterranean, vegetarian or vegan Question: any allergies, intolerances or ingredients to avoid, chosen as tags Question: how do you rate your cooking level, beginner, intermediate or advanced Loading screen: preparing your feed

The visual identity is warm and calm, like a kitchen table: Besley for headings, Open Sans for text, and a palette of creams and olive greens that lets the food photography lead.

The homepage and search help people find something to cook quickly: a recipe of the day, themed collections, personalised suggestions, and filters by ingredient, difficulty, meal type, diet and cuisine.

Discover

Homepage greeting the user, with search, the recipe of the day and themed collections such as veggie burgers and avocado dishes Search with main categories, a featured recipe and recipes for you Filters by ingredients, difficulty, meal type, diet and cuisine Saved recipes in a photo grid

From any recipe, people can start cooking step by step, or add it to their week: pick a day for the planner, or choose which ingredients go on the shopping list, with a quick confirmation each time.

Recipe

Recipe page for a mushroom and asparagus quiche, with time, difficulty, portions and ingredients, and buttons to add or cook Cooking mode showing step one of the recipe with its ingredients and instructions Add to sheet with options for shopping list, meal plan or collection Choose a day of the week to add the recipe to the planner Confirmation that the recipe was added successfully Choose which ingredients to add to the shopping list, with portions Confirmation that the ingredients were added

Plan and shop

Weekly planner empty state inviting the user to add recipes Shopping list grouped by aisle, such as condiments, dairy and vegetables, with checkboxes

Outcome

The result is a complete mobile app design, from onboarding to recipes, the weekly planner and shopping lists. Every part of it answers one of Jéssica's needs: less time spent deciding what to eat, recipes that match her level and diet, and shopping lists that help her buy only what she'll use.