top of page
cookDetail1XL.png

Project Overview

Role

Lead Product UI/UX Designer

Tools

  • Figma

  • Figjam

  • Sketch

  • Adobe Photoshop

  • Usability Hub

  • Content Strategy

  • User Research

  • Information Architecture

  • User Flows

  • UX& UI Design

3 Months

roleIcon.png

Tools

Project Scale

Overview & Background

What is ElCook ? & what are the required features?

ElCook is a recipe app focused on Mediterranean recipes, this app is the ultimate solution. With a user-friendly concept, it provides detailed step-by-step instructions, informative articles, engaging tutorials, and informative videos to help you create mouth-watering dishes.

To top it off, we connect you with reliable suppliers who offer expert advice and shipping services for the necessary ingredients. We even assist you in locating where to find these products in your area to save you time. There's no need to look any further - our app has everything you need to become a Mediterranean cuisine expert!

MockSplashCook.png

Designing The UI / UX  design for a Responsive App.

Designing a Recipe App.

The Problem & Challenges

  • Food products & recipes are a part of culture & personal passions; whether as a reflection of their cultural heritage or just personal taste in cuisines.

  • How can users living in specific communities find authentic Mediterranean recipes; designed by professional cooks or passionate community members?

  • How can we connect people of the exact cultural origins, that can advise other users on how to improvise in case any of the original ingredients are not available in their township, city, or state?

  • This can bring communities of similar backgrounds together while having online shopping access to specialty groceries that don’t provide shipping services.

The Process

To ensure the solutions met user needs, I followed a comprehensive design process, including background research, stakeholder and user interviews, usability testing, & competitive analysis. This led to the identification of key issues and user preferences.

Bring to Life

Ideate

Specify

Empathize

processSteps.png

Verify

  • Background Research

  • Stalk-holder/user interviews

  • Usability testing & Competitive Analysis

  • Persona

  • Feature Prioritization

  • Mood-board

  • User flow

  • Sketching

  • Low-Fidelity Wireframes

  • High Fidelity Wireframes

  • Design System

  • Prototyping

Continuous Testing through out the design

process after.​

Key Findings

processSteps.png

Empathize

Research & Analysis.

My process was to take the user goals and branding to analyze the potential solutions after researching user stories & pesonnas. Consequently, construct a plan on how the product would function via the user flows. These would help define the required interface and interactions in the wireframing and mockup phases, following the “Design thinking process” methodology.

Competitive Analysis

Various stages of competitor analysis and user research were performed t as:

  • Competitor Overview

  • Marketing Profile

  • SWOT Analysis

  • UX Analysis.

cookMockSampl.png

Kitchen Stories

FCC4B4EC-D2EF-4B0C-9220-AF0AF8BDA72B.png

Pros:

  • They offer a wide range of impressive options and activities and interactive content.

  • Relatively popular with engaging features with more than a million subscribers built-up throughout the previous 6 years.

  • The toggle switch for choice between metric or imperial measurements is a nice option, especially with users across the world.

  • In addition, the option to customize the ingredients list by changing the serving quantity is a useful touch.

Cons:

  • Massive selection of recipes, without focusing on specified targeted groups or areas. 

Forks Over
Knives

D2860CE5-8934-4DCF-A379-848681936F11.png

Pros:

  • They offer a wide range of impressive options and activities based on a healthy lifestyle perspective which attracts many especially basing info and advice on professionals.

  • It relates ingredients and recipes to specific health conditions through "Health Topics".

Cons:

  • Does not focus on specific styles of cooking only on the fact that all recipes are plant-based. 

  • Most features require payment without free trials to lure users.

User Insights

First Persona

CookUXPersona1.png

Likes

  • Family

  • Socializing

  • Nature

  • Cooking

  • Outings

Dislikes

  • Isolation

  • Missing Products

  • Racism and Arrogance

  • Boredem

Main Points

  • Extrovert

  • Family oriented.

  • Feeler

Research Insights

Various research methods were performed such as online research & user interviews. After recruiting 8 potential users, to gain insight into the needs, behaviors, goals, and pain points of the potential targeted audience.

Resulting in specific research findings, after mapping out the obvious information & patterns which helped in creating personas and shaping the direction and MVP of this project.

Colleagues

Synthesis of performed interviews noted the following patterns and research results :

Noted Patterns

 Most don’t use cooking apps except one. Some check Instagram or Google for answers and YouTube videos. Most prefer mobile phones. Most prefer videos.

Noted Frustrations

Not knowing what to do when some products were scarce in certain areas.

 Noted Discovery

Most were not focused on Mediterranean meals, even if it was part of their heritage. Some felt that Google and YouTube were enough. Some found they liked tips from Facebook groups or Instagram.

Noted Goals

Top deals, quick videos with ratings, coupons, tips, and advice.

Noted Quote

"I don’t worry about products or videos…. Google search does the job."

Noted feature

Provide free use of basic features to lure users, without a mandatory subscription.

MVP and Key Feature Requirements

Based on the research findings, I mapped out the obvious patterns which help to shape the direction and MVP of my project:

1. Allow users to search for a food ingredient available in local shops and compare prices.

2. Provide delivery service option from small stores that do not offer it, as some ingredients are not found locally except in those stores.

3. Include nutrition data and control serving size, while in some
casrs provideing alternative ingredients. 

4. Provide videos for recipes as most users prefered.

Project Goals

"How might we design a simple and seamless user flow for users to easily find recipes on this app?"

  • The main goal is to create a responsive web app, which can quickly help users find Mediterranean recipes. It also offers instructional articles, tutorial videos, and shows.

  • This product’s goal is eventually to connect users with suppliers of products in small groceries and shipping services.

  • This app also tries to connect members of local communities that share a passion for cooking. Local community members can advise each other and check the availability of products in small local shops.

User Stories


When I have limited time to spend browsing the web, I want to check out recipes, so I can pre-plan meals for next week.

User Story One

Scenerio 1

A new user searches for recipes of Mediterranean food & finds this website manages to browse recipes, before signing up, the user finds options and recipe ratings.

Crazy Eight Methodology.
crazyEight_edited_edited.jpg
Entry Point

Automatic transition giving a new user the chance to skip

Sign Up/Log In

or Skip

Optional Click on filters icon.

User selects filter options.

Home Screen

Filter Screen

User selects clicks
on Desired Recipe
After scrolling through results

Filtered Search Results Screen

Detailed Recipe Screen

Success Criteria

User Flow Diagram

The User flow diagrams were created based on user interviews, research & personas. This was the base for the information architecture of the app.
 

cookUserNew.jpg
cookSiteMapp.png

Mood Board

cookMoodbrd.jpg

Designing Features & Solutions

wmnCookPhoto.jpg

Browse recipes with multiple ways of filtering & selecting recipes.

GroceryScreens.png

This app is centered around providing recipes to users. while providing various perks to users. Some perks are free without membership others are available to members only, like the possibility to search specific products that might only be available in small local stores, compare prices, get offers and coupons from these small stores that don’t have delivery options, this app connects users to these stores, delivers & provides advice on recipes.

Check products
in local shops.

Select & compare prices of products
in local stores.

Select local stores
to check & purchase products from.

Select tabs on the sidebar navigation menu to simplify searching for categories in a saved shopping list.

Features

shoplogo.png
cookMockupSearch.png
printlogo.png

Print Shopping List.

Membership also provides the option to print-out shopping lists if the user doesn’t wish to shop online.

Grocery List.png

Select & compare prices of products
in local stores.

graySlideCook.png

Multiple ways
of filtering &
selecting recipes

Select recipes, add
to “my recipe” page, bookmark, share.

Sidebar tabs
gives easier & faster access to browse recipes

Anatomy of Home Screen

ladyCheckCook.png

PROTOTYPE

Entry Point

Automatic transition giving a new user the chance to skip

Optional Click on filters icon.

User selects filter options.

User selects clicks
on Desired Recipe
After scrolling through results

Sign Up/Log In

or Skip

Home Screen

Filter Screen

Filtered Search Results Screen

Detailed Recipe Screen

Success Criteria
cookProto
bottom of page