```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FvZwXZHcLJHaUp7BeioPtwoaVKmD2%2FFtYrPzMTWZKuR8JNAGEl%2F889edb2c-c98a-4ea0-981d-b3fedcbd9538.png?alt=media&token=c2794264-dc98-4204-b852-81ba4e86fbd7","id":"889edb2c-c98a-4ea0-981d-b3fedcbd9538","width":2560,"height":1440,"filename":"cover.png","type":"image/png","caption":"","border":false}]}
```

I participated in the projects with [Envision](http://www.envision-group.com/net-zero-tech-partner), [BLOC](https://www.blocproductions.com/), [Work Unit](https://www.workunit-agency.com/), etc. I contributed to redesigning the purchasing experience of Chinese users in a European industrial parts online store, iterated features for a nursing management system in Agile, and redesigned the official sites of BLOC, Work Unit and Envision(some parts) visually.

Since most of the projects are under NDA, I’ll write about the internal project first. Project Copyright: MING Labs.

## **WeChat Official Account Article Design System**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FvZwXZHcLJHaUp7BeioPtwoaVKmD2%2FFtYrPzMTWZKuR8JNAGEl%2F191b754a-f540-413d-a660-57ed0c82cdf4.png?alt=media&token=5a2302c4-c2c1-4439-b86d-248a87a8991f","id":"191b754a-f540-413d-a660-57ed0c82cdf4","width":3840,"height":2400,"filename":"wechat.png","type":"image/png","caption":"","border":false}]}
```

### **Background**

One day, I got a mission to redesign the article template of our WeChat official account. WeChat is the most popular social networking software in China, so the articles on the WeChat official accounts (a media platform built inside WeChat) can get a pretty good reading and sharing rate.

### **Goal**

Since there are people from various industries on WeChat, posting articles on it could help us achieve the following goals at the same time:

* To attract designer talents

* To approach potential clients

* To Expand influence in the industry

In addition to continuing to focus on the goals above, a more specific redesign goal is to fit the design language of our new website and make it more "visual" and less text-only.

### **Research**

I researched the official accounts of some well-known brands that are good at marketing, such as Saturnbird, Wallpaper\*, and so on, to study how their articles are presented.

### **Solution**

After researching, I presented a few design points to my supervisor Nathan and got some feedback. After that, I started the design based on the following key points.

> **Use an eye-catching poster at the beginning of the post to attract readers' interest.**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FvZwXZHcLJHaUp7BeioPtwoaVKmD2%2FFtYrPzMTWZKuR8JNAGEl%2F14dc4ca4-5cff-4ef2-9da8-f3c4f55a80b3.mp4?alt=media&token=66cf926a-a46e-466e-a0a3-4fc7dbca0140","id":"14dc4ca4-5cff-4ef2-9da8-f3c4f55a80b3","width":1440,"height":1440,"filename":"opening-compressed.mp4","type":"video/mp4","caption":"","border":false}]}
```

The opening poster shows the article topic in a more visual way (big headline & image), which both engages the reader's interest and is also able to convey our tone. In addition, our cute mascot, the Lucky Cat, is also “in business” accompanied by a display of the estimated reading time module.

> **Divide the post into sections to create a rhythmic reading pace.**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FvZwXZHcLJHaUp7BeioPtwoaVKmD2%2FFtYrPzMTWZKuR8JNAGEl%2F12744052-8e18-4e8a-b17a-d07a70e9c801.mp4?alt=media&token=874e688e-b127-4161-a747-e9d9d06246e2","id":"12744052-8e18-4e8a-b17a-d07a70e9c801","width":1440,"height":1440,"filename":"section-compressed.mp4","type":"video/mp4","caption":"","border":false}]}
```

The whole article uses white and black as the background in turn to distinct different parts, while larger headings and more white space are used at the beginning and end of each part to create a sense of rhythm and breath. Besides, the “MING Labs” carousel, which is consistent with the design language of our website, was created to add some dynamics to the static content.

> **Design a special pattern to carry meaningful words.**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FvZwXZHcLJHaUp7BeioPtwoaVKmD2%2FFtYrPzMTWZKuR8JNAGEl%2Fab9b4c92-00cb-481b-9122-0dc33321da56.png?alt=media&token=81c4a938-3094-409b-8a0c-00f55703815d","id":"ab9b4c92-00cb-481b-9122-0dc33321da56","width":1584,"height":990,"filename":"quotes.png","type":"image/png","caption":"","border":false}]}
```

The meaning of the WeChat official account is to spread. Our articles often contain quotes or original words that have valuable meaning. Our articles often contain valuable quotations or original words. Wrapping it in an elegant card pattern could help to increase users' willingness to save it and spread it.

### **In the end**

That’s it! Here is an overall comparison with the old template, followed by the new components, both English and Chinese versions.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FvZwXZHcLJHaUp7BeioPtwoaVKmD2%2FFtYrPzMTWZKuR8JNAGEl%2F8bfc7dcc-dedd-42f1-84b1-d5d5c5d351e8.png?alt=media&token=3353585f-2b80-4259-9ffa-f776677d6119","id":"8bfc7dcc-dedd-42f1-84b1-d5d5c5d351e8","width":1440,"height":900,"filename":"oldvsnew.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FvZwXZHcLJHaUp7BeioPtwoaVKmD2%2FFtYrPzMTWZKuR8JNAGEl%2Fc33a44c2-8a9a-48b7-a909-3a11e314a19a.png?alt=media&token=4326a76a-1685-4717-8282-80b10559bda5","id":"c33a44c2-8a9a-48b7-a909-3a11e314a19a","width":1440,"height":900,"filename":"components.png","type":"image/png","caption":"","border":false}]}
```

By the way, the way to publish an article to our WeChat official account will be as usual:

Our marketing colleague use component instance to organize the text and images in Figma → Export as png files → Upload to the post editor of the WeChat official accounts platform → Publish it!

Also thanks to the OCR text recognition feature inside WeChat, people now can copy the text directly from the image if they need. So this way to publish posts could keep the article good-looking and uniform easily and save much time for our editor.

Internship at MING Labs

Designer

Selected on Hayo AI Tools

Playful Layouts

Hover Glow Figma

New feature development using Unity & Release on App Store

Zi Yuan Qi Shuo – AR Chinese Character Education App

an iOS app about music elements and AR (WIP)

Sonar

yiyang.ch

yiyang's lab

iKelvin – Medical Warming System

Pomo.rhythm

Guide high school students how to design a campus souvenir and prototype AR experiences with Unity

Yiyang Chen

Side Projects

Work Experience

Speaking

Contact

Features

Teams