Digital transformation of a $19B e-commerce platform

Shell MarketHub, a $19B B2B e-commerce site, had a considerable task when investing in a customer-centred digital overhaul. With 100k monthly orders, we faced an enormous challenge.
2020
Shell MarketHub
Figma, Adobe CC

Shell MarketHub, a £19B B2B e-commerce platform, was due for a customer-focused digital transformation after 13 years of minimal development. The platform was responsible for £19B in annual revenue and 100k monthly orders and catered to 35k customers across 156 countries in 29 languages. The challenge was to create a user experience comparable to B2C e-commerce giants like Amazon while maintaining Shell's £85m brand value and adhering to WCAG 2.1 accessibility guidelines.

Key achievements

  • Successfully developed a cohesive look and feel for the platform, enhancing the user experience
  • Established a robust design system, streamlining design processes and increasing efficiency
  • Managed a team of designers while maintaining strong communication and fostering collaboration
  • Demonstrated expertise in stakeholder management, ensuring smooth project execution
  • Co-wrote user stories and conducted accessibility testing to meet WCAG 2.1 guidelines
  • Efficiently handed over project deliverables to the development team for seamless integration

Strategy and execution

Initial research and collaboration

After the discovery and research phase, I joined the Shell MarketHub project, during which the team conducted research in six countries. We interviewed 140 customers and 90 internal staff to understand the customers' challenges and needs, which informed our personas. The research also revealed cultural nuances that would influence the e-commerce experience.

User interface design

As the lead user interface designer, my primary responsibility was to shape the MarketHub look and feel from scratch while working within the constraints of Shell Brand guidelines and the platform's capabilities. I collaborated with two user interface designers to transform wireframes from the UX team into buildable screens and flows.

A close-up of final UI for the basket page.

Design system and e-commerce language development

In parallel with the UI work, I initiated and developed a design system and e-commerce language for Shell MarketHub. The goals were to expedite our output, maintain cohesion, and reduce back-and-forth communication. To ensure brand consistency and approval, I created a design system that covered necessary states and ventured into new territory for Shell Brand, which had yet to explore e-commerce.

A snapshot from my initial UI audit.
Some of the first e-commerce components—new territory for Shell.
A sticker sheet from the final design system.

Brand approvals and product images

Working with Shell Brand, we gained approval for a set of type styles and colours used throughout the project. I also developed a product image technical guide that helped teams across various countries capture product photography remotely and at scale. This effort led to unlocking a budget of £300,000 for consistent and clear product images, significantly improving the user experience.

My product image technical guide produced in Pages and exported as PDF for maximum shareability.

Handover and ongoing collaboration

Throughout the project, I provided demos of drafts and finished versions of processes to ensure smooth handovers to the development team. We used Jira and Figma to manage our workflow, and I made sure all files were public, promoting an open-door policy that contributed to our efficient progress.

As the lead user interface (digital) designer, I worked closely with service and user experience designers, front and back-end developers, and product team members. We managed relationships with third-party suppliers and vendors to ensure seamless integration of our solutions with mandatory tools and processes.

To keep everyone on the same page, I made sure I was frequently sharing the open links to Figma projects so anyone could come in and see the latest version of the screens—we had special approval from Shell IT to allow vendors access to our Figma workspaces. To go the extra mile, I ran short 10 minutes onboarding calls with anyone unfamiliar with design tools so they could confidently navigate my files inside Figma.

The new Shell MarketHub is responsive.

Results and impact

The revamped MarketHub is rolling out to 100% of users across all 156 countries. By 2022, all orders will be completed on the new platform, and the old MarketHub will be decommissioned.

The transformation has enabled over £15 million in revenue and resulted in a remarkable 95% user uptake, with an impressive customer satisfaction index score of 8.6, up from 8.1.

The new self-service support integration with Salesforce.

Ongoing impact

Through my work on the MarketHub project, I developed a design system and e-commerce design language that revolutionised the platform's usability, accessibility, and brand compliance. This new design direction has forged a new path for e-commerce at Shell and significantly impacted both the business and its users.

Key takeaways and skills

This extensive project provided valuable experience in the following:

  • Leading and managing a diverse team of designers across different time zones
  • Developing a design system from scratch and ensuring brand compliance
  • Navigating complex stakeholder relationships and gaining necessary approvals
  • Overcoming challenges in communication, collaboration, and remote work
  • Ensuring accessibility by adhering to WCAG 2.1 guidelines
  • Successfully transforming a large-scale e-commerce platform with a customer-centric approach
The final PDP (product display page) shown here in Turkish.

The success of this project demonstrates my ability to deliver impactful design solutions while managing various stakeholders, collaborating with remote teams, and adhering to stringent brand and accessibility guidelines.

More case studies

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.
Take a look

GoodNotes Design Leadership

Supporting 12 designers to define the future of digital paper, bring high-quality study notes to every student, and tell the world about GoodNotes. Led development of the "Ink" design system.
Take a look

Honey Design System

Honey is a design system for Hive Home, a smart home company based in the UK. I led Hive’s first design system to streamline the design process and user experience with beautiful UI and cohesive journeys.
Take a look

LubePro Global

The LubePro app had issues that made it awkward for technical advisors to capture and analyse data during site visits. They found it quicker to use a notepad and their iPhone camera.
Take a look

Global Traceability Platform

Shell faced a three-month deadline to achieve full traceability for their lubricant products across bottles, cartons, and pallets in multiple locations worldwide. As the lead user interface designer, I collaborated with a user experience designer to map out essential business movements and streamline workflows.
Take a look