Your SlideShare is downloading. ×
Website redesign – the digital marketing & web development relationship is essential
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Website redesign – the digital marketing & web development relationship is essential


Published on

During this presentation, attendees will gain a deep understanding of how tightly marketing is connected with web design. Information is readily available to support your web design decisions, …

During this presentation, attendees will gain a deep understanding of how tightly marketing is connected with web design. Information is readily available to support your web design decisions, whether it be through activity & insights gleaned from your analytics, engagement activity from your social media channels or direct feedback from your customers via online surveys. We know that it’s “easier said than done”, but during this presentation, you will learn how to parlay that information into the design and development of a much more productive website. There’s a recipe to this and we plan to share it with you. So expect to get detailed examples – ideas and actionable items that you can take away to apply to your own project(s).

Published in: Technology, Business

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • During this session, will be talking about how marketing drives design in Web site redesign projects.Several years ago before Brad joined Beacon, we would design and build sites, and then expect folks who do search engine optimization to “make it work.”This led to a lot of re-work and “Couldawouldashoulda” scenarios, and was not efficient. If we had consulted together during the entire project, the end result would have been a much more productive Web site.Especially in higher ed, there can be so many stakeholders that it’s tough to make quality decisions.So how did we fix all of that?We realized the need for Digital Marketing consultants to be involved from the very beginning, and we want to share that process and success story with you today.First, we’ll talk about what you need to do even before you start drawing a design on the back of a university-branded napkin.Pre-launch marketing, where you figure out what your target audience is looking for.Pre-launch analysis & design, where you start the design and requirements-gathering. “Blueprint” phase.And then we’ll look at some development tips for the actual construction phase.We’ll then take a brief look at launch strategies.And then after your site is live, what ongoing development and marketing activities you should consider.Now, we know that a lot of this will be easier said than done, but we hope today you’ll walk away with an understand of how important digital marketing is when it comes to a redesign.
  • As Brad mentioned, need to form a web committeeNot everyone has to be involved in every step. Chancellor doesn’t have to be in every meetingEmphasize that DM person needs to be involved so you don’t’ get too far down path
  • Redesigned site’s information architectureGives a visual for how the new site will drive visitors to content they’re looking forLays out entire site navigation: Shows sections, pages, file types, forms, external links, multimediaShows results of discussions during pre-launch marketing phase
  • Lists all sections and pages of the new siteShows where content will be coming from (existing or new) and assigns content ownersServes SEO efforts. Use to map out:Page KeywordsPage DescriptionsPage TitlesFile/Folder Names
  • GOOGLE HAS LIMITED ABILITY TO CRAWLA good CMS will help with all of this. You can require certain fields on a page like the keywords and descriptions, start out with a bank of keywords, and force keyword-friendly page and folder names
  • Soft LaunchConsider timing of the launch. Do it over a break, and not during the beginning/end of a semester, or any other time the site will have heavy usage like applications dueOPTIONAL: an ideal situation
  • Transcript

    • 1. Website Redesign and theEssential Digital Marketing & WebDevelopment RelationshipJustin Klingman, Director of Web Software DevelopmentBrad Henry, Director of Digital Marketing
    • 2. #dpfl2 #hewebflWhat We’ll Talk AboutMarketing drives design in Web site redesigns• Pre-Launch– Marketing– Analysis & Design– Development• Development• Launch• Post-Launch– Development– MarketingPRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 3. #dpfl2 #hewebflPre-Launch MarketingWhat’s the point?• Identify the major actions you want people to take on yourwebsite• Ensure that you have conversion triggers that representvisitors accomplishing those• Ensure you have data funnels that represent each of thoseuser flows• Departmental Input• Committee SelectionPRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 4. #dpfl2 #hewebflPre-Launch Marketing: Let Data DriveTwo major types of information we should utilize:1. Quantitative: Helps answers the “What happened”2. Qualitative: Helps answers the “Why it happened”PRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 5. #dpfl2 #hewebflPre-Launch Marketing• Analyze Data to understand funnel dropouts and user paths to conversions• Understand the Needs of your audience• Site Search DataPRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 6. #dpfl2 #hewebflPre-Launch Marketing• Gather Qualitative Data!• Understand visitor perceptions around critical areas– Usability– Trustworthiness– Navigation– Brand Perception– Paths to Applications– Engagement Activities– Cost– Academics– Student Life– Quality– ValueThe rightmessagePRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 7. #dpfl2 #hewebflPre-Launch Marketing: A&D for Analytics• Start with your Business Specification– Get your departments together– What do you want to know and why– What are the anticipated paths to KPIs– How does feature or function interaction impact those paths• Develop your Technical Specifications to accomplish yourbusiness specs• Plan for integration/customization of analytics code in thedevelopment process• Plan for QA and attribution testing• Plan for configuration and customizations in the reportinginterface• Plan for trainingPRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 8. #dpfl2 #hewebflPre-Launch Marketing• Plan for intuitive and simple interaction• Organize your information hierarchy based on how usersinteract with your content• Make your calls to action focused deliberate• Flow of information should be in the order in which majorityof users tend to access that informationPRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 9. #dpfl2 #hewebflPre-Launch Marketing• Don’t forget Organic!• Perform extensive keyword analysis before namingdirectories, files, images, and anchor texts.• Ensure that your development techniques are SEO friendly• Ensure proper internal Page Rank distributionPRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 10. #dpfl2 #hewebflPre-Launch Dev: Analysis & Design Phase• Web Committee– Responsible for direction of redesign project and for all final decisions– Members should come from all target audiences and support staff• Involve your Web Services Firm– Includes Project Manager, Digital Marketing Strategist, Developer,Graphic Artist– Digital Marketing Strategist should be involved in all stepsMarketingITProspective StudentsCurrent StudentsAlumniFaculty/StaffChief Marketing OfficerChief Information OfficerVice Chancellor, Enrollment ServicesChair & Associate ProfessorStaff Member (Alumnus)Chancellor, Executive Vice Chancellor,Provost, Web Communications SpecialistPRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 11. #dpfl2 #hewebflPre-Launch Dev: Analysis & Design PhaseSite HierarchyPRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 12. #dpfl2 #hewebflPre-Launch Dev: Analysis & Design PhaseContent Inventory MatrixPRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 13. #dpfl2 #hewebflPre-Launch Dev: Responsive Design• What is it?– Changes the layout of your site toadapt to the device’s screen size– Not a separate mobile siteDesktop: DEV / LAUNCH POST-LAUNCH
    • 14. #dpfl2 #hewebflPre-Launch Dev: Responsive Design• Advantages– Gives tablet/mobile user the desktop experience, just laid outdifferently– Single HTML page, instead of a separate mobile site– Screen size-specific instead of device specific– Keep all functionality of main site, no matter the device– Scales to fit all screen sizes: desktop, tablet, smartphonesPRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 15. #dpfl2 #hewebflPre-Launch Marketing: Responsive DesignAnalytics:• Redirects aren’t necessary to push visitors to new pages• Maintain sessions and originating source data• Removes duplication in tracking• Can segment mobile users based on screen resolutions• Can measure the improvements in site interaction due to responsivedesignConversions:• Better usability equates to more conversions• Faster to use without needing to zoom• More intuitive input fields for mobile usersConfidential - BeaconTechnologies15PRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 16. #dpfl2 #hewebflPre-Launch Marketing: Responsive DesignOrganic Traffic• Faster and easier development updates – one change affects all devices• Easier for search engines to crawl (and index website)• Improved Page Rank and Page Authority• Google recommends this development technique moving forward.Confidential - BeaconTechnologies16“By 2015, there will be anaverage of 5.8 devices perperson in North America…”Cisco Visual Network Index DEV / LAUNCH POST-LAUNCH
    • 17. #dpfl2 #hewebflDevelopment Phase• Key Technical Optimizations– Robots.txt– Overall Canonical strategy– Crawling strategy– Responsive Design for Mobile– Rich Snippets• SEO-friendly practices– Links• Text based links using descriptive keywords• Never written in JavaScript or Flash– Use <h> tags for all titles and headings– Include meta keywords and description fields on every page– Use hyphens for folder and page names (no spaces or underscores)– Unique page titles– Keep it clean!PRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 18. #dpfl2 #hewebflLaunch Phase• Soft Launch– Carefully consider timing: Not during especially high usage– Use “” to start off with– Use 301 Redirects for orphaned pages to reduce number of 404s– Split Testing• Send users to both new and old site• Constant monitoring of analytics: Ensure new site is meeting needs– Duration: Until you have sufficient data• Launch– Use 301 redirects for any “” pages that mayhave been indexed or bookmarked– Discontinue Split Testing– Party! (Don’t forget to invite your Web Services firm)PRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 19. #dpfl2 #hewebflPost-Launch MarketingKnow what’s going on!• Analytics– Traffic Sources– Site usage– Conversion Paths– Custom Variables– Conversion rates• Organic– Rankings– Pages in index– Page Rank distribution– 404 & page dropouts– Redirect checks– Robots.txt fileBefore AfterPRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 20. #dpfl2 #hewebflPost-Launch Marketing• Plan for testing• Learn from your audience• Segment your audience and serve variations of layouts, marketingmessages, images, buttons, flows, etc…• Re-run your survey and compare responsesPRE-LAUNCH DEV / LAUNCH POST-LAUNCH
    • 21. #dpfl2 #hewebflConclusion• Marketing and development working closely together canhelp reduce cost, increase efficiencies, and ensure data isdriving your strategy.
    • 22. #dpfl2 #hewebflQuestions?Beacon Technologiesbeacontechnologies.comBrad Henrybhenry@beacontechnologies.comJustin