Successful Website Redesign

1. Online Marketing SummitSan Jose | June 18, 2010Successful Website Redesign: Strategy, Design and Content Christopher Harmon chris@thebatstudio.com Principal theBATstudio1

2. First:Learn what top B2B companies are doing well and where they're falling down when it comes to website usability. 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.2

3. 3The Brand, Art & Technology Studiohttp://www.thebatstudio.comStrategy, design and interactive services that realize tangible business objectives.Serving:B2B / SaaS / Tech

4. Consumer

5. Non-ProfitExplore our website to learn more about our agile, adept and affordable approach.Clients include:

6. Best Practice Website Processes and… What exactly does usability mean?Why You SHOULD Care…Usability Best Practices: 3 Actionable Steps to a Better WebsiteUC4 Case StudyQ&A / Discussion4Agenda

7. Best Practice Website Processes 6/16/105

8. 6StrategyContentDesign

9. Best Practice Website Processes and… What exactly does usability mean?6/16/107

10. 8“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.- Wikipedia

11. 9“The broad goal of usability should be to:Present the information to the user in a clear and concise way.

12. To give the correct choices to the users, in a very obvious way.

13. To remove any ambiguity regarding the consequences of an action e.g. clicking on delete/remove/purchase.

14. Put the most important thing in the right place on a web page or a web application- Wikipedia

15. Why You SHOULD Care…10

16. 11“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.- abstracted from Forrester

17. 12Example: Who does this speak to?

18. 13Example: What would you click on?

19. Example: What would you click on? (part2)3214514

20. 15Example: What should you click on?

21. 16Example: What is the second read?

22. 17Example: Blink Test – What’s the takeaway?

23. 18Example: What would you read?

24. 19Example: Where does the real content start?

25. 20Example: Are you compelled?

26. 21Example: Benefits Galore – But what do you do?

27. 22Example: What’s clickable?

28. 23Example: What about here?

29. 24Example: Huh?

30. Lead generation

31. Conversion

32. Deep Funnel Activity

33. Executive and Board Recognition

34. Budgets= CMO expectancy < 2 years25Bad Usability =

35. 3) Usability Best Practices:Three Actionable Steps to a Better Website26

36. Usability Best Practice #1Persona-based Design27

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.28Usability Best Practice #1Persona-based Design

38. 29Usability Best Practice #1Persona-based Design – How to:Segment Target Audience w/ Sales and Product TeamsInterview Internal Audience ExpertsInterview Target Audience(telephone / IDI / user group / focus group)Develop High-Level Persona DescriptionsTest Descriptions with StakeholdersDevelop Messaging Statements/MatricesDevelop Product and Demand-Generation Marketing Programs Aligned with Sales ChannelsCraft Persona-based:Information Architecture (Sitemap / Wireframes)Visual DesignContent Strategy (campaigns, headlines, copy, images, multimedia, offers, collateral, etc.)Testing-Plan (paper-prototypes, friendly reviews, IDIs)

39. 30Usability Best Practice #1Persona-based DesignSuccessFactorsLeading B2B Adopters

40. Define segments by business size

41. In primary nav

42. On product pages

43. NOT on homepage?31Usability Best Practice #1Persona-based DesignOmnitureEarly B2B Adopters

44. Limited role-based segmentation

45. Complex activity / product based segmentation

46. Must be working?3 years and runningUsability Best Practice #1Persona-based DesignCoupa SoftwareNew SaaS Entrant

47. Multi-Dimensional Segmentation

48. Complexity reduced through simple, intuitive interface

49. Not extended through website experience – why?32

50. Usability Best Practice #1Persona-based DesignEloquaSecond Gen Segmentation

51. Multi-Dimensional

52. Use of banner for top level activity-based segmentation

53. Use of a simple, clear and easy nav module

54. Extends throughout website experience33

55. Usability Best Practice #2Intuitive, Clear Information Hierarchy34

56. Usability Best Practice #2Intuitive, Clear Information HierarchyInformation Hierarchy refers to the “funnel” or order of information that your audience should engage in.35

57. 36Usability Best Practice #2Intuitive, Clear Information Hierarchy – How to:Leverage Segmentation to Develop Messaging HierarchyBased on that Hierarchy, Develop a Sitemap FunnelTest Sitemap against Personas and RefineBased on Hierarchy, Develop Wireframes with a CLEAR Information FunnelTranslate Wireframes into Visual Design – Provide Design team the FREEDOM to realize Hierarchy through DesignTest Visual Design against Personas and RefineMonitor Site Performance with Overlays and Refine

58. 37Usability Best Practice #2Intuitive – Clear Information HierarchyBasecampWho are we and what do we do?Take a look – and notice the seal of customer approval!Now that you’re ready – go ahead and click on our CTANot ready yet? Check out these clients and get additional immediate insight into what we do…All in a simple, clean, un-cluttered interface.1243

59. 38Usability Best Practice #2Intuitive – Clear Information Hierarchy4NetSuiteLeadership messagingCheck out some of the customers we’ve helpedWho we are and what we doNo more than three “Next Steps”Need more detail? No problem, we’ll help you qualify right on the homepage.2135

60. 39Usability Best Practice #2Intuitive – Clear Information Hierarchy3ConversiveSimple, plain-English headlineEver-present “Next Steps” moduleProminent information graphicContent – provided in multiple formats for easy-digestingClear progression of section content with a natural conclusionIn-depth content for the indoctrinated21456

61. Usability Best Practice #3Content is STILL King40

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.41Usability Best Practice #3Content is STILL King

63. Inventory Content AssetsMap Assets against SegmentationMap Assets against Information HierarchyPrioritizeHomepageAbout UsSocial MediaCategory PagesProduct / Solution PagesResourcesNews / EventsExecuteMonitorConversionsTime on pageTop ExitsClick Overlays42Usability Best Practice #3Content is STILL King – How to:

64. 43Usability Best Practice #3Content is still KING3EloquaPresent easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outsPresent alternative forms of content such as video, information graphics, etcProvide easy access to contextually related experiences12

65. 44Usability Best Practice #3Content is still KING3Coupa SoftwareUse headers with HTML text to give a sense of space AND improve SEOPresent alternative forms of content such as video, information graphics, etcPresent easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outs12

66. 453Usability Best Practice #3Content is still KINGFoundation SourceUse headers with HTML text to give a sense of space AND improve SEOPresent easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outsCall-out benefit statements in easily digestible form21

67. 46Usability Best Practice #3Content is still KINGConversiveUse headers with HTML text to give a sense of space AND improve SEOPresent easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outs21

68. It all starts with SEGMENTATIONPersona-Based Design = More ClicksCreate a Website FunnelPrioritize Content to WIN!47Bringing it ALL together:

69. 4) Case Study: UC448

70. We automate IT and business processes, anywhere.Based in Austria, US headquarters in Bellevue1,800+ customers in more than 50 countriesMore than 600 large enterprise customers95% say they would buy UC4 again260+ employees$75m revenue, 20% license year-over-year growthTop tier in Gartner and ForresterWho Is UC4

71. Reposition the company, create a strong launch platform for new brand

72. Create a bold, compelling store-front

73. Drive increased engagement measured by Lead Generation

74. Utilize website best-practices

75. Feature rich-media assets and resourcesProject Goals & Objectives

76. Limited functionality and interactivity

77. Limited platform for future development

78. Creative was dry, visual design static

79. Lack of rich-media, interesting, assets – focus on WPs

80. No integration with our marketing automation tool or SFAThe Situation

81. Segmentation52

82. By Pain:Most UC4 customers have common requirements they are looking to fulfill through automation

83. By Application Environment:Most UC4 customers have detailed application environment constraints

84. By Organization:We sell to two client organizations that often have different agendas – Data Center Operations and IT Operations

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 websiteStep One: Segmentation

86. Persona-Based Design =Intuitive Hierarchy54

87. 2Persona Based DesignPrioritized SegmentationAddressing Common PainEstablishing Application Breadth and ExpertiseSpeaking to Organizations and Roles31

88. Content is KING56

89. UC4 is a complex solution…We are still figuring out how to articulate what we do

90. Rebranding was a great exerciseIt helped us honestly decide what we do, what value we offer, to whom

91. Strategic Content CreationDeveloping content to drive conversion AND improve SEO

92. Craft simple, straight-forward contentContent is KING > UC4 is getting there!

93. Content is KING > UC4 is getting there!Prioritized SegmentationHTML Text HeadlineImage / InfographicContent using subheads, call-out offers and bullet-listsRelated-Content ModulesPersistent Next Steps12453

94. Results59

95. Engagement up

96. Time on site

97. Pages visited

98. Conversion of visitorsResultsTime on WWW Site (seconds)Average Pages Per Visit (12 Month View)Conversion Rates from Visitors

99. Create a single user experience across all prospect and customer touch points

100. Customer engagement – build a strong community

101. Break the mold with assets “Do less, but make it break-thru”

102. Introduce asset and product ratings

103. Dynamic content and asset placement based on visitor segmentation/demographics throughout the websiteWhat’s Next

104. Q&A / Discussion62

105. If everyone embraces best practices – how do we stand out?

106. What methods do you use to identify and understand your target audience?

107. What strategies do you use to connect with multiple segment types?

108. How is your content strategy prioritized? Around SEO? Segmentation? Product Marketing Initiatives?

109. What is the tipping point for all of this – how much is enough to make a difference?63Discussion Topics:

110. DOWNLOAD the presoat: http://www.thebatstudio.com/thoughts/resourcesChristopher Harmonchris@thebatstudio.com510-339-7300http://www.linkedin.com/in/cjharmon64Thank You!

111. 65Thank YouVisitwww.onlinemarketingsummit.comfor more information Follow us @OMSummit

Successful Website Redesign

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to Successful Website Redesign (20)

Recently uploaded (20)

Successful Website Redesign

Editor's Notes