Project Overview
I designed a meal swapping and matching application called LunchBreak that allows users to search for and match with other users to swap and trade meals with each other. Similar to applications such as Tinder and Bumble, users will swipe/slide left and right on different meal options to either like or dislike other users' uploaded meals. So rather than searching for dating options, this application would allow users to search for meals that they can trade and swap with other users if they happen to match with each other.
Additionally, the LunchBreak prototype focuses on employing several of the iOS design themes, principles and guidelines for applications. For example the prototype includes:
Several Apple UI controls and icons such as back arrows for page navigation, sliders for search filtering, segmented tab controls for page content filtering, toggle buttons to turn options on/off, and the “+” icon to add content.
All Apple iOS notifications/alerts when the application needs access to the camera/photo apps and notifies users when turning on push notifications.
Minimal LunchBreak branding throughout the design that is only seen on the launch screen and home page header area.
Consistent color scheme for headers, navigation, controls and icons so the user understands what to expect from each interaction.
Prototype Demo Video
Mobile Prototype Design
* Below are the updated designs of the LunchBreak prototype created on Sketch 3
The two most important scenarios for this type of applications are (1) searching for different meal options to swipe through results to get potential ‘Meal Pal’ matches and (2) uploading/adding meals so other users can start matching and searching for meals. Below is an overview of the main screens and key interactions included in the prototype that will allow users to successfully accomplish these tasks.
Launch Screen & Home Page
The home page includes all the main content for users such as recent match (e.g. ‘Recent MealPals’) information and links for easy access to recent chats and meal history, a ‘Meals Nearby’ section for quick potential matches that are close to the user, and recommended meal options/matches based of previous match history.
The bottom navigation menu allows easy access to all the essential pages, features, and functions that are needed to complete all key tasks. The bottom navigation menu includes easy access to the home, search, chat, meals, and user account pages.
Search Page & Filter Function
The search page includes a search bar so users can search for any type of meal that is within their local area, a filter button in the header so users can set filter options, a recent search history for quick searches, and a popular categories sections based on trending meal options in the user’s area.
The filter page includes the essential filtering options to find specific search results and for any unique user needs including sorting options, dietary options, and distance options.
Meal Matching & Swiping Features
The swipe/slide result page shows all the information for the potential matches such as the meal picture, description, user profile link, user rating, and distance so users can easily determine whether to like/dislike a meal.
The match screen allows users to message their matches right away, continue searching for other meals, or view the other users profile to view their uploaded meal history and overall user rating.
Adding New Meals
The meal page includes access to all current user added/uploaded meals to edit and choose which meals to offer potential matches, a segmented control to filter page content for easy access to previous meals, and a “+” icon to upload new meals.
The ‘Add a Meal’ page allows users to upload pictures of their meal, add meal title and descriptions for other users, toggle buttons to start matching and receiving notifications about potential matches, and add the large add a new meal button.