Automating design
processes with Figma
How to scale design visual demands without compromising
the quality of output and ensuring a healthy workflow
for employees?
iFood
2020
Preview Case
Next Case
My roles
Design Strategy
Project leadership
People management
Visual Design
Design System
DesignOps
Component library
Delivery focus
Overview
iFood is a food delivery company that offers full delivery services from restaurants, groceries, drugstores, pet shops, and others.
This document addresses the creation of a system for the promotions area, a space in our application and web environment to communicate offers, coupons, and news from partner brands, aiming for scalability and increased conversion due to the high level of deliveries.
Context
The biggest challenge in the promotional area was the high volume of demands compared to the size of the team. Previously, when using Photoshop, they had to handle the layout by searching for images and treating them accordingly, which required significant time and effort. With a team of five people, they could create, on average, 3 banners per person.
However, over time, as the product grew and new categories and brands were introduced, the demand increased significantly, reaching an average of 50 banners per day. Unfortunately, the team was unable to increase its capacity at that time, leading to challenges in meeting the rising demands.
This led us to evaluate the methodology used in this production, identifying the gaps and propose a new way of doing it.
Goals
1 – Increase the number of offers in the app, including offers from partner brands, to achieve higher sales conversion;
2 – Improve the quality of life for teams while increasing their efficiency, allowing them to have more free time to focus on strategic matters.
3 – Increase the team’s delivery speed without needing to hire more people
Solution
- Management better the backlog;
- Ensuring consistent and high-quality delivery;
- Accelerating and simplifying the artwork delivery process.
Strategy
To realize the idea, we work in stages, which are as follows:
- Testing a pilot creation within a dynamic with the teams involved;
- Comparing the way it was done before (Photoshop) with the way it is done
after (Figma); - Create a component library with photos, assets, patterns, and texts necessary for the creation of banners;
- Finally, monitor the team’s process and their adaptation to this new
way of working.
1. The pilot
I applied a dynamic with people involved that works as follows:
They would create the same artworks with the same briefing, both in Photoshop and Figma.
We tested this challenge several times until we collected enough data to measure the different actions.
2. The comparing
After the dynamic, we were able to compare both actions and understand the improvements of using Figma instead of Photoshop.
3. The component library
After conducting all the studies, the idea was to create a dynamic components library, that could be continuously updated with new ideas or adapted to meet evolving needs.
Colors
All colors was divided in background and text, thinking in contrast and accessibility.
Pre treated images
We created an image and assets library organized by brand/subject and combined by variants within Figma.
Patterns library
We created a pattern library, to compose the background art.
Texts compositions
We created a text library, with the most frequently used content for our banners.
4. Team process
After a week of testing, the team embraced the new method for its efficiency and speed. Here are some testimonials we received:
"The new method has completely transformed our workflow and made our processes much more efficient. It's been a game-changer for our team!"
"I initially had doubts about the new approach, but after using it for a week, I'm amazed at how fast we can now manage our tasks."
Testing in large-scale projects
With the new method, we could test the flow with marketing campaigns, which demand a lot of time and effort due to the extraordinary numbers of banners to be delivered.
In June, there was a campaign called “Special Offers,” and during Black Friday in October, the team observed its efficiency, especially when it came to providing over 300 banners, each, within just one week. This was not a problem with the new system.
Outcomes
As a result, we increased the number of banners per person, thanks to the increased creation speed. This allows the team to allocate more attention to other tasks while consistently achieving the desired outcomes.
We also managed to increase the exposure of partner brands, which not only boosts our sales but also enhances the value of this advertising space for promotion.
In total, the area could deliver more than 50 banners per day.