bp's sustainable design system that prioritizes people and the planet

Amanda Pell

Jun 2023

While bp's history is rooted in oil and gas, the energy giant is in the midst of the biggest transformation in company history, turning itself from an International Oil Company (IOC) into an Integrated Energy Company (IEC). With ambitious goals like water positivity by 2035 and net zero emissions by 2050, the company has spent the past few years investing in major renewable projects like its EV charging network, bpPulse, and its solar development business, Lightsource bp.

The company's energy transformation isn't limited to its investments — it extends to its digital operations as well. In February 2020, the company brought on VP and Global Head of Design Roger Rohatgi, who has established a human experience design department, championed sustainable design thinking, and overseen the creation of bp's global design system, bpCore.

Today, bpCore contains over 2,000 reusable components with the potential to be used across over 200,000 interfaces, and the human experience design team includes hundreds of people across multiple continents. bp's commitment to environmental stewardship and sustainable design isn't just doing good for the planet — it's also raising the bar for the entire design industry, which is why bp is one of our 2023 Harmony Award winners.

Digital design's carbon footprint

When the world ran on paper documents, switching to digital was the eco-friendly thing to do. So today, many people don't realize that digital work can also generate a large carbon footprint.

Most of digital design's carbon emissions come from data transfer and storage via the cloud, which is powered by a network of data centers that generate billions of kilograms of CO2 each year. The more data you use in creating your designs, the greater your carbon footprint is.

Reduce, reuse, redesign

bp built its sustainable design framework around the concept of economic circularity, which is an approach to business in which products and resources are reused or renewed rather than discarded. The design system provides an organized collection of reusable components that can be used across interfaces, making the design process more efficient and the user experience more consistent.

"The bpCore design system strives to achieve digital circularity by eliminating waste – wasted time, wasted data usage, and wasted energy," says Rohatgi.

In Zeplin, the bpCore design system provides the entire bp product team with a single point of collaboration between designers and developers. It gives all of the stakeholders in any bp design project access to a library of every component, pattern, and element used across bp's digital platforms — plus the connected code for each. Designers save hours that might have been spent recreating components or hunting for elements buried in design files, and in doing so they save time, energy, and unnecessary emissions.

"Transforming ideas into digital experiences in a sustainable way requires substantial effort," says Rohatgi. "A well-crafted and thorough design system is a game-changer, significantly aiding our ability to create and innovate more sustainably."

Decarbonizing the user experience

Though bpCore cuts down on carbon emissions throughout the design process, the company's design methodology, called NetZeroUX, goes beyond the production cycle to bring sustainability to the actual user experience as well. The company describes this idea as "decarbonizing designs and designing for decarbonization."

Decarbonizing the user experience begins with moving from a user-centered approach to one that centers both the user and the environment. The happy path isn't just the one that's most efficient for the user — it's also the one that's most efficient for the planet.

A sustainable user experience is one that puts things in front of users at the right moment, reduces content-heavy experiences, offers sustainable shipping options, and provides ways for users to eliminate their own unnecessary waste. The Tribe app by Lightsource bp, for example, offers homeowners a convenient way to monitor and manage their energy consumption. And since it was built using bpCore, the app is sustainable in both its design and its operation.

Optimizing for energy conservation

bpCore works hand in hand with bp’s sustainable design website, with both being designed to conserve energy in their process. Components and images are optimized to keep file transfers small and reduce the data consumed by bp's digital products.

"Careful consideration was also made around how we build components including the way objects are rendered through three.js vs. traditional videos, saving energy by using a more efficient way to transmit media to users," says Gerald Miller, bp Global Director of Design Engineering and bpCore design system founder.

Using bpCore, the design team also rolled out bp’s first dark UI experiences, offering users a way to cut power consumption on their mobile devices as an example. On devices with OLED screens, dark mode can reduce energy consumption by reducing the amount of light generated by the display.

Enabling transformation through design

bp's approach goes beyond visual and interaction design to put humans at the center of everything the company does, all while utilizing the right tools and methods to deliver products and experiences as efficiently as possible. Through human experience design, bphxd designers are driving real, meaningful change and helping bring the company closer to its net zero goals. They're supporting sustainable business operations, exploring new ways to solve energy challenges, driving digital circularity and living design best practices every day — all in support of bp's goal to reimagine energy for people and the planet.

We're thrilled to award bp for the amazing example they're setting with their bpCore design system. By adopting sustainable design principles, reusing and recycling components, and cutting down on digital waste, we can all help create a healthier, more sustainable world.