Friday, August 14, 2015

DESIGN OF PERSONALIZED BANNERS


Most of the things we do here at realzeit are tech-focused. We write and test code and great things are done which nobody outside of our office (except our customers who look at our awesome performance) appreciates. However, there is a small outward-facing topic that I would like to elaborate in this blog post - the mystery of banner design. For us this is an interesting topic since an important product of our company is retargeting and re-engaging users inside apps. Of course, we do so using personalized banners and, yes, we design them in-house.

Just to put this up-front: this post will not answer your most urgent questions regarding banner design. In the following we will merely show several approaches how to approach the problem of banner design. Our focus is performance, so we will judge based on that. All designs will be tested eventually and, finally, in an undisclosed future, another blog post will reveal our test results . Then you might find all the answer you were longing for. Until then ...


THE BASICS


How should a banner look like (and how does it have to look like)? Lets start with the basics to get it over with. First of all, all images used in the creative should be of the following 4 types:

  • JPEG
  • JPG
  • PNG
  • GIF

and not be larger than 150kb. For the gifs, we have special restrictions. Animation length must be less than 30s. Even when they are looped, they should stop after that time. In general, it is advised to have gif ads to be slower than 5FPS.

Also, there are other components that are necessary, because of different reasons. First of all, it is important to add the company logo. It must be included for two distinct but equally important reasons. First of all, although strictly speaking retargeting is a performance channel, you still take the free branding and build brand awareness. The other reason is much more pragmatic - ad exchanges take this as a quality measure. If there is no brand logo on the banner, it might no be able to bid on all inventory (and this especially goes for the so-called premium).

The second ingredient is a call-to-action. It may be a button that says something like "Shop Now", "Learn More" or whatever you can think of. This is part of 99% of all banners that at least I have seen (and trust me, I have seen a lot), so I will not argue with the need for the call-to-action. Intuitively I do understand that you tend to click on buttons in the internet, so I'll take it as a given.

The third ingredient to a personalized banner are the products that the user has viewed last. This is the core component of a dynamic ad and many things have been tried, some of them, admittedly, not really easy on the eye.


TALKING BANNERS

I read up on banner design, e.g. in this blog post by 99designs. They gave me some tips to make a more clickable banner. Some are very obvious, some I do not see immediately. Do they apply for mobile, as well?

In any case, down here in our Kreuzberg office we appreciate simplicity. Let me start the discussion with a banner I really like. This is the gif version of a retargeting banner we have been using for Vinterior

320x100 moebel whiteThey have a very reduced design where they show their logo and one product. They have a nice call-to-action ("Jetzt Einkaufen") and a really nice look and feel. Love it. Thats how I would do it. Thats how nobody else does it.

Vinterior actually violates a couple of 99designs rules of thumb. They use a white background and have no clearly defined frame. Also, they write in uppercase.


IN THE WILD

To check how current state of the art banners look like, I have been visiting several shops and allowed them to retarget me. Look below at two specimen of retargeting banners I have seen. They are quite common, would you not agree?

First of all I see a standard Leaderboard (728x90) banner of beloveth Otto. We see the logo and eight different product photos on there. Apparently there are some offers that are interesting for me and Otto was so nice as to indicate them with a red percentage sign.
Nothing against our grandmaster of eCommerce, but these banners are a bit ugly. Do people really click more often on such ads?

Another style I have found (amongst many) was from Walbusch. The products came with name, large photos and the price. A whole lot of information, but the whole package seems alright. Very conservative the whole appearance, but I guess that is what they are going for.

Here comes another example by aboutyou.de. Here we have a standard 320x50 banner in the mobile web. Plain and simple: 4 products, a gray frame, logo and again the blinking percentage.

The small screen is a real challenge and at the same time an opportunity. Especially in-app the sizes are small, but as the screen is small, as well, ads are very visible. Most frequently the format is 320x50 and in the case of aboutyou.de it seems that 4 products are too many. It is very difficult to recognize and differentiate them.

An actually really positive example of a retargeting banner I have found at Fashion For Home. We see our recently looked-at products inside a frame and also, all are presnted with a nice rounded frame themselves. Without claim and call-to-action, we notice only the brand logo. For me, this also is a very elegant look that is not too annoying (nice-looking products do help, as well). What you cannot see is that the banner is interactive. Once you scroll over one of the products with your mouse, the respective frame glows red. Unfortunately, such effects are not see easily adapted to the mobile screen.

In any case, we have a nice looking banner that somehow, by its simple design, sticks out from the usual display ads that you see all over town.


WHAT SHOULD WE DO?

I like good design, but I am not a designer by heart. I would easily ditch a beautiful banner for a ugly one that performs awesomely. However, I do believe that users appreciate a nicer and more natural feel for their advertising.

Here is something we would design. A banner for the infamous realzeit interior brand, a company providing a unique real-time furniture experience.

We did not use the overall frame, but we added logo, call-to-action and a claim. Since we are doing retargeting, we are also showing a couple of products. We think that such a minimalistic design fits nicely into the actual text and therefore does not disturb the user experience.

Fortunately, you will not have to trust our ability to design things nicely. We much rather will use exhaustive A/B testing on different banner sets and styles. We will add prices, blinking squares, the obligatory red percentage signs, different kind of movements and so on and we will find the best-performing one for each campaign.

Right here in our company blog you will eventually find our results. Does the same stuff that works for desktop work on mobile? Are in-app and mobile web similar? Stay tuned for some exciting numbers!