Mini Program Experience Design Overview

What is Mini Program

image.png
Mini Programs provide a new type of open capability. They are lightweight and offer a smooth user experience. Developers can make adaptations for iOS and Android using a set of designs, avoiding a lot of complicated work on adaptation. Currently there are about 3,000 types of Android phones in the market, so making adaptations for Android is much harder, compared with iOS. Thanks to Mini Programs, Android users can get a variety of services without installing many separate apps on their phones. Unlike a native app, a Mini Program does not take up extra storage space on the phone. And users can start using a Mini Program by scanning a QR code or searching for nearby Mini Programs. In addition, Mini Programs allow merchants to quickly launch high-quality services, and quickly grow their business through mobile applications. Mini Programs can be easily obtained and make user operations more flexible and faster, leading to much better user experience and a surge in their usage.

Advantages of the Mini Program Tech

image.png

UI Specs and Adaptability of Mini Program Components

A Mini Program is a WebView running in a super app, not the underlying operating system. This allows a Mini Program to run across platforms, including Android, iOS, and other operating systems. We provide an efficient and secure application container called App Container, which provides developers with infrastructure APIs. For more details, see Component reference and API reference documents. Developers can easily access albums, contacts, devices, and storage or network status. The container also integrates rich UI components such as scroll views, progress bars, sliders, switches, selectors, navigators, and canvas. This allows developers to implement their ideas faster, and easily customize title bars, loading views, error views, and other UI components to create vivid and flexible UIs and offer better user experience.

Distribution of components and their hierarchical relationship with pages
image.png

UX Design of Mini Program

Around the user journey of using a Mini Program, each step and each touchpoint at each stage require accurate design of the related functions to ensure good user experience. From discovering the Mini Program, using the Mini Program, re-accessing the Mini Program to adding to the favorites, subscribing to, and sharing the Mini Program, from acquiring users, boosting activity to retaining users, the design of services runs through each of them.
image.png
To help developers and designers create high-quality Mini Programs, reduce UX maintenance costs, create a closed-loop service experience and provide all-in-one guidance, the following design principles and design guidelines will provide you with effective references and samples:

General Design Guidelines For Mini Program

The universal design guidelines were created based on the experience in designing successful Mini Programs for the Chinese market. These guidelines cover these four aspects: "Consistency", "Simplicity", "Clarity" and "Feedback".

Card备份 9.png Card备份 13.png

Card备份 11.png Card备份 12.png

Functional Design Guidelines for Mini Programs

The guidelines for designing functions cover several basic functional elements that make up a Mini Program, and include design recommendations for the Service Center. The guidelines include the rules for showing Mini Program icons, and requesting permissions to access user information and device functions within a Mini Program. The guidelines also cover the design of navigation bars, main menu and operation menus of Mini Programs, and the design of copywriting for Mini Programs.

Card备份 14.png Card备份 15.png

Card备份 16.png Card备份 20.png

Card备份 18.png Card备份 17.png

Card备份 19.png

Various Industries Design Guidelines for Mini Program

image.png

Mini Programs run within a super app, which is also a native app. Due to their light and fast nature, a product can be split into multiple functions. And each function can be implemented by a Mini Program to form a closed loop of product services. For instance, a bank can have a Mini Program for checking account balances and account information, one for buying bus tickets, one for hailing taxis and getting directions, one for ordering at restaurants and ordering takeouts, and more. There are different considerations for different sectors when you design Mini Programs. So, when you design Mini Programs, you need to research and analyze the related sectors to determine their characteristics, and then take both these characteristics and the design guidelines for Mini Programs into consideration.

Guidelines for designing catering Mini Programs

Guidelines for designing transportation and travel Mini Programs (Coming Soon...)