HeelMeal
HEELMEAL
The Mobile App
An independent ideation built from the ground up
- User Research
- Brand Design
- UX/UI Design
- User Testing
OVERVIEW OF PROJECT
RESEARCH
Interviewing
Understanding User Goals
User Personas
Competitive Analysis
DESIGN
Design Goals
User Flow Chart
Wireframes
Low-Fidelity Mockup
Brand Design/ Style Guide
USER TESTING
User Feedback
High-Fidelity Mockup
Future Imrpovements
WHAT IS HEELMEAL?
The purpose of the project was to curate a user interface that helped to reduce the amount of traffic during lunch times at the UNC-Chapel Hill (UNC-CH), food court, more commonly referred to as “the bottom of Lenoir.” The case study works as a reference to develop the first version of the system for the university.
“HeelMeal” (play on words of UNC’s namesake, The Tar-heels) is a mobile application designed for UNC-CH students, offering a solution for online food ordering and pickup in an effort to reduce long lines and wait times in the food court.
CONTEXT AND RESEARCH
This information was compiled from a light exploratory study, where a survey was sent to students through word-of-mouth postings on social media. The survey included a list of quantitative questions represented in the results of the graphs below, as well as a section to input descriptive sentences of their experience during lunch time hours at the bottom of Lenoir . The survey was taken by 25 UNC Students, ranging from the ages of 18-23.
Students who said ordering food between their classes during the lunch hour period was stressful.
Students who are familiar with or have eaten at the bottom of Lenoir food court
Students who would rather skip lunch than go to the bottom of Lenoir during classes.
Students described the space as being too overwhelming and crowded during lunch hours. With only 15 minutes in between classes, Students also complained about not having enough time to wait in lines or on food.
INTERVIEWING POTENTIAL USERS FOR GOALS
I conducted interviews with potential users through guerrilla interviewing in the student center at UNC. Students were asked what they would like to see in an online ordering application. Additionally, I conducted field observations to study customer interactions with restaurants during the ordering process at the food court.
WHAT DOES THE USER WANT IN THE APP?
Customized Orders
During my observations, I noticed that a majority of people ordering had special requests for their food, whether it be related to portion size or removing/adding ingredients to a dish.
Dietary Notice
Interviewees said they’d like a dietary notice on food items. Options like vegan, vegetarian, local ingredients, Halal, gluten free, and organic notices were listed as important to some users. Some students also requested that nutritional facts be displayed.
Prices Made Clear
Budgeting and saving money is important to students. Pricing of items made clear and clarifying additional costs would be essential in the app.
Simple To Use
Students want a fast and simple way to place an order in the least amount of steps possible. Whether they are in class or on-the-go, time is limited for busy students.
SUMMING IT UP WITH PERSONAS
COMPETITIVE ANALYSIS
Part of the inspiration for the design of HeelMeal was drawn from other food ordering apps with standard processes, so that users would have some sense of familiarity with the interface. I looked at the mobile apps of Panera and Uber Eats to see what standard ordering flows users were accustomed to. Here is what I found:
- An option for selecting the date and time of pickup, with description of what this means
- The opening screen gives immediate options to place a new order or reorder a past one.
- The product page has option to customize the ingredients of an item or gives the opportunity to add special instructions.
- Each menu item includes a picture, title, price, size and calories.
- Item pages have a large ‘Add to Order’ button with price fixed at the bottom of screen.
- Large, high-quality images of food items
DISTILLED INSIGHTS
After reviewing competitors’ apps, my goal was to design a simple, streamlined version of these apps. There would be no use for a long onboarding process because pre-existing meal plans are run through Carolina Dining services, and this account information would be used to access the app. This also means there would not be a need for inputting a payment method in the checkout process.
When detailing the restaurants, giving a price range of each restaurant is unnecessary because the food court restaurants are all similarly priced on the lower end of the spectrum. Unlike competitors, there is no need to include an “Add Drink” option, because drink orders are not conducted through the individual restaurants, but through the universal food court drink station. Buying a drink would have to be done separately from the app.
Lastly, there is already familiarity in the community of the restaurants in the food court, so the ordering process of each restaurant may be more intuitive for students. In this case, the process for ordering can be simple, yet guided and detailed enough for less familiar students.
THINKING ABOUT DESIGN: DESIGN GOALS
1
Due to tight schedules, time is Important to users . Therefore, users will have little patience towards complex ordering systems, especially if they’re hungry.
- Offer a reorder/favoriting option to speed up the ordering process.
- Overall simplicity and ease of use
2
Since many student have class during lunch hours, there needs to be a fast pickup option during class transition periods. Users should be able to order ahead and set a pick up time during a class change. This will also prevent students from ordering their meals during class.
- Pick up times need to be clear and adjustable to users’ schedules.
3
There is a need for customization in orders. The app should have a way to input notes for the kitchens. The user should also be able to reorder past orders so that there is no need to customize a brand new ticket every time they want the same item.
- Customization is always available on orders, even on saved/favorited orders. This allows for small changes to be made.
4
UNC students have a diverse dietary needs. Making an indication of dietary facts about the food, as well as easy-to-find nutritional information is important to the design.
- Each menu item needs dietary information and nutritional facts
- Each menu needs a dietary filter
Lastly, the app should have fun and youthful copy, language that UNC-CH students will resonate with.
USER FLOW MAP
WIREFRAMES
SIMPLIFYING ‘THE COMPLEX MENU’ ORDER PROCESS
One thing I focused on in the design is the two different types of restaurants in the food court.
- The first type offers a selection of individual items to order
- The second type of restaurants’ menus are based on constructing a tray combo down an assembly line, consisting of one entree and two sides.
I needed to distinguish these two ordering processes in the design with the least amount of confusion.
- For the second type of restaurants’ user flow, I wanted to incorporate the physical food tray into the design because there is familiarity with this ordering process in the user demographic. Users would recognize this physical cue. The physical experience of the takeout boxes is replicated in the order confirmation window (fig 2 – 4.6)
Fig. 1 Restaurant Type 1
Fig. 2 – Restaurant Type 2
FAVORITING PROCESS
Another key function of the app is reordering favorited items or past orders to streamline the ordering process.
- Not only can a past order be favorited, but each individual menu item placed in the user’s cart can be favorited.
- Additionally, once the order/item is on the favorites page, there is still an option to add more items from the menu before reordering.
Fig. 3 – Favoriting Process
LOW-FIDELITY PROTOTYPE
I designed a low-fidelity clickable prototype to hash out the layout of each page and create a smooth, predictable flow of the user.
USER TESTING
I conducted user testing of the low-fidelity prototype with 3 potential users to identify areas of friction or room for improvement. I observed users interact with the prototype and then interviewed them about the experience for further insight. Below is a list of observation notes and user suggestions for some of the pages and flows.
New Order/ Reorder Page
- Add navigation: have a way to access other features of the app, other than placing an order
Navigation Menu
- Let users see how much money they have left on their account
Type 2 Restaurant Flow
- ‘Next’ button appear at the bottom of the page, after you select and item
- Remove extra ‘Back’ button on pages and just leave the back arrow at the top left, a place users are familiar with
- Include a progress bar so users know where they are in their ordering process
Item Page
- The customize tab should have prices underneath each ingredient
Cart Page
- Users need a way to delete items from their cart
- If the item is customized, have a description of what was added or removed with pricing differences
Review Order Page
- Make tray clickable and navigate back to indicated page to edit
Pick-up Time Page
- Change wording: “Schedule a class change pick up time” – meaning confusing
USER INTERFACE DESIGN AND BRANDING
The style guide includes a logo design and app icon as a visual anchor for the product. It also includes a standard of graphical elements to guide the design of the interface. The design elements (buttons, icons, and displays) are simple, clean, and open in order to promote minimal distraction and confusion. The color choice stays on brand with UNC-CH guidelines and uses a complementary orange, green and teal. The teal is used to highlight areas of action. Green is the color of confirmation and is used in areas where users will be confirming orders. Orange is a stimulating, alerting color and matches with the actions users will be completing when seeing it.
TACKLING THE SHORTCOMINGS
After doing user testing on the final prototype, I compiled a list of opportunities for further simplification. Some of the areas for improvement included:
- Adding an arrow and numeric value to the ‘Add to Cart’ button to duplicate and item
- Flow that allows the user to place an order on one ticket from multiple restaurants, not just one
- Add a ‘Cancel Order’ button on the Order History page
LOGICAL DATA MODEL
The following entity-relationship diagram is made of 3 entities; customer, order, and restaurant. One customer can create many orders, and many orders can be fulfilled by one restaurant. Orders cannot exist without a customer and a restaurant, although customers and restaurants can exist without orders. Customers have names, ID Numbers, histories, and account balances. Orders have contents, prices, and ID numbers. Restaurants have prices, hours, menus, and names.
DATA FLOW DIAGRAM
An implementation of the data flow diagram, outlining a general overview of how HeelMeal’s food ordering system will interact with the payment manager, the kitchen and the customer.The diagram includes a data sink for orders and status, as well as more processes.
REPORTS
HealMeal will generate reports for the CDS employees to track orders and properly maintain inventory. The reports will conform to CDS’s current inventory management report format. Users will also be able to view the history of their orders, which will be presented in a user and mobile-friendly display menu within the settings of an account.
OPERATING ENVIRONMENT
The software will be implemented as a mobile application for both IOS and android. There will be user interfaces for both customers to order food and restaurants to process orders. Customers will be able to use their phones, and restaurants will need some sort of hardware such as an iPad to process orders. The system will work in conjunction with CarolinaGo (UNC-CH app utilized by students to access campus information and resources quickly) for easy accessibility. The backend and database will be hosted by UNC ITS.