Design as the driver of an energy transition
Repsol, Spain’s largest multi-energy company, was the first firm in its sector to commit to becoming carbon neutral by 2050. That ambition has put design at the center of the business. As Valero Marin, CIO/CDO, puts it: “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.”
The company did not have a digital design team three years ago. Now ten designers work to reshape how customers interact with energy, making Repsol one of the first European energy companies with an internal design team. To scale that work, they had to define design’s role at Repsol and build the tools and processes to support it, working with digital product agency Mendesaltaren on a design system in Figma.
“The energy transition will only happen if people stop seeing energy as a necessary evil, and start seeing themselves as change agents,” says Cristina Gonzalez Bermejo, Lead UX & Design Hub at Repsol. Her team’s mission is to make energy tangible and relatable.
Making energy visible
A recent project put that mission to work in an app for an electric car-sharing service. Drivers see how much energy they consume in real time and receive a rating that teaches them to drive more efficiently. The team also gave users a way to see where their power comes from. The app shows live feeds of the solar panels or windmills generating their electricity, in context of current weather—replacing the disconnected monthly bill with a direct, visual relationship to the energy source.
One Repsol, one design language
Repsol serves very different audiences: customers at the fuel pump, managers making energy choices for factories, and employees using internal tools to run oil rigs, refineries and supply chains safely. Despite those differences, the company wanted a unified approach. “There’s one Repsol, so there should be one unique design system,” says Cristina.
Before building one, the team realized the cost of fragmentation. “We were teaching users ten different interaction languages in ten different products,” explains design strategist Andra Oprișan.
The answer was the Oxygen design system, built in Figma with Mendesaltaren. Oxygen contains patterns, components, and interaction and developer guidelines. Its goal is twofold: to create cohesion across the Repsol digital ecosystem and to make product development more efficient by bridging design and technology teams.
Figma has become the hub for all Repsol design work, enabling rapid iteration with product owners, tech leads and executives. By working in parallel across internal and external teams, Repsol now runs more than 15 projects at once without sacrificing consistency, says Elena de Pomar, Product Owner of the Repsol Design System. That capability let the design team drop tools such as Sketch, InVision, and PowerPoint.
Quantifying the value of design
To measure the return on design work, Mendesaltaren created two plugins: Figmetrics, which tracks how components are used across Figma files, and MSVM by Mendesaltaren, which keeps design, product management, business, and technology teams aligned around a single source of truth.
The results are concrete. The new system and processes cut the work required for product implementation by 30%, simplifying decision-making while saving time and resources. “Repsol can now easily track how much money, time, and effort they’re saving,” says Jorge Lana, partner and CSO at Mendesaltaren.
