Shell Energy Website

* Please be aware this page is not linked on the main home page

Tasks
UX, UI, Research, Web design, Stakeholder management

Team
Product Designer, Researcher, Product Manager, Software engineers x2

Time
Aug 2022 – May 2023

At a time when energy prices are very high and rising, customers also have a great desire to reduce both bill costs and their environmental impact, and they want guidance on how to to do this. As part of Shell’s target to Net Zero, they need to get users to consume energy in a more efficient way.

The end product is a consumer facing web platform that provides consumers with information to understand cleaner & more efficient energy for their homes.

The challenge

There is alot of anxieties around energy bills due to the current climate. Customers are keen to reduce their energy usage, but want more guidance around the impact of their habits. Customers are also interested in technologies that can help them reach their goals, however new technologies such as Solar Panels can be daunting, especially with such large upfront costs.

The goal

Our goal was to create an information web platform that provides consumers with information and acts as a gateway for users to purchase clean energy products from Shell’s portfolio.

Kick off workshop

A detailed presentation with multiple slides discussing Shell's energy transition, market opportunities, company values, and strategic planning for sustainability and customer engagement.

We started the project by planning and conducting a kick-off workshop with all stakeholders involved. This allowed us to be aligned with the problem we’re solving and the goals we want to reach.

This also allowed different stakeholders to share information on their area of expertise

Blue sky ideation task to allow for ‘out of the box’ ideas

A presentation slide titled "Blue sky thinking..." with a diagram of a box labeled "The Box" at the center, surrounded by four sections: "Precautions of use," "Slogan," "Instructions," and "Promises." The right side of the slide contains text discussing innovation, problem-solving, and product features, with emphasis on considering various aspects like product name, slogan, features, benefits, price, imagery, colors, sizes, and proportions.
Six images of handwritten posters and notes about energy and sustainability. Top left features a poster titled 'Fit Energy Kit' with colorful text and sticky notes. Top center shows a pink sticky note and a green sticky note with information about energy coaching. Top right displays a poster titled 'Free Your Energy' with green, blue, and red handwriting, plus a red paper heart. Bottom left contains a white paper with black and green handwriting about the energy business. Bottom center showcases a hand-drawn map illustrating steps toward a better energy future with green dots and notes. Bottom right is an image of a wrapped package with a small part of a red object visible at the bottom, and a copyright tag in blue.

Personas

Using marketing segments as a starting point for user recruitment, we conducted thorough research to have a clear understanding of our personas and their energy management goals.

Comparison infographic with three sections, each featuring a photo of different family groups at the top and bullet points below. The sections are titled 'Ambitious Explorers', 'Proud Home Managers', and 'Cautious Followers'. Each section lists a bio, pains, and goals related to energy use, technology, and sustainability.

Information seeking journey

Information seeking journeyThe information seeking journey is the process in which users seek out relevant information and the type of information they require in order to convert and make a purchase. Each persona type had a distinct way of researching, which varied from.

We created an experience map for each persona. MApping out the journey from awareness and consideration, to conversion and retention.

A detailed flowchart labeled 'COMPASS EXPERIENCE MAP' outlining the customer journey from needs identification to end of lifecycle, with sections for actions, emotional states, pain points, motivations, needs, and touchpoints.

Problem framing workshop

Using the qualitative research we conducted a problem framing workshop with stakeholders, to help define and narrow down the problem statements we will be solving for.

An infographic illustrating a process for identifying core problems and desired outcomes in a strategic planning session. It includes sections on constraints, opportunities, basic needs, and desired results, with colorful sticky notes and text highlighting key themes like internal challenges, data tech fragmentation, customer perception, and behavioral change.

This resulted in clear problem statements to design for, along with HMW statements.

A collection of blue and pink sticky notes with handwritten text discussing user knowledge, engagement, and content strategy in digital marketing.

Design concept

To create a home landing page that progressively loaded information in a simplified way, and introduce the concept of Net zero without overwhelming users. There would also be an introduction to small ways users can upgrade their home with technology. The final CTA would be to contact the Clean Energy experts, who are agents
Each product page would outline the benefits of the product, alog with costs and interesting data about the product. There would also be an FAQ section which would surface information that users commonly seek for each product.

A website sitemap diagram for a company called Net Zero. It includes sections for the home page, product navigation, low entry products, large products, contact energy experts, and grants and funding. Subcategories listed include smart home products, insulation, solar panels, EV charging, and regional grants and funding details for England, Scotland, and Wales.

User testing

We created low fidelity designs and conducted qualitative user tests with different persona types, to validate the concept and the information we were providing. We itterated designs based on feedback. The main feedback was for us to insure we has adequate information around price and data, as this is what users found most helpful.

Final designs

A fully responsive web platform using Shell Energy’s design system and creating new components. After multiple rounds of user testing and feedback we launched the new information hub to a controlled number of users to test it externally. This was slowly rolled out as part of a larger campaign.

Screenshot of a website promoting cleaner energy choices, showing a family inside a tent made of blankets reading a tablet, with text about energy savings, solar energy, EV charging, and home improvements.
Web page displaying solar panels on a house roof and promoting smart home energy products.
A webpage about electric vehicle (EV) charging with images of a child, wind turbines, a hand holding a phone near a kettle, and people relaxing on a sofa, showcasing EV benefits and tips.

Please be aware this page is not linked on the main home page