Designing a Recipe App.
ROLE
UI/ UX Designer
PROJECT SCALE
3 Months
TOOLS
Figma, Photoshop & Usability Hub
Case Study
If you're seeking Mediterranean recipes, our app is the ultimate solution. With our user-friendly platform, we provide 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!
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.
Goals
Browse recipes with multiple ways of filtering & selecting recipes.
Select & compare prices of products
in local stores.
Home
The home page allows users to follow the latest recipe, articles, blogs, browse, saving recipes to “my recipe page”.
Select recipes, add
to “my recipe” page, bookmark, share.
Multiple ways
of filtering &
selecting recipes
Sidebar tabs
gives easier & faster access to browse recipes
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 tabs on the sidebar navigation menu to simplify searching for categories in a saved shopping list.
Print Shopping List.
Membership also provides the option to print-out shopping lists if the user doesn’t wish to shop online.
Select local stores
to check & purchase products from.
Features
The Process
-
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 -Centered Design Process.
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.
Construct research to
a better understanding
of users
Use research
to observe needs &
current users' problems.
Brainstorm solutions; highlight opportunities for innovation.
Transform ideas into physical & interactive format.
Conduct testing with users & iterate based on feedback
Document the final solution & put implemented vision.
Understand
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.
Overview
The following portions below are general overview details on some parts of the design process, for more details press the button below each portion.
User Personas
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.
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.
User selects clicks
on Desired Recipe
After scrolling through results
Home Screen
Filter Screen
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.
User Stories
Conceptualization
Mood Board
Mockup Samples
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