Brand, Art & TechnologyStrategy, design and interactive consulting that realizes  tangible business value.•   US-Based    ...
AFRI-TECH SUMMIT 2011 |   3
AFRI-TECH SUMMIT 2011 |   4
Website Design Best Practices > Agenda•   Design conventions that drive conversion    > Focus on Usability•   Technologies...
Design Conventions That Drive ConversionFocus on Usability                               AFRI-TECH SUMMIT 2011 |   6
“The broad goal of usability should be to:  • Present the information to the user in a clear and    concise way.  • To giv...
Where Many Websites FailExamples of Bad Usability                            AFRI-TECH SUMMIT 2011 |   8
Blink
Test         AFRI-TECH SUMMIT 2011 |   9
Blink
Test         AFRI-TECH SUMMIT 2011 |   9
Blink
Test         AFRI-TECH SUMMIT 2011 |   9
Blink
Test         AFRI-TECH SUMMIT 2011 |   9
AFRI-TECH SUMMIT 2011 | 10
AFRI-TECH SUMMIT 2011 | 10
AFRI-TECH SUMMIT 2011 | 10
AFRI-TECH SUMMIT 2011 | 10
AFRI-TECH SUMMIT 2011 | 11
AFRI-TECH SUMMIT 2011 | 12
AFRI-TECH SUMMIT 2011 | 12
AFRI-TECH SUMMIT 2011 | 12
AFRI-TECH SUMMIT 2011 | 12
AFRI-TECH SUMMIT 2011 | 13
AFRI-TECH SUMMIT 2011 | 13
AFRI-TECH SUMMIT 2011 | 13
AFRI-TECH SUMMIT 2011 | 13
AFRI-TECH SUMMIT 2011 | 14
AFRI-TECH SUMMIT 2011 | 14
AFRI-TECH SUMMIT 2011 | 15
AFRI-TECH SUMMIT 2011 | 15
AFRI-TECH SUMMIT 2011 | 15
AFRI-TECH SUMMIT 2011 | 16
AFRI-TECH SUMMIT 2011 | 16
AFRI-TECH SUMMIT 2011 | 17
AFRI-TECH SUMMIT 2011 | 18
AFRI-TECH SUMMIT 2011 | 18
AFRI-TECH SUMMIT 2011 | 19
AFRI-TECH SUMMIT 2011 | 19
Usability Best PracticesBest Practice #1: Persona Based Design                                         AFRI-TECH SUMMIT 20...
Persona-Based Design• Segment Target Audience    ➡   Validate• Develop High-Level Persona Descriptions    ➡   Validate• De...
Eloqua•Second Gen   Segmentation•Multi-Dimensional•Use of banner for top   level activity-based   segmentation•Use of a si...
Eloqua•Second Gen   Segmentation•Multi-Dimensional•Use of banner for top   level activity-based   segmentation•Use of a si...
Eloqua•Second Gen   Segmentation•Multi-Dimensional•Use of banner for top   level activity-based   segmentation•Use of a si...
Usability Best PracticesBest Practice #2: Clear Information Hierarchy                                           AFRI-TECH ...
Clear Information Hierarchy• Prioritize Messaging   ➡   Create a Messaging Funnel• Develop Sitemap & Wireframes   ➡   Vali...
Basecamp1.Who are we and what   do we do?2.Notice the seal of   customer approval!3.Now that you’re ready   – go ahead and...
Basecamp1.Who are we and what   do we do?2.Notice the seal of   customer approval!3.Now that you’re ready   – go ahead and...
Basecamp1.Who are we and what   do we do?2.Notice the seal of   customer approval!3.Now that you’re ready   – go ahead and...
Basecamp1.Who are we and what   do we do?2.Notice the seal of   customer approval!3.Now that you’re ready   – go ahead and...
Basecamp1.Who are we and what   do we do?2.Notice the seal of   customer approval!3.Now that you’re ready   – go ahead and...
Usability Best PracticesBest Practice #3: Content is King                                    AFRI-TECH SUMMIT 2011 | 26
Content is King• Inventory Content Assets• Map Assets against Segmentation• Map Assets against Information Hierarchy• Prio...
Eloqua1.Present easily   digestible pieces of   content, ideally   utilizing headers,   sub-heads,   bulleted-lists and   ...
Eloqua1.Present easily   digestible pieces of   content, ideally   utilizing headers,   sub-heads,   bulleted-lists and   ...
Eloqua1.Present easily   digestible pieces of   content, ideally   utilizing headers,   sub-heads,   bulleted-lists and   ...
Eloqua1.Present easily   digestible pieces of   content, ideally   utilizing headers,   sub-heads,   bulleted-lists and   ...
Web TechnologiesYou Can Use to Better Engage the Visitor                                           AFRI-TECH SUMMIT 2011 |...
CRM      Salesforce      1.Capture Prospects      2.Manage through         Sales Funnel /         Waterfall      3.Establi...
Marketing Automation Solutions                         Marketo                         1.Create Email                     ...
Real-Time Identification                           Demandbase                           1.Sense IP Address                ...
Real-Time Identification                           Demandbase                           1.Sense IP Address                ...
Real-Time Identification                           Demandbase                           1.Sense IP Address                ...
Real-Time Identification                           Demandbase                           1.Sense IP Address                ...
Real-Time Identification                           Demandbase                           1.Sense IP Address                ...
Content Targeting & Testing                          Adobe Test &                          Target                         ...
Measuring SuccessBeyond Traditional Analytics                               AFRI-TECH SUMMIT 2011 | 34
Lead Scoring / Conversion Analysis                          Marketo                          1.Differentiate leads        ...
Account-Based Analytics                          Adobe                          SiteCatalyst                          1.Mo...
Heat Mapping               Crazy Egg               1.Real-Click technology               2.Presents a variety of          ...
Reputation Analytics                       Post Rank                       1.Track key social                           me...
Website Design Best PracticesParting Thoughts                                AFRI-TECH SUMMIT 2011 | 39
•   Always put the user first•   Use technology to improve the experience    ➡ Not as a crutch    ➡ Not for the cool facto...
Christopher
Harmon                                                                                   Principal            ...
Afri-Tech 2011 Website Design Best-Practices
Upcoming SlideShare
Loading in...5
×

Afri-Tech 2011 Website Design Best-Practices

1,208

Published on

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

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,208
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • What is the first read? The second read? Do you know what Revenue Cycle Analytics are?\n
  • What is the first read? The second read? Do you know what Revenue Cycle Analytics are?\n
  • What is the first read? The second read? Do you know what Revenue Cycle Analytics are?\n
  • What is the first read? The second read? Do you know what Revenue Cycle Analytics are?\n
  • What is the first read? The second read? Do you know what Revenue Cycle Analytics are?\n
  • What do they want you to do on this website?\n
  • Which button should you press?\n
  • Which button should you press?\n
  • Which button should you press?\n
  • Which button should you press?\n
  • Which button should you press?\n
  • Out of the 9 graphics supported Calls-to-Action, which is the most important?\n
  • Out of the 9 graphics supported Calls-to-Action, which is the most important?\n
  • Out of the 9 graphics supported Calls-to-Action, which is the most important?\n
  • Out of the 9 graphics supported Calls-to-Action, which is the most important?\n
  • Out of the 9 graphics supported Calls-to-Action, which is the most important?\n
  • Can anyone here find what there looking for on a menu like this? It’s kind of like going to a restaurant and trying to decide what to eat...\n
  • This is the FIFTH banner... with each banner rotating every 8 seconds... That’s 40 seconds before you see this... What is your average time per visit? per page?\n
  • This is the FIFTH banner... with each banner rotating every 8 seconds... That’s 40 seconds before you see this... What is your average time per visit? per page?\n
  • This is the FIFTH banner... with each banner rotating every 8 seconds... That’s 40 seconds before you see this... What is your average time per visit? per page?\n
  • where do you learn about Oracle On Demand - the topic this page is supposed to support?\n
  • whose eyes are glazing over?\n
  • where doe the real content start?\n
  • What do they want you to do - specific to this page?\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Afri-Tech 2011 Website Design Best-Practices

    1. 1. Christopher
Harmon Principal theBATstudio chris@thebatstudio.com linkedIn:
h=p://www.linkedin.com/in/cjharmon twi=er:
cjharmonWebsite Design Best PracticesHow 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. 2. Brand, Art & TechnologyStrategy, 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. 3. AFRI-TECH SUMMIT 2011 | 3
    4. 4. AFRI-TECH SUMMIT 2011 | 4
    5. 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. 6. Design Conventions That Drive ConversionFocus on Usability AFRI-TECH SUMMIT 2011 | 6
    7. 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. 8. Where Many Websites FailExamples of Bad Usability AFRI-TECH SUMMIT 2011 | 8
    9. 9. Blink
Test AFRI-TECH SUMMIT 2011 | 9
    10. 10. Blink
Test AFRI-TECH SUMMIT 2011 | 9
    11. 11. Blink
Test AFRI-TECH SUMMIT 2011 | 9
    12. 12. Blink
Test AFRI-TECH SUMMIT 2011 | 9
    13. 13. AFRI-TECH SUMMIT 2011 | 10
    14. 14. AFRI-TECH SUMMIT 2011 | 10
    15. 15. AFRI-TECH SUMMIT 2011 | 10
    16. 16. AFRI-TECH SUMMIT 2011 | 10
    17. 17. AFRI-TECH SUMMIT 2011 | 11
    18. 18. AFRI-TECH SUMMIT 2011 | 12
    19. 19. AFRI-TECH SUMMIT 2011 | 12
    20. 20. AFRI-TECH SUMMIT 2011 | 12
    21. 21. AFRI-TECH SUMMIT 2011 | 12
    22. 22. AFRI-TECH SUMMIT 2011 | 13
    23. 23. AFRI-TECH SUMMIT 2011 | 13
    24. 24. AFRI-TECH SUMMIT 2011 | 13
    25. 25. AFRI-TECH SUMMIT 2011 | 13
    26. 26. AFRI-TECH SUMMIT 2011 | 14
    27. 27. AFRI-TECH SUMMIT 2011 | 14
    28. 28. AFRI-TECH SUMMIT 2011 | 15
    29. 29. AFRI-TECH SUMMIT 2011 | 15
    30. 30. AFRI-TECH SUMMIT 2011 | 15
    31. 31. AFRI-TECH SUMMIT 2011 | 16
    32. 32. AFRI-TECH SUMMIT 2011 | 16
    33. 33. AFRI-TECH SUMMIT 2011 | 17
    34. 34. AFRI-TECH SUMMIT 2011 | 18
    35. 35. AFRI-TECH SUMMIT 2011 | 18
    36. 36. AFRI-TECH SUMMIT 2011 | 19
    37. 37. AFRI-TECH SUMMIT 2011 | 19
    38. 38. Usability Best PracticesBest Practice #1: Persona Based Design AFRI-TECH SUMMIT 2011 | 20
    39. 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. 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. 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. 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. 43. Usability Best PracticesBest Practice #2: Clear Information Hierarchy AFRI-TECH SUMMIT 2011 | 23
    44. 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. 45. Basecamp1.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 CTA4.Not ready yet? Check out these clients and get additional immediate insight into what we do… AFRI-TECH SUMMIT 2011 | 25
    46. 46. Basecamp1.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 CTA4.Not ready yet? Check out these clients and get additional immediate insight into what we do… AFRI-TECH SUMMIT 2011 | 25
    47. 47. Basecamp1.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 CTA4.Not ready yet? Check out these clients and get additional immediate insight into what we do… AFRI-TECH SUMMIT 2011 | 25
    48. 48. Basecamp1.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 CTA4.Not ready yet? Check out these clients and get additional immediate insight into what we do… AFRI-TECH SUMMIT 2011 | 25
    49. 49. Basecamp1.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 CTA4.Not ready yet? Check out these clients and get additional immediate insight into what we do… AFRI-TECH SUMMIT 2011 | 25
    50. 50. Usability Best PracticesBest Practice #3: Content is King AFRI-TECH SUMMIT 2011 | 26
    51. 51. Content is King• Inventory Content Assets• Map Assets against Segmentation• Map Assets against Information Hierarchy• Prioritize• Monitor AFRI-TECH SUMMIT 2011 | 27
    52. 52. Eloqua1.Present easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outs2.Present alternative forms of content such as video, information graphics, etc3.Provide easy access to contextually related experiences AFRI-TECH SUMMIT 2011 | 28
    53. 53. Eloqua1.Present easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outs2.Present alternative forms of content such as video, information graphics, etc3.Provide easy access to contextually related experiences AFRI-TECH SUMMIT 2011 | 28
    54. 54. Eloqua1.Present easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outs2.Present alternative forms of content such as video, information graphics, etc3.Provide easy access to contextually related experiences AFRI-TECH SUMMIT 2011 | 28
    55. 55. Eloqua1.Present easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outs2.Present alternative forms of content such as video, information graphics, etc3.Provide easy access to contextually related experiences AFRI-TECH SUMMIT 2011 | 28
    56. 56. Web TechnologiesYou Can Use to Better Engage the Visitor AFRI-TECH SUMMIT 2011 | 29
    57. 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. 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. 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. 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. 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. 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. 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. 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. 65. Measuring SuccessBeyond Traditional Analytics AFRI-TECH SUMMIT 2011 | 34
    66. 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. 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. 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. 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. 70. Website Design Best PracticesParting Thoughts AFRI-TECH SUMMIT 2011 | 39
    71. 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. 72. Christopher
Harmon Principal theBATstudio chris@thebatstudio.com linkedIn:
h=p://www.linkedin.com/in/cjharmon twi=er:
cjharmonWebsite Design Best PracticesHow 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

    ×