Shell MarketHub 2.0 Design System

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 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.

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.

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.

• 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.

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.

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.