Successful Website Redesign

879 views

Published on

Learn what top B2B companies are doing well and where they're falling down when it comes to website usability.

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
879
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • OpportunityBuild a world class web destination for UC4 that results in more traffic, more leads and better qualified leads.  Develop an dynamic, engaging online experience for our prospects and clients that delivers educational content and media that drives demand.Utilize web best-practicesImproved, engaging user-experience – Web 2.0 functionality and interactivityHelp reposition the company, launch platform for our new brandIndustry thought of UC4 as a good playerSet ourselves apart from the ankle-bitersInnovative positioningBold, visual store-front – break-thruRich-media assets and resourcesSaturate the website with rich, engaging and educational assets that drive thought-leadership, demand, and conversion
  • Limited Web 2.0 functionality or interactivity:Homepage promotions could either be single Flash, or rotating static imagesLimited interactivity on site – just navigation and standard linkingSingle layout option for interior pagesOverall design and layout not meeting majority of browser/monitor configurationsVisual design and layout limited, would not support rebrandLimited platform for future developmentHosted on a tier 2 provider – global performance not sufficientDated content management systemPretty static siteNarrow, wasn’t taking advantage of monitor spaceCreative was dryLack of rich-media, interesting, assets – focus on WPs4 sitesNo integration with our marketing automation tool or SFANeeded to redefine our KPIs
  • OpportunityBuild a world class web destination for UC4 that results in more traffic, more leads and better qualified leads.  Develop an dynamic, engaging online experience for our prospects and clients that delivers educational content and media that drives demand.Utilize web best-practicesImproved, engaging user-experience – Web 2.0 functionality and interactivityHelp reposition the company, launch platform for our new brandIndustry thought of UC4 as a good playerSet ourselves apart from the ankle-bitersInnovative positioningBold, visual store-front – break-thruRich-media assets and resourcesSaturate the website with rich, engaging and educational assets that drive thought-leadership, demand, and conversion
  • We all deal with different constitutes at our respective companies saying – all this stuff is really important and cool!!! Mgmt wants everything represented on the homepageFortunately, our CMO gave us the freedom to break thru the clutterAlso creative: no stereotypes – creative process was fun, at least for me. Push the edgesWhat we have is, all the usual suspects, but what do we look at first? Strong storefront Break-thru messaging Bold, visuals – but limit the use of visual stereotypesSecondary messaging is nextThe usual requirements are there, just clearly tertieryLeads to interactivity…
  • Good
  • We all deal with different constitutes at our respective companies saying – all this stuff is really important and cool!!! Mgmt wants everything represented on the homepageFortunately, our CMO gave us the freedom to break thru the clutterAlso creative: no stereotypes – creative process was fun, at least for me. Push the edgesWhat we have is, all the usual suspects, but what do we look at first? Strong storefront Break-thru messaging Bold, visuals – but limit the use of visual stereotypesSecondary messaging is nextThe usual requirements are there, just clearly tertieryLeads to interactivity…
  • Successful Website Redesign

    1. 1. Online Marketing Summit<br />San Jose | June 18, 2010<br />Successful Website Redesign: Strategy, Design and Content <br /> Christopher Harmon <br /> chris@thebatstudio.com <br /> Principal <br />theBATstudio<br />1<br />
    2. 2. First:Learn what top B2B companies are doing well and where they're falling down when it comes to website usability. <br />Second:Through UC4's recent website redesign initiative you will hear great tips on how to build a strategy, determine design and content-a mix that saw significant boosts in conversions and visitor engagement for UC4.<br />2<br />
    3. 3. 3<br />The Brand, Art & Technology Studiohttp://www.thebatstudio.com<br />Strategy, design and interactive services that realize tangible business objectives.<br />Serving:<br /><ul><li>B2B / SaaS / Tech
    4. 4. Consumer
    5. 5. Non-Profit</li></ul>Explore our website to learn more about our agile, adept and affordable approach.<br />Clients include:<br />
    6. 6. Best Practice Website Processes and… What exactly does usability mean?<br />Why You SHOULD Care…<br />Usability Best Practices: 3 Actionable Steps to a Better Website<br />UC4 Case Study<br />Q&A / Discussion<br />4<br />Agenda<br />
    7. 7. Best Practice Website Processes <br />6/16/10<br />5<br />
    8. 8. 6<br />Strategy<br />Content<br />Design<br />
    9. 9. Best Practice Website Processes and… What exactly does usability mean?<br />6/16/10<br />7<br />
    10. 10. 8<br />“<br />The user should be able to intuitively relate the actions he needs to perform on the web page, with other interactions he sees in the general domain of life e.g. press of a button leads to some action.<br />- Wikipedia<br />
    11. 11. 9<br />“<br />The broad goal of usability should be to:<br /><ul><li>Present the information to the user in a clear and concise way.
    12. 12. To give the correct choices to the users, in a very obvious way.
    13. 13. To remove any ambiguity regarding the consequences of an action e.g. clicking on delete/remove/purchase.
    14. 14. Put the most important thing in the right place on a web page or a web application</li></ul>- Wikipedia<br />
    15. 15. Why You SHOULD Care…<br />10<br />
    16. 16. 11<br />“<br />With limited screen real estate and robust content and functionality requirements, designers are forced to make tradeoffs to achieve their client’s objectives. However, when usability suffers, even the best content and functionality is often ignored.<br />- abstracted from Forrester<br />
    17. 17. 12<br />Example: Who does this speak to?<br />
    18. 18. 13<br />Example: What would you click on?<br />
    19. 19. Example: What would you click on? (part2)<br />3<br />2<br />1<br />4<br />5<br />14<br />
    20. 20. 15<br />Example: What should you click on?<br />
    21. 21. 16<br />Example: What is the second read?<br />
    22. 22. 17<br />Example: Blink Test – What’s the takeaway?<br />
    23. 23. 18<br />Example: What would you read?<br />
    24. 24. 19<br />Example: Where does the real content start?<br />
    25. 25. 20<br />Example: Are you compelled?<br />
    26. 26. 21<br />Example: Benefits Galore – But what do you do?<br />
    27. 27. 22<br />Example: What’s clickable?<br />
    28. 28. 23<br />Example: What about here?<br />
    29. 29. 24<br />Example: Huh?<br />
    30. 30. <ul><li>Lead generation
    31. 31. Conversion
    32. 32. Deep Funnel Activity
    33. 33. Executive and Board Recognition
    34. 34. Budgets</li></ul>= CMO expectancy < 2 years<br />25<br />Bad Usability =<br />
    35. 35. 3) Usability Best Practices:Three Actionable Steps to a Better Website<br />26<br />
    36. 36. Usability Best Practice #1Persona-based Design<br />27<br />
    37. 37. Persona-based Design is the process of identifying your target audience, understanding their points of pain, and addressing such with a clear 1-1 offer or set of solutions.<br />28<br />Usability Best Practice #1<br />Persona-based Design<br />
    38. 38. 29<br />Usability Best Practice #1<br />Persona-based Design – How to:<br />Segment Target Audience w/ Sales and Product Teams<br />Interview Internal Audience Experts<br />Interview Target Audience(telephone / IDI / user group / focus group)<br />Develop High-Level Persona Descriptions<br />Test Descriptions with Stakeholders<br />Develop Messaging Statements/Matrices<br />Develop Product and Demand-Generation Marketing Programs Aligned with Sales Channels<br />Craft Persona-based:<br />Information Architecture (Sitemap / Wireframes)<br />Visual Design<br />Content Strategy (campaigns, headlines, copy, images, multimedia, offers, collateral, etc.)<br />Testing-Plan (paper-prototypes, friendly reviews, IDIs)<br />
    39. 39. 30<br />Usability Best Practice #1<br />Persona-based Design<br />SuccessFactors<br /><ul><li>Leading B2B Adopters
    40. 40. Define segments by business size
    41. 41. In primary nav
    42. 42. On product pages
    43. 43. NOT on homepage?</li></li></ul><li>31<br />Usability Best Practice #1<br />Persona-based Design<br />Omniture<br /><ul><li>Early B2B Adopters
    44. 44. Limited role-based segmentation
    45. 45. Complex activity / product based segmentation
    46. 46. Must be working?3 years and running</li></li></ul><li>Usability Best Practice #1<br />Persona-based Design<br />Coupa Software<br /><ul><li>New SaaS Entrant
    47. 47. Multi-Dimensional Segmentation
    48. 48. Complexity reduced through simple, intuitive interface
    49. 49. Not extended through website experience – why?</li></ul>32<br />
    50. 50. Usability Best Practice #1<br />Persona-based Design<br />Eloqua<br /><ul><li>Second Gen Segmentation
    51. 51. Multi-Dimensional
    52. 52. Use of banner for top level activity-based segmentation
    53. 53. Use of a simple, clear and easy nav module
    54. 54. Extends throughout website experience</li></ul>33<br />
    55. 55. Usability Best Practice #2Intuitive, Clear Information Hierarchy<br />34<br />
    56. 56. Usability Best Practice #2<br />Intuitive, Clear Information Hierarchy<br />Information Hierarchy refers to the “funnel” or order of information that your audience should engage in.<br />35<br />
    57. 57. 36<br />Usability Best Practice #2<br />Intuitive, Clear Information Hierarchy – How to:<br />Leverage Segmentation to Develop Messaging Hierarchy<br />Based on that Hierarchy, Develop a Sitemap Funnel<br />Test Sitemap against Personas and Refine<br />Based on Hierarchy, Develop Wireframes with a CLEAR Information Funnel<br />Translate Wireframes into Visual Design – Provide Design team the FREEDOM to realize Hierarchy through Design<br />Test Visual Design against Personas and Refine<br />Monitor Site Performance with Overlays and Refine<br />
    58. 58. 37<br />Usability Best Practice #2<br />Intuitive – Clear Information Hierarchy<br />Basecamp<br />Who are we and what do we do?<br />Take a look – and notice the seal of customer approval!<br />Now that you’re ready – go ahead and click on our CTA<br />Not ready yet? Check out these clients and get additional immediate insight into what we do…<br />All in a simple, clean, un-cluttered interface.<br />1<br />2<br />4<br />3<br />
    59. 59. 38<br />Usability Best Practice #2<br />Intuitive – Clear Information Hierarchy<br />4<br />NetSuite<br />Leadership messaging<br />Check out some of the customers we’ve helped<br />Who we are and what we do<br />No more than three “Next Steps”<br />Need more detail? No problem, we’ll help you qualify right on the homepage.<br />2<br />1<br />3<br />5<br />
    60. 60. 39<br />Usability Best Practice #2<br />Intuitive – Clear Information Hierarchy<br />3<br />Conversive<br />Simple, plain-English headline<br />Ever-present “Next Steps” module<br />Prominent information graphic<br />Content – provided in multiple formats for easy-digesting<br />Clear progression of section content with a natural conclusion<br />In-depth content for the indoctrinated<br />2<br />1<br />4<br />5<br />6<br />
    61. 61. Usability Best Practice #3Content is STILL King<br />40<br />
    62. 62. Content is not JUST Copy.Rather, content is the summary of campaigns, offers, calls-to-action, headlines, subheads, copy, call-outs, multimedia, information graphics and even images.Content is THE most under-appreciated aspect of MOST websites.<br />41<br />Usability Best Practice #3<br />Content is STILL King<br />
    63. 63. Inventory Content Assets<br />Map Assets against Segmentation<br />Map Assets against Information Hierarchy<br />Prioritize<br />Homepage<br />About Us<br />Social Media<br />Category Pages<br />Product / Solution Pages<br />Resources<br />News / Events<br />Execute<br />Monitor<br />Conversions<br />Time on page<br />Top Exits<br />Click Overlays<br />42<br />Usability Best Practice #3<br />Content is STILL King – How to:<br />
    64. 64. 43<br />Usability Best Practice #3<br />Content is still KING<br />3<br />Eloqua<br />Present easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outs<br />Present alternative forms of content such as video, information graphics, etc<br />Provide easy access to contextually related experiences<br />1<br />2<br />
    65. 65. 44<br />Usability Best Practice #3<br />Content is still KING<br />3<br />Coupa Software<br />Use headers with HTML text to give a sense of space AND improve SEO<br />Present alternative forms of content such as video, information graphics, etc<br />Present easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outs<br />1<br />2<br />
    66. 66. 45<br />3<br />Usability Best Practice #3<br />Content is still KING<br />Foundation Source<br />Use headers with HTML text to give a sense of space AND improve SEO<br />Present easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outs<br />Call-out benefit statements in easily digestible form<br />2<br />1<br />
    67. 67. 46<br />Usability Best Practice #3<br />Content is still KING<br />Conversive<br />Use headers with HTML text to give a sense of space AND improve SEO<br />Present easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outs<br />2<br />1<br />
    68. 68. It all starts with SEGMENTATION<br />Persona-Based Design = More Clicks<br />Create a Website Funnel<br />Prioritize Content to WIN!<br />47<br />Bringing it ALL together:<br />
    69. 69. 4) Case Study: UC4<br />48<br />
    70. 70. We automate IT and business processes, anywhere.<br />Based in Austria, US headquarters in Bellevue<br />1,800+ customers in more than 50 countries<br />More than 600 large enterprise customers<br />95% say they would buy UC4 again<br />260+ employees<br />$75m revenue, 20% license year-over-year growth<br />Top tier in Gartner and Forrester<br />Who Is UC4<br />
    71. 71. <ul><li>Reposition the company, create a strong launch platform for new brand
    72. 72. Create a bold, compelling store-front
    73. 73. Drive increased engagement measured by Lead Generation
    74. 74. Utilize website best-practices
    75. 75. Feature rich-media assets and resources</li></ul>Project Goals & Objectives<br />
    76. 76. <ul><li>Limited functionality and interactivity
    77. 77. Limited platform for future development
    78. 78. Creative was dry, visual design static
    79. 79. Lack of rich-media, interesting, assets – focus on WPs
    80. 80. No integration with our marketing automation tool or SFA</li></ul>The Situation<br />
    81. 81. Segmentation<br />52<br />
    82. 82. <ul><li>By Pain:Most UC4 customers have common requirements they are looking to fulfill through automation
    83. 83. By Application Environment:Most UC4 customers have detailed application environment constraints
    84. 84. By Organization:We sell to two client organizations that often have different agendas – Data Center Operations and IT Operations
    85. 85. By Role:Our point-of-entry qualifiers are most often at a manager or operator level, and are rarely VPs or above. When we talk to VPs it’s through sales – NOT our website</li></ul>Step One: Segmentation<br />
    86. 86. Persona-Based Design =Intuitive Hierarchy<br />54<br />
    87. 87. 2<br />Persona Based Design<br />Prioritized Segmentation<br />Addressing Common Pain<br />Establishing Application Breadth and Expertise<br />Speaking to Organizations and Roles<br />3<br />1<br />
    88. 88. Content is KING<br />56<br />
    89. 89. <ul><li>UC4 is a complex solution…We are still figuring out how to articulate what we do
    90. 90. Rebranding was a great exerciseIt helped us honestly decide what we do, what value we offer, to whom
    91. 91. Strategic Content CreationDeveloping content to drive conversion AND improve SEO
    92. 92. Craft simple, straight-forward content</li></ul>Content is KING > UC4 is getting there!<br />
    93. 93. Content is KING > UC4 is getting there!<br />Prioritized Segmentation<br />HTML Text Headline<br />Image / Infographic<br />Content using subheads, call-out offers and bullet-lists<br />Related-Content Modules<br />Persistent Next Steps<br />1<br />2<br />4<br />5<br />3<br />
    94. 94. Results<br />59<br />
    95. 95. <ul><li>Engagement up
    96. 96. Time on site
    97. 97. Pages visited
    98. 98. Conversion of visitors</li></ul>Results<br />Time on WWW Site (seconds)<br />Average Pages Per Visit (12 Month View)<br />Conversion Rates from Visitors<br />
    99. 99. <ul><li>Create a single user experience across all prospect and customer touch points
    100. 100. Customer engagement – build a strong community
    101. 101. Break the mold with assets “Do less, but make it break-thru”
    102. 102. Introduce asset and product ratings
    103. 103. Dynamic content and asset placement based on visitor segmentation/demographics throughout the website</li></ul>What’s Next<br />
    104. 104. Q&A / Discussion<br />62<br />
    105. 105. <ul><li>If everyone embraces best practices – how do we stand out?
    106. 106. What methods do you use to identify and understand your target audience?
    107. 107. What strategies do you use to connect with multiple segment types?
    108. 108. How is your content strategy prioritized? Around SEO? Segmentation? Product Marketing Initiatives?
    109. 109. What is the tipping point for all of this – how much is enough to make a difference?</li></ul>63<br />Discussion Topics:<br />
    110. 110. DOWNLOAD the presoat: http://www.thebatstudio.com/thoughts/resources<br />Christopher Harmon<br />chris@thebatstudio.com<br />510-339-7300<br />http://www.linkedin.com/in/cjharmon<br />64<br />Thank You!<br />
    111. 111. 65<br />Thank You<br />Visit<br />www.onlinemarketingsummit.com<br />for more information<br /> Follow us @OMSummit<br />

    ×