Advertisement
  1. Web Design
  2. UX/UI
  3. Design Theory

WeChat Does Your Laundry: Designing for China’s Biggest Social Platform

Scroll to top
Read Time: 12 min

I have a hard time getting western designers to understand why I keep talking about WeChat (Chinese: Weixin 微信) in the context of web design. In the west, social media and web design are considered separate, albeit related, fields. But China is a different story. I might get dragged over hot coals for this, but I’m gonna say it anyway: 

“In today’s China, web design *is* WeChat design.”– me

Currently hailed as the most popular app in the country, WeChat’s total user base (including international users) hit 500 million in 2015. But despite those numbers, I can’t tell you how many times I’ve listened to western design teams take one look at WeChat and dismiss it.

“Meh, it’s a messaging app with a few extra features.”

“No,” I holler, shaking them with entirely appropriate violence. “WeChat isn’t a messenger, it’s a lifestyle with a chat function. It books you train tickets! It picks up your dry cleaning! It is a mobile internet inside the mobile internet!”

And it’s so incredibly ubiquitous that China’s most talented web designers and app developers are focusing their innovation on designing experiences tailored specifically for the platform. If you’re creating a digital product for China, not only is it mission critical that you understand what your competitors are doing on WeChat, but what the possibilities are in terms of leveraging it to provide superior experiences for your market.  

Feature Flipthrough

Fair enough, ye unbelievers: I will concede that at first glance, WeChat looks like little more than an SMS platform. The four tabs in the UI hardly speak to any great depth of content:

Your chat screen, showing most recent conversations.
Contacts list.
"Discover" screen, or as Dan Grover puts it in his piece on Chinese mobile app UI trends, " The Discover menu houses a changing menagerie of fun, not-quite-essential extras that augment the core function of the app."
KUMITEEEEE! The "Moments" feed (located under "Discover"), a social sharing feature including pics, albums, links and other updates from all your WeChat contacts. 
And the user menu.

Shocking, I know. Look, I’m not gonna spend a ton of time on WeChat’s basic features. We’re all adults here. We’ve all seen a contact list before. But even in something as run-of-the-mill as WeChat’s digital rolodex, you might notice a few new things.

WeChat splits accounts into two main types: individual contacts (yo friends, yo mama) and official accounts (businesses, lifestyle, media, government). Interaction with individual contacts happens in predictable ways: you can chat via text or voice, initiate VoIP calls, view text, image or video updates (“Moments”),  and manage group chats.

But official accounts are where the real magic happens. When a company signs up for an official account, they get access to a publishing platform that allows them to build mini WeChat landing pages, sharable animated single-use sites (called Light Apps, or 轻应用), and HTML5-enabled micro-tools.

So while the contact and chat lists seem benign, they actually serve as entry points into some pretty robust functionality. 

A few more things you should know about WeChat:

WeChat Has its Own Browser

If you want to keep users contained in your experience and foster a good ol’ fashioned case of Stockholm Syndrome, you can’t have them bouncing out of your app every time they want to access online content. The WeChat team dealt with that via an onboard web browser built to fit the needs of the WeChat environment.

WeChat’s browser does not have a URL bar, and you can’t manually input web addresses into WeChat. WeChat browser windows do not paginate via tabs, you can’t have more than one open at the same time. The WeChat browser only opens if you click a link while already in WeChat, or if you use WeChat’s onboard QR Code scanner to access a web page.

That doesn’t mean WeChat won’t let you bounce out of the app if you need to–it’s just not a default behavior.

The WeChat browser menu includes an "Open with Browser" function, so a page can be manually transferred to the device browser. 

The QR Code Scanner in WeChat is a big Deal

Speaking of which: I know the Western world is all down on QR codes right now, but thanks largely to WeChat, China’s in love with them. Not only does WeChat feature its own onboard scanner, but each user account is issued a personal QR code that can be printed on business cards, disseminated on collateral, or scanned phone-to-phone. It’s pretty common to hear “Shall I scan you, or shall you scan me?” when new friends exchange WeChat contact info in person.

Scan me? Aren't ya gonna buy me a drink first? 

QR code scanning is vital for official accounts as well. Here’s a picture I snagged at the 2015 GMIC , Asia’s largest mobile conference, where dozens are gathered around a banner covered in QR Codes, each one representing a conference track that attendees can keep tabs on via WeChat as they circulate around the event. Choose and scan the tracks you’re interested in, get notifications and alerts on that track as the day progresses.

WeChat Has its Own Wallet

In 2014, WeChat joined many of China’s internet giants in releasing its own digital wallet, an ambitious bid to jump in the ring with China’s payment giant Alipay. The wallet can hold its own balance, can pull cash directly from credit cards and bank accounts, transfer money to other WeChat users, receive money via QR codes, and handle payments in third-party apps that have WeChat Wallet integration enabled.

The wallet also includes a set of subsidiary functions. You can top up your mobile phone credit, donate to a worthy cause and make investments. There’s a plane ticket booking feature and a digital lottery office.

From top left: Hail a cab, shop on Jing Dong, charge your QQ account, send a "red envelope" (financial gift), Eat / drink / play with Dianping, credit cards, donate to a cause, buy move tickets, "go dutch", plane and train tickets. 

Here’s the plane and train ticket buying window–just select your dates of departure and pay with WeChat Wallet, right in the app.

They even have a “go dutch” feature where you and all your friends can each settle part of a bill. 

Money Transfer via Chat

Because WeChat Wallet is entirely integrated in the platform, it facilitates one-click money transfer directly within the chat window.  Here’s me sending someone 200 yuan:

Phone-to-Desktop File Transfer

Man, this is one of things you didn’t realize your life was missing until you use it, and then you wonder how you ever lived without. WeChat also offers a paired-down desktop version of itself, designed to allow your phone and desktop to quickly trade media (it’s also useful if you have a big long message to type to a friend and you don’t want to do it on a micro-keyboard). It’s a unique dual-device use case, so let’s walk through this step by step:

First, you visit web.webchat.com in your desktop browser.

See that QR code on the landing page? Grab your phone, open WeChat, and use WeChat’s onboard QR scanner to scan the QR code. You’ll be logged in on both devices:

As soon as you log in, a special official account called “File Transfer” will automatically jump into view on your chat list, also on both devices:

Any messages you send to this contact via one device will appear on the other device. Need to get photos off your phone quickly, for example? Use your phone to send those pics to File Transfer via chat. They’ll appear in the chat window on your desktop WeChat window as well, where you can download and save.

This is a Complete Ecosystem, People

Friend lists. Communication platforms. Social sharing. Payment processing. Web browsing. You know that makes? That makes an entire self-contained universe. And enterprising companies have gotten pretty creative in terms of how they employ all that power. Let’s take a look, shall we?

Case Studies

In addition to its chat functions, the WeChat backend management platform permits official account holders to build WeChat landing pages with a maximum of three main menu items, each of those with a maximum of five sub-menu items. That’s 15 possible “pages” official account holders may add to their WeChat mini-site. Here’s the navigation on Dianping’s official account (red), with one sub-nav menu open (blue).

Those menu items can do simple things when clicked, like spit out a pre-defined message into the chat window, or they can do complex things, like link directly to a self-hosted page that will load in the WeChat browser.

For a simple example, take a look at Alina, official WeChat account of the vegetarian lifestyle blogger by the same name. The third menu item reads “About Us”. Clicking that menu item simply spits out a link to an article detailing Alina’s history with vegetarianism. Push button, get predefined content: very basic input-output.

Here’s a more interesting example: the design team at Tencent Games, collectively known as TGideas, keep their own inspirational WeChat account, a little log of their favorite work and a reference list of good mobile games. Click on the menu item indicated and you get TGideas’ curated list of HTML5 games, which you can then play right in the WeChat browser.

The first automated message I see after following the TG ideas account. Touching the third nav item opens a games list in the WeChat browser. 
A list of available games, displayed in the WeChat browser.
Game begins, directly in WeChat browser.

This game does not live in WeChat. It’s hosted elsewhere. But TGideas used their WeChat backend to link one of their mini-site menu items to that game list. And as long as the user never actively choses to leave WeChat and open a link in the mobile device’s browser, the experience stays app-side.

Here are some more innovative examples of WeChat applications.

Innovation

Travel Industry Customer Service: Ctrip

You’re a busy person. You don’t have time to sit around on hold. But when you have a problem, you would really, really like to interact with an actual human being. What if you could quickly signal a company for help, and they’d send you a mobile chat when they had an agent available?

Ctrip, one of China’s big four travel booking sites, does exactly that. Send a message to their official WeChat account, and a customer service rep will text you back as soon as someone’s free.  

Providing live-person customer service via WeChat SMS is becoming an expected norm, so I won’t pussyfoot around this one: if you’re planning to do any sort of business in China and you haven’t considered WeChat as a primary touchpoint, you don’t have a handle on your market. Better get busy.

Social fitness: WeChat Sport (微信运动)

Why download a pedometer app? Why download anything at all? Just follow the official WeChat Sport account, and every 24 hours, you’ll automatically receive a message detailing how many steps you walked that day. You can check your rankings at any time against all your WeChat contacts that are also following the Sport account.

The number on the left is your rank against your friends, the number on the right the number of steps you've taken today.

Get a Ride with WeChat: Dididache

Dididache is one of the major contenders in China’s Great Uber-off, the scramble to corner the private car and taxi-hailing market. 

“The application shows the real-time locations of taxis on a map using GPS technology and enables users to find a taxi though their smartphones. The users’ request will be sent to proximate cab drivers who will decide whether to accept the order or not.” – Crunchbase

There is a downloadable Dididache app, but–and this is critical if you’re entering the China market, folks–Dididache also offers bare-bones functions via its official WeChat account, and you can catch a cab without ever leaving their WeChat mini-site. Even better, you can pay for your cab rides via WeChat Wallet.  

Users can enter the Dididache wechat account and click the first nav item, "I want to hail a cab".
That takes them to a web-hosted, mobile-optimized page where they can enter current location, destination, and tip.

China marketplace hopefuls take note: this dual-offering approach to user coverage, one downloadable app that users can snag via Chinese app stores, plus one paired-down HTML5 app that users can get to via WeChat, is very quickly becoming a user expectation.

WeChat 020: Laundry

Here’s another example of a similar approach: much-hyped O2O dry cleaning service eDaiXi also offers a downloadable app, but their service can be used directly via their WeChat account, no download required. Follow their official account, click “place an order”, bind your mobile number to their system, fill in a few details, and eDaiXi will send someone to your home to pick up your dry cleaning. They’ll drop it back off when it’s done.

Find and follow the eDaiXi official account.
Bind your telephone number to their store.
Place an order (big blue circular button).
Enter your preferred service time and address. That's it.

Once again, as soon as you’ve clicked “place an order” in the WeChat mini site, you’re routed off to an eDaiXi-hosted mobile site that loads in the WeChat browser. 

WeChat eCommerce: JingDong

Naturally, with all that money floating around, someone was going to nest. By following power-retailer Jingdong on WeChat, you can access their WeChat store landing page.

If you’re interested in exploring more about straight-to-WeChat ecommerce, do check out WalktheChat’s post on Five Ways to Open a WeChat Store for Free. In it, they talk about the most important WeChat ecommerce publishing services, including major pros and cons.

Closing Thought

I’m gonna stop right there, but the list of potential applications really goes on for ages: restaurant wait lists that message you when a table is ready, digital WeChat-based gym membership cards, hotel bookings, curated daily radio–if you can build it for mobile, you can build it for WeChat. And if your brand is coming to China, you absolutely should. 

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.