Our marketing design team produces hundreds of advertising banners for our website and social channels. This is repetitive work, with tight deadlines that can be improved with templating and standardisation.
Our design team spends a lot of time producing near identical advertising banners for a variety of events. To understand where we were spending most of our time, we tracked the time taken by each designer on each step of the process.
We create two extreme personas to handle the edge cases faced by everyone and used them to vote on the most troublesome part of the current workflow.
The background image exists and most ads simply add a headline and a “Call to action”
The same ad is often needed in a few different sizes (learning these sizes is a barrier for new designers)
Although the task is simple, details like sizing text, varying colour and alignment tend to take time and is where mistakes are made most often
Writers can’t tell how space will be used and headlines can often be too long to fit the space properly
We use the Adobe suite extensively and set up team libraries to share universal assets like logos, colours and typography. This made sure everyone was working from the same toolset and improved onboarding for new designers. But a simple task like resizing a layout, is still a multi-step process.
We had been approaching the increasing workload by hiring designers, but quickly realised the original problem wasn’t being addressed. New designers would had a slow onboarding process to gather enough information to become productive, and would eventually hit similar limits on the amount they could accomplish.
The best case was custom software—something that takes a background image, a headline and a CTA and produces ads in all required sizes. Althought replacing Photoshop entirely would be a monumental task, but a small web app that solves just one problem would handle 80% of repetitive design tasks.
Ursula Franklin divides technology into prescriptive vs holistic technologies by addressing the person who is empowered by it. Where a design system can be centered on control and prescription, the tools we create should be focused on improving work for the people who use it.
The purpose of this software then, would not be to track the quality or quantity of work being done, but to give designers the tools they need to work easier.
The resulting web app does one thing and does it well. Sizes are pre-defined and switching between them automatically lays out the content correctly. The tool is online, requires no installation and copywriters can use it directly to craft good headline within the size requirement.
The tool eliminated 80% of repetitive tasks, freeing up design resources for more challenging problems. It also democratised the brand, allowing anyone at the company to create an ad that meets brand guidelines without the need for training or specialised software.
The CTA take a verb and a noun and picks font sizes to fit neatly within the block. It also has additional segments for discount codes or additional information.
BannerBuilder worked so well that we broadened our interviews to more teams. This resulted in a suite of tools, each for a very specific purpose: CarouselCreator, MailerMaker and SVGSolver.
Each tool is a small web app that works right in the browser. Some can fetch data from a database to prevent input errors for content. And the output varies from images to HTML emailers, SVG files and handlebars templates…
