UX / UI · 设计

Design for
how Chinese users actually browse.

WordPress experiences that feel native to users in China. Culturally relevant, mobile-first, shaped around the platforms that run China's internet.

Start your design project See the system →
home-mobile.fig
375 × 812
A WordPress mobile homepage designed for Chinese users, with red accents, WeChat QR code, and ICP licence
70%+
Mobile traffic in China
6
Browsers we QA on
WeChat
Native integration
ICP
Compliant by design

The problem

Why Western design
falls flat in China.

A company gets their WordPress site converting back home, launches it in China, and bounce rates spike. The site looks fine technically, but something about it feels wrong to anyone browsing from Shanghai or Chengdu.

Chinese internet users did not grow up on the same web. How they navigate, how much information they expect to see at once, all shaped by WeChat, Taobao, and Douyin.

A design language that converts in Chicago does not automatically work in Chongqing.

Two phones side by side, one showing a sparse Western-style site, the other a dense Chinese-style site with WeChat QR and trust signals
Western-style
Sparse, low engagement
China-native
Dense, converts

Field knowledge

Six things designing
for China taught us.

A.01 to A.06 / China UX heuristics

A.01

Colour carries meaning

Red signals luck and energy. Gold conveys premium. White used solo carries funerary weight, so we pair it with strong accents.

A.02

Density reads as trust

Dense above-the-fold layouts feel grounded to Chinese users. Whitespace-heavy designs can read as empty, unfinished, or evasive.

A.03
ICP 沪B2-2024
0123456号
营业
执照

Trust lives at the edges

ICP filing number, business licence, official badges. Footer placement is conventional. Above-fold QR codes anchor credibility.

A.04
微信

WeChat is plumbing

QR codes, mini-program links, share endpoints, customer service handles. These are baseline infrastructure, not optional features.

A.05
中
Aa

Type carries weight

PingFang SC, Noto Sans SC or Source Han pair with Inter or system stacks. Character spacing and line height differ from Latin.

A.06

Bottom nav is the home button

Sticky bottom navigation is the home button of the Chinese mobile web. Five tap-targets, always visible, always thumbable.

What we offer

Four disciplines.
One outcome.

/ Research

UX research and user insights

We map how your audience actually moves through content in China, benchmark local and international competitors, and design journeys that begin where Chinese users begin: Douyin, WeChat, or Baidu.

/ IA

Information architecture

Chinese audiences prefer denser pages. More links visible, more text, more options upfront. We structure content for the depth visitors expect, without making it unreadable for HQ.

/ UI

Visual design

Mobile-first layouts for the devices people in China actually use. Symbolic colour, typography that respects Chinese characters, and the trust signals (WeChat QR, ICP, business licence) Chinese consumers verify before they act.

/ System

Gutenberg-native design system

We design inside Gutenberg directly. Custom blocks your content team uses without a developer, components for visual consistency, templates non-technical staff can update themselves.

Inside the system

Documented tokens
all the way down.

Every design we ship is documented as a system. Colour, type and spacing tokens travel from Figma into Gutenberg, untouched.

/ Colour

5 / tokens
  • Auspicious red #E11D2E
    Luck, energy, action
  • Brand orange #F25F29
    Vitality, accent
  • Trust green #52C41A
    Confirmation, WeChat
  • Ink #1F1F1F
    Headings, anchor
  • Cloud #FAFAFA
    Surface, never solo

/ Type

PingFang · Inter
  • H1
    32px
    中文标题 Display Headline
  • H2
    24px
    副标题 Section Subhead
  • Body
    16px
    正文段落 Body paragraph
  • Caption
    12px
    辅助说明 Caption / meta

/ Spacing

4-base scale
  • 4 · XS
  • 8 · S
  • 16 · M
  • 24 · L
  • 32 · XL
  • 48 · 2XL
All spacing on a 4px base.
Vertical rhythm = 8px lock.

Design system · handoff

Built in Figma.
Handed off ready to ship.

  • Component library tuned for Chinese typography
  • Token system: colour, spacing, type scale
  • Mobile and desktop wireframes for every key page
  • Interaction specs your dev team can build from
WordPress CN / Component Library
A Figma canvas showing the WordPress component library tailored for Chinese audiences

How we work

A predictable path
from brief to handoff.

P.01 to P.06 / Engagement flow

P.01

Discovery and briefing

Get aligned on brand guidelines, goals, and who you are trying to reach in China.

P.02

Research and benchmarking

Competitive landscape, local user patterns, design principles. The homework phase.

P.03

Wireframing

Page structure and user flows checked against how Chinese users expect sites to work. Cheaper to rework a wireframe than a polished mockup.

P.04

Visual design and iteration

High-fidelity mockups and feedback rounds until it works for your global brand and the Chinese market.

P.05

Design system and handoff

Components, style guidelines, and interaction specs packaged so your dev team can build without guessing.

P.06

QA and validation

We test on Chinese browsers and devices. A site that looks great in London can fall apart on UC Browser or QQ Browser, both still big in China.

Who Is This For?

Who should be reading this

Starting from scratch

You're building a WordPress site for China and you want to get the design right from the start.

Not performing

You already have a site live in China but it's not performing and you think the design might be the issue.

Campaign pages

Your marketing team needs pages targeting Chinese consumers that don't feel translated from English.

Adapting global design

You've got a solid global design system and you need someone who understands how to adapt it for China.

Let's talk

Design for China is about
whether people use what you built.

Looks come second. If that sounds like a conversation worth having, we should talk.

Start your design project Chinese content services