UX Design

E-Commerce

B2B

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:UX/UI, prototyping
Team composition:2 designers, 2 business analysts, 3 engineers, PM

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

TASK TIME

TASK TIME

Minutes

ordering time reduced from hours

Most importantly,
the system shifted:
assisted ordering → self-service ordering.

Most importantly,
the system shifted:
assisted ordering → self-service ordering.

Problem

Problem

Problem

Working with the BA team, we pinpointed what the platform was missing.

Working with the BA team, we pinpointed what the platform was missing.

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 workflow gaps

  • Contract-price ordering not available

  • Payment allocation was not available

  • Contract-price ordering not available

  • Payment allocation was not available

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

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.

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 -

Shopping cart: single cart w/ alert interruption→ muti carts w/ clean tags.

Financial overview: scattered financial data → structured financial overview.

Search & add item: interrupted entry flow → stable entry pattern.

Enabling New Workflows -

Enabling New Workflows -

Payment allocation feature: guided flow with clear sequence and lower cognitive load.

Coming from an accounting background, I knew this task had a natural sequence. I broke the flow into steps that followed how the task actually works. Each step only asks for what's needed at that moment.

Process, Iterations, and Decisions

Process, Iterations, and Decisions

Process, Iterations, and Decisions

Not every design direction made it into the final product.

3 Cards vs 2 Cards -

3 Cards vs 2 Cards -

My initial 3-card financial overview gave users a broader account snapshot. I later simplified it into a 2-card layout to make the most decision-critical signals easier to scan before ordering: available credit and overdue balance.

Product Recommendation vs None -

Product Recommendation vs None -

In early versions, I explored a product recommendation feature to help users discover relevant items during ordering. I later learned from our BA that users ordered from fixed procurement lists rather than browsing, so I removed this feature since recommendations would create noise instead of value.

Partial Checkout vs Full Cart Checkout -

Partial Checkout vs Full Cart Checkout -

For the shopping cart, I explored partial checkout, but each checkbox would change the pricing equation and trigger heavy recalculation, and it could also expose pricing logic through user toggling, so I went with full-cart checkout.

Design System

Design System

Design System

What This Project Changed in How I Design

What This Project Changed in How I Design

What This Project Changed in How I Design

A cross-functional team taught me things no solo design process can.

A cross-functional team taught me things no solo design process can.

Working closely with BAs and engineers meant design decisions were always in conversation with business and technical realities, and I genuinely enjoyed that. That collaboration taught me when to advocate and when to adapt.

My team and I at Shell's Beijing office — yes, Shell keeps a real Ferrari F1 race car in their lobby🤣, part of Shell's iconic partnership with Ferrari 🏎️🏎️🏎️

What I’d Do Differently

What I’d Do Differently

What I’d Do Differently

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.

feedback beyond launch

to build measurement into key workflows to inform future iteration.

In this project, user insights were mediated through business analysts, and designers did not interact directly with customers. If I could revisit this, I would push for direct user access earlier in the process.