John Gonzalez

Project Overview

My Daily Nosh wants a grocery app uses machine learning to suggest recipe and a shopping list based on the user's needs. Using personalized recipes, shopping lists, and seamless order integration and pushing users to purchase from partners, Amazon and Fresh Direct.

‍

Problem

With many restaurants still not able to fully accommodate people with special dietary needs and being an inconvenience to try to eat out with special dietary needs, users need to find an alternative to create delicious meals at home that adhere to their dietary needs while also allowing them to shop for ingredients based on the recipes.

‍

Solution

Provide a mobile app that suggests recipes based on the users' dietary needs and providing them with seamless shopping experience to purchase the ingredients based on the recipes suggested.

Role:

UX/UI Designer

‍

Timeline:

March 8 - March 12

‍

Tools:

Figma

RESEARCH

The client's research team provided the research, so I could focus primarily on the UI and UX design of the mobile application.

‍

User Personas

Based on the research given to me, I created two personas. These two personas will help me drive my visual design decisions.

User Flows

To tackle the basic flow of the app to meet business requirements, I created a basic user flow for the main flow.

Sitemap

Based on my user flow, I created a sitemap to structure the information better and to create a blueprint to base my design off when I went into sketching out my ideas

PROCESS

Sketching

With my site map and user flow as my starting point, I started to brainstorm solutions to the problem. I sketched out ideas and frames I had for the application.

Low-fidelity Wireframes

Based on my sketches, I started to digitally wireframe my ideas into Figma which I can eventually bring to high fidelity after examining the branding.

Branding

Before taking the low-fidelity wireframes into high-fidelity, I created a moodboard based on the feeling I wanted the application to display.

I researched into color psychology and what colors affect our appetites:

  • Orange whets the appetite
  • Green signifies freshness

From there, I created a style tile that helped me keep the visual design of the screens consistent while also keeping some of the original branding from My Daily Nosh consistent with the application.

High-fidelity Mockups

Based on my style tile, I brought my low-fidelity wire-frames to high-fidelity. I focused on bright orange and green colors to bring the color psychology into my design. I made the recipe screens primarily orange to whet the appetite and the shopping pages green so that users feel the ingredients they're buying are fresh.

Prototyping and Testing

After bringing my screens to high-fidelity, I prototyped my screens based on my user flow and sitemap. From there, I conducted guerilla testing with a handful a users in a zoom call. I had several users complete basic tasks to try to expose any usability issues and asked for general feelings while using the application.

‍

Based on the testing, the general flow had no glaring issues and all the users found the prototype very enjoyable to use and found the design visually appealing.

‍

One user pointed out that the use of green in the shopping screens made them feel like they were getting quality ingredients which is the feeling I was trying to go for.

REFLECTION

Final Thoughts

I wanted to pursue many other features and aspects of a machine learning application. Due to the time frame we were given, I had to design a minimal viable product. This also prevented me from scope creeping and creating a multitude of screens that weren't on the highest priority for launch.

Working in a sprint time frame helped me understand what to prioritize and challenged me to design quickly with the user at the center of the design. Although my initial design had no glaring issues, there are still elements I want to change and revise upon. I was able to understand a design sprint better because of this project, and I hope to have more experiences with a design sprint to become a better designer.