This document summarizes a presentation about best practices for website redesign, focusing on strategy, design, and content. It discusses how to conduct persona-based design by segmenting audiences and developing personas. It also covers establishing intuitive information hierarchies and prioritizing content. The presentation uses UC4's website redesign as a case study, highlighting how they implemented segmentation, persona-based design, and content prioritization to increase engagement and conversions.
1. Online Marketing Summit San Jose | June 18, 2010 Successful Website Redesign: Strategy, Design and Content Christopher Harmon chris@thebatstudio.com Principal theBATstudio 1
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
6. Best Practice Website Processes and… What exactly does usability mean? Why You SHOULD Care… Usability Best Practices: 3 Actionable Steps to a Better Website UC4 Case Study Q&A / Discussion 4 Agenda
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.
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
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
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. 28 Usability Best Practice #1 Persona-based Design
38. 29 Usability Best Practice #1 Persona-based Design – How to: Segment Target Audience w/ Sales and Product Teams Interview Internal Audience Experts Interview Target Audience(telephone / IDI / user group / focus group) Develop High-Level Persona Descriptions Test Descriptions with Stakeholders Develop Messaging Statements/Matrices Develop Product and Demand-Generation Marketing Programs Aligned with Sales Channels Craft Persona-based: Information Architecture (Sitemap / Wireframes) Visual Design Content Strategy (campaigns, headlines, copy, images, multimedia, offers, collateral, etc.) Testing-Plan (paper-prototypes, friendly reviews, IDIs)
56. Usability Best Practice #2 Intuitive, Clear Information Hierarchy Information Hierarchy refers to the “funnel” or order of information that your audience should engage in. 35
57. 36 Usability Best Practice #2 Intuitive, Clear Information Hierarchy – How to: Leverage Segmentation to Develop Messaging Hierarchy Based on that Hierarchy, Develop a Sitemap Funnel Test Sitemap against Personas and Refine Based on Hierarchy, Develop Wireframes with a CLEAR Information Funnel Translate Wireframes into Visual Design – Provide Design team the FREEDOM to realize Hierarchy through Design Test Visual Design against Personas and Refine Monitor Site Performance with Overlays and Refine
58. 37 Usability Best Practice #2 Intuitive – Clear Information Hierarchy Basecamp Who 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 CTA Not ready yet? Check out these clients and get additional immediate insight into what we do… All in a simple, clean, un-cluttered interface. 1 2 4 3
59. 38 Usability Best Practice #2 Intuitive – Clear Information Hierarchy 4 NetSuite Leadership messaging Check out some of the customers we’ve helped Who we are and what we do No more than three “Next Steps” Need more detail? No problem, we’ll help you qualify right on the homepage. 2 1 3 5
60. 39 Usability Best Practice #2 Intuitive – Clear Information Hierarchy 3 Conversive Simple, plain-English headline Ever-present “Next Steps” module Prominent information graphic Content – provided in multiple formats for easy-digesting Clear progression of section content with a natural conclusion In-depth content for the indoctrinated 2 1 4 5 6
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. 41 Usability Best Practice #3 Content is STILL King
63. Inventory Content Assets Map Assets against Segmentation Map Assets against Information Hierarchy Prioritize Homepage About Us Social Media Category Pages Product / Solution Pages Resources News / Events Execute Monitor Conversions Time on page Top Exits Click Overlays 42 Usability Best Practice #3 Content is STILL King – How to:
64. 43 Usability Best Practice #3 Content is still KING 3 Eloqua Present easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outs Present alternative forms of content such as video, information graphics, etc Provide easy access to contextually related experiences 1 2
65. 44 Usability Best Practice #3 Content is still KING 3 Coupa Software Use headers with HTML text to give a sense of space AND improve SEO Present alternative forms of content such as video, information graphics, etc Present easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outs 1 2
66. 45 3 Usability Best Practice #3 Content is still KING Foundation Source Use headers with HTML text to give a sense of space AND improve SEO Present easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outs Call-out benefit statements in easily digestible form 2 1
67. 46 Usability Best Practice #3 Content is still KING Conversive Use headers with HTML text to give a sense of space AND improve SEO Present easily digestible pieces of content, ideally utilizing headers, sub-heads, bulleted-lists and call-outs 2 1
68. It all starts with SEGMENTATION Persona-Based Design = More Clicks Create a Website Funnel Prioritize Content to WIN! 47 Bringing it ALL together:
70. We automate IT and business processes, anywhere. Based in Austria, US headquarters in Bellevue 1,800+ customers in more than 50 countries More than 600 large enterprise customers 95% say they would buy UC4 again 260+ employees $75m revenue, 20% license year-over-year growth Top tier in Gartner and Forrester Who Is UC4
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
87. 2 Persona Based Design Prioritized Segmentation Addressing Common Pain Establishing Application Breadth and Expertise Speaking to Organizations and Roles 3 1
93. Content is KING > UC4 is getting there! Prioritized Segmentation HTML Text Headline Image / Infographic Content using subheads, call-out offers and bullet-lists Related-Content Modules Persistent Next Steps 1 2 4 5 3
111. 65 Thank You Visit www.onlinemarketingsummit.com for more information Follow us @OMSummit
Notas do Editor
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…