• Save
Successful Website Redesign
Upcoming SlideShare
Loading in...5
×
 

Successful Website Redesign

on

  • 821 views

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

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

Statistics

Views

Total Views
821
Views on SlideShare
818
Embed Views
3

Actions

Likes
0
Downloads
1
Comments
0

2 Embeds 3

http://www.linkedin.com 2
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Successful Website Redesign Presentation Transcript

  • Online Marketing Summit
    San Jose | June 18, 2010
    Successful Website Redesign: Strategy, Design and Content
    Christopher Harmon
    chris@thebatstudio.com
    Principal
    theBATstudio
    1
  • 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
    The Brand, Art & Technology Studiohttp://www.thebatstudio.com
    Strategy, design and interactive services that realize tangible business objectives.
    Serving:
    • B2B / SaaS / Tech
    • Consumer
    • Non-Profit
    Explore our website to learn more about our agile, adept and affordable approach.
    Clients include:
  • 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
  • Best Practice Website Processes
    6/16/10
    5
  • 6
    Strategy
    Content
    Design
  • Best Practice Website Processes and… What exactly does usability mean?
    6/16/10
    7
  • 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
  • 9

    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
    - Wikipedia
  • Why You SHOULD Care…
    10
  • 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
  • 12
    Example: Who does this speak to?
  • 13
    Example: What would you click on?
  • Example: What would you click on? (part2)
    3
    2
    1
    4
    5
    14
  • 15
    Example: What should you click on?
  • 16
    Example: What is the second read?
  • 17
    Example: Blink Test – What’s the takeaway?
  • 18
    Example: What would you read?
  • 19
    Example: Where does the real content start?
  • 20
    Example: Are you compelled?
  • 21
    Example: Benefits Galore – But what do you do?
  • 22
    Example: What’s clickable?
  • 23
    Example: What about here?
  • 24
    Example: Huh?
    • Lead generation
    • Conversion
    • Deep Funnel Activity
    • Executive and Board Recognition
    • Budgets
    = CMO expectancy < 2 years
    25
    Bad Usability =
  • 3) Usability Best Practices:Three Actionable Steps to a Better Website
    26
  • Usability Best Practice #1Persona-based Design
    27
  • 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
  • 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)
  • 30
    Usability Best Practice #1
    Persona-based Design
    SuccessFactors
    • Leading B2B Adopters
    • Define segments by business size
    • In primary nav
    • On product pages
    • NOT on homepage?
  • 31
    Usability Best Practice #1
    Persona-based Design
    Omniture
    • Early B2B Adopters
    • Limited role-based segmentation
    • Complex activity / product based segmentation
    • Must be working?3 years and running
  • Usability Best Practice #1
    Persona-based Design
    Coupa Software
    • New SaaS Entrant
    • Multi-Dimensional Segmentation
    • Complexity reduced through simple, intuitive interface
    • Not extended through website experience – why?
    32
  • Usability Best Practice #1
    Persona-based Design
    Eloqua
    • Second Gen Segmentation
    • Multi-Dimensional
    • Use of banner for top level activity-based segmentation
    • Use of a simple, clear and easy nav module
    • Extends throughout website experience
    33
  • Usability Best Practice #2Intuitive, Clear Information Hierarchy
    34
  • 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
  • 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
  • 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
  • 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
  • 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
  • Usability Best Practice #3Content is STILL King
    40
  • 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
  • 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:
  • 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
  • 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
  • 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
  • 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
  • It all starts with SEGMENTATION
    Persona-Based Design = More Clicks
    Create a Website Funnel
    Prioritize Content to WIN!
    47
    Bringing it ALL together:
  • 4) Case Study: UC4
    48
  • 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
    • Reposition the company, create a strong launch platform for new brand
    • Create a bold, compelling store-front
    • Drive increased engagement measured by Lead Generation
    • Utilize website best-practices
    • Feature rich-media assets and resources
    Project Goals & Objectives
    • Limited functionality and interactivity
    • Limited platform for future development
    • Creative was dry, visual design static
    • Lack of rich-media, interesting, assets – focus on WPs
    • No integration with our marketing automation tool or SFA
    The Situation
  • Segmentation
    52
    • By Pain:Most UC4 customers have common requirements they are looking to fulfill through automation
    • By Application Environment:Most UC4 customers have detailed application environment constraints
    • By Organization:We sell to two client organizations that often have different agendas – Data Center Operations and IT Operations
    • 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
    Step One: Segmentation
  • Persona-Based Design =Intuitive Hierarchy
    54
  • 2
    Persona Based Design
    Prioritized Segmentation
    Addressing Common Pain
    Establishing Application Breadth and Expertise
    Speaking to Organizations and Roles
    3
    1
  • Content is KING
    56
    • UC4 is a complex solution…We are still figuring out how to articulate what we do
    • Rebranding was a great exerciseIt helped us honestly decide what we do, what value we offer, to whom
    • Strategic Content CreationDeveloping content to drive conversion AND improve SEO
    • Craft simple, straight-forward content
    Content is KING > UC4 is getting there!
  • 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
  • Results
    59
    • Engagement up
    • Time on site
    • Pages visited
    • Conversion of visitors
    Results
    Time on WWW Site (seconds)
    Average Pages Per Visit (12 Month View)
    Conversion Rates from Visitors
    • Create a single user experience across all prospect and customer touch points
    • Customer engagement – build a strong community
    • Break the mold with assets “Do less, but make it break-thru”
    • Introduce asset and product ratings
    • Dynamic content and asset placement based on visitor segmentation/demographics throughout the website
    What’s Next
  • Q&A / Discussion
    62
    • If everyone embraces best practices – how do we stand out?
    • What methods do you use to identify and understand your target audience?
    • What strategies do you use to connect with multiple segment types?
    • How is your content strategy prioritized? Around SEO? Segmentation? Product Marketing Initiatives?
    • What is the tipping point for all of this – how much is enough to make a difference?
    63
    Discussion Topics:
  • DOWNLOAD the presoat: http://www.thebatstudio.com/thoughts/resources
    Christopher Harmon
    chris@thebatstudio.com
    510-339-7300
    http://www.linkedin.com/in/cjharmon
    64
    Thank You!
  • 65
    Thank You
    Visit
    www.onlinemarketingsummit.com
    for more information
    Follow us @OMSummit