How I’ve started to decentralize and automate the production of marketing images at Descomplica
Some recurring tasks usually make me very uncomfortable and frustrated. After I started programming, I noticed that I had a powerful tool to solve all sorts of problems, including this one.
In this post, I’ll talk a little bit about a side project I’ve worked on during my first month at Descomplica — a great digital education company located in Brazil, where I’ve been working for the past 6 months.
Since the first week, I’ve been given the chance to get involved with great projects and super talented people, using really interesting technologies like React, Styled Components, and for me, the most important of all: a product that is extremely valuable to my country’s education.
Descomplica believes that “education is for everyone”, and with this objective in hand, we offer daily free classes via streaming. However, this strategy demands a large amount of marketing material to be created on a weekly basis.
Noticing this, I began thinking of ways to automate their image development process, which worked more or less as follows:
- The coordinator makes the classes planning
- The coordinator sends the gathered information to the designer
- The designer creates the images
- The designer delivers the generated images and makes the required adjustments if necessary.
After understanding the whole process, I began working on solutions to make this kind of work not such a repetitive and time-consuming task.
First attempt
As a first attempt, I created a symbol in Sketch that would help designers to assemble images faster. With this purpose, I began developing image structures, and it came out like this:
After some studies and feedback from a few designers, this was the result of the symbol structure:
But shortly afterwards a better idea emerged: why not create a tool where everyone would be able to generate their own images?
One of the first challenges I had while at Descomplica was learning React. With this in mind, the idea to create an application in React where anyone could access the template, change the information and export the images, came to life. To begin with, I created a repository with the create-react-app and started working on that.
And after a few hours of written code, this was the result:
The most interesting thing about this whole concept was that the entire process of image development was reduced, and the project coordinator could plan and create the images on her own.
On this tool, I basically used React, Styled-components, React Router, html2canvas (a library that transforms html elements into canvas) and hosted the project on Netlify.
I’m very happy with the result of the project — it had a great acceptance and it left the designers at Descomplica with more freedom and time to solve other great problems that are presented on a daily basis.
I hope you’ve enjoyed it. 💚
