Best before
UX/UI App Design
Designed to help college students with grocery tracking and meal prep, Best Before was created with a focus on user experience and information hierarchy to provide simplified organization to the overwhelming idea of working in the kitchen, and provide solutions to wasteful and costly habits such as food waste and take-out meal purchasing.
Programs Used
Figma
Adobe Photoshop
Overview
In today’s fast-paced academic environment, college students often struggle to maintain a healthy diet while balancing their studies, social lives, and limited budgets. Many find themselves resorting to frozen or fast food for the convenience or skipping meals altogether due to the challenges of grocery shopping, meal planning, and cooking. The objective of this project was to use UX and UI psychology principles to create an app for good. The app was to be prototyped, with a brand identity, functioning tabs and pages, and a strong general solution, giving the app substance and innovation. Focusing on user habits and app flow, this project required development of wireframes and content to create an app that benefits the ideal user audience.
Project Objectives
Modern Design
User Flow
Cohesive Branding
the problem
Stores can be overwhelming, causing excessive purchasing of unnecessary products due to lack of meal planning, leading to forgotten items and food waste. Meal planning also poses a problem, with complicated recipes overwhelming amateur chefs, listed with unusual ingredients often not found in the average college student pantry.
The logo
The Best Before logo is a simple design to ensure visibility at small scales. A spoon and fork, utensils associated with eating and cooking, replace letterforms in the Best Before title to create a dynamic look. Dark and bright green display a feeling of freshness often associated with produce.
The App
The Best Before App focuses on streamlining the kitchen experience from keeping track of inventory, building and organizing recipes, and planning your next trip to the store. The app consists of three main sections: Inventory, Recipes, and Groceries.
Inventory
The Inventory page allows for easy tracking of all food, whether it is in the pantry, the fridge, or the freezer. Users have the option to add icons to each item to streamline product recognition Inventory can be organized into custom categories such as location in a user's own home like The Fridge, Pantry, Cold Cellar, etc., or department as familiar in grocery store settings Dairy, Produce, etc.
Every item in the inventory can be edited to include expiration dates, quantities, nutritional facts, and images, making it easy to find specific labels in your cupboard. Expiration dates are prominently displayed on the home page and are organized from soonest to latest. To help you quickly identify which foods are expiring soon, items are colour-coded: foods expiring within the next week, within the next two weeks, and those with more than two weeks remaining each have their own colour indicator.
Recipes
The Recipes section of the app serves as a digital cookbook, allowing users to save recipes from the internet or enter their own manually. In addition to storing favorite recipes, this section features a recipe creation tool that encourages users to make the most of ingredients they already have in their cupboard.
A recipe creation section powered by generative AI enables users to generate custom recipes by entering prompts, selecting ingredients from their pantry, and choosing meal types. This approach helps users avoid the common issue of missing ingredients, as the AI crafts recipes based on what is already available at home, eliminating the frustration of discovering missing items mid-preparation. This not only streamlines meal planning but also reduces food waste and supports more efficient use of pantry staples.
Each folder contains recipes accompanied by photos, giving users a visual preview, allowing users to "feast" their eyes on the meal that best suits their appetite. Every recipe also displays its average preparation time, making it easy to find dishes that fit into a busy schedule. This helps users plan meals efficiently and reduces the need to rely on fast food for quick options.
Groceries
The grocery list feature lets users add items directly from their inventory or enter new items, organizing them into sections that mirror typical grocery store layouts. This streamlined organization makes shopping more efficient and helps ensure nothing is overlooked.
MOTION GRaPHICS
These motion graphics were created to be used across various social media platforms to promote the app. They highlight key features of the app, such as recipe creation using specifically chosen ingredients.
