APPLE WATCH PROTOTYPE
Marketing Banners Generator
Development team, Marketing Executives
Working in the Marketing department, as a Marketing Design for a gambling company means to produce many banners to promote different game titles.
At least this is just a part of the day to day duties that we have, other than creating social media content, youtube covers, interactive promotions, and some of us from the team, even prototyping and coding landing pages.
With so much work going on and so many marketing campaigns happening, we found ourselves overwhelmed with the amount of banners that we had to produce, and it just seem to be repetitive at one point. It was like replacing content in a pre-made Photoshop template and generating banners for multiple sizes, but wait, isn’t that something that computers can do today automatically?
That’s exactly what we thought. What if we create a tool that can generate custom banners with game specific logos and backgrounds for Marketing Executives? That was the motivation and the objective of this project.
Problems & Solutions
Marketing Executives aren’t Designers.
We take pride in what we produced at Gamesys and we won awards and recognition for our designs and the way of how many of the websites look and feel, so we couldn’t risk to give stakeholders too much input on this.
This is why we had to create a specific template, well thought, that could be easily produced by the developers of the tool, and still look good with different variations of text, game logos (stacked / horizontal), background colors, and different stickers.
There’s no one size fits all, for our website, as we require banners to be placed in different places the websites, and each section will have multiple sizes for mobile/tablet/desktop.
This required us to create multiple Photoshop templates for each section where a banner could be placed, and for that generate multiple sizes once again for different devices. This was followed with a design specification paper for every individual section to developers, to be able to produce the tool.
With about 5 different brands that were about to use this tool, we had to define carefully and test the template, that could be later changed for every specific venture to match the visual identity.
Some brands were placing elements in the banners in different ways or positions, so we had to define a different Photoshop template in every different size for every different venture. This took a good amount of time, with iterations and testing of multiple logos, backgrounds and different copy lengths but it was totally worth it as we were about to save time in the future.
Below is an example of Virgin Games and Botemania websites and how they will change the visual requirements for the banners.
Step 1 - Design the Templates
We used previous templates from Photoshop. We had to define carefully and test the template with multiple variations of logos and background, that could be later changed for every specific venture to match the visual identity.
Step 2 - Design Specifications
In this step we had to translate information from design templates to developers to get a match, closer to the concept as possible. This includes every size, in multiple scales (for high resolution displays and retina displays) and provide font sizes too.
Below is a sneak preview of a small part of the specifications provided.
This was a collaboration between development team and design.
Step 3 - Test & Iterate Tool
After the tool was built with our specifications, we had to QA and test multiple options, while providing feedback to development until we got the perfect result that ticks all the boxes.
This was built to fit multiple sections of the websites, as described in the early phase. This means we had to add an option to generate the banner in different sizes and formats.
For every tile size iterations and testing was required.
This is the result for tile 60 option with the input given above.
After the banner preview is generated, it allows you to download the banners in 4 different scales (for retina displays) and 5 different size ratios as required by our websites for optimum display.