Chinese B2B Web Design For Western Enterprises

This was originally a four-part series of articles I wrote while working as a designer at Camp Pacific. I’ve collected all four here as one long-form piece on how western enterprises can rethink their web design practices for a Chinese audience.

Image for post
Image for post

As China’s business and consumer presence grows larger and larger on the world stage, it’s becoming increasingly important for western companies to develop a presence in their market. This isn’t as simple as simply adding a “.cn” to your web address however. There are a number of cultural differences that extend far beyond the language barrier for businesses to reach consumers, and this is even more true for B2B companies: China is a country where business deals are traditionally based around relationships and respect. Any company trying to break into this massive market that makes one oblivious wrong move can ruin their chances for success. Over the next four articles, we’ll attempt to unpack these nuances a little and better inform your business on how its web presence can become a strength rather than a weakness.

Items we’ll cover:

Overview of the Chinese market

Chinese Cultural Practices

UX/UI Design In China

Chinese Social Media And WeChat

Image for post
Image for post
Chinese gaming giant QQ

A Note on the Chinese Market

Historically, there are a few reasons for the current state of Chinese web design. From a business standpoint, design as a whole in China is viewed as something that can impact one’s business in equally bad and good ways; therefore, it’s common that businesses will request near-exact copies of designs that have worked for successful competitors as a way of weeding out factors that may derail their own success. Because of this, design has been slower to change in China compared to western markets and why many Chinese websites still look like Yahoo.com circa 2000.

Largely though, differences in design come down to the vast number of characters in Hanzi, the Chinese phonetic alphabet. Hanzi has some 40,000 characters and is more heavily dependant on the shape of each character than sequences of characters; as a result Hanzi is much more conducive to dense amounts of text as its characters are much easier to “scan” than western words. Because of this, culturally, Chinese readers are accustomed and welcome to having more information “up front” and in greater level of detail.

Image for post
Image for post
Examples of Hanzi characters and their Pinyin equivalents.

A drawback to Hanzi however is that “search” as a function has much more difficulty with a phonetic alphabet; many web designs historically have gotten around this by displaying large amounts of links per page to encourage exploration of a site.

Despite this, web design preferences in China are now moving towards more minimal, clean layouts with an eye on maintaining the preference for descriptive detail in copy. Even massive Chinese tech companies, like Lenovo , have adopted a cleaner look. For companies attempting to break into the Chinese market successfully, their website needs to follow more subtle changes rather than a complete redesign to be successful.

Image for post
Image for post
Lenovo China

Responsive Design

Image for post
Image for post

According to the Chinese Internet Network Information Center (CNNIC)’s Internet Usage report (2017), close to 95.1% of Chinese with access to the internet use their phone as their primary source. Furthermore, 95.6% of Chinese businesses use the internet for office work, and mobile makes up part of this percentage. 93.7% of employees access work-related internet via wifi, while 32.3% use mobile data. 75% of all mobile traffic in China is over Wifi as well. According to the same CNNIC review, 54% of Chinese enterprise companies have “official” mobile websites; 75% have an “official” WeChat account (more on WeChat later). Desktop viewing is more common for B2B companies, but one should design with the expectation that their site will be viewed on a phone or tablet.

China’s most commonly used operating system? The answer isn’t pleasant- Windows XP. According to a 2017 Internet Trends report by Umeng.com(Chinese) Windows XP makes up 27.6% of China’s overall OS market share. Does this mean we’re all back to using tables, image maps and frames to display content aimed at other businesses? Thankfully, no. This same report describes legacy browser use plummeting in the last few years, and Internet Explorer 8 (shudder) or older is only in use in 6.4% of Chinese workplaces.

According to the same 2017 report, 60% of desktop internet usage is on screen sizes of at least 1366x768px, a common breakpoint for many websites one might frequent today. This implies that the normal responsive grids used in Western websites should be usable for Chinese sites as well, and therefore very similar designs should be transferable from the existing Western site to its Chinese version. Historically Chinese consumers are more accustomed to dense page layouts as mentioned before; thankfully modern Chinese websites are changing to reflect Western “minimal design.” This can be seen with IBM’s US site compared to its Chinese site, or the Lenovo example above.

Image for post
Image for post
Chinese video streaming site Youku is one Youtube equivalent

The Great Firewall

This starts with hosting. For websites that aren’t blocked, the “firewall” still greatly throttles the loading speed of any site that isn’t hosted on a server based in mainland China. The simple workaround involves using a hosting service based in China, of which there are many. It should also be noted that these require a Chinese business license to use.

On top of hosting your own site on the mainland, you’ll need to use local services to keep your site running properly as well. Is your site built on a Bootstrap framework? Twitter is banned in China, as are its services, so you’ll have to use the Chinese Bootstrap instead. Is your current site using web fonts? Google Fonts is outright blocked in China, and other western font databases like myfonts.com or typekit.com are still outside the firewall and will drastically increase your page load time. Luckily in the last couple years Chinese font hosting has improved, and sites like justfonts.com have sprung up with a large selection of different Hanji styles. Does your site use external javascript libraries, CMSs, etc? The same logic applies.

Image for post
Image for post
Weltmeister Motors’ Chinese homepage

User Experience Considerations in China

This is especially true when it comes to B2C and B2B sites. Like in any culture, deals and exchanges are heavily dependant on a sense of trust. This is especially necessary in regards to the Chinese user. When it comes to creating Chinese naturalized websites, overwhelmingly Rule #1 is: Don’t auto-translate your English site! All the Chinese languages have their own grammatical nuances and simply running your copy through Google Translate will not only be transparent to any fluent speaker, it screams that you have neither the respect nor time for your Chinese client and any chance of a trustful relationship will be dashed. The most important step one can complete when converting their site for the Chinese market is hiring a copywriter fluent in at least Mandarin to help translate the sentiment and meaning of your message, not just the literal words.

Image for post
Image for post
QQ.com auto-translated: English sites translated to Chinese look just as funny as this does to you.

Chinese users prefer a greater level of detail of content, and find businesses easier to trust with more information given upfront. This is partially due to a holdover of older design trends, where Chinese web designers were forced to put massive amounts of links on each page due to the issues with search outlined above. While things have progressed since, small details such as more descriptive hyperlinks or longer previews are the norm; skimping on description or directions can come across as if the website is trying to hide something. This doesn’t mean every page has to be a novel: According to a Nielsen Norman Group study, Chinese users find western designs a little too empty of information but overall prefer clean and minimal design.

Image for post
Image for post
The Chinese Lenovo homepage

The days of having every page of a website listed as hyperlinks on the homepage in a jumbled blue wall of text are gone. Menus, sliders, and header and footer designs for Chinese-localized western websites are often largely the same as their Western counterparts as the example from Lenovo above shows.

One area where differences are noticeable is site navigation. A quick browse of any native Chinese site will often reveal menus nested in sub-menus nested in sub-sub-menus. Generally, Chinese browsing habits show a preference for multiple levels of navigation and shorter content pages instead of long-scrolling pages that are currently popular with Western businesses. These menus are usually organized horizontally, rather than descending vertically, as Hanji is easier to scan this way. Many larger Western companies that have an established presence in China default to plainly translated versions of their original menu structure; rebuilding this area for your Chinese site could be looked at as an opportunity to stand out as more trustworthy compared to your competitors.

Other affordances can be found with a deeper look at Chinese sites as well. As an example, it’s more common for most Chinese hyperlinks to open in a new tab or window instead of within the same window. Historically this might have been due to slow load times on Chinese ISPs, but with broadband being widespread now this practice can be looked at more as an alternative method for breadcrumbs, especially on a larger site.

Image for post
Image for post
Siemens China’s contact page includes WeChat QR codes

Differing affordances aren’t just limited to navigation. Input forms, specifically for names, don’t follow the typical Western “Surname” and “Given Name” convention. Depending on the area you’re from, you may or may not also have a “Generational Name” between the two, and a “Title” at the end depending on the formality of the situation. Forms will either have a field for each, or they’ll skip this completely and have a singular “Name” field for all names, as Chinese names are written without spaces. Contact pages specifically will often have alternate means of reaching out as well. Social media is so tightly integrated in Chinese culture, connecting with a company via WeChat can be accomplished by scanning a QR code directly off a desktop “Contact Us” page.

Colour and Imagery

Image for post
Image for post
Incredibly rude gifts

Colour can have surprisingly different connotations depending on the culture it’s being associated with, and this is especially accurate for China. It’s not just associations with colors in general; specific uses of color can have symbolic meaning too. For example, wearing a green hat means your spouse is cheating on you; black borders around a portrait indicates the person is dead; and wrapping a gift in white is a rude gesture intended to remind the recipient of their own mortality.

Even the good colors can have tricky associations. Red in general is a favorable symbol for luck and prosperity, but overdoing it can associate your brand with Chinese New Year celebrations. Gold is also usually associated with nobility and wealth, but overusing yellow risks associating your product or brand with pornography. Purple is safe as it also has ties to the upper class, while green products are usually associated with being contaminant free but not necessarily environmental.

Image for post
Image for post
Black: a colour of celebration

White and black are the most opposite to Western views. White in China is always associated with death; it should be generally avoided. That said, the concept of “whitespace” on a page is still welcomed and does not have the same connotations. Black is often looked at as a colour for respectful and formal celebration but has negative, even evil, connotations if used as a background for text.

Chinese web design practices are starting to match western trends in regards to imagery: large hero banners and high-res colourful pictures are used as liberally as you’d expect. For Western companies that have built a site for the Chinese market, it’s common to see stock imagery feature someone of Asian descent instead of where the company is originally from; this is a minor change though, and usually a diverse range of people in images is as common on Chinese sites as it is in the west.

Image for post
Image for post

In general, iconography is also more or less the same in China as it is in the west. Hamburger menus, search icons, a Settings gear- they’re all the same. Symbolism is much more common however: the numbers six, eight and nine are all considered lucky and prosperous, while the number four is associated with death. Cats, cabbage, fish and knots also symbolize good luck and a long prosperous life.

Image for post
Image for post
Youziku is one of China’s prominent web font providers

Typography

Mainland China uses a simplified variation of their character system that is referred to as GB232, while Hong Kong and Taiwan use a much larger, traditional character set referred to as Big5. Most webfonts will have both versions, and depending on the target region of the website, the correct character set should be used. This is coincidental (and somewhat confusing) and not dependant on modern geographical uses of Mandarin/Cantonese. There are a number of best practices for using CSS with Chinese characters; they can be found here and here.

When typesetting, the minimum legible text size for Chinese characters is 12–14px with large (1.7x the font size or larger) line-heights to maintain scannability. Characters are monospaced and paragraphs are almost always left-justified. Heavier weights (eg. bold) as well as text colour are used often in conjunction to highlight or call out certain important parts of copy. Hanji has historically been written vertically, but thanks to the structure of a web page and that standar being developed in the west, vertical text is generally saved for decorative titles at most.

Image for post
Image for post

Chinese Social Media & You

Image for post
Image for post
Baidu’s homepage strongly resembles Google’s

Search Engine Optimization

Like we’ve mentioned in a previous article, the need for naturalized copy and information is crucial; not only are word-for-word translations transparent as poor efforts and untrustworthy, they’ll ALSO deplete your website’s search ranking. That said, converting your website over for the Chinese market and favourable Baidu ranking shouldn’t require a full redesign. A quick look at a number of China-based Western enterprises shows the name of the game is subtle tweaks, such as Intel US vs China, Qualcomm US vs China or Oracle USvs China. These sites are China-oriented and generally navigation reflects products/services that are available in China; it is common for links, often with (English) added to the end, to link to global sites without search ranking penalty.

Image for post
Image for post

WeChat

WeChat, China’s version of Facebook and WhatsApp, has become the primary mode of communication and interaction on the internet for most Chinese users. What started as a simple encrypted messaging app has blown up in recent years as users have the ability to pay for items through it, visit websites and single-purpose landing page “light apps,” order services like cleaning or ride sharing, banking, contacting the police, and connect with nearby users. Later in 2018, it is poised to become China’s state-run digital identificationand may eventually replace other forms of ID. Essentially, it is China’s main app. Core to its functionality is a QR code reader: widely shunned in North America, QR codes are commonplace in China and used for everything from linking to websites to automatically signing up for services to even triggering payments for goods under a certain value. The sight of someone scanning a QR code off their desktop screen with their phone might be seen as silly in North America, but is done without thinking in China.

Image for post
Image for post
Users reading a QR code off a vending machine screen

In 2016, Tencent launched WeChat Enterprise, a form of WeChat for employees to use to communicate with one another akin to Slack but with a social Moments feed. Presence on WeChat for all businesses is a must, even just to act as customer support and newsletter distribution. With a strong WeChat presence, any business has the opportunity to distribute marketing materials via Light Apps or push new articles or content somewhat similar to a blog. The CTAs in WeChat light apps are almost always a social “Share” function, as opposed to Sign Up / Buy in western websites. QR Codes are commonly used to follow a business on social media, download marketing materials, or provide quick payments. An advantage of bringing content to WeChat is the ability to share this content within work communication channels; single-use pages could be shared and posted as a Light apps much more organically over work communication channels like WeChat Enterprise.

Image for post
Image for post
Sign up for a WeChat account here

The New Age of WeChat

Image for post
Image for post

Account Types

Subscription Account

Service Account

Enterprise Account

Image for post
Image for post
QR Code for TenCent Video on WeChat

Marketing Opportunities

That content had better be customized as well. WeChat may be a novelty to many Westerners, but in China the platform is already saturated with new content being posted every day. The need for your brand to be unique and deliver a valuable message is huge; sharing or the passing on of useful posts on WeChat is common regardless of whether it’s for personal or business use.

Image for post
Image for post
Tourist Audio Guide Light Apps on WeChat

We’ve mentioned “Light Apps” and “Mini Sites” a number of times over the past weeks- what exactly are they? Essentially HTML5 apps, Light apps are small and have a single purpose like driving sign-ups; they can be thought of as lead-generating landing pages in their simplest form. Where they differ from “apps” is that Light apps do not need to be downloaded, they disappear after being closed, and do not exist in an app store: they only live on WeChat. Light apps are an organic way of marketing to your target users- if your content is unique and engaging enough, early adopters will spread the app through their channels for you.

Image for post
Image for post
Some hotels are now allowing you to access your room via WeChat

China has their own brand of “Influencers” on WeChat and other social media channels: Key Opinion Leaders. Much like in the west, KOLs are often courted by businesses to feature their content and reach a wider audience. These are more than just celebrities, musicians or athletes as any expert in their respective field often will have a matching online following as well. The influence of these KOLs can be huge: one prominent blogger helped fashion brand Givenchy, who do not have a large presence in China, sell $200,000 USD worth of bags in 12 minutes on their WeChat store. Search engines like Robin8 exist for companies to find the right KOLs with the right audience.

Image for post
Image for post
A typical greeting message upon following a new Official account

WeChat Tools

Service Accounts gain even more options in their toolbox. Template messages can be constructed to send off to all subscribers for things like service notifications. Auto-reply messages are also available for service accounts- it’s almost expected by new followers to receive some welcome or greeting message from your account upon subscribing to updates. The automation doesn’t just stop at Auto-Reply; Service accounts get access to nine different APIs for their accounts that allow even further automation and customization.

More on WeChat:

Wechat User and Business Report 2017

The Beginner’s Guide to Wechat for Business

Wechat Advertising 101

Light App Development Indicative of China’s Online Consumption

Wechat Official Account: Simple Guide

Written by

Product Designer, UX Teacher, aspiring artist. Apparently I write once in a while, too.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store