Shell Brand 2.0

Once-in-a-Decade Brand Revamp: Fresh, Contemporary & Human

Shell’s Brand team engaged me to lead the redesign and consolidation of their web portfolio as part of their largest Brand Transformation in a decade, encompassing both digital and analog touchpoints globally.

As Lead Designer, I oversaw the design process in collaboration with project managers, brand advisors, and the IT team.
I initially conducted over 36 hours of interviews with colleagues across various locations, including Rio, Houston, and Manila, which drove a user-centric strategic shift.

As we moved to ideation and deliverables, I championed and ran extensive & iterative user testing on Shell’s primary sites: ‘Brand Central’ and ‘Creative Hub’.

The project’s launch resulted in a fresh contemporary and clear framework with a major overhaul in global communications, including their 150 + websites.

There was a notable increase in web traffic across both websites, in particular the ease of finding the toolkits and assets for projects.

Team

Olivier Cottin, Stuart Preece, Elia Aliberti, Hima Tandimeti, Benjamin Jones, 
Vaibhav Agraval

Skills

User Research & Testing
Data Analytics
Stakeholder Management
Advanced Prototyping
Product Design
Product Strategy
Design System
Visual Design

My Role

Lead Product Designer

Timeline

Nov 2021 - Feb 2023

Location

London HQ
Amsterdam & The Hague 

Unpacking the Design Process

Background

Shell’s digital ecosystem was burdened by a network of internal tools with overlapping purposes and convoluted workflows. This fragmentation resulted in inefficiencies and confusion among users, compounded by disparate technology frameworks and redundant content.

To address these challenges, I worked closely with the Brand team to analyze the ecosystem, focusing on the nature of the content and how it was structured. Through mapping the Information Architecture, we identified priorities that allowed us to simplify workflows and consolidate tools.

The process not only clarified the ecosystem but also fostered trust in design’s ability to streamline operations.

Leading the UX Roadmap

Building on the foundational analysis, I developed a comprehensive UX roadmap to guide Shell’s rebranding efforts. 

This roadmap addressed the complexity of collaborating with multiple stakeholders, including internal teams, external agencies, and Accenture for implementation.

Through clear phases and actionable milestones, the roadmap provided a structured approach for the Project Managers to outline more detailed handovers.

User Centric Usability Heatmap

As part of the interviews, I manually identified some relevant, quantifiable data to evaluate the level of user experience for each respective website.

The mapping not only provided a clear understanding of the pain points for each website but also highlighted how these challenges varied across different user roles.

Shifting to the User 

Throughout the project, I championed and led iterative user tesing, combined with Adobe Data Analytics - ensuring that the design was continuously refined based on real user-feedback.

This rigorous process resulted in

• A strategic shift towards user-centered design
• Simplified site navigations based on user needs
• Unpacking of the Brand Strategy

Simplifying workflows

One of the first achievements in developing the new Brand guidelines was simplifying the user journey. As a first step in the transformation journey, I led the team in simplifying and designing a central hub for key workflows:

1. Finding assets
2. Getting approvals - Guideline compliance approvals (e.g., licensing, brand compliance, and Shell logo usage)

I was repsonsible for user testing these very designs with the same users for the wider discovery and packaging the designs in a handover to Accenture.

Prototyping & User Testing

I took a hands-on approach, creating and testing multiple Brand Central prototypes with users like filmmakers, creative directors, brand advisors, and marketers.

The user testing focused on:

• Navigational improvements (coherence of the language, contrast, motion behaviour, hierarchy)
• Validating content and language on the Landing Page
• Gathering feedback on the new Brand Standards (logo, color, typography, downloadable content)

Brand Central Evolution

Taking a few snapshots of the journey, Brand Central started as a mash of visuals, a heavy reliance on custom built 'iframe' and very deep journeys to find some of the essentials.

The landing page and the respective navigation demonstrate the simplification based on user needs.

The heatmap showcases the unique visitors after launch from 14 April 2023 - 13 June 2023, with Brand Standards up 164% in usage.

Pivoting the Creative Hub

Collaborating on pain points

The Product owner of the Creative Hub, in consolidating the portfolio of thousands of assets that were important for launch - seeked guidance on how users could find it easier to use the filter.

In my approach, I analyzed the entire taxonomy based on User Testing (9 users) & Surveys where we received thousands of answers. All of this helped a clear design process where we prioritized the needs of the user (sequence) as well as introducing numbering (mental model).

Making it easier to filter

The Product owner of the Creative Hub, in consolidating the portfolio of thousands of assets that were important for launch - seeked guidance on how users could find it easier to use the filter.

In my approach, I analyzed the entire taxonomy based on User Testing (9 users) & Surveys where we received thousands of answers. All of this helped a clear design process where we prioritized the needs of the user (sequence) as well as introducing numbering (mental model).

Upturn in engagement

Following the launch, there was a remarkable increase in usage. While the introduction of new guidelines and assets played a role, the real success was evident in the ease with which users could navigate both sites.

The new architecture proved to be simpler, more straightforward, and highly intuitive.

Designs for Launch

With the New Brand Standards set for the launch in Spring of 2023, the websites were designed strongly with the user needs in mind, highlighting the essential Standards and setting a very clear framework for the purpose of the ecosystem of websites.

Other Projects

2022

Banxt ⟶

Enabling financial literacy in households

2020

S&P Global Platform ⟶

Centralizing Commodity Market Critical Data

2019

S&P Global Cflow ⟶

Analyzing Commodities at Sea.

2015

BBC News ⟶

Personalizing News to a Global Audience

2010

Future of the Book ⟶

Redefining the future of books for the digital age

Let's Connect

Email

Linkedin

Instagram

© VANDERSAULT 2024  |  LONDON