Natalia Shuhman
Posted by Natalia Shuhman
on 10/25/21 9:39 AM

How A Sushi Delivery Network’s Marketing Specialist Creates Hundreds of HTML5 Banners And Stays Sane

Creating banners can sometimes be a weeks-long headache for an online marketing specialist, especially when they need animated banners for different advertising platforms. When planning a big display ad campaign, the team from a sushi delivery network in Minsk wondered if there was a service that could create hundreds of animated, custom-designed HTML5 banners that would meet ad network requirements. And they found one: Pikaban. Let's take a look at how the team used it and what happened next.

The problem

The team at that sushi delivery network wanted their banners to be in their corporate style so that customers would remember them, and they also wished to display their menu's full range on the banners, not just the most popular items. We all know that the devil's in the details, but in this particular case, the devil was in the menu. It contains over forty types of sushi, each with its own photo, name, and price. That meant that something like fifty banners were the bare minimum for the ad campaign. That was already a pretty tall order, but it was just the tip of the iceberg.

HTML5 banners that work for one ad network don't always work for another one. For example, Google Ads accepts banners that are 150 KB in size, while Yandex.Direct accepts files of up to 120 KB. So, when planning publication on several networks, one needs a variety of banners that meet the requirements of the particular ad spaces.

Additionally, you can place banner ads in different formats, and they don't necessarily have to be of the most popular sizes, like 300х600 or 720х90. The less popular the format is, the lower the rates are, meaning you can save on ad expenses. So, the more variations of your banner there are, the better.

The team planned on publishing six banner formats on one ad network and nine banner formats on another. Each banner had to have at least two versions with different calls to action. Let's count the total number of banner variations: 40 menu items * 15 sizes * 2 calls to action = 1,200 files. And that's just the first stage. If you were to add, for example, a variation with a third call to action, you'd get an additional 600 files.

Pikaban_Edited_3-2-2* A note: although the sushi delivery network is real, its team preference is not to mention the network’s name in the banner case study.

So, the team at the sushi delivery network would have to spend hours checking the future campaign's content. Are the name, quantity, and price of sushi rolls right on each banner? Are all the different sizes ready for each banner? Considering that they had hundreds of files, doing this all in one go seemed like it could only be done in a dream world.

And yes, they'd have to call the designer and programmer each time the menu had new promo prices, a button caption had to be changed, or an additional resize needed to be displayed.

"We realized that we didn't just need to develop the design; we also had to adjust it to a variety of sizes and change the content from time to time. Had we created the banners manually, the process would've been time-consuming, labor-intensive, and just all-around inconvenient," said the team from the sushi delivery network.

They realized that spending hundreds of hours of labor on that task would be overkill, and they found a more tech-savvy solution: Pikaban, the bulk banner generator.

sushi-case-en-main-page

The Solution

The sushi delivery network handed over their corporate-style art templates to the Pikaban team, who created banner design layouts based on them. When creating the layout, the Pikaban team developed the composition of the logo, slogan, and text areas at full price and discounted prices so that the banner with each menu item looked awesome in every size. As for the captions, the design for the text areas was outlined, but the textual content itself was not embedded into the layouts.

"The main thing at the layout testing stage is to check how all the products are displayed, not just one test item. For example, some products might have more characters in their name, while others might have a photo at a different scale. Together with the Pikaban team, we managed to eliminate these errors and adapt the layout for all products in just two iterations," the sushi delivery team shared.

The HTML5 animation was then agreed upon, and it was decided that the background in the corporate style would move toward and away from the viewer, the sushi roll would rotate, and, every three seconds, the price would be replaced with the offer message: buy soy sauce for 1 kopeck for each sushi roll. Factoring in all these inputs, the Pikaban team developed animated HTML5 banner templates to meet the technical requirements for Google Ads and Yandex.Direct, the advertising platforms where the team planned to publish their ads. 

"Static banners are definitely still an alternative, but we wanted to present our products in the most attractive way possible, so we decided to go with animation. What we liked at Pikaban was that the animation was programmed and then embedded in different formats," the team explained.

After that came the most important part. The sushi delivery network got their own Pikaban account, and Pikaban subsequently uploaded all the templates — the custom design layouts, adapted photos of sushi rolls, and size options for banners — for each ad network. After that, the sushi team themselves added all the text content for the banners — sushi roll names, prices, slogans, and button captions — via their Pikaban account interface. That means texts and prices can be edited, added, or removed at any time in just seconds without the need for any graphic design skills. This offers so many opportunities to A/B test banners. You can check, for example, which call to action the target audience responds to better.

Pikaban Sushi Case Interface

In the screenshot: The sushi delivery network’s account interface in the Pikaban service. The column on the right shows editable fields. Just add text, and it immediately embeds in the graphics.

No need to keep all the attributes on the banners. If you disable the display of price and quantity, then the remaining text — the name of the sushi rolls, in this case — will be centered and blend seamlessly in the banner's composition. 

If a menu item gets a new name or the price changes, you don't need a designer or programmer to update the banners. Instead, marketing specialists can make these changes themselves, download the updated banners, and upload them to the ad network in just a couple of minutes. You can also download static banner versions in PNG format from your Pikaban account. 

Once the ad campaign had been launched, the menu had new items: the Avocado, Shrimp, and Caviar Roll and the Philadelphia Roll with Caviar. The sushi delivery network team sent Pikaban photos of the new items, and the very next day, the network’s marketing specialists were able to create banners in all the formats they needed with the new menu items. And the team didn't pay a penny for doing so because these updates were already included in the cost of Pikaban's project support.

The results

The sushi delivery network received custom animated HTML5 banner templates to which they could add any type of text. They could also select the sizes of the banners and download ones that were ready to be published on ad networks. 

"The ad campaign with banners from Pikaban is already in its third month, and we can clearly see that it's showing no signs of fizzling out. With targeting settings, we can display different products to different target users, and variations of banners with different menu items give us endless opportunities in this area. The fact that we don't have to ask anyone to make changes to our banner texts saves us so much time," the team opined.

Need a 720х90 Shrimp Maki Sushi banner for Yandex.Direct? All it takes is a few clicks; hit the 'Download' button, and the banner is ready to be uploaded to the ad network.

Need to set promo prices for Salmon and Cucumber Bonito for Google Ads? Edit the price directly in your Pikaban account — not a graphic editor — check the boxes for the formats you need, and you end up with a zip archive containing the HTML5 banners in the selected sizes ready to download. 

On that note, why download all the variations for your banners and store them on a local PC or cloud when you can upload banners in any format from Pikaban at any time? You can also grant access to your account to several employees, and each one will get their own login and password.

Thanks to the experience of creating banners for this sushi delivery network, Pikaban has improved and is now capable of creating all possible sizes that are compatible with Google Ads and Yandex.Direct by default. Customers can request custom sizes for other ad networks completely for free. Pikaban has also learned how to display banners in MP4 format, so now animated ad content from Pikaban can be placed on Facebook and Twitter. 

Learn more about Pikaban at pikaban.com