UX Design

B2B

E-Commerce

When Global
Doesn’t Fit Local:

When Global
Doesn’t Fit Local:

When Global
Doesn’t Fit Local:

Designing "Shell China MarketHub"

Designing "Shell China MarketHub"

Designing "Shell China MarketHub"

Overview

Overview

Overview

Role:UI/UX Design Intern
Duration:Sep. 2024 - Dec. 2024
Scope:UI/UX, wireframing, prototyping

In this consulting engagement at IBM, I helped design Shell China MarketHub, a B2B e-commerce platform supporting $1.37 billion in annual transaction volume.

Impact

Impact

Impact

REDUCED DEPENDENCY

REDUCED DEPENDENCY

79%

reduction in customer service calls

reduction in customer service calls

TASK TIME

TASK TIME

Minutes

ordering time reduced from hours

ordering time reduced from hours

Most importantly,
the system shifted:
assisted ordering → independent ordering.

Most importantly,
the system shifted:
assisted ordering → independent ordering.

Problem

Problem

Problem

USER PROBLEM

USER PROBLEM

Shell’s Global MarketHub did not fully support workflows critical to Chinese users.

Shell’s Global MarketHub did not fully support workflows critical to Chinese users.

BUSINESS PROBLEM

BUSINESS PROBLEM

High call volume and operational load since workflows intended for self-service required manual handling.

High call volume and operational load since workflows intended for self-service required manual handling.

High call volume and operational load since workflows intended for self-service required manual handling.

This wasn’t a UI facelift.
It was a business model
+ interaction model
misalignment problem.

Research & Insights

Research & Insights

Research & Insights

Working with the BA team and building on their research, we pinpointed what the platform was missing.

Working with the BA team and building on their research, we pinpointed what the platform was missing.

Shell Global MarketHub fell short in:

Shell Global MarketHub fell short in:

business workflow gaps

  • Contract-price ordering not available

  • Payment allocation was not available

  • Contract-price ordering not available

  • Payment allocation was not available

Shell Global MarketHub fell short in:

interaction gaps

  • Interaction misaligned with Chinese B2B habits

  • Unclear information hierarchy and visual structure

  • Interaction misaligned with Chinese B2B habits

  • Unclear information hierarchy and visual structure

These user insights were gathered by the Business Analyst team through client workshops and stakeholder interviews. My role was to interpret these inputs and translate them into executable interaction models.

These user insights were gathered by the Business Analyst team through client workshops and stakeholder interviews. My role was to interpret these inputs and translate them into executable interaction models.

Understanding Constraints Before Designing

Understanding Constraints Before Designing

Understanding Constraints Before Designing

Before proposing change, I mapped constraints across three layers:

Before proposing change, I mapped constraints across three layers:

User Behavior Constraints

User Behavior Constraints

  • Align with Chinese customer experience and habit

  • Align with B2B purchasing behaviors and workflows

Technical Constraints

Technical Constraints

  • Limited real-time recalculation capability

  • Some pricing data could not be retrieved due to API access control and permission restrictions

Business Constraints

Business Constraints

  • Pricing logic confidential and intentionally not fully transparent

These constraints
shaped every
design decision.

Solution

Solution

Solution

We created Shell China MarketHub, a localized B2B platform that aligned with Chinese customer needs.

We created Shell China MarketHub, a localized B2B platform that aligned with Chinese customer needs.

We created Shell China MarketHub, a localized B2B platform that aligned with Chinese customer needs.

Redesigning Existing Workflows -

Redesigning Existing Workflows -

Ordering:

interrupted entry flow → stable entry pattern

Shopping cart:

single cart w/ alert interruption→ muti carts w/ clean tags

Financial center:

scattered financial data → structured financial overview

Enabling New Workflows -

Enabling New Workflows -

Adding payment allocation feature:

guided allocation flow with clear sequence and lower cognitive load

Coming from an accounting background, instead of creating a dense financial table, I broke the process into:

  • identifying what has been paid

  • confirming what remains open

  • allocating in the right order

  • confirming and reducing the chance of mismatches

My domain understanding allowed me to
design a flow that was easy to use, and
aligned with how the task actually worked.

What This Project Changed in How I Design

What This Project Changed in How I Design

What This Project Changed in How I Design

I learned that enterprise design is rarely about optimizing for one thing.

I learned that enterprise design is rarely about optimizing for one thing.

The solution is rarely in serving only the user, the business, or the system. It comes from working through the tension between all three.

The solution is rarely in serving only the user, the business, or the system. It comes from working through the tension between all three.

I learned to respect how people already work.

I learned to respect how people already work.

Many B2B users weren’t exploring. They came in knowing exactly what they needed to do, and the interface had to keep up with that.

Many B2B users weren’t exploring. They came in knowing exactly what they needed to do, and the interface had to keep up with that.

What I’d Do Differently

What I’d Do Differently

What I’d Do Differently

In this project, user insights were mediated through business analysts, and designers did not interact directly with customers.

If I revisited it, I would advocate for:

If I revisited it, I would advocate for:

direct, earlier validation

to bring key design decisions closer to end users.

to bring key design decisions closer to end users.

feedback beyond launch

to build measurement into key workflows to inform future iteration.

to build measurement into key workflows to inform future iteration.