Shell China MarketHub

Shell China MarketHub

Role:

UI/UX Design Intern

Duration:

Sep. 2024 - Dec. 2024

Scope:

UI/UX, Wireframing, Prototyping

Role:

UI/UX Design Intern

Duration:

Sep. 2024 - Dec. 2024

Scope:

UI/UX, Wireframing, Prototyping

Client

IBM Consulting provided digital solution for Shell, the 13th largest company on the Fortune Global 500.

IBM Consulting provided digital solution for Shell, the 13th largest company on the Fortune Global 500.

This project was to create Shell China MarketHub, a B2B e-commerce platform with an annual transaction volume of $1.37 billion USD.

This project was to create Shell China MarketHub, a B2B e-commerce platform with an annual transaction volume of $1.37 billion USD.

Shell China MarketHub bridges the gap between Chinese customers' business needs and platform functionalities, and provides a more intuitive and engaging user experience.

Shell China MarketHub bridges the gap between Chinese customers' business needs and platform functionalities, and provides a more intuitive and engaging user experience.

IBM Consulting provided digital solution for Shell, the 13th largest company on the Fortune Global 500.

This project was to create Shell China MarketHub, a B2B e-commerce platform with an annual transaction volume of $1.37 billion USD.

Shell China MarketHub bridges the gap between Chinese customers' business needs and platform functionalities, and provides a more intuitive and engaging user experience.

Overview
Overview
Overview
Overview

Shell MarketHub (SMH) served customers worldwide for online lubricant orders, but its lack of adaptation to local business practices and outdated design did not satisfy the need of Chinese customers.

This project was launched to create Shell China MarketHub (SCMH), a B2B eCommerce platform that addresses Chinese customer needs while streamlining Shell China's sales management and OTC (Order to Cash) processes.

My Responsibility
My Responsibility
My Responsibility
My Responsibility

Given the project's tight timeline and heavy workload, our design team worked in parallel, independently handling different modules.

I designed Order Center and Financial Center.

Given the project's tight timeline and heavy workload, our design team worked in parallel, independently handling different modules.

I designed Order Center and Financial Center.

The Challenge
The Challenge
The Challenge
The Challenge

Missing Features to Support Chinese Business Needs


Order Placement Issue: currently only supports orders at retail prices, lacking the contract price option needed by Chinese customers.


Financial Document Handling: Lacks functionality for payment allocation, requiring manual processing.



Upgrade on Interface & Navigation


The design requires an upgrade to enhance usability


 ⬇️ ⬇️ ⬇️
Resulted in low efficiency, poor user satisfaction, and higher labor costs.

Missing Features to Support Chinese Business Needs


Order Placement Issue: currently only supports orders at retail prices, lacking the contract price option needed by Chinese customers.


Financial Document Handling: Lacks functionality for payment allocation, requiring manual processing.



Upgrade on Interface & Navigation


The design requires an upgrade to enhance usability


 ⬇️ ⬇️ ⬇️
Resulted in low efficiency, poor user satisfaction, and higher labor costs.

The Goal
The Goal
The Goal
The Goal

B2B with a B2C Experience

Deliver consumer-grade usability to simplify interactions and minimize learning curves.


Efficiency & Flexibility

Develop robust features to address complex business needs and streamline workflows.


Clarity & Visualization

Enhance task efficiency with clear layouts, guided navigation, and intuitive data presentation.

B2B with a B2C Experience

Deliver consumer-grade usability to simplify interactions and minimize learning curves.


Efficiency & Flexibility

Develop robust features to address complex business needs and streamline workflows.


Clarity & Visualization

Enhance task efficiency with clear layouts, guided navigation, and intuitive data presentation.

B2B with a B2C Experience

Deliver consumer-grade usability to simplify interactions and minimize learning curves.


Efficiency & Flexibility

Develop robust features to address complex business needs and streamline workflows.


Clarity & Visualization

Enhance task efficiency with clear layouts, guided navigation, and intuitive data presentation.

B2B with a B2C Experience

Deliver consumer-grade usability to simplify interactions and minimize learning curves.


Efficiency & Flexibility

Develop robust features to address complex business needs and streamline workflows.


Clarity & Visualization

Enhance task efficiency with clear layouts, guided navigation, and intuitive data presentation.

The Solution
The Solution
The Solution
The Solution
—— Revamped Order Experience
—— Revamped Order Experience

Versatile Order Options: Introduces mixed orders and bulk purchasing/one-click orders for large clients, addressing diverse needs and optimizing complex order processes.


Multi-Shopping Cart Management: Independent carts for different delivery addresses ensure efficient multi-address order handling and reduce errors.

—— Integrated Order Detail
—— Integrated Order Detail

Delivery Tracking: View order's current location, final destination, and estimated arrival time of the product.


Billing Status Tracking: Track order's billing status: invoiced, billed, or paid.

—— In-depth Financial Center
—— In-depth Financial Center

Financial Overview & Bill Management: Provides access to bill entries, statements, and monthly reconciliations with real-time tax invoice viewing and download.


Reconciliation Request: Simplifies the reconciliation process with an easy-to-use submission and tracking system.

Comparison of Key Pages
Comparison of Key Pages

Shell MarketHub (left) vs Shell China MarketHub (right)

—— Shopping Cart
—— Shopping Cart
—— Delivery Information Input
—— Delivery Information Input
—— Order History
—— Order History
Design System
Design System
Design System
Design System

Color Palette

Shell Yellow

RGB #FBCE07

Night 600

RGB #336094

Ocean 400

RGB #0097BB

Shell Red

RGB #DD1D21

Forest 500

RGB #008557

Shell Yellow 10%

RGB #FFFAE6

Night 600 10%

RGB #EBEFF4

Ocean 400 10%

RGB #E5F5F8

Shell Red 10%

RGB #FCE8E9

Forest 500 10%

RGB #E5F3EE

Shell Black

RGB #404040

Shell Dark Grey

RGB #575756

Shell Mid Grey

RGB #878787

Shell Light Grey

RGB #B2B2B2

Shell Pale Grey

RGB #E3E3E3

Shell Very Pale Grey

RGB #F7F7F7

Heading 1

Main titles on homepage, use cautiously

Body Title

Page top-left title, card titles, nav bar, etc.

Body

Main page content, paragraph text.

Helper Text

guidance or clarification

Shell Font 28 Bold

Shell Font 28 Regular

Shell Font 20 Bold

Shell Font 20Medium

Shell Font 20 Regular

Shell Font 16 Bold

Shell Font 16 Medium

Shell Font 16 Regular

Shell Font 14 Bold

Shell Font 14 Medium

Shell Font 14 Regular

Shell Font 12 Bold

Shell Font 12 Medium

Shell Font 12 Regular

Heading 2

Card titles, paragraph titles, etc.

Typography

Buttons, tags & alerts

Primary

Button

Size

40, 44, 48

Disabled

Button

Button

Secondary

Button

Tag

Tag

Tag

Tag

Tag

Success message

Neutral message

Error message

Warning message

Business Value/ the result
Business Value/ the result

Improving Customer Experience


✓ Smart and intelligent search

✓ Easy ordering with fewer steps

✓ Sufficient information for customer to track through entire transaction flow

✓ Straightforward accounting information


Enriching Business CVP


✓ Real time delivery tracking

✓ Digital invoice visibility

✓ Product center promotion

✓ Bulk ordering

✓ Encourage customer buy more with pre pop out of surcharge fee notice

Improving Customer Experience


✓ Smart and intelligent search

✓ Easy ordering with fewer steps

✓ Sufficient information for customer to track through entire transaction flow

✓ Straightforward accounting information


Enriching Business CVP


✓ Real time delivery tracking

✓ Digital invoice visibility

✓ Product center promotion

✓ Bulk ordering

✓ Encourage customer buy more with pre pop out of surcharge fee notice

Improving Customer Experience


✓ Smart and intelligent search

✓ Easy ordering with fewer steps

✓ Sufficient information for customer to track through entire transaction flow

✓ Straightforward accounting information


Enriching Business CVP


✓ Real time delivery tracking

✓ Digital invoice visibility

✓ Product center promotion

✓ Bulk ordering

✓ Encourage customer buy more with pre pop out of surcharge fee notice

Improving Customer Experience


✓ Smart and intelligent search

✓ Easy ordering with fewer steps

✓ Sufficient information for customer to track through entire transaction flow

✓ Straightforward accounting information


Enriching Business CVP


✓ Real time delivery tracking

✓ Digital invoice visibility

✓ Product center promotion

✓ Bulk ordering

✓ Encourage customer buy more with pre pop out of surcharge fee notice

PORTFOLIO

CHECK OUT SOME MORE

CHECK OUT SOME MORE

Good Edu

Good Edu

Good Edu

View Project

View Project

View Project

View Project

View Project

View Project

UX Design

SaaS

B2B

Good Edu

Good Edu

Good Edu

View Project

View Project

View Project

View Project

View Project

View Project

UX Design

SaaS

B2B

Good Edu

Good Edu

Good Edu

View Project

View Project

View Project

View Project

View Project

View Project

Good Edu

Good Edu

Good Edu

View Project

View Project

View Project

View Project

View Project

View Project

UX Design

SaaS

B2B