Piloting Shell’s new digital brand experience

Shell pilot website

Today sees the launch of the new website, the first site to be built using the new responsive and modular design system, created collaboratively by Shell, Radley Yeldar and Shell’s technical build team.

Our journey to this point began in mid 2013, when we were asked to help Shell realise their ambition of becoming ‘the most innovative energy company in the field of digital‘. To ensure we set the right course from the start, a research and consultancy project was run to agree and set the digital direction for all the work that has since followed.

Shared principles
Our guiding principles focused upon team collaboration, open dialogue, a commitment to independently testing with users and working in a more agile, prototype-driven way. The ethos was always to think broad, so we could capture the breadth of requirements for our information architecture, templates and components, before ‘proving’ our ideas via a ‘pilot site’. That pilot site was Shell UK and it went live in beta today.

Getting governance right
With a company as large as Shell, this project was always going to be as much about engaging Shell stakeholders in the process, as designing a responsive, user-centred brand experience. At a project team level, we created collaborative Shell and RY workgroups focusing on specific needs and questions around InsightsContentUser ExperienceVisual identity and Technology.

Regular cross-working group meetings were scheduled to discuss key issues and to align our thinking. While meetings with identified Shell lines of business and the Shell Brands International team, ensured that we were created an experience that was on-brand, and a system that worked for the businesses and their content creators’ needs.

An experience guided by users and top tasks
The Shell team was committed to user testing throughout the project and wanted the site to be built around audiences’ top tasks. Top tasks were identified from user research in the form of a survey and analytics data. These tasks have guided both the information architecture and the design toolkit that has been created. The user testing scripts were also informed by top tasks, with the four sessions of independent user testing helping us to refine the experience.

Design was rapid and collaborative, with the user experience, interface, design, content and project management teams sitting together to solve problems and push the bounds of the design further. We moved PSD designs into an interactive prototype as early as possible, to explore the responsive behaviour of the components across devices. Our prototype was tested in the user research sessions and also acted as a reference point for Shell’s technical team, when building the site.

And there’s more to come
We are currently working on rolling this design system out to other Shell websites. Testing, learning and iteratively improving as we go with both users and Shell content creators. Feedback continues to be welcomed on the Shell UK beta site, as improving the customer experience is an ongoing process, do let Shell know what you think via their social channels or the on-site survey.

Richard Coope, Digital Director at Radley Yeldar, on behalf of the whole RY team, comments. “Working with Shell is one of those once in a lifetime digital projects. A project that gave us permission to challenge and push ourselves further and further, while keeping everything firmly rooted in audience needs. Our partnership with Shell has been refreshing and exciting. Together, we’ve created a responsive digital toolkit that enables Shell to present content in new and dynamic ways. We are looking forward to the next phases of our work with Shell.”

Shell is encouraging feedback on its beta site via the feedback form on-site or its social channels, in order to improve the experience for its customers.

You can find out more about the project via the links below.

Website project overview (on the Shell website)

The site itself – visit


Top! Copyright © 2017 João Vera-Cruz
Social Links: