Elevating the Digital Product of Leaders in Energy Efficiency

Effic

Effic is a leader in energy rehabilitation projects for the Spanish residential real estate sector. It helps homeowner communities modernize, increase the value of, and make their homes sustainable by improving the energy efficiency of their properties, managing the entire process: from energy study and financing to aid management, certification, and execution of renovations. Its leadership has been recognized by the Urban Land Institute with the PropTech Innovation Challenge 2023 and by The World-Class District Awards as the real estate project with the greatest ESG impact of 2022.

With this established trajectory in the residential segment, Effic faced a new challenge: bringing its value proposition to the B2B field, targeting industrial warehouses, shopping centers, and retail spaces that need large-scale energy rehabilitation.

The challenge: financial rigor with big tech codes

The goal went beyond a simple aesthetic redesign. We sought a deep brand repositioning that would elevate Effic from a residential and end-consumer focus to a rigorous, serious, and reliable professional B2B environment.

To achieve this, we projected the solidity and economic volume typical of the financial sector using contemporary visual codes inspired by large tech corporations. With this approach, we immediately conveyed the reliability needed to discuss energy rehabilitation of large industrial warehouses, shopping centers, and retail spaces with the appropriate interlocutors.

The process

We eliminated filler dummy content from day one. The client interacted from the first session with real and contextualized value propositions.

This required us to assimilate and fluently use a complex technical language about energy efficiency and sustainability that usually requires months of induction. The result positively impacted Effic's management committee from the first presentations: the content fit their business model from minute one.

From static screens to a real prototype for mobile testing

We replaced traditional design demonstrations, with static captures and limited prototypes, with a real and fully animated website, deployed on interactive servers.

We delivered a functional prototype that could be opened directly on a mobile device to experience the animations, transitions, and real flows. For such a demanding client, this represented a paradigm shift that drastically accelerated understanding of the final product, feedback management, and decision-making.

Instead of wasting time statically designing dozens of internal pages, we jumped directly to assisted development tools (Claude Code and Claude Design) to build, animate, and iterate the real website on a functional prototype, based on the design principles we were defining.

From sketch in Figma to real code with AI

The process was not a straight line. We started in Figma "old school" to capture the first ideas, visual styles, and sketches.

Rigorous and flexible Design System

AI helped us create a robust design system aligned with the strictest industry standards.

Guided by artificial intelligence, we structured a Design System in Figma under the Shadcn structure, implementing variables, tokens, and complex components that follow the best practices of established systems like Material Design.

AI complements us in creating the Design System. It helps us in implementing the most tedious tasks of a rigorous design system, such as defining all variables and tokens, and creating the relationship and hierarchies between the most complex components. This accelerates the process and allows us to build with maximum rigor, focusing where it really matters: creativity and experience. The technical part of the design system is precisely where AI supports us.

Results

• Brand repositioning from residential to B2B, with big tech visual codes that convey financial reliability.
• Real and contextualized content from day one, validated by the management committee from the first presentations.
• Functional prototype in Vercel, which accelerated decision-making and feedback management.
• Direct leap from sketches in Figma to real code with AI, iterating the functional website without wasting time on static pages.
• Design System with variables, tokens, and components aligned with the Shadcn standard.

Do you need to elevate your digital ecosystem with quality, rigor, and the speed provided by AI?

At Runroom, we combine brand strategy, design, and AI-assisted development to shorten the path between the idea and the real product. If this is what you need for your project, let's talk!