When a Winning Tablet Design Flops on Desktop
Do tablet users behave (and convert) similarly to desktop users?
Clark's shoes set out to answer this question by testing its winning tablet design on desktop against its desktop version. The case originally appeared on WhichTestWon (a fantastic resource of A/B tests).
Winning tablet design
The tablet design pinched revenue per visitor by 2.6% (at 94.89% confidence).
While this doesn't seem like a huge difference -- the team expected tablet to win.
The point is, site design should be optimized for different device contexts.
"More often than not, testing professionals have a losing test or a flat-lined test. We believe that ‘Tests don’t fail, hypotheses do’. So in order to get anything out of testing, you have to have a clear hypothesis so you get learnings in those times where you lose profits. In this case, the team saw a slight decrease in sales, but now know they need to optimize tablets and desktops independently."
The conversion optimizer in me wonders if slight tweaks to the tablet design would have improved tablet sales even further, or boosted desktop sales in the test.
1. Make the call-to-action button stand out with a bolder, contrasting color (like green)
2. Place price in a more conventional position, near the call to action (rather than top-right hand white space)
3. Give a visual indication there are more product images to view (spanning the screen, looks like a hero image rather than a product image on desktop)
4. Include the size guide link
I've mocked up what the challenger page could look like:
But again, the test should be applied at the tablet and desktop level separately to address the hypothesis that certain design elements in the tested tablet design were responsible for the results, rather than the template itself.
Responsive design enthusiasts take note, you can control the experience at each breakpoint. Indochino is a perfect example.
Its desktop experience shows clickable thumbnail images:
On tablets, the gallery collapses:
For smartphones, the product image changes and calls to action slip below the image.
It's possible to hide content at different breakpoints, crop and swap images, resize calls to action, etc. Don't be afraid to test these elements!