A new display ad workflow and Figma plugin created for Wise by myself and developer Henrique Gusso.
YEAR
2023
ROLE
Project Lead
SKILLS
Creative process
Strategy
About the project
I built out a new workflow and worked with a developer to build a brand new internal plugin that would solve the localisation issues we were having in house at Wise with display ads. Wise is a global company and the goal within our team was to design locally, rather than amend English creatives. However, the tools we were using at Wise were very restrictive and weren’t allowing us to produce assets efficiently enough for local markets.
The Problem
The main tool we used to create HTML display ads was Celtra, however this tool was too inefficient for a number of reasons. It was slowing designers down as it was very buggy and the tool wasn't intuitive enough, causing the output of the design quality to be quite low and not to the standard we want.
Due to the large volume of sizes and variations required, the time it took to build these display ads was far too long.
It was very difficult to preview the display ads, making the QA process extremely difficult for stakeholders and creative managers.
Localising display ads in Celtra was equally as difficult. Each language and market sometimes requires a different layout, a different type treatment, line breaks etc. however this was not possible, meaning we had to create a one-size fits all solution, resulting in poor design for certain markets.
The Approach
I looked at other display ad tools but found they were all similar and equally as expensive. Figma is the crown jewel of the design industry right now and designers wanted to use this for everything, but display in Figma is not possible. So I sought to figure this out.
I reached out to our internal developer Henrique Gusso and had many discussions around possibilites and ways to potentially use Figma as a html display tool. Henrique went away and started experimenting with building a plugin that could utilise Figma's prototype animation feature.
The problem was that Wise produces thousands of HTML display ads every month and they're an essential part of Wise's marketing, this meant that the new solution had to be iron-clad.
Together we tested different variants of the plugin ensuring it could produce what we needed it to
As well as being able to animate, we had to build an export feature so these animations could be a HTML5 display file, a functionality which Figma doesn't offer
The second problem was: how do we localise these HTML assets in Figma? I worked with the localisation team to research and discover the issues they have encountered with Celtra and how we could be more efficient.
As the localisation team used Crowdin for their translations, I looked at the plugin they had for Figma which allowed the team to automatically send strings into the designs in Figma
I set up templates in Figma that would would replicate the display ad formats that are required
These templates would link together the two plugins, the new one Chef that was being created to animate & export html, and the Crowdin plugin that would pull in translations
A new workflow was born
With the two plugins together the new display ad workflow was born. A plugin created which would allow designers to use Figma to design, animate and export HTML5 creative. A plugin to pull in translations directly from the translators. A much faster, intuitive and better experience for designers to create HTML5 ads. And more importantly giving us full control over designing for localised markets.
The impact
By creating this in-house workflow we saved the company around £50,000 a year by creating our own in-house workflow
This workflow helped designers feel more motivated and excited to create display ads
We were able to produce stronger localised creatives in new important markets that would help boost the company's growth
Smooth Scroll
This will hide itself!
This will hide itself!
Display Plugin & Workflow
OVERVIEW
A new display ad workflow and Figma plugin created for Wise by myself and developer Henrique Gusso.
YEAR
2023
ROLE
Project Lead
SKILLS
Creative process
Strategy
About the project
I built out a new workflow and worked with a developer to build a brand new internal plugin that would solve the localisation issues we were having in house at Wise with display ads. Wise is a global company and the goal within our team was to design locally, rather than amend English creatives. However, the tools we were using at Wise were very restrictive and weren’t allowing us to produce assets efficiently enough for local markets.
The Problem
The main tool we used to create HTML display ads was Celtra, however this tool was too inefficient for a number of reasons. It was slowing designers down as it was very buggy and the tool wasn't intuitive enough, causing the output of the design quality to be quite low and not to the standard we want.
Due to the large volume of sizes and variations required, the time it took to build these display ads was far too long.
It was very difficult to preview the display ads, making the QA process extremely difficult for stakeholders and creative managers.
Localising display ads in Celtra was equally as difficult. Each language and market sometimes requires a different layout, a different type treatment, line breaks etc. however this was not possible, meaning we had to create a one-size fits all solution, resulting in poor design for certain markets.
The Approach
I looked at other display ad tools but found they were all similar and equally as expensive. Figma is the crown jewel of the design industry right now and designers wanted to use this for everything, but display in Figma is not possible. So I sought to figure this out.
I reached out to our internal developer Henrique Gusso and had many discussions around possibilites and ways to potentially use Figma as a html display tool. Henrique went away and started experimenting with building a plugin that could utilise Figma's prototype animation feature.
The problem was that Wise produces thousands of HTML display ads every month and they're an essential part of Wise's marketing, this meant that the new solution had to be iron-clad.
Together we tested different variants of the plugin ensuring it could produce what we needed it to
As well as being able to animate, we had to build an export feature so these animations could be a HTML5 display file, a functionality which Figma doesn't offer
The second problem was: how do we localise these HTML assets in Figma? I worked with the localisation team to research and discover the issues they have encountered with Celtra and how we could be more efficient.
As the localisation team used Crowdin for their translations, I looked at the plugin they had for Figma which allowed the team to automatically send strings into the designs in Figma
I set up templates in Figma that would would replicate the display ad formats that are required
These templates would link together the two plugins, the new one Chef that was being created to animate & export html, and the Crowdin plugin that would pull in translations
A new workflow was born
With the two plugins together the new display ad workflow was born. A plugin created which would allow designers to use Figma to design, animate and export HTML5 creative. A plugin to pull in translations directly from the translators. A much faster, intuitive and better experience for designers to create HTML5 ads. And more importantly giving us full control over designing for localised markets.
The impact
By creating this in-house workflow we saved the company around £50,000 a year by creating our own in-house workflow
This workflow helped designers feel more motivated and excited to create display ads
We were able to produce stronger localised creatives in new important markets that would help boost the company's growth
Smooth Scroll
This will hide itself!
This will hide itself!
Display Plugin & Workflow
OVERVIEW
A new display ad workflow and Figma plugin created for Wise by myself and developer Henrique Gusso.
YEAR
2023
ROLE
Project Lead
SKILLS
Creative process
Strategy
About the project
I built out a new workflow and worked with a developer to build a brand new internal plugin that would solve the localisation issues we were having in house at Wise with display ads. Wise is a global company and the goal within our team was to design locally, rather than amend English creatives. However, the tools we were using at Wise were very restrictive and weren’t allowing us to produce assets efficiently enough for local markets.
The Problem
The main tool we used to create HTML display ads was Celtra, however this tool was too inefficient for a number of reasons. It was slowing designers down as it was very buggy and the tool wasn't intuitive enough, causing the output of the design quality to be quite low and not to the standard we want.
Due to the large volume of sizes and variations required, the time it took to build these display ads was far too long.
It was very difficult to preview the display ads, making the QA process extremely difficult for stakeholders and creative managers.
Localising display ads in Celtra was equally as difficult. Each language and market sometimes requires a different layout, a different type treatment, line breaks etc. however this was not possible, meaning we had to create a one-size fits all solution, resulting in poor design for certain markets.
The Approach
I looked at other display ad tools but found they were all similar and equally as expensive. Figma is the crown jewel of the design industry right now and designers wanted to use this for everything, but display in Figma is not possible. So I sought to figure this out.
I reached out to our internal developer Henrique Gusso and had many discussions around possibilites and ways to potentially use Figma as a html display tool. Henrique went away and started experimenting with building a plugin that could utilise Figma's prototype animation feature.
The problem was that Wise produces thousands of HTML display ads every month and they're an essential part of Wise's marketing, this meant that the new solution had to be iron-clad.
Together we tested different variants of the plugin ensuring it could produce what we needed it to
As well as being able to animate, we had to build an export feature so these animations could be a HTML5 display file, a functionality which Figma doesn't offer
The second problem was: how do we localise these HTML assets in Figma? I worked with the localisation team to research and discover the issues they have encountered with Celtra and how we could be more efficient.
As the localisation team used Crowdin for their translations, I looked at the plugin they had for Figma which allowed the team to automatically send strings into the designs in Figma
I set up templates in Figma that would would replicate the display ad formats that are required
These templates would link together the two plugins, the new one Chef that was being created to animate & export html, and the Crowdin plugin that would pull in translations
A new workflow was born
With the two plugins together the new display ad workflow was born. A plugin created which would allow designers to use Figma to design, animate and export HTML5 creative. A plugin to pull in translations directly from the translators. A much faster, intuitive and better experience for designers to create HTML5 ads. And more importantly giving us full control over designing for localised markets.
The impact
By creating this in-house workflow we saved the company around £50,000 a year by creating our own in-house workflow
This workflow helped designers feel more motivated and excited to create display ads
We were able to produce stronger localised creatives in new important markets that would help boost the company's growth
Smooth Scroll
This will hide itself!
This will hide itself!