🌍 Shell (Global) MarketHub
supported lubricant ordering worldwide but was not aligned with Chinese business practices.
🇨🇳 Shell China MarketHub
I was tasked to help create a localized B2B eCommerce platform that better serves Chinese customers and streamlines Shell China's order-to cash processes.
Our team had business analysts, designers, and IT architects.
Insights flowed from customers through business analysts to designers, were validated with our IT architect, and refined through continuous client feedback.
Content below is under NDA, please contact me for full access!
Key Design Decisions
Decision:
partial checkout is not allowed.
Rationale:
User: Users don’t “browse and pick” in the cart like B2C shoppers. They have clear purchase order form.
Technical: recalculation largely slows the system
Business: prevent revealing pricing logic
Decision:
Progressive disclosure for complex data
Rationale:
Preventing information overload
No unnecessary system slow down
Decision:
Show contract items by ship-to address.
Rationale:
Recognition over recall - users struggled to recall contracts applied a delivery address.
Less customer service needed due to greater transparency
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.
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.
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.
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
