Shell MarketHub is the $19b B2B e-commerce platform for businesses to interact with Shell and buy products and services. It’s the 5th biggest e-commerce platform in the USA by annual revenue in 2020.
Just before we get into things it’s important to understand the scale of this project — rarely will I work on something so big.
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!
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.
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 rooster 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.
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.
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.
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.
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: