Design of Wechat mini program
Wechat mini program has been online since Jan.9th, 2017, which is a html program for the corporation to build up a light version of its app or web. Users don’t have to download any application except Wechat to use these mini programs, ranging from entertainment, finance, traveling, gaming, catering, to news applications, etc.
Recently I have the chance to design a Wechat mini program relating to diabetes track and diagnosis. This article is mainly written to share my experience and findings of designing a Wechat mini program, especially the differences between its and apps.
A light version
Compared to an app, the mini Wechat tends to be more light. It is said that the program is produced to satisfy users’ specific needs, like health mini for health tracking, takeaway mini for food ordering, and knowledge mini for knowledge sharing, etc (as image 1).
One page, one point
Moreover, one page should include a simple action, avoid multiple options or actions on a page. For instance, it is better to exclude popup ads banners in an article or a list of view to avoid interruption. Referring to action button, one primary with a secondary one is the best, instead of offering multiple actions.
Simplified navigation
If you ever use or design a mini program, you will find that the navigation is quite simple with usually 2 to 4 tabs (as image 1 & 2). The program is designed to satisfy users specific needs, therefore the structure should be as simple as possible.
Title bar
Different from an app, the mini program has a fixed title bar on the right side, including menus and home. The menu bar can be voice record or position location instead. You can easily go back to Wechat when touching on the home bar on each page or add mini program to your desktop without downloading another app.
Consistent design
Though it is a simplified program, the UI design is suggested to be consistent with the original app/website, to deliver a consistent experience for the user. From typography, color, spacing, size to icons, there are a series of instructions: Mini platform design guideline.
Design project — Diabetes mini
To demonstrate the concept and design of a Mini Wechat, I would like to showcase one of my recent project, Diabetes mini, which is a program to help track patients’ blood sugar and give diet recommendations.
UX Design
Based on our user research, it is suggested that diabetes patients care more about their daily diets since their blood sugar would be higher or lower based on what they eat everyday. The index of blood sugar is set to help patients control their meal and track the diabetes status (refer to image 5).
In order to provide more personalized recipes, we also guide users to select their diet preferences on home page. The program is designed for users to easily find a suggested meal or record daily blood sugar after login. Patients can also find the record history from home page with statistical charts.
In conclusion, the program contains 2 main features, recipe and record, to help a diabetes patient to keep record and stay healthy. The other complicated features and information actually are not necessary to be included, a key principle to keep in mind while designing a mini program.
Thanks for your reading :) ~
If you like my articles, Please applause or give some suggestions.
