My Daily Nosh

An all-in-one grocery app that suggests a recipe and shopping list based on a user’s budget, what they have in their fridge, and their schedule, diet, and shopping preferences through a set of questions. It provides a meal planning feature, shopping list history, and even scans the user’s fridge for food.

Product Type

Mobile app

Thinkful project

Time Frame

October – November 2021

Team

1 Senior UI / UX Designer

My Role

Solo UI Designer, responsible for

Reviewing provided materials and tweaking them as necessary to reflect the company values accurately
defining requirements for app UI
Establishing visual design and branding material, such as colors, font(s), logo
Ideating, sketching, wireframing
Reiterating design to turn into high fidelity mockups

Overview

My Daily Nosh is an all-in-one grocery app that suggests a recipe and shopping list based on a user’s budget, what they have in their fridge, and their schedule, diet, and shopping preferences through a set of questions. The app contains some noteworthy features such as meal planning and creation of shopping lists, and storing users’ previous orders so they can easily reorder if necessary. Likewise, users can easily swap out ingredients from recipes and even scan their fridge for food.

The company is looking to create an adaptive UI, visual design and branding treatments to the app to reflect its aesthetic and values.

Provided Components

Researching & Sketching

I researched other apps – within the same food shopping industry, as well as other types of apps for inspiration on the general user journey flows, overall layout and onboarding experience.

Some of the apps I conducted research on were:

Mealime
Listonic
Yummly

Wireframe Sketches

Branding & Style Guide

I wanted to keep the green color from the original color scheme that was initially given to me for this project, as green is usually associated with freshness and health. Orange is a color that contrasts nicely with green and is one of the colors that is commonly associated with food and hunger.

However, I realized that these colors were not accessible, according to the WCAG guidelines. Therefore, a color update was necessary in order to make My Daily Nosh usable by all.

High-Fidelity Mockups

One fun concept I had thought of was to have options, pop ups, and even the hamburger menu display come from the top-down, instead of menus / options coming in from the side or from the bottom to the center. I believe this concept gives the app a more unique look to it!

Takeaways

Developing the UI for My Daily Nosh was a fun yet challenging experience, requiring attention to detail for accessibility and color blindness. Sifting through the wireframes provided by the company, comparing it to industry standards and then remixing certain wireframes to fit the company aesthetic proved to be somewhat difficult and time consuming. I did not realize how many screens actually go into creating something like a grocery app until I started this project!

There were a few times when I had to make tough decisions regarding the visual design of the product. Such circumstances are perfect for conducting A/B tests.

Even when just working with UI Design, it is just as essential to test early and often to ensure a streamlined experience for all users before committing a large amount of time and money into developing the product!