Case Study: Criteo Banner Ads

Case study on UX design perspective of new banner advertisement design and development.

Problem: Flash is dead. Banner ads now need to work across all platforms, perfectly, beautifully and quickly to maximize conversions.

Part One: Synthesis

Flash is out. HTML is in.

What's the best way to present multiple items, their details, with a super intuitive interface?

Begin initial conversations and ideation. Pagination vs inertia scrolling? Auto play functionality?

Begin with most readily available template, 728 by 90 pixel banner

Wide format is conducive to multiple products

What is the best way to scroll horizontally between many items?

A "paginated" version of scrolling is prototyped

A swipe triggers an scrolling event that shows a new set of six items

Hmm, I don't know if we like the idea of making our items scroll in pages

We need a detail view with information about the product and we need a way to activate and deactivate it

And we need clicks dammit! That's why we're in business! Make it click well!

The arrows aren't pointy enough

Part Two: Iteration

Make more prototypes!

Let's try one with inertia scrolling

Our 300x250 ad size is very popular, we should prototype that size out too

Whoa, inertia scroll with -webkit-overflow-scrolling: touch; is awesome!

It's intuitive, like sliding a film strip across a table.

A quick tap gives you a detail view, and slides your item into focus

Ah,the good old 300x250. It clicks through so well.

Wouldn't it be cool it had like a 3 second teaser video to start? Let's try it.

Part Three: Presentation

Time is up, and the final deliverable is presented to key stakeholders via lifesize video conference

"Wow, thanks guys this was a lot of fun to play around with!"

"Thanks for your work, we've taken a lot of great notes, and will deliver them to Central for further design and development!""