UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Follow publication

WeChat Mini Program Design: 15 Best Practices to Create an Awesome User Experience

Tencent is on a collision course with Apple and Alphabet in setting the trend for the post-app age with its aggressive push into mini mobile applications. Despite a slow start, WeChat is now home to over one million Mini Programs, nearly doubling up from 580,000 in January. That’s half of the entire App store, which was launched 10 years ago!

Mini Programs are transforming the digital landscape in how brands are marketing in China.

Except for video, MPs have already penetrated most categories.

But like everything WeChat, competition is already fierce, with 95% of e-commerce brands already having their own Mini Program.

Offering a killer Mini Program user experience is key to successful engagement and retention rates: That’s why we’re providing you here with a list of 15 actionable tactics to make sure your MP is a win. They’re based on research and our own experience of spending the past year designing and building them at 31Ten.

1. Design your MP interface for simple tasks and instant understanding

Mini Programs are meant for “use and forget”. For the majority of them, you don’t get the opportunity for users to learn all the features from repeat usage, especially within an O2O context. Have occasional users in mind when you design your MP. Convenience and efficiency being leading motivating factors, you need to keep your interface as clutter free as possible and focused on the task at hand. The first few seconds of entering a Mini Program are crucial to understand its functionalities and how to interact with it, and each screen should have a clear focus and flow outline.

Left: Fapiao Ma发票吗, an invoice data management MP uses a minimalistic interface. Right: Walmart’s self-checkout MP is meant for ease-of-use and puts the emphasis on product scanning.

As a general rule, try to stay away from anything that requires users to remember to go back to the Mini Program to complete tasks: they most likely won’t.

2. Consider breaking down your Mini Program footprint over functionality or audience-focused MPs

In practice, 50% of the top WeChat Mini-programs also have a corresponding Native App. However, research shows replicating a native app is not a good idea if it means trimming functions due to the size constraints of the MP. A best practice is to offer a set of the core features of your App in focused Mini Programs instead.

Qunar hotel booking page: the Mini Program is a lot more focused on the booking itself, with entry points to the other functions (plane tickets, member area etc.) removed.

Consider also breaking down your core functions into multiple dedicated Mini Programs: they can be favorited individually, and serve different target audiences and contexts of use (O2O, gifting vs. direct purchases, etc.).

Compared to its “monolithic” App, McDonald’s has broken down its Mini Program presence into a central MP hub and a collection of focused MPs each dedicated to a specific use case or customer segment.

3. Have an App? Consider using a Mini Program as a teaser to onboard users to the App

Apps and Mini Programs do not have necessarily to be opposed in China. While MPs are much lower friction than Apps, especially for infrequent use, they can also nicely complement an App. You can consider offering your core App features as a Mini Program and leave high-value tasks in the App. Take for example Chinese courier leader Shunfeng顺丰: their MP mirrors the App regarding functionalities, except for the two value-added tasks: asking for a Fapiao发票 and order international parcels. This ensures they capture their highest value segment, businesses, into the App.

Another example is popular photo filter App Meitu美图: they use their Mini Program as a shortcut and a teaser by offering the 3 most popular filters, and inviting the user to download the app for more:

The “More Filters” icon in the Meitu Mini Program invites users to search for the App on their preferred App store.

Our users wanted an easy registration interface. By launching a Mini Program, not only the DAU traffic has increased exponentially, but the organic downloads of the App have gone up as well! ”

Andrea Sperenza, CEO of YEYU App

4. Make navigation self-evident

Although more than 600 million WeChat users have already used Mini Programs before, the average user may not be entirely familiar with their common core features, such as the top bar’s back button for navigation. Whenever offering a navigation depth superior to two levels, consider leveraging the MP bottom menu to enable horizontal navigation between your sections. You may display it only on the deepest navigation levels: users should intuitively feel where they are in the service workflow. And the navigation menu has the added benefit of not diverting attention from using the back button on Android phones, which entirely closes the Mini Program.

Wagas (restaurant & café chain) loyalty MP has a navigation depth of 3 or more for certain sections (my wallet), which requires 3 steps to get to the back button to return to the home screen, and then switch sections. They could make navigation a whole lot easier with a bottom menu.

And always keep in mind the sharing scenario: landing on a Mini Program from opening a shared link does not always show a back button on the top bar. If you do not provide any navigation this can lead to frustrated users.

Left: JD.com product page opened from a homepage search. Right: The same page, opened from a share link within a chat: no back button.

5. Keep all the screen variations in mind

Always design a responsive MP with all the possible phone layouts in mind, especially Android devices. Start testing on the smallest phone sizes to make sure there aren’t any content overflows. Many users in China still have iPhone 5’s or small-screen Android devices.

How the RATP (Paris public transportation) MP looks like on a recent 1080p Android phone (left) vs. on an iPhone 5 (right). Note how the bottom tiles of the home screen are cropped and have their labels hidden on the iPhone.

6. Make sure your key elements can be loaded offline

It should go without saying, but if you are offering a Mini Program geared towards O2O interactions, make sure the core elements are not depending on a network after the first load. The Mini Program is then cached on the user’s phone and will open instantly on next use: having to depend on network quality is then potentially a lost opportunity such as speeding up the process at check-out.

Wagas’s member QR code is dynamically loaded online and won’t show up if the network is down (right), despite the Mini Program being cached.

7. Leverage faceted sharing

One of the Mini Programs’ distinct characteristics is their deep embedding within the WeChat ecosystem, with more than 60 different entry points (and counting!). Of these entry points, sharing via chat is #1, accounting for 35% of traffic to MPs. It is crucial to properly leverage the sharing feature: a shared “card” can be unique to a conversation, as both the title and main image can be customized. Below is such an example:

Shangzuo Go Mini Program offers a social referral program where they leverage chat sharing personalization.

8. Find good incentives to share the Mini Program QR code on Moments

One of the biggest barriers to going viral for MPs is the fact that we cannot share links on Moments. A standard way of getting around this limitation is to generate a QR code image, save it on the users’ phone with a consent prompt, and ask them to share the image. This is clunky and causes too much friction. You need to come up with an incentive high enough to get your users to go through the hassle of sharing the generated image. Referral deals and social “battle” comparisons work best.

The “Chinese Visa” Mini Program offers shareable quiz results to compare amongst your expat friends. They have the option to include the score directly into the post. Joseph probably cheated on the questions, he’s certainly not category A

9. Leverage helpers

Again, while super popular, Mini Program users may still not be fully aware of the extent of the default features of an MP, especially when it comes to navigation. Consider pop-up notifications to encourage the user to add it to their favorites (to be later accessed via the top shortcut bar).

3 different MPs displaying a call to action to add to favorites via the top menu & explaining the benefits of having a direct entry shortcut.

10. Design for omni (WeChat) channel

Mini Programs can only link to an official account via banners shown on O2O entry points (scanning QR codes, payments) at the time of writing, which may be a lost opportunity of converting traffic into followers. If you provide a distinct value through your Official Account — e.g., sending transaction status notifications — you can invite your Mini Program users to follow the OA via a pop-up notification as well.

The Yo!Luck MP offers a call to action to search for the Official Account via its ID. The overlay copies the ID to a clipboard upon validation, making it immediately ready to paste into the WeChat search bar.

An even better experience is to dynamically detect the follow status of your user, and provide them with a CTA. Qunar去哪儿 displays an alert in the user profile section if he/she is not following their account:

And again, make sure the benefit for the user to follow your account is as clear as possible. What extra service or functionalities can they access? Typical value proposals are real-time notifications of transactional statuses, high-value tasks such as issuing a Fapiao发票, exclusive deals, etc.

Left: the JD Mini Program invites you to follow their OA to be notified whenever they restock a product — Right: transactional reminder message from the JD OA to finish purchase (cart abandonment retargeting). Source: NN Group

11. Only show a login wall when you really need it

It’s far too common to see Mini Programs showing users a login prompt that prevents them from doing anything with the MP before they give their consent. Instead, use the wx.login API to register the user in your backend quietly, and only show a login page for features where you absolutely need their user information (e.g., my account/profile section).

I get it McDonald’s, you badly want me in your loyalty program. But do I really need to login before I can do anything? C’mon!

12. Lower bounce rates by adding preloaders and skeleton screens

Because of the MP’s size and caching limits, most of them are dynamically loading content from the network. Connection slow? It can take a while for the MP to show content on the screen, no matter how well-designed your user interface may be. Making the user stare at an empty screen or default “downloading” 加载中 prompt can increase bounce rates. Instead, use loading bars to indicate how much time the user should expect to wait or a “skeleton screen” that loads instantly, giving the illusion of loading completion. Pre-load resources in the background to avoid loading times, especially on content browsing and in Mini Program sections with predictable user flow.

Toyota’s campaign Mini Program uses a splash screen with a percentage loading indicator to give a waiting time estimate.
Nearly every section of the Dianping 大众点评’s Mini Program uses progress indicators or screen skeletons

13. Take advantage of Mini Program APIs to minimize input complexity

You can have your Mini Program autofill users’ information in against their consent (address, telephone number, Fapiao information) by tapping into the WeChat API. This can save significant time, and avoid error-prone data entry.

Automatic address fetching from geolocation vs. having to type it in.
Retrieving a phone number and address from a WeChat user’s profile with a consent prompt.

14. Have a contingency plan for errors

Mini Programs are impressive compared to Apps because they work virtually on every phone that has WeChat installed. But in reality, they still have to deal with a wide array of phones and different WeChat versions. There are also users who are unwilling to update their WeChat or OS. You should make sure your users aren’t getting the Mini Program WSOD (white screen of death) and make sure to catch errors. You can select in the Mini Program backend which WeChat and OS versions your Mini Program will run on, and show an upgrade prompt for older versions.

15. Iterate with your design

Designing a highly engaging digital interface is not an exact science, and Mini Programs are no exception. They have an enormous edge over typical Apps by being able to auto-update and create a perfect sandbox for testing out multiple variations with user experience or interface design. Or even for new features to be later integrated into your App.

Any MP project should plan for continuous improvement!

Zui Qiang Danyidan, one of the most popular mini-games, went through several game mechanics and UI revamps (on the right is the current version at the time of writing)

You should also be leveraging third-party Mini Program analytics to identify bounce rates and CRO issues.

Need help with your WeChat Mini Program performance? Get in touch!

Mini Program not performing as per your KPIs? Struggling with deciding between an H5 or a Mini Program route? Have our team of WeChat experts audit your WeChat project.

Just drop us a line to access our case studies: clement@31ten.network

Super warm thanks to George Borelli, Grace Yang and David ‘DC’ Collier for their contributions and input for this article.

Authors

Vladimir Garnele

Clement Ledormeur

Editor: Joseph Leveque

No responses yet

Write a response