Design Guidelines For Catering Industry
Overview
This chapter provides guidelines for designing Mini Programs in the catering sector. These guidelines allow your Mini Programs to offer a clear and consistent user experience.
The main contents are as follows:
- Basic principles of the Mini Program designed for the catering sector
- User experience flows for main catering types and different ordering scenarios
- Guidelines on essential interfaces of a catering Mini Program
1. Basic Principles
Principle 1: Identify the exact scenario and user behavior.
You need to find out the catering type and identify the ordering scenario, which may be dine-in, takeout, or delivery. And you need to determine the behavior flow, such as placing an order or offering a reward. This principle aims to be clear about the scenario information and focuses on user behaviors to prevent user confusion.
Principle 2: Simplify the design to improve recognition.
We recommend that you simplify navigation operations and avoid the use of tab-based navigation on the screen bottom. This principle helps users distinguish Mini Programs from apps and guarantees the consistency of different feedback components and permission components.
In addition to the preceding two principles, you need to use the same controls and interaction modes on different pages whenever possible to keep the consistency and continuity across pages. The consistent experience on different pages and the continuity in interface elements allow users to use the Mini Program with minimal effort and prevent discomfort caused by page redirections. For more global guidelines on the design of Mini Programs, see "Mini Program Experience Design Overview".
2. Specs Of Essential Pages
Menu Page
As the core page of a catering Mini Program, the menu page must adapt to interaction modes in different languages. The information on this page is organized in a flat structure and displayed in a waterfall-mode layout. This is convenient for users to place orders. After the user swipes up to the menu from the specials column, all categories are arranged as horizontal tabs at the top of the screen. The user can swipe left or right to quickly locate a category. We recommend that you adopt a menu hierarchy with at most three levels.
Item Details Page
This page contains all information about an item, including relevant variations. We recommend that you display this page on full screen and clarify different information levels. If this item has complex variations, we recommend that you add a "Reset" button. Meanwhile, you need to make sure that the price displayed in the "Add to Cart" area varies accordingly with the number of selected items and variations.
Pick-up Time Page
This page provides the information of the restaurant where the user will pick up an order, including the restaurant name, business time, and address. An additional map is also important to help the user locate the restaurant. You need to minimize the number of steps required for selecting a pick-up time and return instant feedback to the user. After the user changes the scheduled pick-up time, a time selector appears automatically under the pickup time.
Order Confirmation Page
You can determine whether to add images for the items on the order confirmation page. You can also determine whether to allow users to edit the number of an item according to the actual needs. Make sure that every module has the consistent content structure that is clear for users to easily and quickly recognize the information.
Other Pages & Behaviors
Suggestions For “How To Get A Coupon Or Reward”
3. User Flows Of Essential Scenarios
Catering Type 1: Fast Food & Beverage
In-store Dining Orders
Sample scenario: A user enters a drink shop casually, scans the QR code of the shop through the Mini Program, and then orders two beverages.
Self Pick-Up
Sample scenario: A user places an online order for two beverages at home and will pick up the beverages in store in 15 minutes.
Delivery Order
Sample scenario: A user wants to order a fast food delivery to his/her hotel room.
Catering Type 2: Full Meal
In international scenarios, there are few orders for self-pickup or delivery of full meals. Therefore, this document only focuses on scenarios of dine-in orders.
Dine-in Order
Sample scenario: A user and his/her friends enter a Sichuan cuisine restaurant on Friday night to dine together, where the user has booked a table in advance.
Other Features & Behaviors
These experience flows are applicable to both catering type one and two.
Choose & Use a Coupon
Sample scenario: A user chooses to use a coupon on the order confirmation page before payment.
View The Details Of A History Order
Sample scenario: A user wants to view the item prices in a history order.
View And Get Rewards
Sample scenario: A user wants to redeem his/her reward points and check the record of points and redemptions.
Note: This flow sample only illustrates a method for scenarios in which points and coupons are offered as a reward mechanism. You can adopt your own reward mechanism.
User Account Center And Settings
Sample scenario: A user wants to view the account information or change the account settings in the Mini Program.
Note: We recommend that the Mini Program provides the rewards, order, and address management features on the "My/Account Center/Settings" page. A unified entry is usually needed for viewing and editing related information and settings of the Mini Program.
4. Resource Download
📎[Template] Mini Program Design Guidelines for Catering Industry.sketch