Design Guidelines For Catering Industry

下载 (3).png

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.

1.png

2.png

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.

3.png

4.png
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.

菜单页.png

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.

关键页面说明2.png

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.

取餐时间页.png

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.

订单详情页.png

Other Pages & Behaviors

Suggestions For “How To Get A Coupon Or Reward”

获得优惠券和奖励的方式1.png

获得优惠券和奖励的方式2.png

获得优惠券和奖励的方式3.png

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.

堂吃-点单流程1.png

堂吃-点单流程2.png

堂吃-点单流程3.png

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.

自助取餐.png

自助取餐2.png

自助取餐3.png

Delivery Order

Sample scenario: A user wants to order a fast food delivery to his/her hotel room.

外送订单.png

外送订单2.png

外送订单3.png

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.

正餐-用户体验流程 :堂吃点餐.png

正餐-用户体验流程 :堂吃点餐2.png

正餐-用户体验流程 :堂吃点餐3.png

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.
查看并领取奖励.png

查看并领取奖励 copy.png

View The Details Of A History Order

Sample scenario: A user wants to view the item prices in a history order.

查看并领取奖励 copy 2.png

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.

查看并领取奖励 copy 3.png

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.

设置.png

设置 copy.png

设置 copy 3.png

设置 copy 2.png

4. Resource Download

📎[Template] Mini Program Design Guidelines for Catering Industry.sketch