Noodle Soup Recipe Generator
UIUX team decide to share a recipe from everyone's hometown. I am from Hunan, China. People in my hometown love all kinds of noodle soup. So I decided to build a noodle soup generator app, so my designer friends can also enjoy different kinds of noodle soup by themselves.
Define the problem
Our goal is to let team members from different parts of the world experience some exotic flavors. However, to achieve that we need to make sure the DIY dish is as authentic as possible. There are some challenges we need to solve. The disadvantage of the written-down recipes are:
1. Some ingredients are hard to get
2. Text direction is hard to follow
3. One recipe can only make one dish
Ideation
To solve the problems above, there are couple of things I can do:
1. Post Amazon links to all the sauces and uncommon ingredients
2. Shoot a video to show how to cook the dish step by step
3. Make a Noodle Soup Recipe Generator app that can dynamically generate recipe to fit everyone's needs. Besides that, we can let user share the recipe/ingredients to others by email and copy those text to their shopping cart.
Build Wireframe
We can have 3 UIs to show the welcome page, user input form, and the result.
I used illustrator to quickly wireframing some UIs and got the basic structure of the app.
Prepare for the UI elements
To build hi-fidelity mockup, I need to find a good the color palette, design a logo for the App, define the font family and prepare for all the elements needed for the App.
Create
Hi-fidelity
mockup
I build a Figma prototype to show the high fidelity mockup.
React
Prototype
With the Figma prototype ready, I quickly jump to React and build this prototpye:
Future to-dos
This is not DONE yet. I find it a perfect opportunity to train my design thinking and code implementation skills. In the future, I want to add more feature to the prototype to make it a intuitive web app for all the foodies.
1. Recipe logic
2. Make the web app more responsive
3. Make it more accessible by adding Language settings
4. Enable the Dark Mode
5. Add more CSS transition animation
6. Dynamically show noodle image based on user selection
7. Build email template to share / save recipes
8. Post it to the public and gather feedback from real user.
So far the end result looks like (https://hmhmhm0523.github.io/Noodle-Recipe-Generator/) and I hope you enjoy the video I made.