1 of 38

Designing your eCommerce site for CONVERSIONS

Chris Lema

@chrislema

2 of 38

CAN WE BE HONEST ABOUT ECOMMERCE?

This stuff is hard. It’s not just about coding. It’s not just about design. It’s also about psychology and it’s about iterative tweaking. Everything about a conversation related to conversions in eCommerce is a work in progress.

@chrislema

3 of 38

WHAT DO WE KNOW?

The single biggest reason stores don’t convert - leaving every other aspect in the dust - is speed.

You can’t convince someone to make a purchase on a site they’ve already left.

@chrislema

4 of 38

SOME QUICK FACTS (Akamai 2017 study)

  • 2-second delays >>> 51% decrease in session length
  • 100 millisecond delay can lower conversion by 7%
  • Bounce rates drop big for stores under 1.2 seconds
  • Best conversions were for load times under 2.7 seconds

@chrislema

5 of 38

WHAT MAKES ALL OF THIS HARDER...

Everyone is shopping, all the time, at Amazon. So every shopper (and every store owner) has increased expectations about the features and performance of online stores.

@chrislema

6 of 38

A FEW MORE FACTS (Radware 2015 study of top 100 stores)

  • The median page’s Time to Interact was 5.5 seconds, and fully loaded in just over 15 seconds.
  • The median page was 1905 KB in Size and contained 169.4 Resources
  • Images make up 60% of store content, and most sites didn’t use image optimization techniques - at all.

@chrislema

7 of 38

SPEED IS A DESIGN PROBLEM

Designing your online store for conversions is an exercise in designing with constraints. Stores need to load quickly to give you the best chance of lifting conversions.

@chrislema

8 of 38

IF YOU ONLY TAKE ONE ACTION, THIS IS IT: COMPRESS YOUR IMAGES

  • TinyPNG - online w/ plugin
  • ImageOptim - Mac or online
  • Kraken.io - online w/ plugin
  • Imagify - online w/ plugin
  • Compressor.io - online
  • Optimus.io - online
  • imgix - online w/ plugin
  • Photon - Jetpack plugin

9 of 38

IF WE’RE TALKING ABOUT IMAGES...

Remember that once you have people visiting your store, your job is to help them connect. Show them what their life would be like using your products. Don’t just push them specs & details.

@chrislema

10 of 38

It’s much easier to emotionally connect with the concept of Bose in my car with this photo, rather than a shot �of my car’s speakers.

@chrislema

11 of 38

Harry’s pushes details low on the page, to help�us connect with the product, via photos.

12 of 38

ALSO, USE MORE IMAGES (& ZOOM)

People evaluating a product have their own set of questions, that can often be answered by looking closely at a product in more than one perspective.

@chrislema

13 of 38

Multiple photos and a 360 degree view help me answer my own questions.

14 of 38

LASTLY - USE IMAGES CREATIVELY

This next example is maybe my most favorite use of an image ever, when it comes to eCommerce and that’s because it solves a key problem I face all the time when buying clothes.

@chrislema

15 of 38

Bustedtees does more than write text about their sizing. They show several real people that I can pick from. Then I can see how things fit.

16 of 38

DON’T STOP THERE - USE VIDEOS

Short videos (<90 seconds) help users see products in real context.

Can I tell you a story about a recent purchase I made? The videos did the trick.

@chrislema

17 of 38

This isn’t your ordinary wood. It’s wood you can put on your walls. With stickers.

18 of 38

VIDEOS ALSO HELP YOU TELL YOUR STORY

19 of 38

LET’S TALK MORE ABOUT BACKCOUNTRY

Backcountry shows what it takes to get free shipping, which is one of the largest reasons (56%) people abandon �carts. But they also offer first time visitors 10% off.

20 of 38

Kind Snacks offers discounts too - but on all visits...

21 of 38

TEST YOUR OFFERS

@chrislema

22 of 38

COLLECT REVIEWS & PRESENT THEM

23 of 38

PEOPLE TRUST (OTHER) PEOPLE

Create ways for people to engage each other

24 of 38

IMAGES, VIDEOS, DISCOUNTS, REVIEWS...

If I could convince you to do one more thing to help you improve conversions, it would be this.

Learn to tell stories better.

@chrislema

25 of 38

THIS IS HOW AMAZON SELLS A $600 WATCH

26 of 38

27 of 38

28 of 38

29 of 38

30 of 38

31 of 38

32 of 38

33 of 38

34 of 38

35 of 38

3 TAKEAWAYS FROM THE COMPARISON

  1. People scroll. Long pages are fine.
  2. Shinola is the only one telling a story.
  3. An educated customer is an engaged one.

@chrislema

36 of 38

Before we declare Shinola the winner, try and find that exact watch again…

Amazon recognizes the need to create visual and content hierarchies to help people find what they’re looking for.

On Amazon, I can often find products again, even without remembering their names

37 of 38

38 of 38

CHRIS LEMA

@chrislema

VP Products, Liquid Web

MANAGED WOOCOMMERCE HOSTING PRODUCT DISCOUNT CODE

EMAIL ME - CHRIS@LIQUIDWEB.COM