Planning a customer-focused web presence MARK 430 WEEK 2.

Planning a customer-focused web presence

MARK 430WEEK 2

After today’s class you will understand…..

• The main steps in the website planning and development process

• How to identify goals for a particular organizational website

• How the motivations of website visitors can be included in site design

• How to design the underlying structure of a web site

Developing an effective web presence

• Web presence is a key part of online marketing - the most important element of a firm’s owned media

• Face-to-face encounters replaced with screen-to-face interactions (and screens of many sizes)

• Often the first touch point with a customer – very influential in terms of brand perception

• Must be effective for the customer – deliver what they want – relevance and value

Own Website

Analytics, Datamanagement

Law, Regulation,ethics

Planning and management

Demographics Market research

Being found

Domains, usernames,

hashtags

Content & technologiesText, video,

images, AR, VR

Social media

(owned &

earned)

Advertising

Email / messaging

Own website is the hub for all other activities

Ways to get a web site built• Build and code from scratch – bespoke development (HTML,

CSS, databases, eCommerce functionality etc)– Wide range of firms offer services of varying expense, sophistication,

and levels of expertise (the sky is the limit)

• Use a content management system (CMS) as the foundation for the site– Wordpress (it is said that Wordpress powers 23% of the web); Joomla,

Drupal etc

• Template-based sites– Squarespace, Weebly, Wix etc. Aimed at small business with little or

no technical expertise. Disadvantage is that the site is not usually exportable for hosting elsewhere (proprietary systems) & there is very limited customization

WEB DEVELOPMENT STAGES AND ACTIVITIES

Web (re)development workflow: Goto + Cotler’s “Core Process

Discovery (define the

project)

Design and develop the

website structure

Design the visual interface

Build and integrate content

Launch and evaluate

Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

Plan

Plan

Plan

Create content

and build site

Build and improve

Another way of looking at the elements of the web design process

https://medium.com/@ireneau/design-is-5b867e9f2614

PHASE 1 OF A WEB PROJECT: DEFINE THE PROJECT AND SET GOALS

Steps in planning an effective web presence

1. Determine business objectives, site goals, and success factors

2. Identify the target audience and create user profiles of audience members

3. Conduct market research and competitive analysis

4. Design the site for audience, functionality, and usability

Setting organizational and user goals• Goals from the organizational perspective• Goals from the user perspective: what do they

want to do on your site?• SMART GOALS (see article on course website)

– Specific– Measureable– Achievable– Realistic / relevant– Timebound

• Commissioning a Business Website - How to produce a Design Brief – Paul Boag

Setting website goals

Business objectives

Site objectives

Success criteria

Why does your web site

exist?

What do you want site

visitors to do?

What functions and content will

your site provide?

Design your site to achieve these

Identifying the purpose of a web presence for an organization

• A web site can have many purposes, both broad and specific. Some examples:– Provide product or service information– Sell a product or service– Increase brand recognition– Provide help, operational instructions, or

customer support– Shift customers toward self service– Induce people to subscribe to a newsletter– Provide information for the media– Allow people to make bookings online

User oriented design: Motivations and Goals of Web Site Visitors – why are they there?

• to learn about products or services • to buy the products or services • to obtain information • to obtain contact information for a person or department in the

organization• to interact with other users• to search for something in particular• to browse• to be entertained

• Catering to all these different needs in designing a web interface can be challenging

• When you set the goals for a site, think about what people want and why they are there

Success criteria

• Be specific!– “a 25% increase in newsletter signup by 31st

December 2015”– “100 dinner reservations booked via the online

form in October 2015”– “ 3,000 software downloads at the promotional

price during Q1 2016”– “a 5% increase in visitor time spent on the product

feature page by 30th September 2015”– Conversion rate (see next slide)

Conversion rate • Conversion rate: keeping track of the percentage of your web site

visitors that take a desired action. • For example:

– registering on your site– customizing your site– booking an appointment– making a purchase

– Conversion rate calculation:– Number of purchases divided by number of site visitors– a site that had 1000 visitors who made 50 purchases has a conversion

rate of 5%.– A success criteria would be to increase your conversion rate – Conversely for an ecommerce site a goal might be to decrease

shopping cart abandonment

Understanding the audience

• Market research• Demographic and psychographic information• Create a detailed profile for each visitor type

(a persona) and do early user testing• Commissioning a Business Website - Know you

r audience – Paul Boag

Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

Aims of design for usability

1. Understand user’s goals

2. Anticipate them

3. Make it easy to accomplish them – a way to meet the goals must be reflected in the design of the web pages themselves

PHASE 2 OF A WEB PROJECT: DESIGN AND DEVELOP THE SITE STRUCTURE, CONTENT, AND INTERFACE

Objectives of phase 2 of the site design process

Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

• Developing the Site Structure phase answers specific questions– How is the overall structure organized?– What exactly goes on each page?– How do the pages work with one another?

• One of the most challenging and time consuming aspects of web development

• If visual design is done without this step may result in inefficient use of design resources– Graphical and programming changes take longer than wireframe

and blueprint changes

the “WHAT” of the site

• Text, images, sound, and video• The offering mix: products, information, services etc• The appeal mix – the “call to action”: promotional and

communications messages • The media mix: the multimedia elements included on the

site– Widgets for content from 3rd party sites (eg. twitter)– Embeds for video, Slideshare etc

• Content type: differentiate between time sensitive information versus “evergreen” information

• User Generated Content (UGC) engenders strong community - encourages stickiness and loyalty: reviews, support forums, knowledge sharing

Site structure: Content view

Based on: eMarketing eXcellence. 2012. Chaffey et al. BH

Information architecture is concerned with how the site will function

• Function - site layout and functionality– Section breakdown - the way the site is organized into

sub-categories• make them clear, and customer focused• Organize by customer type / product / task eg. VIU

– Linking structures - navigation• where am I?• how do I get back to where I came from? (breadcrumbs )

– Navigation tools• search functionality and methods• browse capability via category drill-down

Based on: eMarketing eXcellence. 2008. Chaffey et al. BH

Site structure: Site view and Page view

Site maps and wireframes• Site map:

• A visual representation of a site’s structure, organization, flow, and grouping of content

• Shows an overview of the site structure as a whole and how the pages link together

• Wireframe / blueprint: Show • All major page structural elements• Image and media placement and sizes (in pixels)• Navigation elements• Functional elements (forms, buttons, interaction etc)• Messaging / content areas• Does not typically include visual design elements

Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

Site structure: Site view and Page view

DESIGNING THE INTERFACE TO MEET YOUR GOALS

ProductPrice /Promotions

Range

InteractivityCustomer journey fit

Flow and data entry

ServiceFulfillment

Support

DesignVisual Design

Style

Tone

ReassuranceTrust

Credibility

Ease of UseUsability

Accessibility and web standards

RelevanceContent and search

Customization

PerformanceSpeed

Availability

Elements / success factors to consider in developing a web presence

Chaffey et al (2006) pg. 303

Customer experience

Emotional values

Rational values

WEB PRESENCE

Customer-Centric Web Site Design and Usability

• Usability doesn’t always mean “easy to use” - it means usable by the site’s target audience for their purpose in using the site (the “use case” or “usage occasion”)

• Amazon.com has a very different “use case” than Google.ca

• Think about– Function (what can the user DO)– Aesthetics (look and feel, graphic design)– Content (text and media; freshness; UGC)

Q: What’s the most important thing I should do if I want to make sure my web site is easy to use? A: “Don’t make me think!”

From: Steve Krug. Don’t make me think: a common sense approach to web usability. 3rd ed. New Riders. 2014https://www.sensible.com/dmmt.html

Managing Layout and Whitespace• Put content that is important to the user “above the fold” • How do you know what is important? Use server logs • Think about screen resolution –

now 99% of people have a resolution higher than 1024 x 768 – what difference does it make?

• Use “responsive design” so that your site looks good on all devices. Relies on use of fluid layout and image elements – screen resolution is detected by CSS “media queries”

• Avoid horizontal scrolling (unless it is a deliberate part of the design AND it will work on mobile)

• Use whitespace

Navigation labels and functionality• Use the language of the user to label your content, not

the language of the organization– what is appropriate depends on your primary target

audience – eg. on a gardening site• scientific name for diseases or common names?• Latin or English names of plants for a gardening site?

• Avoid ambiguities in labeling• Think about how people want to access your content

(by product, by task, by part number etc)• On more complex sites use breadcrumbs to help

people find their way

Consistency

• Make sure that the navigation of the site is consistent– Use colour / graphics to help user keep a sense of

where they are

• Follow web conventions (where audience appropriate)– eg. making the logo (top left?) clickable back to

home page– Links underlined or not?

Write for the web?• It depends on your audience, and the nature of the

content• People tend to scan rather than read on a screen• More white space, bullets, shorter paragraphs, are

often recommended for content that is likely only to be read onscreen

• Longer or more dense material should be “print-ready” and allow font size changes

• BUT remember that people do increasingly read on screens of all sizes

Contact us? Provide lots of information

• Email addresses• Phone and fax numbers - for customer groups / product groups• Employee names are nice (if appropriate)• Physical address• Map (if you have a “shop-front”• Social media links / buttons• Real-time chat (if you can support it)• Not JUST fill-out forms (but well designed forms are important

elements)

• Make sure you answer - and fast

12 reasons I won’t buy from your website: the mistake list (from JeffBullas.com – includes examples)

• Low quality visuals• The site doesn’t appeal to the target audience• Content is stale and boring• Under-estimating the importance of the ‘About Us’ and ‘Contact Us’ pages• The shopping cart doesn’t work properly• Your trust indicators are missing• Bad SEO• Not being mobile friendly• Not having video to illustrate products• Not having a clear value proposition• Cheesy stock images• No available calls-to-action