CONVERSION DESIGN

for ECOMMERCE
DANIAL DASHTIZAD
AGENDA

Conversion Design Basics

Before Getting Started

Tips for the Storefront,

Category, and Product Pages

Designing a Checkout Flow

Built for Conversion
 WHAT CONTRIBUTES TO AN
INCREASED CONVERSION RATE?

Great UX Site Performance Great Copy

Trust/Security Value Proposition

 WHAT CONTRIBUTES TO AN
INCREASED CONVERSION RATE?

Great UX Site Performance Great Copy

BUY NOW

Trust/Security Value Proposition Orange Button?

TRAFFIC & REVENUE BY DEVICE
(% SHARE | Q2 2014)

80.6%
60.6%
24.1%
15.3% 12.7% 6.7%

Traffic Revenue Traffic Revenue Traffic Revenue

Desktop Tablet Mobile

Source: Marketing Charts

CONVERSION RATE AVERAGES
(Q1 2014)

3.15%
2.45%
1.14%

Desktop Tablet Mobile

Source: Marketing Charts

AVG. CART ABANDONMENT

67.9%

Source: Baymard Institute

BEFORE STARTING
YOUR JOURNEY...

A
B
Understand Define Test & Make Data
Your Audience Your Goals Driven Decisions
YOUR AUDIENCE

Customer Type Characteristics Strategy

The Savvy • Know what they want • Sophisticated Search

Shopper & don’t waste time Functionality
casually browsing
YOUR AUDIENCE

Customer Type Characteristics Strategy

The Savvy • Know what they want • Sophisticated Search

Shopper & don’t waste time Functionality
casually browsing

The Recreational • Casually browse • Featured Products

Shopper with no intention to • Create Urgency
complete purchase • Promotions
YOUR AUDIENCE

Customer Type Characteristics Strategy

The Savvy • Know what they want • Sophisticated Search

Shopper & don’t waste time Functionality
casually browsing

The Recreational • Casually browse • Featured Products

Shopper with no intention to • Create Urgency
complete purchase • Promotions

The Reluctant • Hesitant to make • Reinforce Security

Shopper online purchases • Provide Guidance &
• Not tech-savvy Direction
DEFINE YOUR GOALS

$759

OR OR

Higher Increase Avg. Target Specific

Conversion Rate Order Amount Demographic
USABILITY & TRAFFIC
ANALYSIS TOOLS

Google Analytics

Visual Website Optimizer A

Optimizely B
UserTesting.com TESTING

WhatUsersDo.com
STOREFRONT
STOREFRONT

Define Yourself Quickly

Where am I?
What am I Doing Here?
Why Should I do it?

When in Doubt, Simplify

Move User Through the Site

DON’T DO THIS
DO THIS
DON’T DO THIS
DON’T DO THIS
DO THIS
CATEGORY PAGE
CATEGORY PAGE

Display Relevant Data

Do not Over-Clutter with Filters

To “Buy Now” or Not

Implementing QuickView
DO THIS Display Relevant Data
DO THIS Inventory Levels Displayed
CASE STUDY: Making One Change

Control Test

Source: VWO
CASE STUDY: Making One Change

Control Test

27% Increase in Engagement

Source: VWO
CATEGORY PAGE
Does it make sense to have “Buy Now”?

BUY NOW But, first... BUY NOW

DO THIS Offer Customization
CATEGORY PAGE
Know When to Use Quick View
PRODUCT PAGE
PRODUCT PAGE

Large Hi-Res Images (Multiple Views)

Video (At Least for Top Products)

Compelling Description

Clear CTA High on Page

User Generated Content (Reviews)

DO THIS Large Images, Compelling Content
DO THIS Large Images, Click Triggers
DO THIS Add to Cart Animation
DO THIS To Increase Avg. Order Revenue
SHOPPING CART
SHOPPING CART

Clear Display of Product Info

One Clear CTA: Checkout!

Don’t Make Coupons too Prominent

Set Expectations

Upsell Opportunities
DON’T DO THIS Button Hierarchy
CHECKOUT
CHECKOUT

Do Not Force Login/Registration

Remove Unnecessary Elements (Header, etc...)

Limit Form Fields

Be Clear in Your CTAs

Reinforce Security
DON’T DO THIS Too Many Choices
DO THIS Make Account Creation Seamless
DO THIS Reinforce Security

Source: ConversionXL
RECAP

Know Your Audience & Goals

Keep it Simple

Build Trust

Create a Great UX

Test, Test, and then Test Some More

Thank You
QUESTIONS?