UX/UI and Prototyping Case Study
According to the survey, 44% of respondents in the US are stated they are cooking more since the COVID-19 pandemic has started. Thanks to the internet, we can easily find recipes and ingredients online. However, fresh ingredients are perishable and most of us want to minimize the trip to the store. Therefore, we want to have a centered place where we can plan the meal for an upcoming week(s) and the shopping list.
"create a meal planner that helps people organize menu for the upcoming week(s)?"
"create an interface which allows users to add and save the recipe of their choice?"
"create a grocery list from a multiple recipes so users can shop the ingredients all at once?"
In order to find the solution to the problem I cross-checked the market for competition in order to define the basic features of my app.
- Many competitors use their own recipe source but the users' choices are limited
- Many competitors charge for the use of meal planner (and they are not cheap!)
- Community and or reviews (social networking) feature may increase the conversion rate
- It is more efficient to find the recipe outside of the app
- Monthly view of the planner is hard to see on small devices
- Community and or reviews (social networking) may take away the focus on planner
- Create an app which imports recipes outside of the app
- Create a planner with daily and weekly view
- Focus on creating a simple and easy meal plan app
Next, I created user and the app flow and the wireframe.
Main feature of this app is to let users to create or import recipes of their choice,
save, and add them to a meal planner. Another feature of the app is generating a grocery list from its ingredients.
Users can either export the list or shop at the online shopping site of their choice.
The selection of a cool color palette for the app was made based on the calming and relaxing qualities associated with
green, blue, and purple. This choice was driven by the app's nature as an organization tool rather than a recipe-focused application.
Before developing high-fidelity mockups, an A/B testing was carried out involving a group of five individuals
- Conduct user testing with the high-fidelity UI
- Iterate and refine the design based on the test result
