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

Website Redesign and theEssential Digital Marketing & Web

Development RelationshipJustin Klingman, Director of Web Software Development

Brad Henry, Director of Digital Marketing

#dpfl2 #hewebfl

What We’ll Talk About

Marketing drives design in Web site redesigns

• Pre-Launch– Marketing– Analysis & Design– Development

• Development

• Launch

• Post-Launch– Development– Marketing

PRE-LAUNCH DEV / LAUNCH POST-LAUNCH

#dpfl2 #hewebfl

Pre-Launch Marketing

What’s the point?• Identify the major actions you want people to take on your

website• Ensure that you have conversion triggers that represent

visitors accomplishing those• Ensure you have data funnels that represent each of those

user flows• Departmental Input• Committee Selection


#dpfl2 #hewebfl

Pre-Launch Marketing: Let Data Drive

Two major types of information we should utilize:1. Quantitative: Helps answers the “What happened”2. Qualitative: Helps answers the “Why it happened”


#dpfl2 #hewebfl


•Analyze Data to understand funnel dropouts and user paths to conversions•Understand the Needs of your audience•Site Search Data


#dpfl2 #hewebfl


• Gather Qualitative Data!• Understand visitor perceptions around critical areas

– Usability– Trustworthiness– Navigation– Brand Perception– Paths to Applications– Engagement Activities– Cost– Academics– Student Life– Quality– Value The right

message


#dpfl2 #hewebfl

Pre-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 your business specs

• Plan for integration/customization of analytics code in the development process

• Plan for QA and attribution testing• Plan for configuration and customizations in the reporting

interface• Plan for training


#dpfl2 #hewebfl


• Plan for intuitive and simple interaction• Organize your information hierarchy based on how users

interact with your content• Make your calls to action focused deliberate• Flow of information should be in the order in which majority

of users tend to access that information


#dpfl2 #hewebfl


• Don’t forget Organic!• Perform extensive keyword analysis before naming

directories, files, images, and anchor texts.• Ensure that your development techniques are SEO friendly• Ensure proper internal Page Rank distribution


#dpfl2 #hewebfl

Pre-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 steps

MarketingITProspective StudentsCurrent StudentsAlumniFaculty/Staff

Chief Marketing OfficerChief Information OfficerVice Chancellor, Enrollment ServicesChair & Associate ProfessorStaff Member (Alumnus)Chancellor, Executive Vice Chancellor,Provost, Web Communications Specialist


#dpfl2 #hewebfl


Site Hierarchy


#dpfl2 #hewebfl


Content Inventory Matrix


#dpfl2 #hewebfl

Pre-Launch Dev: Responsive Design

• What is it?– Changes the layout of your site to

adapt to the device’s screen size– Not a separate mobile site

Desktop: http://www.gcccd.edu/ Mobile


http://www.gcccd.edu/

#dpfl2 #hewebfl

Pre-Launch Dev: Responsive Design

• Advantages– Gives tablet/mobile user the desktop experience, just laid out

differently– 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, smartphones


#dpfl2 #hewebfl

Pre-Launch Marketing: Responsive Design

Analytics:• 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 responsive

design

Conversions:• Better usability equates to more conversions• Faster to use without needing to zoom• More intuitive input fields for mobile users

Confidential - Beacon Technologies

15


#dpfl2 #hewebfl

Pre-Launch Marketing: Responsive Design

Organic 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 - Beacon Technologies

16

“By 2015, there will be an average of 5.8 devices per person in North America…”

Cisco Visual Network Indexhttp://

www.cisco.com/en/US/netsol/ns827/networking_solutions_sub_solution.html


http://www.cisco.com/en/US/netsol/ns827/networking_solutions_sub_solution.html



#dpfl2 #hewebfl

Development 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!


#dpfl2 #hewebfl

Launch Phase

• Soft Launch– Carefully consider timing: Not during especially high usage– Use “http://new.beaconu.edu/” 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 “http://new.beaconu.edu/” pages that may

have been indexed or bookmarked– Discontinue Split Testing– Party! (Don’t forget to invite your Web Services firm)


#dpfl2 #hewebfl

Post-Launch Marketing

Know 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 file

Before After


#dpfl2 #hewebfl

Post-Launch Marketing

• Plan for testing• Learn from your audience • Segment your audience and serve variations of layouts, marketing

messages, images, buttons, flows, etc…• Re-run your survey and compare responses


#dpfl2 #hewebfl

Conclusion

• Marketing and development working closely together can help reduce cost, increase efficiencies, and ensure data is driving your strategy.

#dpfl2 #hewebfl

Questions?

Beacon Technologiesbeacontechnologies.com

Brad [email protected]

Justin [email protected]

http://www.beacontechnologies.com/

mailto:[email protected]

mailto:[email protected]

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

Technology

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