Shell MarketHub 2.0 Design System

I led the redesign of Shell’s $19 billion B2B e-commerce platform, focusing on improving user experience and creating a new design system.
2020
Design system
Figma, Adobe CC

Shell, a leading energy company, aimed to enhance the user experience of their B2B e-commerce platform, MarketHub. This platform, generating £19 billion annually, serves 35,000 customers across 156 countries in 29 languages. The task was to completely redesign MarketHub, leading to the creation of the Shell MarketHub 2.0 Design System.

The final PDP (product display page) shown here in Turkish.

The journey to reinvention

Shell’s old MarketHub platform was strong but hadn’t changed much in over ten years. The goal for the new design wasn’t just about making it look good—it was about connecting Shell's past with its future, based on what users need and want.

We started by researching user behaviours and preferences. Our team worked in six countries, talking to 140 customers and 90 internal staff. Their insights shaped the design system’s foundation.

A snapshot from my initial UI audit.

The challenge was to blend a modern e-commerce look, like Amazon, with Shell’s unique brand. The result was a new user interface that felt both up-to-date and true to Shell’s legacy.

A sticker sheet from the final design system.

A key part of this transformation was a new design system, which made the platform more efficient and consistent. We also made sure it was accessible to everyone by following WCAG 2.1 guidelines.

Highlights & outcomes

  • Enhanced user experience: The platform now looks and feels cohesive, making it easier to navigate and complete transactions.
  • Increased efficiency: The new design system sped up the design-to-development process, allowing for quicker, more consistent updates.
Some of the first e-commerce components—new territory for Shell.
  • Successful integration: All design elements were smoothly handed over to the development team, ensuring a seamless integration into the platform.
  • Stakeholder management: We kept many stakeholders informed with regular updates, ensuring the project ran smoothly.
A close-up of final UI for the basket page.

Legacy of the design system

The new MarketHub is rolling out to users in all 156 countries. By 2022, all orders will use this new platform. Early feedback is very positive, with users reporting higher satisfaction.

A well-designed Salesforce integration.

The MarketHub 2.0 Design System isn’t just a set of design elements—it’s a roadmap for Shell’s e-commerce future. It shows how powerful design can be in big digital transformations, proving that good design can change the world.

The new Shell MarketHub is responsive.

Ink Design System

Stepping up from an IC, I found the biggest impact I could have on Design Ops and the maturity of the design organisation was by applying my skills in design systems to lift the company’s quality bar

An Award-Winning Design Team

I transformed GoodNotes' design team into an engaged, connected, high-performing remote team of 11 world-class designers from 8 countries across 5 time zones.

Theft Insurance Flow Redesign

During some recent free time, I explored how the rental or hire industry could increase the sign-ups for theft or other insurance during checkout flows. Here's some of my thinking from a couple of hours.