$19 Billion E-commerce Transformation

Shell MarketHub is the $19b B2B e-commerce platform for businesses to interact with Shell and buy products and services. It was the 5th biggest e-commerce platform in the USA by annual revenue in 2020.

The scale

Shell MarketHub pockets more than $19 billion of revenue per year. This was generated through 100,000 orders from 35,000 customers. Those customers order from 156 countries, transacting in 29 languages. Big numbers. OK, let’s dig in.

My task

As the lead user interface designer, I was responsible for shaping the MarketHub e-commerce experience from scratch. Crafting a visual language and design system that balanced speed, adoption, brand input and prioritised accessibility. Our strong focus on the website as a customer-led proposition ensured all of my work was tested in flight.

Design system

In-house website design is relatively new to Shell. In fact, I was the first permanent design hire at Shell. Ever. Before my time there were many contractors (I was one too) and a roster of design agencies that would be called in for this work. Anyway. In-house website design is new. But also E-commerce design. How could I ensure we’re brand-compliant, accessible and scalable early on?

I kick-started a design system and e-commerce design language for Shell while crafting the new MarketHub experience. An analogy I constantly referred to—building the factory while we’re building the car. We had to craft the Shell MarketHub experience and its design language simultaneously.

A high-level view of the system and design language.

Product pack-shot guidelines

The original Shell MarketHub didn’t feature product images. This meant customers often had to read product titles many times and at times had to dedicate a lot of cognitive load to ensuring they’d picked the right products.

Adding product images to Shell MarketHub was no small task. I worked on a product image technical guide as a proof of concept on how we can capture product photography remotely and at scale. As a result, $300,000 of budget was unlocked to kickstart the product images capture using my guidelines. Teams in Germany, China, Egypt, Indonesia and more countries started to work with local agencies to capture images according to the guide.

Adding product images makes it exponentially quicker to find products.

Handover to developers

Frequently during the project, I would give demos of low-fidelity versions of processes. We would work off tickets in Jira, and once our screens were signed off by our product owner, we could transfer screens to a handover file—a single point of truth—and attach these screens as Figma links to the Jira tickets.

The new welcome screen, personalised by job role e.g., buyer.

Challenges

Working on a project of this scale brings many challenges. A typical day on the project saw constant battles between users, business and tech. Our adoption of a user-led approach meant we would always but our best design-forward, have it validated through testing and present the evidence to the product owner—including all input they need to make an informed decision.

Other challenges involved consistency across the designers. At any one time, there were 6 work-streams in progress, this meant our design team were constantly busy and at points, we would be designing similar things in tandem. To counter this, we had 2 weekly sessions where we would share work and review common components for the design system.

Our seamless Salesforce integration.

Current results

Today MarketHub is rolling out to 100% of users across all 156 countries. All orders will be completed on the new version of the platform from 2022 and the old MarketHub is being decommissioned through 2021.

  • $15 million of revenue enabled
  • 95% user uptake (migrating from old experience)
  • 8.6 customer satisfaction index (CSI) score, up from 8.1

Take a look at the before and after of the homepage: