Carousel Ad

3 min read

Carousel Ad

3 min read
🙋‍♂️
My role
Researcher and Front-ender
👏
Team
Me, Product Designer and Back-end developer
Duration
3 months
🔎
Discovery
Interviews, survey, market and competitors analysis
✏️
Designing
Card sorting, paper prototype and high-fidelity
🛠
Tools / Tech
HTML, CSS, WordPress, Google Analytics, Adobe Suite

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 the 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 a 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 well. For example, campaigns focused to announce various products simultaneously weren’t cover by our formats.

With this information on hand, 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 the carousel ad. This new format would add something new to our portfolio and our clients could see a new value.

Several mobile screen shots of a range of different carousel ad used on the market
Several mobile screen shots of a range of different carousel ad used on the market

Prototyping

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

By analyzing 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 value to our clients.

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

Low fidelity sketches draw on paper of some ideas for Carousel Ads
Sketches: Low fidelity sketches of some ideas for Carousel Ads

Development

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

So the attention given to performance and loading time is extremely important, which leads to the 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 new framework, 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

In order to gather this data, besides getting the data from In Loco Media’ ad network - as views and clicks - we utilized 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. Then it would be possible to gather this complementary data to understand the user behavior while interacting with this new ad format.

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

Iterations

One important step in the 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 chosen because it avoided a seasonal behavior by users during the weekdays compared to weekends. Thus, collect data and understand this information helped us to make some changes for every interaction, 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 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 for too much and the other 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.