Service Center

image.png

Usage

The Service Center of a Mini Program displays all Mini Program pages in the native app. From the Service Center, users can start their journey of Mini Programs. In the Service Center, users can search for Mini Programs, view recently used Mini Programs, and add frequently used Mini Programs to the favorites.

Anatomy

The wallet native app can display Mini Programs that have already been embedded in the app in the Service Center with other service functions. This allows users who access this page for the first time to get started quickly, understand the product form of Mini Programs, and learn how to use them. The homepage of Mini Programs consists of three modules: "Recently Used", "Favorite Services", and "Service Center".

The "Recently Used" module consists of Mini Programs visited by users recently. This module is convenient for users to quickly return to the Mini Programs they just used after performing operations in the wallet native app. This module does not appear if a user has not used any Mini Programs.

The "Favorite Services" module displays Mini Programs added by users using the Favorite function in the Mini Program menu. The function of adding frequently used Mini Programs to the favorites can improve the degree of user engagement.

The "Service Center" module gathers all Mini Programs in the wallet native app.

Behavior

Considering that most of the wallet native app integrates many functions, you can first design the Service Center of Mini Programs as a standard new function. And you can use the existing style and layout in the wallet app.
image.png

Recently Used

The Recently Used module appears in the Service Center once the user has opened any Mini Program. This module displays all recently-used Mini Programs in order of use. This section can be set to display two Mini Programs in a row. At most three or five Mini-Programs can be displayed in two or three rows with a position reserved for a "More" button. The user can tap the "More" button to view all recently-used Mini Programs. In addition, a Favorite button is available. The user can tap it to add a Mini Program as a favorite, then it will appear in Favorite Services section.
image.png


After the user hold on a Mini Program item list, a bottom action sheet will appear, the user can choose to remove this Mini Program from the Recently Used module.
image.png

Favorite Services

In Favorite Services, the user can view all favorite Mini Programs that are added through different approaches. At the first access to the Service Center of Mini Programs, the user can tap "Add Services" to view all Mini Programs in the native app and add favorite Mini Programs as needed.
image.png


In addition to adding a favorite Mini Program in the Recently Used module, the user can also use the "Add to Favorite" feature on the menu while using the Mini Program to add it as a favorite. A typical process will be like: the user starts to use the Mini Program, then uses the Mini Program frequently, and finally adds the Mini Program as a favorite.
image


The Favorite Services module contains all favorite Mini Programs that are proactively added by the user. This module can be set to display up to nine Mini Programs in five rows with a position reserved for a More button. The user can tap the More button to view all favorite Mini Programs. The user can rearrange the favorite Mini Programs on the fully-displayed Favorite Services page. After the rearrangement, the sort order of the favorite Mini Programs on the home screen of the Service Center changes accordingly. If a favorite Mini Program is not displayed on the home screen, the user can change the order of this Mini Program to move the Mini Program to the home screen.
image.png
You can set an upper limit on the number of favorite Mini Programs. Once the number of favorite Mini Programs reaches the limit, an alert will appear when the user attempts to add more favorite Mini Programs.

Service Center

In a less mature Mini Program ecosystem that contains few Mini Programs, you can set the Service Center for the wallet native app so that users can easily view all Mini Programs. This setting also limits the number of Mini Programs displayed on the home screen of the Service Center. The user can tap the More button to view all Mini Programs, and add a favorite Mini Program or remove a favorite Mini Program.
image.png

Mini Program Search

The wallet native app allows users to search for a specific Mini Program on the home screen of the Service Center. The native app supports searching by a keyword and displays a real-time search result. The search result contains a list of Mini Programs with the recently-used ones at the top. For a recently-used Mini Program with its icon and name displayed in the list, information such as "Recently used" can also be presented under the name. The user can tap the icon to open the Mini Program directly.

image.png

Strategy for Entry Point to the Service Center

The Service Center provides one location for all Mini Program services in the native app. The setting policy of the entry point to the Service Center is equally important as what Mini Programs can offer in the native app. If the operator of the native app wants to develop Mini Program businesses, then the entry point to the Service Center can be highlighted. For example, the operator can make the visual design more conspicuous or let the Service Center occupy a large portion of the screen. If Mini Programs and other functions in the native app are of equal importance, the existing layout in the app can be used as the entry point to the Service Center.

The following section describes two major super apps in China, WeChat and Alipay. These two super apps all used their existing layout features to set up the entry point to the Service Center of Mini Programs.

Case | Entry point to the Service Center of Alipay Mini Programs

Alipay is a super wallet app that incorporates many functions and features. The entry point to the Service Center of Mini Programs in Alipay is also delicately integrated into the existing functional layout.

image.png
For many years, the top of the homepage of Alipay has been using the nine-rectangle grid layout to display many common functions. As a new type of function, after the Mini Programs are embedded in Alipay, they are designed as the nice-rectangle grid layout in a form of an icon and a name. The importance of Mini Programs is neither highlighted nor weakened. This design is related to the importance of Mini Program businesses of Alipay.
If the wallet native app does not have so many functions and the operator wants to explore the future potentials of Mini Program businesses, the entry point to the Service Center of Mini Programs can be more prominent and conspicuous.

Case | Entry point to the Service Center of WeChat Mini Programs

There are two ways to access the Service Center of Mini Programs in WeChat. By tapping the third tab on the bottom "Discover", you can see the entry point to the Service Center. Like other functions such as Moments, Scan, and Search, the Service Center is added in such a way that would neither highlight nor weaken its importance compared to other functions. WeChat is a super social application. Its primary function is instant messaging. The homepage is dedicated to the primary function of WeChat.

image.png
The other way to access the Service Center of Mini Programs in WeChat is to swipe down from the top (see the following figure). This kind of action is hidden, but suitable for regular Mini Program users. They can easily and quickly access a list of recently used Mini Programs after opening WeChat.

image.png

Resource Download

📎[Template] Mini Service POC.sketch