How Repsol rethinks the way the world interacts with energy

In a world of climate change, many are focusing on how energy is created and consumed. Repsol, Spain’s largest multi-energy company, was the first company of its kind to commit to being carbon zero by 2050. Design was central to this shift.

"Design helps us create digital products adapted to the needs of our clients and employees. The impact is not in making things more beautiful, but in enabling Repsol to stay relevant and to fulfill the needs and expectations of our clients." says Valero Marin, CIO/CDO.

Three years ago, Repsol didn’t have a digital design team. Today, ten designers work to redefine how customers and consumers interact with energy, and they’re one of the first internal design teams at any European energy company. For these designers to be successful, the Repsol team needed to define the role design can play at Repsol and build the teams, tools, and processes necessary to make design scale.

Repsol partnered with Mendesaltaren, a digital product agency, to implement a design system in Figma. The result is not only a more collaborative and consistent approach to design, but also a measurable one. With this backdrop, designers at Repsol have begun to make energy more approachable for consumers.

“As designers at Repsol, our role is to move everyone into a new reality where energy is tangible and relatable,” says Cristina Gonzalez Bermejo, Lead UX & Design Hub, at Repsol.

Rethinking how consumers interact with energy

“The energy transition will only happen if people stop seeing energy as a necessary evil, and start seeing themselves as change agents,” Cristina says. “In that context, the role of design is key.”

The mission of Repsol’s design team is to humanize energy, make people care about it, and help individuals dedicate time to understanding how they can better consume energy. Recently, the team designed an app for an electric car-sharing service that shows consumers how much energy they use when they’re driving. Customers then received a rating based on how they drive, helping them understand how to drive more efficiently.

The team also wants to help make energy into something visual and relatable, so design is top of mind. The design team recently added functionality that shows where energy originates. In the app, a user can see in real-time the solar panels or windmills that generate their electricity, in context of the current weather conditions. In the past, a user would simply get a bill. Now they have the opportunity to visualize and interact with their energy.

A solid foundation

Repsol serves many different audiences: those at the gas pump, workers making energy decisions for a factory, and its own employees who use digital tools to make the operation of oil rigs, refineries, or supply chains safer and more efficient. “But,” as Cristina says, “there’s one Repsol, so there should be one unique design system.”

Design Strategist Andra Oprișan echoes that sentiment. “We realized that we were teaching users ten different interaction languages in ten different products.” Beyond simplifying the process, they needed to make it easier for people to adopt the tools they create. By partnering with Mendesaltaren and Figma, the team at Repsol built the Oxygen design system. In doing so, they cracked the code on creating one design experience for different products that serve different purposes for different audiences.

The main goal of Repsol’s Oxygen design system—which is built in Figma—is to create cohesion across the Repsol digital product ecosystem, while also making the product development process more efficient. Comprised of patterns, components, interaction design guidelines, and developer guidelines, it acts as the bridge between the technology team and design team.

Today, Figma sits at the center of all Repsol design projects and communications, from collaborating with peers to sharing work with the C-suite. By building in Figma, the team can rapidly iterate on ideas and get feedback from product owners, tech leads, and executives alike.

“Today, thanks to Figma, we are able to work in parallel on more than 15 projects, across different internal and external design teams, maintaining the consistency and quality of our design,” says Elena de Pomar, Product Owner of Repsol Design System. As a result, the design team replaced other tools like Sketch, Invision, and PowerPoint.

Measuring the success of design

Mendesaltaren helped develop two plugins, Figmetrics and MSVM by Mendesaltaren, to help Repsol understand the ROI of their design work. Figmetrics offers insight into how components are used in each Figma file, while the MSVM plugin allows the teams to stay connected and aligned with a single source of truth for different teams: design, product management, business and technology. The new design system and processes have enabled the team to iterate faster and reduce work required for product implementation by 30%. With these updates, they’ve saved time and resources, all while simplifying the decision-making process. "Thanks to the new design system and plugins implemented to track performance and versions, Repsol can now easily track how much money, time, and effort they’re saving ” says Jorge Lana, partner & CSO at Mendesaltaren.

As Repsol works towards becoming a net zero carbon company, time saved is time that can be used to change how the world thinks about energy.

Check out Repsol’s design system and Figma libraries to learn more.