CHINAFICATION: E-commerce Website UX/UI best practices

09 Nov CHINAFICATION: E-commerce Website UX/UI best practices

Posted at 17:22h in China Insights, Insights, Sem categoria by Niska Yu

China is a mobile-first country and the first e-commerce market in the world.

*SOURCES: 2022 GSM THE MOBILE ECONOMY IN CHINA*

Chinese citizens’ digital savviness, advanced infrastructure (5G network, smartphone deployment..), as well as a unique digital ecosystem, create rich online experiences and unique online consumer journeys.

E-commerce platforms like TMALL, JD.com and WeChat mini-programs are the places where most transactions are conducted.

The top priority of your official Chinese website is to showcase brand image, while the e-commerce purpose can go second.

It doesn’t mean that offering a killer website shopper experience is not important. Websites still generate leads from search marketing. Your dedicated Chinese website is ideal for Search Engine Optimization (SEO) on Baidu (China’s first search engine).

Localize your website for Chinese consumers

There are 3 levels of localization to adapting your website to a Chinese audience.

1. Translation:

Translating your website’s copywriting to Chinese, keeping the same images, layout… This is the simplest but also the least engaging for Chinese audiences.

2. Adaptation:

Using global assets & products, cropping and translating to fit Chinese platforms. This is what most brands do.

3. Creation:

Create content and product in China for the Chinese market. Adopt local development of digital products specifically for Chinese platforms. This is what mature brands do.

“Translating a website is the perfect foot in the doors to enter a country where you don’t have a presence or a very limited one. Yet, you need to adapt to and create for the Chinese market to be competitive.”
Vladimir Garnele, Creative Director of Fabernovel

Thereby, we are providing you here some actionable tips for the website UX/UI design to tailor your website to Chinese consumers. They are based on research and our own experience of spending the past years designing and building them at Fabernovel.

1. Mobile First

What we mean by Mobile First, is that Chinese website design is closely associated with the mobile phone, including:

– Mobile phone number is used as an ID.

– A physical mobile phone device is needed even for a website PC view.

– Some Chinese website-specific design is derived from mobile App design.

1.1 Login and registration

Login with a mobile phone number is the first choice. An SMS message will be sent to the customer’s mobile phone as a one-time password to activate the account. Email login is rarely used in China.

By 2021, there are 1.67 billion SIM connections in China, accounting for 117% of the population. The email account is simply not as widely used as in the global market.

For a quick registration, WeChat is your go-to 3rd party login touchpoint. With 1.28 billion monthly active users, the WeChat account is a unique identifier for each user and saves consumers from the trivials of typing the verification code. Alipay, Weibo, and Tencent QQ are other social platforms you can consider linking with.

However, social login doesn’t work well on mobile view. Users will have to screenshot the QR code and scan it within WeChat (or other social apps). Therefore we suggest only keeping the phone number login on the mobile view.

1.2 Infinite scroll of product listing

Largely impacted by social media display, auto-loaded content on scroll is widely adopted by Chinese websites.

Instead of using a “View More” or “Next Page” button, the auto-loading function offers an efficient browsing experience to users. Customers can easily navigate through the catalog pages and get access to further content without reloading the page over and over again.

As a complementary function, add a “back to top” button and allow users to anchor back to the top of the page.

1.3 App-looking navigation bar on mobile web

International brands like Decathlon, IKEA and McDonald’s adopt the typical mobile phone App navigation – tab bar on their mobile website. It is not a new idea itself but is often neglected in mobile web design.

This could also refer to “thumb-driven design”. Study shows that 75% of users touch the mobile screen with only one thumb, leaving the bottom of the screen an easy-to-reach area.

While navigation bars usually stay at the top on the website PC view, the top part of a mobile phone is relatively impossible to touch without adjusting your posture. Therefore, positioning the tab bar at the bottom makes your website friendly for users to click and navigate.

1.4 Pictorial category

Combining images with text descriptions in the product category is a nice-to-have design for brands with an extensive product category. For example Decathlon and IKEA both adopt this design on their Chinese website, while they keep plain text descriptions for the global website.

The reason to use the pictorial category for the China market also echoes Chinese consumers’ sophistication with mobile Apps. Category with icons often appears in App design. Icons make good targets and are fast to recognize at a glance.

Taking the pictorial category on the website helps customers to efficiently navigate to the type of product they desire. In addition, it can enhance the aesthetic appeal of a design. By showcasing your signature product, the pictorial category could also serve for branding and marketing purposes.

2. Assets

2.1 How to deal with Chinese fonts?

Some brands have dedicated fonts for branding purposes. However, it might be a little complicated when it comes to displaying the Chinese font on your website.

A typical Chinese font file usually runs at least 5MB in size and some of them can be over 20MB, while a typical English font file usually runs 2 KB. It will largely compromise the website’s loading speed. In addition, fonts that can actually appear on a web page are limited by the fonts installed on the user’s computer.

To maintain a coherent brand image with your unique Chinese font on the website, we’d suggest integrating the text into the UI design and then uploading the asset as an image.

For example, IKEA adopts the official font in the product description image and sets the website’s Chinese font to the system’s default.

2.2 Is the product review section mandatory for Chinese websites?

In China, XiaoHongShu (RED) is the most trusted “product search engine”, as it encourages user-generated content. Chinese consumers tend to use RED to get authentic product reviews before purchasing on ecommerce platforms like Tmall, JD.com and WeChat mini programs.

As the website is the least used touchpoint for conversion in China, a dedicated product review section is not mandatory for the Chinese website. Many international brands skip this function, while some brands have been influenced by RED to showcase more vivid reviews to enhance review authenticity.

For example, IKEA global’s website kept the traditional simple rating and text comment style, but for IKEA Chinese website, it has a dedicated review area where only reviews with pictures are listed.

Another example is that on SEPHORA’s Chinese website, there is an additional section to showcase product-related posts on RED, which is complementary to their weak product review section. The posts are created by both KOL/KOCs and consumers.

3. Consumer behavior

3.1 Quick buy

The quick buy function is a unique and widely adopted solution on Chinese websites.

Clicking on the “quick buy” button next to “add to bag”, customers will be instantly directed to the checkout page. Whilst, on global websites, customers are usually asked to add the item to the shopping cart before checking out.

The variety of shop products adds up to the complexity of the shopper making their decision which could cause decision fatigue. The same situation is also happening in e-commerce platforms. Quick buy is not a universal solution to solve decision fatigue, yet indeed it may encourage impulse purchasing.

China’s strong domestic delivery service makes the quick buy function possible. Consumers are able to purchase one single item at a time and can expect a low to no shipping fee and 1 to 4 days of shipping time.

Adding a quick buy function may help the store mitigate the customer’s decision fatigue which may improve your store’s user experience.

3.2 Editable shopping cart

Editable shopping cart is much welcomed by Chinese consumers. Greatly influenced by the e-commerce platform Taobao, Chinese consumers tend to add items to their shopping cart during the evaluation stage of the consumer journey. It means that they probably will not check out everything in the cart. You can take it as the shopping cart also serves the function of “wishlist” or “favorites” on global websites.

In this case, most Chinese websites allow customers to select the items in their shopping cart before proceeding to checkout. And the not purchased items will remain in the cart. Whereas on global websites, customers can only manage the quantity and choose to keep or delete an item from their cart.

3.3 No guest checkout in China

Most brands adopt guest checkout on their global website to encourage first-time buyers with a faster checkout process.

Yet in China, it is simply not the case. As a matter of fact, Chinese citizens are used to using a single identifier across all websites to be able to better manage their orders.

For Example, on Lancôme Chinese official website, when the customer enters the shopping cart interface and clicks the “proceed to check out” button, he/she will be asked to sign in with the mobile phone number or to register.

Signing in before checkout is beneficial for after-sales services. Customers can easily track their orders with the account and get shipping information via their mobile phone number.

In addition, brands can leverage sign-in information as a unified ID to portray their customers. This will help you to customize your outreach and marketing efforts for your target audience.