CREATING A DESIGN & USER EXPERIENCE THAT DRIVE CONVERSION

WELCOME

User Experience Forum 2013

Friday, April 5, 13

AGENDA

Introductions

Increasing conversion through usability designSome examples

Know your users - start with personas and user goalsThe elements of interactive designHow modern technologies have driven increased conversion

Some examplesMobile user experience

Break

Peer review of websites

Friday, April 5, 13

INTRODUCTIONS

About Shane Fell

•!18 years of marketing and business development experience

•!With Top Floor Technologies since 2002•!Spearheaded the launch of Top Floor’s ongoing

series of Internet marketing educational seminars•!Worked with numerous TFT clients to help create

a vision for their web marketing strategy•!Featured speaker on a variety of online marketing

subjects

Friday, April 5, 13

INTRODUCTIONS

About Clay Konnor

•!20 years digital marketing experience•!Nationally featured speaker on the topic of

user experience design•!Designed hundreds of websites•!Worked with brands such as The Gap,

Bombay Company, Motorola, Northwestern Mutual, Honeywell, ADP, GE Healthcare, Farmers Insurance

Friday, April 5, 13

INTRODUCTIONS

About Top Floor

•!14 years of digital marketing•!Website design & development•!Search engine marketing•!Web analytics and conversion optimization•!Branding and rebranding•!Online content marketing•! Integrated marketing•!Digital support of trade shows and events

Friday, April 5, 13

WEBSITE AS HUB OF MARKETING

Friday, April 5, 13

10 MOST EFFECTIVE B2B MARKETING CHANNELS

Friday, April 5, 13

PROGRESSION OF WEBSITE GOALS

10-15 years ago …

“Quick, we need a Web site!”

4-8 years ago …

“Okay, now that we have a Web site, how do we get people to find it?”

Today …

“Now that people are on our Web site, how do we engage them and get them to do what we want them to do?”

Friday, April 5, 13

THE IMPACT OF INTERNET TECHNOLOGIES ON MARKETING

Friday, April 5, 13

SUCCESS FORMULA

Website Visits x Conversion Percentage = Results

Friday, April 5, 13

INCREASING CONVERSION THROUGH UX DESIGN

Friday, April 5, 13

INCREASING CONVERSION THROUGH UX DESIGN

Friday, April 5, 13

“Usability • making sure that something works well: that a person of average (or even below average) ability and experience can use the

thing – whether it’s a website, a fighter jet, or a revolving door – for its intended purpose

without getting hopelessly frustrated”

THE IMPACT OF USABILITY ON CONVERSION

--Steve Krug - Author

defining usability

Friday, April 5, 13

DEFINING USABILITY

Friday, April 5, 13

why it matters

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

• The component most under your control• Delivers the biggest bang for your buck• Exponential effect on bottom line• You get the benefit… forever• Competitive advantage• Customer loyalty goes to the best user experience

Friday, April 5, 13

why it matters

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

• Companies that have engaged in conversionenhancement initiatives have seen average increases of25%-600% or more

• The median conversion increase is 40-60%

-- Jakob Nielsen’s report “ROI on Usability”

Friday, April 5, 13

which had greater conversion?

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

why it matters

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

familiar top nav

contact info

brief headlinesimple

instructions

stock photo of happy person

Friday, April 5, 13

why it matters

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

removed all nav

replace entire header of site with

just logo

replace stock photo with actually

relevant image

remove alternate contact info

more detailed copy about offer

simplify layout to two columns and

shade form column

big submit button - only button on page

Friday, April 5, 13

after testing:less copy worked

better

visual parity to online ad

Friday, April 5, 13

Conversion Increase = 600%

why it matters

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

why it matters

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

Conversion Increase = 58%

why it matters

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

why it matters

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

why it matters

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

why it matters

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

Conversion Increase = 2%

why it matters

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

Conversion Increase = 2%

why it matters

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

A Measly 2%?!

Friday, April 5, 13

effects on the bottom line

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Design Option 1 Click and Load Site

Option 2Asynchronous Site

Budget 1,000,000 1,000,000

Traffic 1,000,000 1,000,000

CPC $1.00 $1.00

Conversion Rate 3% 5%

Sales 30,000 50,000

Average RevenuePer Sale $100 $100

Total Web Sales $3,000,000 $5,000,000

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

What are some attributes of a good website?

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

What are some attributes of a good website?

What are some attributes of a bad website?

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Web users who have a positive user experience on your site are:

•!Twice as likely to return to the site•!Four times as likely to report enhanced brand

opinion.•!Four times as likely to make a future purchase.

Friday, April 5, 13

22

32

36

Did not trust the site

Forms required too much information

top reasons for site abandonment

Found it difficult to locate products or information

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

76 74 71

5445

24

Unsubscribe from

promotions and emails

Never purchase from the company

View the company negatively

Complain to others

Complain to company

the consequences of poor design

Never visit the site again

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

increased importance of usablity to users

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

18

29

2224

1313

2120

Ease of conversion

Ease of use(usability)

Security andconfidence

Confirmation of action

2007 2010

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Creating a user experience that facilitates:

Discovery

Recovery

Context

Feedback

Experimentation

Comparison

Collaboration

Friday, April 5, 13

A SUCCESSFUL WEBSITE

•!Based on strategic planning•!Targets specific, measurable goals•!Has a look and feel that establishes trust and

confidence in the brand•!Provides sufficient content to engage the user•!Built to perform in search engines•!Communicates clearly with visitors•!Provides sufficient content to engage the user•! Is built with a focus on user experience

Friday, April 5, 13

•!Built to maximize conversion•!Built around known personas and user goals•!The website allows users to manipulate

information “their way”•!Paths to user goals are obvious and guide users•!Conversion is easy

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

KNOW YOUR USERS

•!You are not your user •! Users have different goals than each other •! Users have different goals than you •! Users don’t care as you do

Friday, April 5, 13

WHO ARE YOU BUILDING YOUR WEBSITE FOR?

More $ales -Excellent!

Friday, April 5, 13

Your CEO?

WHO ARE YOU BUILDING YOUR WEBSITE FOR?

More $ales -Excellent!

Friday, April 5, 13

WHO ARE YOU BUILDING YOUR WEBSITE FOR?

Everyone who visits our

Website must register and provide all of their contact information.

Friday, April 5, 13

Your Sales Team?

WHO ARE YOU BUILDING YOUR WEBSITE FOR?

Everyone who visits our

Website must register and provide all of their contact information.

Friday, April 5, 13

WHO ARE YOU BUILDING YOUR WEBSITE FOR?

Why would we want any images on

our Website?

Friday, April 5, 13

Your IT Department?

WHO ARE YOU BUILDING YOUR WEBSITE FOR?

Why would we want any images on

our Website?

Friday, April 5, 13

WHO ARE YOU BUILDING YOUR WEBSITE FOR?

'To Start Press Any

Key'. Where's the ANY key?”

Friday, April 5, 13

Who are your target customers?What are their goals on you website once they are there?What roles do they play?How does your product/service help them?What questions do they ask when considering your offerings?What can they accomplish on your Website?What industries are they in?What is their education?How technically savvy are they?

GET TO KNOW YOUR USERS

Friday, April 5, 13

Who are your target customers?What are their goals on you website once they are there?What roles do they play?How does your product/service help them?What questions do they ask when considering your offerings?What can they accomplish on your Website?What industries are they in?What is their education?How technically savvy are they?

GET TO KNOW YOUR USERS

How do we deliver information to them in the methods that are most meaningful and useful to each?

Friday, April 5, 13

WHAT FRUSTRATES USERS?

•!Anything that slows the path to their goal •! Intro pages •! Ambiguous navigation •! Long navigation paths •! Page loads •! Long forms •! Registration without benefit •! Difficult conversion once goal is identified

•!Each time you make a user think too much you risk abandonment

Friday, April 5, 13

GET TO THE POINT

•!Users scan, search engines read•!Users should be able to quickly understand what each

piece of content is about•!Users need clear direction to their personal goals

Friday, April 5, 13

MAXIMIZE CALLS TO ACTION

•!Navigation is consistent and obvious•!Navigation guides users in methods most meaningful to them•!Clear user paths - don’t overwhelm users with choices•!Test your design for every identified persona

Friday, April 5, 13

FOLLOW KNOWN BEST PRACTICES

•!What site is this?•!What page is this?•!What are the major sections of the site?•!What are my options at this level?•!Where am I in relation to other information on the site?•!How can I find what I’m looking for?•!How can I make comparisons?•!How can I convert?

Friday, April 5, 13

FOLLOW KNOWN BEST PRACTICES

•!A consistent navigation scheme•!A call to action on every page•!Calls to action are placed in logical user flow•!Visual hierarchy that is known and tested to optimize performance•!User controls are obvious and guide users•!User controls that match user goals•!User controls that speed and ease a user’s process

Friday, April 5, 13

surface

skeleton

structure

scope

strategy

visual designinterface design

user experiencenavigation design

information architecture

content requirementstechnological requirements

user needsmarketing objectives

concrete

abstract

INTERACTIVE DESIGN PROCESS

Friday, April 5, 13

Building delivery methods for content that facilitate user goals.

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

the early webCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

Your competitor’s site!

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

The modern methodCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

4.35 3.17 3.06 1.37 0.19 0.11 0.03 0.05 0.20 1.22 2.86 3.095.35 4.03 3.77 2.51 1.84 1.59 0.85 1.22 1.94 3.25 5.65 6.001.53 1.36 2.69 3.64 3.32 3.78 3.66 4.22 3.82 2.41 2.92 2.473.17 3.02 3.59 3.90 3.80 3.65 3.80 3.41 3.30 2.88 3.65 3.422.01 2.08 2.39 2.85 6.21 9.33 5.70 7.58 7.63 5.64 2.66 1.83

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

Web pages feel more responsive by exchanging data with the server behind the scenes so that the entire page does

not have to be reloaded to give information.

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

some examples - empowering the user

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

some examples - empowering the user

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

some examples - empowering the user

Friday, April 5, 13

robust, user-centric navigationCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

robust, user-centric navigationCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

robust category navigationCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

robust category navigationCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

robust product informationCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

robust service informationCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

robust service informationCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

robust service informationCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

user criteria navigationCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSIONuser criteria navigation

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSIONuser criteria navigation

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSIONuser criteria navigation

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSIONuser assist wizards

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSIONuser assist wizards

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSIONuser assist wizards

Friday, April 5, 13

content customizationCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

robust product comparisonCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

segmented, actionable search resultsCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

segmented, actionable search resultsCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

segmented, actionable search resultsCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

segmented, actionable search resultsCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

self validating formsCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

inline functionalityCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

inline functionalityCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

single page checkout with progress indicatorCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

matching user goalsCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

predictive searchCREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

A WORD ABOUT MOBILE

Friday, April 5, 13

A WORD ABOUT MOBILE

Friday, April 5, 13

MOBILE USER EXPERIENCE

Friday, April 5, 13

MOBILE USER EXPERIENCE

Friday, April 5, 13

MOBILE USER EXPERIENCE

Friday, April 5, 13

MOBILE USER EXPERIENCE

Friday, April 5, 13

USER EXPERIENCE TESTING

conversion optimization

Continuing analysis aimed at improvement

Friday, April 5, 13

USER EXPERIENCE TESTING

conversion optimization

Continuing analysis aimed at improvement

Examine user behavior and conversion results to identify ares of improvement

Friday, April 5, 13

USER EXPERIENCE TESTING

conversion optimization

Continuing analysis aimed at improvement

Examine user behavior and conversion results to identify ares of improvement

User experience testing

Friday, April 5, 13

USER EXPERIENCE TESTING

conversion optimization

Continuing analysis aimed at improvement

Examine user behavior and conversion results to identify ares of improvement

User experience testing

Implementation of changes based on testing

Friday, April 5, 13

USER EXPERIENCE TESTING

conversion optimization

Continuing analysis aimed at improvement

Examine user behavior and conversion results to identify ares of improvement

User experience testing

Implementation of changes based on testing

Begin the process again...

Friday, April 5, 13

USER EXPERIENCE TESTING

•!Types of testing •! A-B Testing •! Multivariate Testing •! Small Sample Testing •! Full Persona / Use Case Testing (Morae Testing)

Friday, April 5, 13

22

32

36

Did not trust the site

Forms required too much information

top reasons for site abandonment

Found it difficult to locate products or information

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

conversion completion rates

59

5048

40

Optimized navigation

Persona based design / usability

Single page or process for

conversion

Average conversion performance of well-

designed site

Friday, April 5, 13

effects on the bottom line

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Design Option 1 Hierarchical Navigation

Option 2Filtered Navigation

Budget 1,000,000 1,000,000

Traffic 1,000,000 1,000,000

CPC $1.00 $1.00

Conversion Rate 3% 5%

Sales 30,000 50,000

Average RevenuePer Sale $100 $100

Total Web Sales $3,000,000 $5,000,000

Friday, April 5, 13

effects on brand perception

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

which had greater conversion?

CREATING A USER EXPERIENCE THAT DRIVES CONVERSION

Friday, April 5, 13

thank you

Friday, April 5, 13