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!""