Mini Program Design Guidelines for Food and Beverage Industry

Overview

This document introduces the solution guidelines for mini programs in the food and beverage industry. These guidelines aim to create simple, efficient, and consistent experience to use the mini program.

The design guidelines consist of the following three aspects:

• Mini program design principles for the food and beverage industry.
• Main page UED guidelines for mini programs in the food and beverage industry.
• User experience design recommendations for common ordering scenarios of different food types.

Design principles

Clarity

Clarify food types and focus on user behaviors in the three main ordering scenarios, which are dine-in, pickup and delivery, as well as other behaviors like viewing order history, getting rewards, and so on.

Simplicity and consistency

To avoid confusions between the mini program and general app, we recommend you to simplify the navigation. For example, avoid using bottom navigation bars. Keep consistent in components and patterns, such as feedback and authorization.

Besides the above-mentioned principles, pay attention to the consistency and continuity between different pages, which helps users save learning cost and reduce uncomfortable experience. For example, use the consistent controls and interaction designs. For more information about the user experience design guidelines, see Mini Program Design Guidelines.

Main page designs

Menu

For mini programs in the food and beverage industry, the Menu page is the core and must be localized with  multiple languages. To help users order easily, use the flat design and Masonary layout. When the user swipes down to the detailed menu, all the food categories must be placed as a slidable top bar, so that users can select the specific category quickly. The category hierarchy is recommended to be three levels at most.

Item details

The Item Details page includes all the information about the item. The user can adjust the quantity and select add-ons as required. It's recommended that the page is presented in full screen and different levels of the information hierarchy are reflected. If the customized add-ons exist for the item, it's recommended to add the Default button. The total amount in the Add to Cart button must be updated accordingly if the item quantity and selected add-ons are changed.

Pickup time

For the pickup scenario, the Pickup Time page must include the store name, opening hours, and address information. At the same time, use the map to help users locate the right position of the store. Reduce steps to select the pickup time and give feedbacks timely when errors occur. The default pickup time is the current system time. If the user sets the time manually, present the time selector automatically.

Order confirmation

You can determine whether to attach pictures for items and whether the quantity of each item can be edited according to your requirements.

Note:

The information structure of each item must be consistent so that the user can confirm the order details quickly.

Methods of getting rewards

The following pages take the coupon as an example. The user earns points on everyday orders, then redeems points for coupons.

Main user experience

Food type: fast food and drink

Dine-in scenario

The user walks into a boba tea store and scans the mini program code to order a drink.

Pickup scenario

The user orders a cup of coffee in the mini program online and picks up the coffee 30 mins later at a shopping mall.

Delivery scenario

The user orders fast food in the mini program online and gets the food delivered to his/her door.

Food type: meal and hotpot

In the cross-border scenario, users usually dines in restaurants, therefore this section only introduces the design guidelines of the dine-in scenario.

Dine-in scenario

The user comes to a steakhouse to enjoy the Friday night with some friends.

Other features and user experience

Select and use a coupon

The user checks the bill and wants to use the coupon.

Check the history order details

The user wants to check the details of an order.

Explore and get rewards

The user wants to explore and get a reward or discount before placing an order.

Note:

The following user experience illustrates the rewards, points record and coupon details. You can customize your own rewards/membership program.

Settings in the Me area

The user wants to view and set personal information in the mini program.

Note:

It's recommended that the user can manage rewards, orders, and addresses in the Me area.