Food Match

 

FOOD MATCH

Background:

Food Match is an app exploration I created to encourage people to cook more and use up their leftover ingredients, in the hope to eliminate food waste as much as possible. The app allows you to enter in your ingredients and matches you with recipes you can make. If you are missing any of the ingredients for a recipe it allows you to order them through your local delivery carrier, Amazon or Fresh Direct account. 

What I did:

I held a whiteboard session, designed the wireframes, prototype and conducted the user testing for the UX portion. I also handled all visual design elements including the illustrations and icons.

 
timeline-01.png
 

White board Session:

In the whiteboard session I identified the ‘how might we’ question and problem, the persona, the features that I would like to include and frustrations that the user might have. I brainstormed some possible solutions and then created a user journey map in steps. Once this was done, I started roughly drawing out the screens from the user journey steps.

 
whiteboarding+1.jpg
whiteboarding 3.jpg
whiteboarding+2.jpg
 

Wireframes:

From the notes and the rough sketches I did in the whiteboard session, I began sketching up wireframes separated by flows and created a first prototype in InVision to test on real users.

 
Wires-01.png
Wires-04.png
Wires-03.png
Wires-02.png
 
Wires-05.png
 
 

User Testing

Problems that arose during the design process were:

Deciding what features to include and not to include, knowing what my limitations were and making sure my UI elements matched user expectations.

How I solved these problems:

One thing that came up during user testing was the suggestion to add an allergy feature. I realized that this was a much bigger task and would be harder realistically to handle from a liability standpoint. I chose to not include this feature as I felt the user would be self aware enough to decipher what to exclude on their own since they were cooking for themself.  

 

Visual Design Style

Overall I wanted the visual identity of the app to be fun! Something that had a slight retro vibe which I captured in the use of typography and background elements. Since the app had a lot of colorful photographs I did not want to overpower them and chose to leave those particular screens relatively simple. 

 
Artboard 1.png
Artboard.png
 

Illustration/Icon Development

The illustrations I did using Adobe Illustrator. I started by creating a rough sketch by hand and traced my sketches using the pen tool and experimenting with color and layout 

 
Rough sketches.jpg
Screen Shot 2020-04-03 at 2.55.55 PM.png
 

Sign In / Register & Select Your Food Preferences Screens

app 1.png

Profile / Digital Kitchen / Food Matches & Match Screens

Artboard (1).png

Missing Ingredients / Shop Items / Payment & Delivery Screens

Artboard (2).png

Weekly Menu / Favorite Recipes / Saved Menus / Saved Menu Screens

Artboard (3).png

Explore / Account Settings / Grocery & Liquor Delivery Screen

app 5.png
 

Conclusion

I was able to solve for most of the initial questions that arose during the design and user testing process (where I tested it based on users expectations). The app can be streamlined more once it is built and tested on users in the correct setting, especially the design of the digital kitchen flow.