Design of Wechat Mini Program

Published in: Medium@dollyshlin

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).

Image 1: Light design (Tencent/JD/ㄧ条)

WechatIMG1554  WechatIMG1556  WechatIMG1555

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.

Image 2: Bus mini (Find route) 

WechatIMG1560  WechatIMG1561  WechatIMG1562

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.

Image 3: Titlebar guideline

螢幕快照 2018-07-29 下午2.47.54

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.

Image 4:Mini platform design guideline

螢幕快照 2018-07-29 下午2.59.26

 


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.

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 (refer to image 5).

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 functions and information actually are not necessary to be included in this program, a principle to keep in mind while designing a mini program.

Image 5: Wireframe of Diabetes mini

ux.png

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s