← All work
2024 · Huawei User Center Design · Platform Designer

Huawei

A unified design language for five B2B apps, and the first time AI entered the design process.

UI/UX Data-Driven Cross-Team
🔒 Some product designs and data specifications shown here have been generalised or omitted for confidentiality. If you'd like to chat and learn more, please email me.

A unified design language for 5 B2B apps

As a design intern embedded in Huawei's B2B department, I proposed design improvements grounded in real user behaviour across three projects covering user identity, structural optimisation, and cross-app consistency.

Yidan Xu presenting to a product workshop in Huawei's design studio, with colleagues seated and taking notes
Presenting research findings to the product team
5
B2B apps in scope
4
Professional roles studied
3
Tasks delivered
Data + interview methodology

Task 01 · Start from the big question

In B2B, identity is everything. Yet on most platforms, users are reduced to a name and a job title. How do you bring offline trust online without overcomplicating the product?

Left: a line illustration of two gloved hands exchanging a business card. Right: a wireframe of a phone screen showing a profile photo placeholder, a name field marked 'XXX', a 'PM' role tag, and two content blocks below
Offline, a handshake and a card convey who you are instantly. Online, that same trust has to be designed back in.
🧑‍💼 Offline
Professional attire · Business cards. Natural ways to signal who you are and establish trust at first glance. Identity is conveyed before anyone speaks.
🥷 Online
A name · A small job title. No way to show expertise, authority or warmth, so interactions feel impersonal and less credible than meeting in person.

The problem: the B2B service space is structurally complex

An app often serves multiple professional roles simultaneously, whose needs vary greatly. Some roles spend most of the day facing clients; others work across departments and regions. My product team and I analysed user types and typical interaction scenarios, and two findings emerged:

The goal: bring the connection between people back to B2B

Most B2B platforms are straightforward and restrained, prioritising efficiency over expression. A good online experience should preserve, rather than strip away, the trust and emotional connection people have offline, bringing that sense of connection back without adding complexity.

Bring offline-level trust online
Use AI to generate visual materials, so the credible visual language of each profession can be read at a glance instead of being buried in metadata.
Break the limits of a paper business card
Users switch between two modes, company-oriented or personal-oriented, to suit whichever scenario they're in.

Methodology

First-hand research: through workshops and user interviews, I identified key identity-verification scenarios: first meeting, internal collaboration, client meetings. Secondary research: how "trust" is visually established across professional contexts, and the tension between genuine ability and social stereotype that shaped our subsequent design choices.

Delivery

Presented to the product team across four occupations and two card types compatible with all five apps, helping users build a stronger first impression and faster trust online.

Four line-icon personas representing the professional roles studied: a construction worker, an engineer with glasses, a businessman, and a businesswoman
The four professional roles the identity system was designed around
4
Identity cards
2
Qualification levels
2
Card formats
🪪 New ID card
A redesigned identity card for the core role-based system
👤 AI avatar system
AI-generated visual language for each professional identity
🎬 Scene coverage
Company-oriented and personal-oriented modes for different moments

What I learned: in B2B design, "feeling" is not optional; it determines whether a tool is tolerated or trusted. Most B2B platforms underestimate this.

Task 02 · Structural optimisation of B2B web platforms

In the second phase, I moved to a large-scale enterprise-level web system serving users with multiple roles. This phase focused on structural design: simplifying information hierarchy and improving efficiency based on real behavioural data and user interviews.

Methodology

Behavioural data: click-through rate, dwell time, bounce rate. User interviews: what's convenient, what's confusing, what do users expect.

The framework: four behavioural patterns

An evidence-based classification that replaced intuition with a data signal and a behavioural hypothesis for every design suggestion. Each pattern maps straight to an optimisation strategy, not a guess.

PatternData signalBehavioural hypothesisOptimisation strategy
Dispersed entrances The same function appears on multiple pages, and clicks on it are scattered. The user's goal is unclear, or different pages share irrelevant entry points. Reorganise the entry path to reduce redundancy.
High click-through rate + short dwell time Users exit immediately after entering the function. Accidental touch, or a misleading function name. Verify through interviews and adjust labels or layout.
Low click-through rate + long dwell time The feature is hard to find, but once found, is used extensively. An important function is visually underestimated. Enhance visual hierarchy and entry-point placement.
High bounce-rate pages The task was interrupted midway. A lack of clear task-completion feedback loses the user's confidence. Strengthen completion feedback and guidance for the next step.

Applications: three examples

What the framework looks like in use. Each read below starts from a data signal, not a preference, and lands on a different kind of fix.

Clear signal
Low click-through, low dwell time and high bounce, consistently. The feature is a candidate for repositioning, or even deletion.
Mixing signal
High clicks, short dwell. Usually accidental taps, or quick recognition that "this isn't what I want." Interviews told us which; often the fix was just clearer labelling and placement.
Buried value
Low click-through but long dwell. The feature is valuable and hard to find, so the fix is visibility and location, not the feature itself.

Task 03 · Cross-application consistency

Alongside the previous two projects, I maintained design consistency across all five B2B applications: analysing each app's business structure, identifying inconsistencies in shared components, and aligning the design team on a unified standard. This work is quiet, without dramatic before/after comparisons, but it's the foundation that makes everything else feel coherent.

3 things I took from Huawei

🎭 The difference is the role
Most B2C designers stumble in B2B because they keep using a personal-preference frame. B2B users aren't "me," they're "me in a certain role." Before the role is defined, every UI decision is guesswork.
🤖 AI is a possibility generator
B2B design has long been criticised for being cold and uniform. AI let me explore dozens of career-identity directions in an hour, work that used to take a week. It doesn't replace design judgment; it drops the cost of exploring to near zero.
📊 Data and intuition, cross-checked
High click-through plus short dwell time does not equal satisfaction. Behavioural data tells you what happened, interviews tell you why. Both are indispensable, and that's the lesson from this internship that stuck hardest.
← Innovate ADHD RES →