A client from Swanky Food Tech LCC wants to make an app, My Daily Nosh, which helps users interested in cooking, wellness, grocery shopping, and healthy life. This app allows the users to order groceries and to have famous/healthy recipes when they want to cook a healthy meal more efficiently. Not only can users find out groceries and recipes, but they can also search for order histories and reorder those again with one mouse click. I created an interface inventory, style tile, mood board, wireframes, and high-fidelity mockups.
Developed Interface inventory, Mood Board, Storyboard, logo design, and Style tile
Digital Wireframes and High-fidelity Mockups
2 weeks
It is hard to make healthy meals, and some people do not have enough time to cook, enough resources, and excellent cooking skills. Moreover, it is also hard to expand their social network with people who have vital interests in healthy life and food.
Female (22-40 years old) in large urban areas, US
Annual Income: $40,000 - 80,0000
Interest: cooking, exercise, wellness, and health
The My Daily Nosh provides excellent shopping experiences with personalized information and cooking recipes. The customers easily search for groceries to order and recipes to make healthy meals.
My client gave me Montserrat as a font for My Daily Nosh app.
I chose colors #000000 and #636363 for the fonts.
A. Logo
I made several logos based on old-version logos, style tiles, and selected colors from other designers. For example, I used radish as a symbol of grocery shopping and healthy food. Moreover, I want to make the logos look cute to forgive any minor errors the app makes.
B. Iconography
These iconographies help users to understand which content they need to choose. For example, when they want to find groceries by department, they can search for specific groceries in the “Store.” Users also can see order history and re-order those very easily.
C. Images
I chose lots of food images for grocery shopping in the app. Users can understand which food they want to buy with a very convenient delivery service. They do not need to visit or see exact groceries to purchase ingredients.
D. Buttons
I chose colors based on the provided colors by the company. I used typography, Montserrat for each button.
E. Forms
I made these forms to provide information about each shopping list. It has pictures of groceries, and they have their names and prices for lb.
F. Navigation
I made these components and buttons. I chose blue colors for Facebook and reddish colors for Google since those colors remind users of those brands.
.png)
My Client wanted me to make new wireframes for order history for its users. So users can easily check what they bought before by clicking “Order History” in the sidebar, and they can reorder those again.
I made these wireframes based on the sketches I made for ordering food users bought before. Thus, users can quickly check what they ordered back and click the items they order often. Moreover, they can use the button "Substitute" to see other grocery items related to a specific item. For example, you can see various bananas if you click the button "Substitute" next to a banana you ordered before.
I developed these prototypes based on the other designers’ and my wireframes. First of all, users can use the sidebar to use the app generally. Users can search for groceries from the button “Store” and check their “shopping list,” too. Finally, users can log in by making a new ID or logging in with their Facebook or Google ID.
I made this style tile after my client saw my high-fidelity mockups. The client wanted to upgrade its style tiles based on the mockups, so I want to show my stakeholders how the app-visual looks generally. In addition, I wanted to give visual information about the app. After I showed this style-tile to the stakeholders, I thought I would get feedback for developing the app.
With the high fidelity mockups, I conducted usability tests to..
To have valuable insights and ideas from the users on how they think and search for groceries and recipes.
To evaluate the product with potential users.
To find unexpected problems that users might encounter when they use the app.
There is a link to see the high-fidelity mockups below. These are the results after the research process, designing, wireframing, prototyping, and usability test.
These are the key images from the high-fidelity mockups. In addition, users can find bus operations and accurate time schedules.
It might be hard to work together without enough conversation with team members.
Since it was a fictional work, there was some miscommunication, and I felt some of the results were hard to understand.
