wordcamp bkk 2017: designing wordpress websites that convert
TRANSCRIPT
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
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