Shell MarketHub 2.0

Digital transformation of a $19B e-commerce platform

Role

User Interface Design Lead

Date

2020

Timeline

2 years

Tools

Figma, Adobe CC

The challenge

After almost 13 years of little to no development, Shell were ready to invest into a customer-focused digital transformation of their $19B B2B e-commerce platform. With $19B in annual revenue, 100k monthly orders, 35k customers in 156 countries, and 29 languages to support, it was a monumental challenge.

Many of Shell MarketHub's users were benchmarking their experience against that of B2C e-commerce — consider Amazon with their slick journeys and next day shipping. I was responsible for developing the platform's look and feel while staying within the limits of Shell's priceless ($85m!) brand and adhering to WCAG 2.1 accessibility.

Role and responsibilities

  • User interface design lead
  • Champion and lead design system
  • Managing other designers
  • Stakeholder management
  • Co-writing user stories
  • Accessibility testing/checks (WCAG 2.1)
  • Handover to development team and QA
A new Salesforce integration that fits beautifully into the design language.

What did I do

As the lead user interface designer, I was given the main responsibility of shaping the MarketHub look and feel from scratch. I was only limited by Shell Brand. And the platform. And rigid business-related journeys that were Shell-specific.

Getting started

I was drafted into Shell MarketHub shortly after discovery and research, and the team had already conducted research in 6 countries.

140 customers and 90 internal staff were spoken to over the course of the project. The research helped us truly understand the challenges and needs of our customers and were the basis of our personas.

Even though we made an effort, there is always room for improvement in terms of cultural understanding; for example, in an e-commerce experience, certain colours or designs may have different meanings in different countries and cultures.

To hit the ground running, I worked with a team of two user interface designers to transform wireframes from the UX team into buildable screens and flows.

User interface design

The core part of my role was to define the interface of MarketHub. This included creating screens and journeys that satisfied our users, the business, and the technology stack behind it.

Unlike typical e-commerce, Shell has journeys that best mirror internal business structures for purchasing. I had to first understand how Shell worked today before applying my design skills.

The project was split into 6 main sections; I was responsible for 3 of them and worked closely with UX designers that developed and handed over wireframes.

To help with the approvals process (Shell Brand), I decided it was best to form a design system in parallel with our UI work to maximise our output and enable rapid prototyping.

An all-new e-commerce basket page with an experience similar to that of B2C.

Design System

I initiated a design system and e-commerce design language for Shell while designing the new MarketHub experience. The goals for the system were to help us ship faster, with better cohesion, and with less back and forth.

Valued at $85m, Shell's brand is carefully protected. I knew early that I'd need approval at many stages of the project to continue and ship to Shell's customers. Inside Shell, if the brand team reject your work, you can't continue until it's approved.

I created a design system that covered states we'd need and forged new territory for Shell Brand, which had previously not ventured into e-commerce.

By reviewing the atomic states (colour, type, iconography, etc.) and building a strong professional relationship, we could approve well into the future, covering scenarios we didn't yet need to maintain consistency across this huge piece of work.

Brand approvals

The system was relatively straightforward. Arial for type. Shell Font (a modified version of Futura) for some headings. A humble palette of brand-approved colours.

Quickly we ran into issues: it's not easy working with only red or yellow for a CTA. And we weren't sure what we'd need ahead of time — we needed to break things down further.

The palette we were approved to use (excluding greys).

With a solid set of type styles (responsive type for web) and the colours approved by Shell Brand, we started to mock a few components. Dialogues, tags, alerts, inputs, buttons.

A spread of the 22 components in the SMH Design System.

Shell Brand felt we'd captured the look and feel they'd expected well, and they were OK for us to continue so long as we built using what they'd already approved. Winner!

Product images

An issue with the original MarketHub was the lack of product images. Without a visual, it was difficult for customers to find desired products. And when they could only order by manually entering product codes or SKUs, there was naturally a high error rate.

To address this and gather fantastic-looking imagery, I developed a product image technical guide that outlined how to capture product photography remotely and at scale (during a pandemic).

The product image technical guide helped teams in various countries to unlock a budget of $300,000 and capture product images according to the guidelines. This provided users with clear and consistent product images that made it easier than ever to identify the desired products.

At one point, I was communicating with local teams in 13 regions and their photography teams to capture product imagery that was up to spec. Sometimes even live during the shoots.

Pack shot requirements document.

Handover to developers

At multiple points throughout the project, I would give demos of drafts and finished versions of processes. We kept prototypes light and split them by journeys so we could be agile and work remotely at every hour around the world.

We would work off our tickets in Jira, and once our screens were signed off by the product owner, we would then transfer our screens to a handover file and attach these screens to the Jira tickets with Atlassian's Figma integration.

I managed our Figma workspace and made sure every file was public, and requested no one work from their drafts. I credit our great pace on this project to the open-door (and open Figma) policy.

Challenges

Considering our customer-led approach, we would always put our best design forward, have it validated through testing, and present the evidence to the product owner, who should have all the input they need to make an informed decision.

At any one time, there were 6 work streams being designed, which meant our design team was constantly busy. At times, we would be designing similar things in tandem.

To prevent reworked designs or conflicting directions, we had two weekly sessions where we would share work and common components.

Leading two designers that were both based in India meant I couldn't always be around to support them. It was imperative we maintained healthy lines of communication and shared goals. I prioritised people, purpose and process, and we found common ground to continue moving quickly and confidently.

Results

Currently, 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 enabled $15 million+ in revenue and resulted in a staggering 95% user uptake and an impressive 8.6 customer satisfaction index score, an improvement from 8.1.

$15M revenue enabled, 95% user uptake, 8.6 CSI from 8.1.

The final design Shell MarketHub product display page (PDP) in Turkish — one of 29 languages.

Today in MarketHub

Through my work on the MarketHub project, I was able to develop a design system and e-commerce design language that revolutionised the platform's usability, accessibility, and brand compliance. And forged a new path for e-commerce at Shell.

The customer-centred approach resulted in a successful platform that has had a significant impact on the business and its users.

But wait, there's more...

Read another case study

Shell GTP

Traceability on bottles, cartons, pallets
UI, UX, B2B

Shell Lubricants

Site assessment tool for field advisors
UI, UX, B2B

Hive Home

Design system for a smart home co
UI, UX, Design System