T h e g o o d n ew s fo r m o d e r n c o m m u n i c a t io n p r a c t i t i on e r s i s t h a t fo r t h e m o s t p a r t , we d o n o t n e e d to k n ow m u c h a b o u t h t m l c o d e , s t y l e s h e e t s o r b a c k - e nd p ro g r a m m i n g . We a r e t h e g o - to p e o p l e o n t h e f ro n t - e n d –i n d i v i d ua ls r e s p o n s i b l e fo r t h e u s e r ex p e r i e n c e , c o n te n t , e l eva t i ng o u r c o mp a ny ’ s b r a n d a n d r e a c h i n g o u r c u s to m e r s .

WEB STRATEGY & DEVELOPMENT

NAVIGATION, ARCHITECTURE AND THE USER EXPERIENCE

By Rebecca L. Cooney, MSCClinical Assistant Professor

Washington State University

WEB SITE BASICS

PLAN. COORDINATE. PACE.

• I t is not a one-person job

• I t 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-fr iendly

• 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 ScottAuthor, “New Rules…”

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

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

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

WEBSITE PLANNING

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

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?

NAVIGATION & FLOW

WIREFRAME“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, WSU

SITEMAPA 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 (Technopedia, n.d.).” 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.

The main tools practitioners use to create an online architectural structure and navigational path for users include sitemaps and wireframes. Sitemaps are essentially a website’s table of contents while wireframes provide the visual structure for site elements and features.

HOME PAGE TIPS• Use things like navigation icons that stand out and convey company branding to enhance

function and usability• Clearly present products and value statements to immediately tell the user who the company

is and what they do• Use features like interactive photo banner sliders to make it easier for the user to surf the

site contents• Simplicity works – value statement, link to social media and “try it” button may be enough• Grids and columns help guide the eye• It is OK to just showcase products and not show everything all at once• Use of vibrant colors and simple navigation enhances simplicity• Incorporate interactive and visual elements to enhance user experience• Use of a high resolution image as background can be powerful• Use of one large slideshow paired with a simple top navigation creates

a targeted navigation experienceHubSpot Blog (n.d.). How to design a website: 50 brilliant homepage designs.

WEB DESIGN

WEB DESIGN PROCESSWelcome to the complex (yet doable) world of web development

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

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

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

USER EXPERIENCE

UNDERSTANDING VISITORSAs you get further in the planning and development of your website, you must consider how a typical user will spend time on your site.

• What do you want them to do once they arrive at your landing page?

• 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?

To best meet the needs of your site visitors, understand the ultimate goals you have for your site so you can establish content and navigation features that get them to those objectives.

• What is your site purpose? Is it to get them to engage – fill out a form, email you, visit your social channels?

• Is it to buy something in your online store?

• Whatever those ultimate goals are answers the question “what do you want them to do” on your site.

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)

USER EXPERIENCE

VISITORBUYING CYCLE

Research/EducationThe visitor is at a state of

consideration – this is likely a return visitor who is back to

learn more – maybe subscribe to a blog or sign up to receive

more information. They are spending more time on the site

and digging deeper into the primary and secondary pages.

Comparison/ValidationNow that the visitor is fully

vested in learning more – they want to validate your company, product or service is the right

one. So they are looking around at competitor sites, seeking out customer reviews, comparing

prices and asking for more information from you, from the competition and from their own

network.

PurchaseYour visitor is ready to buy –“pull the switch” – and make the sale or officially sign up.

This is a critical stage to deliver on promise and seek ways to maintain connection, loyalty

and advocacy.

AwarenessNew visitor is just browsing –checking things out. They may have been referred to the site via search, social channel or

friend. They are there because they are intrigued and want to

learn more (quickly)

“Types of content to achieve goals differ – important to create content for every stage of the buying cycle.”

– Hubspot, Building a Killer Content Strategy

MOTIVATING USER ENGAGEMENT•Formal, flowery content•Lacks all humor – un-fun and

un-interesting•Uses too many ‘be’ verbs (is,

are, was, were, etc.)•No photos or videos (or bad

ones)•Copy is too long without breaks

or use of style (bold, itals, section headers)

The “Boring” Website

• Uses informal, digestible writing style

•Incorporates humor (in small doses) – think witty vs. cynical

• Uses active voice• Copy is brief, intentional,

relevant and useful•Overall site design and copy is

“scannable” – easy to navigate and logical flow and placement of content and visual elements

The “Engaging” Website

Mars, K. (2015, Mar 20). Five (5) best practices for your website content strategy. The Rocket Blog.

WEB CONTENT

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”

WEB CONTENT PLANNING

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

CONTENT PLANNING EXAMPLEProcess for taking a a one-page website with mostly promotional copy and creating a multi-layer, dynamic and actionable version with new copy and features

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 contentstays 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

CREDIBILITYLegitimizing 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.

ENGAGEWhen 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.

SITE LAUNCH

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 Browserlingand 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.