Digital transformation of a $19B e-commerce platform

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.

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.

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.

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.

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.

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