Cooking Hut
Recipes Responsive Web App
Project Summary
To design a responsive web app for recipes that meets the needs of its users and solves the problems they are facing with existing recipe apps.
Project Details
Key skills
User Testing, Wireframing, Prototyping, Graphic Design
Project duration
2 Weeks
Tools
Adobe XD, Vidyard, Google Meet, Powerpoint
5 W’s
WHO
Busy young professionals who are environmentally conscious, want to reduce food waste, and save money but don’t have much experience in cooking
WHAT
Empower users to find recipes based on ingredients that are available in their fridge and easy to follow instructions
When
Anytime a user needs help to decide what to make based on what is available in their fridge
Where
Primary use will mostly be at home
Why
Save time, less food waste, easy-to-follow instruction, and a healthy lifestyle
Strategy
Visual Design
I wanted to give the users a feeling of seasonal, simple, healthy, and easy to prepare. So, I picked the colors which are brighter but yet still feel warm and welcoming. As for the font style, I choose Didot LT Pro.
192F01
DED369
E0475B
F8EFEA
User Personas
User Stories
User Story 1
When I am browsing for recipes, I want to be able to make a selection of the type of food (e.g vegan, chicken, etc.) so that I don’t have to waste time browsing and narrowing down the selection for me.
Entry Point: Home Page
Success Criteria: Able to make a selection before browsing for a recipe
- Home Page
- Make Selection
- Pick a dish
- Recipe Page
User Story 2
When I am back from work, I want to be able to just type in the ingredients that I have, and the apps will give me suggestions so that I can focus my time on other important things.
Entry Point: Home Page
Success Criteria: Give suggestions based on the ingredients available
- Home Page
- Suggestion Page
- Type in ingredients
User Story 3
When I am looking for a recipe, I want to be able to read and leave comments so that we can all share our experiences and create better recipes.
Entry Point: Home Page
Success Criteria: Able to read and leave comments
- Home Page
- Recipe Page
- Chat
User Flow
What went well?
Having user interviews early during the data gathering and discovery phase is helpful to separate the designer’s bias from what users need. Their responses to questions were often surprising and revealed some unexpected needs.
SKILLS: Interviewing, Interviewee selection, user empathy
PROCESSES: Gathering user information, research, discovery
SOLUTION: Interact with users and gather feedback as early as possible
What didn’t go well?
During rapid prototyping, there are some issues with bringing paper sketches to the Invisionapp.
SKILLS: User flow mapping, Prototyping
PROCESSES: Task completion from beginning to end
SKILLS GAP: Transfer sketch to digital format
SOLUTION: Make sure to adjust the screenshot of the sketch to fit for the Invisionapp or create a digital version of the sketch
Feedback & Solution
Feedback
- Some of the text in the buttons are hard to read due to the color of the text against the color of the button.
- The placement of pictures on the page and overall structure is easy to follow, the page looks professional.
Solution
Adjusted the color background of the page and increased the text size. As there is no problem with page layout and pictures placement, only adjusted the favourite button position.
Final Design
Sign up
Log in
Home Page
Suggestion page
Product Page
