Victor Vernilli

Motivation Process Research and Ideation Prototyping Development Iteractions Results
accessibility

Higher
Contrast

Increase
Font Size

Decrease
Font Size

Motivation

During my experience at In Loco Media, I worked in the Ads Innovation team. This team was responsible for designing and developing new ad formats and improving the user experience of the existing formats at that time. And for that, we used user-centered design methodologies to reach these goals. One of these new formats was the carousel ad - also known as gallery ad.

Process

Research and Ideation

Before developing the format itself, it was necessary to decide which format should be made. We listed the formats that we already offered to our clients at that time, and we identified which formats we could develop. We raised positive and negative points for each format and we also identified the goal and segmentation that better combined with each one.

After that, we analyzed which could be the goals that our portfolio didn’t cover or didn't support properly. For example: campaigns focused to announce several and various products simultaneously wasn’t cover by our formats.

With these informations on hands, we started to research some formats of ours competitors - like Facebook Ads, Instagram Ads, Google Ads, etc - offers and which the best value that we could deliver to our clients.

After this analysis, we found a potencial option: the carousel ad. This new format would add something new to our portfolio and our clients could see a new value.

Some formats of our competitors Some formats of our competitors

Some formats of our competitors

Prototyping

With the format finally decided, we started the prototyping step. We wanted to create an ad that provided a good experience to users, that wouldn't create doubts about what has been announced nor about what would happen after the click.

By analysing our competitors, we gathered the resources which were more utilized and widespread in the digital advertising market. We listed some elements that would be required to deliver the value to our clients.

We created several sketches of this new format, identifying variations of elements, positions, dimensions, copy, CTA, etc.

Sketch of some ideas for Carousel Ads

Sketch of some ideas for Carousel Ads

Development

For development, we used front-end techs - HTML, CSS and JS - for the ad creation, which is known in the digital advertising market as rich media. It's always important to think the ad can appear on various types of screens and devices.

So give attention and effort to performance and loading time is extremely important, which leads to a development of lighter pieces that provide the proposed goal and value. We raised some options for development, which were: to create all pieces from zero; or to utilize a framework. One person of our team went recently to Google I/O, and saw some talks about a new framwork and we decided to use it, AMP framework. We decided to develop both and test which would have a better performance, both the loading time as the total clicks.

Now, it was necessary to decide which metrics we would need to analyze to decide if the new format would be a success or not. We listed some metrics, such as:

  • Loading time
  • Viewing time
  • Number of swipes
  • Number of cards viewed
Sketch of some ideas for Carousel Ads

High fidelity prototypes of some ideas for Carousel Ads after all iteractions

In order to gather this data, besides getting the data from In Loco Media’ ad network - as views and clicks - we utilized the Mixpanel, a software analytics tool - but an event-based one, in contrast to Google Analytics, a view-based - to understand the users' interest by the content. With Mixpanel it’s possible to identify the user behavior inside of a page - in this case inside the ad - and with which items the user interacted to. Then it would be possible to gather this complementary data to understand the user behavior while interacting with this new ad format.

Iterations

One important step in user-centered-design process is iterate. Due to the high volume of our campaigns, we ran a 2-week test cycle with significant collected data. This period of two weeks was choosen because it avoided a seasonal behavior by users during the weekdays compared to weekends. Thus, collect data and understand this information helped us to made some changes for every interation, changing elements, positions, dimensions, copy, CTA, etc.

Results

At the end of this cycle, we created a new format, the carousel ad, a new type of ad for brands to announce more content with less screen space. With this ad, it's possible to advertise many products or to create a storytelling about a product/service. We run several tests, utilizing both versions and different elements.

The version which we decided to put on our portfolio was the AMP version because it loaded faster than the second version. In this version, the user didn't have to wait too much and the others images were loaded in the background while the user saw the first image.

The AMP version had more viewing time, which means, people spent more time viewing the content of the ad which increased the number of swipes and viewed content.

...