Summary
My Daily Nosh suggests recipes and shopping lists based on your budget, what you have in your fridge, your schedule, diet, and shopping preferences.
Problem
Urban dwellers with busy schedules do not have the time to come up with creative dinner ideas and make their way across town to go grocery shopping.
Solution
This app uses innovative machine learning technology, that uses current inputs, personal profile, fridge scan, and purchase history to improve the tailored experience for the users.
Users and Audience
-
Female
-
22-40 years old
-
Annual Income: $40,000-80,0000
-
Large Urban Areas, United States (initial marketing and focus is New York City)
-
Interested in Cooking, Exercise, Wellness and Health
-
Health Conscious, Joiner, Basic, Intimidated by Cooking, Optimistic, Ambitious, Wants to Eat Out Less, Wants to be ‘Healthier”
-
Lack of Time and Resources, Lack of Skill, Social Isolation via Urban Culture
The Process
Getting Started
Since I was working on templates that were already created and provided to me, I had to take some time to familiarize myself with the user research and initial wireframe templates as a starting point.
Competitive Analysis
Once I had gathered enough information, I performed a competitive analysis on 3 companies to determine their strengths, opportunities, and weaknesses: Shopper, Saving Star, and Checkout 51.
Style Tile
Next it was time to start thinking about the UI. I was given the initial color scheme and logo of the app from the brief. However, I needed to analyze both of those to make sure they aligned with the user personas. I thought the color scheme made a lot of sense being that it was for a food app and targeted toward a younger audience. Then I brainstormed how to use the elements of the logo in the UI to make everything cohesive. For example:
-
Elements will have round edges
-
Images can be cropped to a circle
-
Icons can be a solid color and not outlined
-
Category text can be uppercase stylized
-
Colors should be flat - no gradients
-
Incorporate circle in the nav
My Daily Nosh Style Tile
Flows
I took another look at the existing wireframes to make sure all the flows made sense for the users. One thing I adjusted on there was the navigation. In the original wireframes, the navigation was through a hamburger menu. I decided to bring the menu items outside of the hamburger into a button navigation panel. That way, all vital information is visible right away.
Then, I began creating the main flows. I added in the feature to scan your fridge for ingredients, the recipe flows to get inspiration and the profile page to take care of administrative items beyond what was handed off to me.
User Testing
Now my screens were ready to bring into testing. I conducted click tests on the past orders flow to make sure everything made sense to my users. Coming out of the test I learned that most of the flow was intuitive, however everyone collectively struggled with finding the past orders icon. So, in my iterations I swapped the location of past orders with the profile icon. That way I could label “past orders” and avoid future confusion.
Mockups Home Screen
Updated Home Screen
Learnings and Outcomes
In this project, I really learned the value of utilizing components and in whatever design program I am using. I made sure all my elements were tied to a component. When I went through rounds of feedback and iterations, this made it so much easier to make changes to colors, sizes, and positions.
​
In the end I created high-fidelity visual mockups of the My Daily Nosh mobile application. Essential screens of the main 5 flows are all in place: ordering ingredients, creating and editing shopping lists, scanning the refrigerator, looking for recipe inspiration, and viewing past orders..
