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