Who are they and what was my role

What do they do?

Kaluza, being the sister company of OVO Energy, reached out to me to develop their pre-sales design systems. The primary objective was to craft a design system that empowers the pre-sales team to swiftly and efficiently white-label their product, minimising the need for continuous product design involvement.

Great work – This is really clean and does the job. Can you teach the rest of the design team in the next PD Hive how to use variables?

The foundations

When tasked with building a design system, I was given the freedom to explore and experiment with the best approach. The first concept that struck me was the use of tokens. Could I tokenize each component to align with various brands? The answer, of course, was yes. My second thought led me to Token studios, but since Figma had recently introduced variables, I decided to give them a shot.

Flex Figma variable setup

Moving forward, I ventured into creating string variables, allowing specific text to change based on the selected brand, such as brand names within the apps (in specific locations only). This significantly reduced the need for manual edits. Subsequently, I devised a method to localise certain components based on the brand, for instance, displaying pounds and a UK map on the Kaluza app and euros with a Dutch map on the OnePower app—automatically, without manual adjustments.

Flex Figma variable setup

As I delved deeper into the process, I realised the potential for automation across the entire app. This included logos, border radius, image styling, and more. The possibilities became extensive, resulting in the creation of two powerful and almost entirely automated design systems. To address certain elements more efficiently, I found that using Figma’s find and replace feature was easier than manually updating strings during the creation of each brand, considering the time sensitivity of the turnaround times.

Flex Figma variable setup

Umm okay JC!! How the f**k did you manage to collect a variable to a component. Can we have a sessions where I can learn how to do this so I can apply to Nebula (Design system), in fact can you rebuild Nebula for me.

Flex

Flex is an intelligent charging app designed for Electric Vehicles (EVs), allowing users to charge their EVs using energy from the grid when it is most cost-effective. The app is typically licensed by large organisations, enabling their clients to make use of its functionalities.

Variable mode 1

Variable mode 2

Variable mode 3

Flex brand swapping video

Flex variable showcase

Retail

The Kaluza retail product, as implied by its name, is focused on retail. It is sold to clients with the aim of assisting their users in effectively managing energy consumption. Much like Flex, the objective was to develop a white-labeled system, allowing the pre-sales team to seamlessly switch between brands or establish new ones with minimal effort.

Retail variable setup

Retail Mode 1

Retail Mode 2

Retail Mode 3

What did the team think?

The upshot is that the pre-sales team can now manage things independently without the need for design resources. In the past, rebranding each product used to take half a day, but with the new system, demo assets can be created in less than 25 minutes each. The resales team no longer spends hours checking if localisations and brand nuances have been successfully changed, as they are aware that it now happens automatically. All of the above releases pre-sales time to concentrate on sales pitches, RFIs, and more.

Since we started using variables we have saved the pre-sales team over 100 hours in the last 4 months. This file have also helped  Kaluza to win 1M in business.

After the success of this file, I started converting all Pre-sales Figma files to  use variables instead of styles. As a team we also decided to have 3 collections brand, copy and localisation assets. So we have match any brand to any country, for example if the Kaluza brand was selected  we could show it in English, Spanish, Japanese and should also should have the currency shown in Pound, Dollar, Euro or Yen without any work needed, just by clicking the brand, currency or language from the variable selection dropdown.