Shell MarketHub 2.0 Design System

I took charge of Shell’s $19 billion B2B e-commerce platform, leading the user interface design to enhance user experience and establish complete ownership of its design system.
Design system
Figma, Adobe CC

In the expansive world of e-commerce, delivering a smooth, user-friendly experience is paramount. Shell, a titan in the energy sector, recognised this as it sought to revolutionise its B2B e-commerce platform, MarketHub. The challenge? Redesign a platform responsible for £19B in annual revenue, catering to 35,000 customers across 156 countries in 29 languages. Enter the Shell MarketHub 2.0 Design System.

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

The journey to reinvention

Shell’s legacy MarketHub was a robust platform but had yet to undergo significant development in over a decade. The vision for the 2.0 design system wasn’t just about aesthetics or trending UI elements—it was about building a bridge between the brand’s legacy and the future, driven by the needs and behaviours of its vast user base.

Immersive Research - a deep dive into user behaviours and preferences commenced with a research team across six countries. We interacted with 140 customers and 90 internal staff, distilling insights that shaped the design system’s foundation.

A snapshot from my initial UI audit.

In revamping MarketHub 2.0, the challenge was to harmonise the modern e-commerce feel synonymous with giants like Amazon with Shell’s distinct brand essence. The result was a seamless merger of contemporary design and Shell’s legacy, creating an intuitive user interface.

A sticker sheet from the final design system.

Central to this transformation was a pioneering design system, elevating both efficiency and brand consistency in areas Shell had previously not ventured into in e-commerce. Furthermore, a staunch commitment to inclusivity was manifested by adhering to WCAG 2.1 accessibility guidelines, making the platform universally accessible.

Highlights & outcomes

  • Enhanced user experience: The cohesive look and feel of the platform elevated the user experience, making navigation and transactions seamless.
  • Increased efficiency: With the new design system in place, we significantly reduced the design-to-development handoff time, ensuring quicker, more consistent updates to the platform.
Some of the first e-commerce components—new territory for Shell.
  • Successful integration: All design deliverables were efficiently handed over to the development team, providing a harmonious integration into the platform.
  • Stakeholder management: Navigating the myriad stakeholders in a project of this magnitude was challenging. However, with transparency and regular updates, we ensured a smooth execution.
A close-up of final UI for the basket page.

Legacy of the design system

The redesigned MarketHub has begun its rollout to users across all 156 countries. By 2022, it's projected that all orders will transition to this new platform. Initial feedback has been overwhelmingly positive, with a notable uptick in user satisfaction scores.

A well-designed Salesforce integration.

Through the MarketHub 2.0 Design System, we didn’t just deliver a suite of design elements; we charted a course for Shell’s e-commerce future, ensuring adaptability, efficiency, and a user-centric focus. It stands as a testament to the power of design systems in large-scale digital transformation, reiterating the notion that design, when done right, can indeed 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.