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.
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.
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.
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.).
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:
“ 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.
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.
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.
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.
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:
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.
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).
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.
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.
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).
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.
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.
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!
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
Editor: Joseph Leveque
