web strategy & development - wordpress.com · development . navigation ... editing, detail...

23
The good news for modern communication practitioners is that for the most part, we do not need to know much about html code, style sheets or back-end programming. We are the go-to people on the front-end – individuals responsible for the user experience, content, elevating our company’s brand and reaching our customers. WEB STRATEGY & DEVELOPMENT NAVIGATION, ARCHITECTURE AND THE USER EXPERIENCE By Rebecca L. Cooney, MSC Clinical Assistant Professor Washington State University

Upload: vuongthu

Post on 05-Jun-2018

219 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

The good news for modern communicat ion pract i t ioners is that for the most par t , we do not need to know much about h tml code , s ty le sheets or back -end programming . We are the go - to people on the f ront -end – ind iv idua ls respons ib le for the user exper ience , content , e levat ing our company ’s brand and reach ing our customers .

WEB STRATEGY & DEVELOPMENT

NAVIGATION, ARCHITECTURE AND THE USER EXPERIENCE

By Rebecca L. Cooney, MSC Clinical Assistant Professor

Washington State University

Page 2: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEB SITE BASICS

Page 3: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

PLAN. COORDINATE. PACE.

• It is not a one-person job

• It takes knowledge, t ime and patience

• You must have visuals and interactive features

• You need a mechanism for feedback and engagement

• You have to test your site and it MUST be mobile-friendly

• A website is never “done” – it is always a beautiful work in progress

“A great website is an intersection of every other online initiative, including podcasts, blogs, news releases and other online media.”

David Meerman Scott Author, “New Rules…”

Page 4: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEB JARGON

Get so many more at TheMaxDP.co.uk

• “Above the fold” – content, links, images, video that appear on screen before user has to scroll

• Accessibility – “the degree to which a system is of use to as many people as possible”

• Alt tags – associates text or title to an image

• CMS – Content Management System

• Crawl – “Search engines such as Google have a Bot (see also ‘GoogleBot’) which ‘crawls’ web pages, following links and recording content, maintaining a searchable database of the internet.15”

• CSS – Cascading Style Sheets: code behind format and style of a web page

• Domain names – a domain name is the url of a web page

• eCommerce – process of selling products online

• Favicon – small icon that appears next to url in a web browser (often branded logo or icon)

• Flash – vector graphics software that is animated and allows for sites to be more interactive with movement

• FTP – File Transfer Protocol: “This protocol is for transferring data between computers, so many content management systems include a FTP capability.15”

• HTML – hypertext markup language

Page 5: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEB JARGON

Get so many more at TheMaxDP.co.uk

• Infinite scrolling: term for pages with lengthy copy or content that requires the user to scroll for a long time

• ISP – Internet Service Provider (i.e. Internet Explorer, Firefox, Chrome)

• JavaScript – Scripting language that is embedded into html and allows for dynamic content

• Landing page - term for page visitors initially enter a site

• Meta Tags – page titles that are not visible – build into the code

• Navigation – term associated with global navigation or sub-navigation or set of links at the top, side or footer of a web page

• Responsive – webpage that adjusts in dimensions based on the device and screen size

• SEO – Search Engine Optimization

• URL – Uniform Resource Locator

• Vector – graphics or visuals that include geometric shapes

Page 6: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEB TEAM ROLES

• Webmaster

• Project manager

• Inbound marketer

• Marketing specialist

• Tech specialist

• Data analyst

• Content strategist

• Social media manager

Integrated digital campaign teams vary in size depending on budgets and accessible resources. Some teams are configured internally, while others are a mix of company staff and third party vendors or contractors. At minimum, teams must have individuals dedicated to content management, design and analytics. This can be one person – but it would be a lot to ask of any individual. A team of 6-8 individuals is ideal.

INBOUND MARKETER: Responsible for long-term success of website and digital channels. Works closely with marketing specialist and content strategist in creating offers, gimmicks and other content that inspires user engagement. Responsible for ensuring conversion goals are met. Key attributes include trend-savvy, writing, resourceful, creative and experience in sales and marketing.

MARKETING SPECIALIST: Oversees digital outreach activities, serves as “brand cop” to ensure all company editorial and visual standards are met, assists in media buys and client relations. Key attributes: analytical, creative, experienced.

SOCIAL MEDIA MANAGER: Creates and implements social media engagement plan in support of content strategy. Manages post calendar, adjusts strategy based on metrics, tracks user engagement. Finds new ways to inspire customer engagement, utilize advocacy partners and capitalize on the “chatter” by customers or connections. Key attributes include social media savvy, good writer and editor, resourceful, trend-setter, analytical.

CONTENT STRATEGIST: Responsible for developing the content strategy and overseeing or creating, maintaining and updating content on all digital channels. Develops and monitors content strategy, content matriculation and opportunities for new content. Works in real-time and adjusts as needed. Key attributes include exceptional writing and editing, detail-oriented, efficient, resourceful, creative, able to delegate and work well with others. Resources: “6 Roles Every Successful Web Design Project Needs” by Bryce

Mikkelson at SavvyPanda.com and “The 5 People You Need in Your Digital Marketing Dream Team” by Sujan Patel at SmallBizTrends.com

Page 7: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEBSITE PLANNING

Page 8: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEBSITE PLANNING

When planning to develop a website for a company – or even campaign microsite several key factors are in play. • Is this a brand new site or site refresh? What

is the purpose? • What are the desired outcomes? • How much content exists vs. need to be

created? • What photos and videos can be repurposed?

And on it goes.

The purpose of website planning is to think strategically and intentionally – asking questions like how do you want it to function, what do you want users to do when they first visit the site, what calls to action will you implement to inspire engagement?

1. Hosting & programming: tech needs

2. Project: roles and resource assessment

3. Website profile: audience, first impressions, type of site, central messages, calls to action

4. Idea: goals, conversion points

5. Content: navigation, content areas

6. Design: brand, messaging

7. Promotion: user engagement

8. Maintenance, testing and SEO: management and metrics

Page 9: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEB GOALS & OBJECTIVES

Typical site goals: o Build awareness

o Sell tickets

o Online orders

o Connection to customers

o Get donations

o Get volunteers

o Get participants

o Persuade opinion

o Inform public

• What are the goals for your site – what do you hope to accomplish?

• What is the central message you want to convey through the site?

• What is the “wish l ist” of content, features, multimedia and engagement tools for your site?

Page 10: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEBSITE NAVIGATION & FLOW

Sitemap Wireframe A sitemap is “a hierarchical list of pages (with links) organized by topic, an organization chart, or an XML document that provides instructions to search engine crawl bots.” – Techopedia.com. It looks much like an organizational chart and shows the breakdown of a website structure starting with top (global) navigation, secondary navigation and tertiary navigation. It is typically void of images or design features and focuses more on page titles and links.

“A wireframe is visual sketch that can be used in planning your website design and functionality. It typically happens prior to the actual building of the website - so that you can review and refine key decisions prior to any actual coding or creation.” – Brett Atwood, Clinical Associate Professor on CrowdCircles.com

Page 11: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEB DESIGN

Page 12: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

DESIGN: Websites are designed first for the users… in-brand and on-mission.

WEB DESIGN PROCESS: Welcome to the complex (yet doable) world of web development.

PLANNING: Web design process begins with ideas, concepts, vision and goals.

DEVELOPMENT: Site setup revolves around creating a great user experience.

LAUNCH: After all the content, images and videos are in place – you are ready

to publish.

TESTING: Testing includes browsers, mobile devices,

links and other QA.

SUPPORT: Support comes in many forms – from management to creative, and tech to marketing.

GRAPHIC: Shutterstock

Page 13: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEB DESIGN PRINCIPLES

GRAPHIC: Dreamstime.com

“A glitzy web and unique product is not enough to be successful selling online. What it takes is superior customer service and a customer experience that

provides unique value.” – USA Today

Web Design Quick List • Color palette • Structured pages (templates) • Simple, easy to follow • Proper navigation • Load-time • Fonts • In-brand • On-message

Page 14: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

KEY ELEMENTS IN MODERN WEB DESIGN

Source: “The 8 Elements of Modern Web Design” by Jeffrey Vocell at blog.hubspot.com (Oct. 8, 2015)

“Every year… new elements and styles in website design begin to emerge. Some elements -- when incorporated thoughtfully -- help tell stories and explain your company. Other elements work to improve how content looks on a specific device. While it's not necessary to include every trend that comes about on your website, many of them have the potential to improve your visitor's experience.”

– Jeffrey Vocell, Principal Product

Marketing Manager at Hubspot

Fonts: large and distinguishable

Short videos: engage visitors

Images: large photos best above the fold

Videos: videos that play automatically can add value

Semi-flat design: “Flat design is any element that does not include or give the perception of three dimensions, such as shadows.” Benefits: reduces site load time.

Hamburger menus: take users directly where they want to go

Product pictures: highlight key features

Cards: small features you see in Pinterest with photo, headline and short promo copy

Page 15: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEB CONTENT BEST PRACTICES

Create content for your

audience - not stakeholders

Be brief, easy to scan and

optimize

Update content regulary and

with intention

Make copy actionable so you can meet

conversion goals

Give them a reason to stay

(and come back) with

exclusives and incentives

Be the expert in your

business, products and

services

Use examples and

testimonials

“Who are my readers? How do I reach them? What are their motivations? What are the problems I can help them solve?

How can I entertain them and inform them at the same time? What content will compel them to purchase what I have to offer? To be successful, you

need to do the same thing.”

David Meerman-Scott, sales and marketing strategist and author

“When people come to you online, they are not looking for TV commercials. They are looking for information to help them make a decision.”

-David Meerman-Scott, sales and marketing strategist and author

Page 16: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

USER EXPERIENCE

Page 17: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

USER PATH ANALYSIS

User path analysis is a way to determine the sequence of pages and sections within a website that a user follows as he or she navigates through pages and links. When structuring the desired user path, consider the following questions:

• What do you want users to do once they arrive on a page in your site?

• What actions do you want them to take?

• What path are you hoping they follow from one page or feature to the next – and how can you influence that path?

Source: Host Baby Blog – post by Chris Bolton May 2013

“Look at the statistics: Women make 85 percent of all buying decisions – that’s $25 billion of purchasing power. All of a sudden, we’re a really hot demographic – and we don’t buy the same way that men do.” – Karan Eriksson, CEO, Women In Technology International (WITI)

Page 18: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

USER EXPERIENCE

GRAPHIC: JustCreative.com

Invite interaction on your site - make it two-way

Be consistent in theme – color, look and feel throughout

Use more than words – pictures, videos, surveys

Use responsive design to make the site mobile friendly

Give users options – things to read and watch and

control in viewing

Don’t send your users away – publish your best content on the site

Monitor your users using analytics

Update your site often. Provide interactive, interesting features enticing users to come back for more

Page 19: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEB CONTENT

Page 20: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEB CONTENT STRATEGY

Navigational Structure… User path analysis – a way to determine the sequence of pages and sections on your website that a user follows as he or she navigates your website.

Conversion Path… Allow you to segment, qualify and convert online respondents from paid search, display, email and other digital initiatives.

• What specif ic information do you want to of fer vis i tors?

• What information already exists and can be incorporated into the site?

• What sections and subsections do you know you want to include?

• What new content is required and needs to be generated?

• What resources, services, etc. wi l l be of fered on the site?

• How do you want to structure the content? Does a desired user path already exist? Source: Hub Spot… “Building a Killer Content Strategy”

Page 21: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEB CONTENT PLANNING

AUDIENCE Most websites have multiple audiences. But – there are always those that matter most. This stems back to buyer personas. So I asked myself who is my PRIMARY audience? Who else needs to be considered?

Q&A After it was clear who my primary audience, I asked myself several questions - pondering what was really needed with this content – what information is actually needed to meet audience expectations?

DECISIONS Considering site goals – what do I want visitors to DO when they come to the site? What is the path I want them to follow? What is their buying (or conversion) cycle?

BRAND A company and product brand message and visual identity are a major element in the content planning process to ensure content stays in-brand and on-message.

CONVERSION Referring again to site goals and conversion points – I had to think about how I would showcase these calls to action and where they should be integrated into the content.

OPTIMIZE Key words and phrases potential site visitors will use in organic search are critical when deciding page titles, text, alt tags and link titles so that content can be optimized and easy to find when visitors search in and outside the site

CREDIBILITY Legitimizing the site is important to first-time visitors so they feel confident they are looking at something that is real and secure. Use of visible disclaimers, quotes by leadership, rankings, statistics, testimonials and social media links and feeds help legitimize a website.

CONNECTION Sites rarely stand-alone without connection to other related sites or affiliated partners. As part of secondary navigation – and within text – I was intentional about establishing relevant, useful connections through links and features.

WHY? As part of content planning I wanted to keep in my why the visitor was on the site. I considered the top reasons a visitor would be there and what they would want to read, do or see.

ENGAGE When contemplating most valuable copy points, I wanted to make sure I incorporated actionable content that makes the visitor feel connected and inspired to engage via social media, completing forms or surveys, emailing to learn more, registering for an event, etc.

Page 22: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

SITE LAUNCH

Page 23: WEB STRATEGY & DEVELOPMENT - WordPress.com · DEVELOPMENT . NAVIGATION ... editing, detail -oriented, efficient, resourceful, creative, able to delegate ... services Use examples

WEB CONTENT PLANNING

Optimization: Verify search engine optimization is set up for the site – and on every page. This includes title, description and key terms

Design: Check design elements – consistency in brand, quality of images, alt tags in photos and attribution, font and color scheme. Also verify the design is responsive and looks and functions the way you want it to on smaller screens and mobile devices.

Analytics: Ensure site is set up to be tracked and monitored properly by an metrics tool like Google Analytics.

Browser Testing: Check the site on all of the main browsers- Internet Explorer, Chrome, Firefox – and that all aspects of the site are functioning. Browser testing also includes testing forms and that users receive auto email, thank you pages, etc. Note: tools like Browserling and Browserstack are useful in testing browsers.

Link Checking: Ensure that all links lead to the correct location including hyperlinks, social media links, email, etc.

Promote: Celebrate success and share your new site launch with internal and external stakeholders, friends, family and connections. Share on social media, email – whatever will best get the word out.

Check your url: Ensure the published url is what you want. You may need to set up a redirect – or purchase a unique (vanity) domain.

Test. Learn. Adjust. Testing on a website typically refers to A/B or multivariate test – taking aspects of your site and through intention and campaign strategy, setting it up so population A receives the link to test site 1 and population B receives the link to test site 2 and analytics are tracked accordingly. Testing efforts are on a set timeline with specific assessment metrics established. Metrics and tracking is ongoing. Reporting and adjusting varies based on what the organization or campaign is trying to accomplish.