Website Design Best Practices How to Increase Conversion and Drive Revenue: - design conventions that are proven to drive conversion - technologies you can use to better engage website visitors - tools to measure and quantify performance

1. Christopher Harmon
Principal
theBATstudio
chris@thebatstudio.com
linkedIn: h=p://www.linkedin.com/in/cjharmon
twi=er: cjharmon
Website Design Best Practices
How to Increase Conversion and Drive Revenue:
• design conventions that are proven to drive conversion
• technologies you can use to better engage website visitors
• tools to measure and quantify performance
AFRI-TECH SUMMIT 2011 | 1

2. Brand, Art & Technology
Strategy, design and interactive consulting that realizes
tangible business value.
• US-Based
®
• 80/20 US vs International
Clientele
• Recognized as a top-agency
by B2B Magazine
• 10+ of top 20 SaaS Companies
• Virtual Organization
AFRI-TECH SUMMIT 2011 | 2

3. AFRI-TECH SUMMIT 2011 | 3

4. AFRI-TECH SUMMIT 2011 | 4

5. Website Design Best Practices > Agenda
• Design conventions that drive conversion
> Focus on Usability
• Technologies you can use to better engage website visitors
> CRM / MAS / Identification / Targeting
• Tools to measure and quantify performance
> Site metrics vs Behavioral Metrics
AFRI-TECH SUMMIT 2011 | 5

6. Design Conventions That Drive Conversion
Focus on Usability
AFRI-TECH SUMMIT 2011 | 6

7. “
The broad goal of usability should be to:
• Present the information to the user in a clear and
concise way.
• To give the correct choices to the users, in a very
obvious way.
• To remove any ambiguity regarding the consequences
of an action e.g. clicking on delete/remove/purchase.
• Put the most important thing in the right place on a
web page or a web application
Source: Wikipedia
AFRI-TECH SUMMIT 2011 | 7

8. Where Many Websites Fail
Examples of Bad Usability
AFRI-TECH SUMMIT 2011 | 8

9. Blink Test
AFRI-TECH SUMMIT 2011 | 9

10. Blink Test
AFRI-TECH SUMMIT 2011 | 9

11. Blink Test
AFRI-TECH SUMMIT 2011 | 9

12. Blink Test
AFRI-TECH SUMMIT 2011 | 9

13. AFRI-TECH SUMMIT 2011 | 10

14. AFRI-TECH SUMMIT 2011 | 10

15. AFRI-TECH SUMMIT 2011 | 10

16. AFRI-TECH SUMMIT 2011 | 10

17. AFRI-TECH SUMMIT 2011 | 11

18. AFRI-TECH SUMMIT 2011 | 12

19. AFRI-TECH SUMMIT 2011 | 12

20. AFRI-TECH SUMMIT 2011 | 12

21. AFRI-TECH SUMMIT 2011 | 12

22. AFRI-TECH SUMMIT 2011 | 13

23. AFRI-TECH SUMMIT 2011 | 13

24. AFRI-TECH SUMMIT 2011 | 13

25. AFRI-TECH SUMMIT 2011 | 13

26. AFRI-TECH SUMMIT 2011 | 14

27. AFRI-TECH SUMMIT 2011 | 14

28. AFRI-TECH SUMMIT 2011 | 15

29. AFRI-TECH SUMMIT 2011 | 15

30. AFRI-TECH SUMMIT 2011 | 15

31. AFRI-TECH SUMMIT 2011 | 16

32. AFRI-TECH SUMMIT 2011 | 16

33. AFRI-TECH SUMMIT 2011 | 17

34. AFRI-TECH SUMMIT 2011 | 18

35. AFRI-TECH SUMMIT 2011 | 18

36. AFRI-TECH SUMMIT 2011 | 19

37. AFRI-TECH SUMMIT 2011 | 19

38. Usability Best Practices
Best Practice #1: Persona Based Design
AFRI-TECH SUMMIT 2011 | 20

39. Persona-Based Design
• Segment Target Audience
➡ Validate
• Develop High-Level Persona Descriptions
➡ Validate
• Develop Messaging
➡ Validate
• Craft Persona-Based:
✓ Information Architecture (Sitemap / Wireframes)
✓ Visual Design
✓ Content Strategy
✓ Testing-Plan
•
AFRI-TECH SUMMIT 2011 | 21

40. Eloqua
•Second Gen
Segmentation
•Multi-Dimensional
•Use of banner for top
level activity-based
segmentation
•Use of a simple, clear
and easy
segmentation nav
module
•Extends throughout
website experience
AFRI-TECH SUMMIT 2011 | 22

41. Eloqua
•Second Gen
Segmentation
•Multi-Dimensional
•Use of banner for top
level activity-based
segmentation
•Use of a simple, clear
and easy
segmentation nav
module
•Extends throughout
website experience
AFRI-TECH SUMMIT 2011 | 22

42. Eloqua
•Second Gen
Segmentation
•Multi-Dimensional
•Use of banner for top
level activity-based
segmentation
•Use of a simple, clear
and easy
segmentation nav
module
•Extends throughout
website experience
AFRI-TECH SUMMIT 2011 | 22

43. Usability Best Practices
Best Practice #2: Clear Information Hierarchy
AFRI-TECH SUMMIT 2011 | 23

44. Clear Information Hierarchy
• Prioritize Messaging
➡ Create a Messaging Funnel
• Develop Sitemap & Wireframes
➡ Validate Against Personas
• Translate into Visual Designs
➡ Validate
• Monitor and Test
NOTE: there is no ONE right way.
AFRI-TECH SUMMIT 2011 | 24

45. Basecamp
1.Who are we and what
do we do?
2.Notice the seal of
customer approval!
3.Now that you’re ready
– go ahead and
click on our CTA
4.Not ready yet? Check
out these clients
and get additional
immediate insight
into what we do…
AFRI-TECH SUMMIT 2011 | 25

46. Basecamp
1.Who are we and what
do we do?
2.Notice the seal of
customer approval!
3.Now that you’re ready
– go ahead and
click on our CTA
4.Not ready yet? Check
out these clients
and get additional
immediate insight
into what we do…
AFRI-TECH SUMMIT 2011 | 25

47. Basecamp
1.Who are we and what
do we do?
2.Notice the seal of
customer approval!
3.Now that you’re ready
– go ahead and
click on our CTA
4.Not ready yet? Check
out these clients
and get additional
immediate insight
into what we do…
AFRI-TECH SUMMIT 2011 | 25

48. Basecamp
1.Who are we and what
do we do?
2.Notice the seal of
customer approval!
3.Now that you’re ready
– go ahead and
click on our CTA
4.Not ready yet? Check
out these clients
and get additional
immediate insight
into what we do…
AFRI-TECH SUMMIT 2011 | 25

49. Basecamp
1.Who are we and what
do we do?
2.Notice the seal of
customer approval!
3.Now that you’re ready
– go ahead and
click on our CTA
4.Not ready yet? Check
out these clients
and get additional
immediate insight
into what we do…
AFRI-TECH SUMMIT 2011 | 25

50. Usability Best Practices
Best Practice #3: Content is King
AFRI-TECH SUMMIT 2011 | 26

51. Content is King
• Inventory Content Assets
• Map Assets against Segmentation
• Map Assets against Information Hierarchy
• Prioritize
• Monitor
AFRI-TECH SUMMIT 2011 | 27

52. Eloqua
1.Present easily
digestible pieces of
content, ideally
utilizing headers,
sub-heads,
bulleted-lists and
call-outs
2.Present alternative
forms of content
such as video,
information
graphics, etc
3.Provide easy access
to contextually
related experiences
AFRI-TECH SUMMIT 2011 | 28

53. Eloqua
1.Present easily
digestible pieces of
content, ideally
utilizing headers,
sub-heads,
bulleted-lists and
call-outs
2.Present alternative
forms of content
such as video,
information
graphics, etc
3.Provide easy access
to contextually
related experiences
AFRI-TECH SUMMIT 2011 | 28

54. Eloqua
1.Present easily
digestible pieces of
content, ideally
utilizing headers,
sub-heads,
bulleted-lists and
call-outs
2.Present alternative
forms of content
such as video,
information
graphics, etc
3.Provide easy access
to contextually
related experiences
AFRI-TECH SUMMIT 2011 | 28

55. Eloqua
1.Present easily
digestible pieces of
content, ideally
utilizing headers,
sub-heads,
bulleted-lists and
call-outs
2.Present alternative
forms of content
such as video,
information
graphics, etc
3.Provide easy access
to contextually
related experiences
AFRI-TECH SUMMIT 2011 | 28

56. Web Technologies
You Can Use to Better Engage the Visitor
AFRI-TECH SUMMIT 2011 | 29

57. CRM
Salesforce
1.Capture Prospects
2.Manage through
Sales Funnel /
Waterfall
3.Establish internal
SLAs
4.Continue experience
through customer
AFRI-TECH SUMMIT 2011 | 30

58. Marketing Automation Solutions
Marketo
1.Create Email
Campaigns and
Programs
2.Capture Leads
3.Use Lead Scoring
4.Use Lead Nurturing
5.Analyze Results
AFRI-TECH SUMMIT 2011 | 31

59. Real-Time Identification
Demandbase
1.Sense IP Address
2.Match against
proprietary
database
3.Use custom fields
Text
4.Customize experience
AFRI-TECH SUMMIT 2011 | 32

60. Real-Time Identification
Demandbase
1.Sense IP Address
2.Match against
proprietary
database
3.Use custom fields
Text
4.Customize experience
AFRI-TECH SUMMIT 2011 | 32

61. Real-Time Identification
Demandbase
1.Sense IP Address
2.Match against
proprietary
database
3.Use custom fields
Text
4.Customize experience
AFRI-TECH SUMMIT 2011 | 32

62. Real-Time Identification
Demandbase
1.Sense IP Address
2.Match against
proprietary
database
3.Use custom fields
Text
4.Customize experience
AFRI-TECH SUMMIT 2011 | 32

63. Real-Time Identification
Demandbase
1.Sense IP Address
2.Match against
proprietary
database
3.Use custom fields
Text
4.Customize experience
AFRI-TECH SUMMIT 2011 | 32

64. Content Targeting & Testing
Adobe Test &
Target
1.Select Content Areas
for Testing
2.Use A/B or multi-
variate testing on
text, images, offers
or even design
3.Automatically
optimize
4.whichtestwon.com/
AFRI-TECH SUMMIT 2011 | 33

65. Measuring Success
Beyond Traditional Analytics
AFRI-TECH SUMMIT 2011 | 34

66. Lead Scoring / Conversion Analysis
Marketo
1.Differentiate leads
based on
meaningful data
2.Automatically deliver
leads to different
parts of the funnel
based on that data
3.Creates an
objectives-based
model for tracking
leads, prospects
and opportunities
AFRI-TECH SUMMIT 2011 | 35

67. Account-Based Analytics
Adobe
SiteCatalyst
1.Monitor account
analytics
2.Get alerts across
accounts
3.Track conversion
success by account
AFRI-TECH SUMMIT 2011 | 36

68. Heat Mapping
Crazy Egg
1.Real-Click technology
2.Presents a variety of
heatmap options
3.Use data to validate
or identify usability
issues
AFRI-TECH SUMMIT 2011 | 37

69. Reputation Analytics
Post Rank
1.Track key social
media content the
same way search
engines do
2.Develop insights into
which types of
content deliver
more influence
3.Focus resources and
assets around
content that
converts
AFRI-TECH SUMMIT 2011 | 38

70. Website Design Best Practices
Parting Thoughts
AFRI-TECH SUMMIT 2011 | 39

71. • Always put the user first
• Use technology to improve the experience
➡ Not as a crutch
➡ Not for the cool factor
• Set clear objective and measure performance
➡ But don’t lose sight of the user
AFRI-TECH SUMMIT 2011 | 40

72. Christopher Harmon
Principal
theBATstudio
chris@thebatstudio.com
linkedIn: h=p://www.linkedin.com/in/cjharmon
twi=er: cjharmon
Website Design Best Practices
How to Increase Conversion and Drive Revenue:
• design conventions that are proven to drive conversion
• technologies you can use to better engage website visitors
• tools to measure and quantify performance
AFRI-TECH SUMMIT 2011 | 41