WordCamp BKK 2017: Designing WordPress Websites that Convert

Designing WordPress Websites That Convert

By Bow Kraivanich

bow.kraivanich www.bowkraivanich.com@bowkraivanich

01

Introducing Conversion-Focused Design

Conversion-focused Design is a framework for creating high converting

websites — using principles of persuasive design, psychology, and communication.

Applied definition from Unbounce

Business Goal

Why Conversion MattersUser Friendly

Branding

Beautifully Design and Communication

UX

UVP

Diffe

rent

iatio

nContent

Relevant Information

Visitors

Inbound Framework

Leads Customers PromotersStrangers

Attract Convert Close Delight

Blog Keywords

Social Publishing

Forms Calls-toAction Landing Pages

CRM Email

Workflows

Surveys Smart Content

Social Monitoring

Framework by HubSpot

Three Elements of Conversion

Buyer Persona Clear Benefit

Immediate Gain/Result

Share Comment Gain Trust

Forms Calls-toAction Landing Pages

Attention Engagement Action

02

What is Your Goal?

— Ben Hunt, Convert Book

“To measure conversion, you have to have a goal — a result you can measure”

To Purchase

To Sign Up

To Try a Product

To Share Information

To Request A Quote / Contact

03

5 Design Principles to Increase your Conversion

Principle #1

Attention

Encapsulation

Subtle Encapsulation

Remove Distractions

Use Color and Contrast

Principle #2

Clarity

Prevent Choice Paralysis

One Message at A Time

Tell the Benefit

Tell the Benefit

Principle #3

Direction Cues

Use Arrow Get to The Point

Image as Directional Cues

Principle #4

Credibility

Social Proof

Show what other people talking about

Principle #5

Urgency and Scarcity

Create a Scarcity

Create a Scarcity

Countdown Timer

Countdown Timer

04

WordPress Plugins to Help you do the job

Google Analytics: Google Analytics Dashboard for WP

https://wordpress.org/plugins/google-analytics-dashboard-for-wp/

Google Analytics Dashboard for WP

Social Buttons: SumoMe

https://sumome.com/

SumoMe

Opt-in Forms: SumoMe, WordPress PopUp - Popover Maker

https://wordpress.org/plugins/wordpress-popup/screenshots/https://sumome.com/

SumoMe WordPress PopUp - Popover Maker

Heatmaps: SumoMe, hotjar

https://wordpress.org/plugins/hotjar-connecticator/https://hotjar.comhttps://sumome.com/

SumoMe Hotjar

A/B Testing: Title Experiments

https://wordpress.org/plugins/wp-experiments-free/

Title Experiments

“Good websites impress, Great websites convert”

THANK YOU

Feel free to connect with me :)

bow.kraivanich www.bowkraivanich.com@bowkraivanich