My Daily Nosh: Designing Grocery and Recipe Experiences

Designing the interface of a machine learning application to find recipes based on the contents of your fridge and to help you set up grocery lists.

Case Study By John Lattanzi

11/10/2020

Overview:

Project Summary:

The task was to take the existing wireframes and build a comprehensive UI for the client’s budget grocery app, My Daily Nosh. The app needs to use innovative machine-learning technology that will use the user’s inputs, personal profile, fridge scan, and purchase history to improve their tailored experience. Additionally, their plan is to use these factors to recommend personalized shopping lists, recipes, and order integration through Amazon and other grocery sellers:

• Location

• Budget

• The time of the year, month, or week

• Their preferences, diet, and lifestyle

• Their history of previous purchases

Client: My Daily Nosh

Product: Machine Learning application intended to help users find recipes and build grocery lists based on the contents of their fridge

Project Dates: November 2, 2020 - November 6, 2020

Tools:

• AdobeXD - Recreating existing wireframes, creating the prototype, and interactions

• Figma - Sharing designs with others and specific plugins

My Role and responsibilities:

Visual Designer

• Recreate wireframes designed by the research team

• Create prototype and test with real users

• Master and refine interactions

• Build a consistent component library

• Maintain a consistent typography

• Evaluate the information architecture, content, and visual design

Business Requirements:

• A narrow and clean set of features

• AI and personalization

Constraints:

• Solo Project, so less input from other designers

• One week to meet the client’s requirements

• Limited Resources for further development

• Had to maintain the existing color palette and logo

Research:

When starting this project, the research was already done for me, but I included my thoughts on these deliverables on the right. Here’s all the information that was utilized for this project:

• Demographic

  • Gender: Female

  • Age: 22-40 years old

  • Annual Income: $40,000-80,000

  • Location: Large Urban Areas, United States (initial marketing and focus is New York City)

  • Interests: Cooking, Exercise, Wellness and Health

  • Attitudes: Health Conscious, Joiner, Basic, Intimidated by Cooking, Optimistic, Ambitious, Wants to Eat Out Less, Wants to be "Healthier"

  • Challenges: Lack of Time and Resources, Lack of Skill, Social Isolation due to Urban Culture

• Competitive Analysis: Created for me

  • Shopper: gives you information about weekly sales from your preferred retailers and helps you find coupons for the brands you love. The app lets you make multiple shopping lists, look for new recipes, or share your favorite dishes with family and friends on social media. Making a new list is easy: you can either scan an item's barcode with the built-in scanner in the app or enter the item's description manually.

    • I utilized this platform to help build out the options for multiple shopping lists and how to look for new recipes through them - this was probably the competitor with the most similar platform.

  • SavingStar: helps you organize your grocery shopping for maximum savings by letting you link your store loyalty cards to a single profile and giving you a database of digital and printable coupons. If you see a coupon you want to use on the app, you can claim it to add it to your card. The coupon will then be instantly applied when the cashier scans your card at the store. The app also offers you a cashback option for shopping at certain stores, as well as digital coupons for online shopping.

    • This platform is very focused on finding savings, which is important for our users. It was more focused on using coupons than finding recipes, but it was a great resource for storing information and organizing it.

  • Checkout 51: for people who feel that they don't have time to clip coupons and look for deals. The app posts an updated list of store offers every Thursday that are valid until the following Wednesday. After buying the items on sale at any time during this period, you can simply scan your receipt, and the app will automatically apply the savings to your account. When you accumulate $20 this way, you'll get a check for your savings through the mail.

    • This platform helped me visualize how to store the information you could get in-store and how savings could be implemented in a larger platform.

  • Favado: tells you when your favorite items go on sale after you set up product alerts. Favado tells you where to find coupons for these items at local stores and has saved users as much as 70% on purchases, according to their website.

    • This was great for understanding how stores save your favorite items and how alerts can look.

  • Grocery IQ: you input your preferred grocery items and tells you which of your favorite stores has them available. Adding to the list is as easy as scanning the product's barcode (or adding the name by hand), and there are millions of items in the app's database. You can also use the app to look for coupons based on your list.

    • This grocery platform helped me visualize the process of recommending new products based on what you liked and have bought in the past.

  • The Food on the Table: automates the process of planning your meals based on what's on sale every week. You enter your food preferences for the week and the app will create five meal plans that take advantage of what's on sale at your local grocery store.

    • This platform was focused on planning meals, which was great for viewing lists and what that could look like.

• Personas: Created for me

April is an example of a woman who is mostly focused on finding fast and easy ways to get her groceries, spice up her routine, and learn how to cook without it being too complicated. Also, she has specific dietary preferences, so making that clear is essential for her.

Kelly is someone who has a large social media following, so she wants to find recipes that are aesthetically pleasing, simple enough to make straightforward step-by-step videos about, and to keep up with cooking trends.

Gabrielle is someone who loves cooking creative meals and loves getting into the nitty-gritty of cooking. She’s just focused on learning new cooking techniques, finding new recipes to challenge herself, and to keep up with what else is out there.

Existing Deliverables

Due to how this app already had a lot of work done on it, specifically including wireframes, a style guide, and more, here are all the deliverables I started with:

Evaluate Current Work

Part of the business requirements were for me to evaluate the existing information architecture, content, and visual design. These were my original thoughts: 

• Research: it is really well done. I’m curious why the demographic is specifically female when I feel like men would love an app to tell them what to buy and what to make, too. However, I think it’s a really interesting concept for each persona to be using this app to learn new recipes and to get better at cooking rather than just finding something to eat, which is where I originally thought the app would be going. The personas bring a lot of similar ideas to the surface, but they’re all very valid. 

• Content: The content is solid in terms of color scheme and making this more of an interactive experience, which is great. It seems to be a little bland outside of that, but their goal was to make it clear and concise, so I see why they wanted to make the pictures of food the main colors of the app. I think to make it a more interactive experience, it should be a little more chat-bubble heavy or if there were more doodles involved, but it’s a good start.

• Visual design: It looks fine, but it’s a lot of straight lines. For an app that’s supposed to be about being flexible for the user and speaking with you, I feel like it needs more pizazz. It’s a great place to start, but I want to spruce that part up for sure.

• Competitive analysis: Its really thorough in terms of what the apps are, but maybe not as thorough about why they’re the competition. Specifically, I noticed that some of these apps are more about creating lists in general and some are more about cooking itself; that being said, I think they all bring something interesting to the table and really help me wrap my mind around this project.

Interface Inventory

I took a step back and tried to think of what style the app already had and what would make it work most effectively. Some of this changed a bit later, specifically when they wanted red to be the main focus, but this is where I started:

Wireframes/Lo-fi Prototype:

Since the wireframes were already created, I used them as a jumping off point and started immediately iterating and created them as a lo-fi prototype:

Added Requirement:

At this point, I got some feedback that they wanted to see a different type of user flow focused more on past orders based on the wireframes below:

High Fidelity Prototype:

I updated the lo-fi prototype and created screens for the new user flow. Each flow is listed below:

Onboarding Flow:

General Use Flow:

Past Order Flow:

Conclusions and Takeaways:

This was an interesting process where I focused on creating the UI and making it as similar as possible to their existing wireframes. This was my first time exploring work with AdobeXD and Android phone accessibility guidelines, so it was a bit of a learning curve. I got to play a lot with the feeling of keeping the app fun and family friendly while also trying to make it as sleek and accessible as possible - one of the business requirements was all about keeping it clean and straightforward, so I’m happy with the work I did.

If I were to continue this project, I had some ideas for some animations that I’d like to add in, especially for the onboarding process and for some of the clickable areas. It was slightly out of scope for the project, but I think it would be a nice touch. Also, adding in specific screens about the actual part of the app that takes pictures of your fridge and recommends recipes would be really fun to explore, it just was out of scope for this particular project. For myself, I would also like to expand the color palette if given the option, but I was happy to work within their parameters!

Overall, I learned a lot during this project. Specifically, I learned what I really like as a designer and what sticks out to me. I learned how to use AdobeXD, I learned how to explore new parameters and work to include new business requirements as you’re already working on a project, and a lot more. I feel like I got a lot out of it and I’m happy with the work I’ve accomplished.