The online customer experience: planning and designing a web presence

MGMT 230WEEK 3

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

• How to use today’s material for the website project assignment

Developing an effective web presence

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

• Often the only 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

• Must be effective for the organization – meeting business goals

The importance of the interface

• Internet technology has caused a shift in the way in which firms interact with their customers– Face-to-face encounters replaced with screen-

to-face interactions.– Interfaces include desktop PCs,

laptops/notebooks, web kiosks, handhelds such cellphones, smartphones & tablets

– We must design the interface to accommodate the many devices consumers use to access our web presence

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

Typical roles involved in a web project

• Site sponsor / site owner• Project manager (balances budget, time, scope)• Art director/visual designer• Information architect / designer / usability engineer• HTML & CSS developer• Programmer / backend engineer / DBA• QA (Quality Assurance)• Content manager / copywriter

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

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

PLANNING A WEB SITE: DEFINE THE PROJECT AND SET GOALS

Steps in planning an effective web presence (this relates to section 1 of the assignment

instructions)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 the

rate of 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

An example of a detailed user profile

• Sample of a user profile – make your site user a real person and describe his/her actual use of the site

• Example: online store for yoga gear– Jenny is a 22 year old female university student from Victoria, who accesses

the web on a daily basis from her iPhone and from her laptop. She is extremely internet savvy and completes online transactions for clothes, music etc on a regular basis. She has high speed internet access both at home and on campus. Typical tasks on the site include browsing for products to purchase, reading and posting reviews, and checking the forums for information about what’s new in yoga. She has a username and password and is able to complete purchases quickly and easily.

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

DESIGNING AND DEVELOPING WEBSITE STRUCTURE AND CONTENT

Developing a web site structure (relates to section 2 of the assignment instructions)

• CONTENT VIEW– Addressing content– Auditing existing content– Outlining content– Creating a content delivery

plan

• SITE VIEW– Sitemapping– Addressing existing site

organization– Setting naming

conventions

PAGE VIEW Wireframing Addressing navigation Naming and labeling

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

the “What” of the site

• Text, pictures, sound and video– both the type of content, and the media with which it

is delivered• 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)

• Content type: differentiate between time sensitive information versus “evergreen” information– Freshness keeps bringing customers back– Archives provide a useful service to users

Site structure: Content view

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

Community

• User Generated Content (UGC) engenders strong community - encourages stickiness and loyalty

• Community can create attractive content (ie. free content for the site owner)– Web communities can make the user feel that they are

valued by the firm– Community can satisfy needs not otherwise able to be

satisfied individually (eg. finding people, getting tech support)

• Common tools are reviews, support forums, knowledge sharing

Site structure: Content view

Based on: eMarketing eXcellence. 2008. 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 mapping• 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– Includes agreed naming conventions (complex

Example)– See course website for simple example to use for

your web projectGoto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

Site structure: Site view and Page view

Wireframes / blueprints• NOT design oriented – show information only• Purpose of wireframes

– Aid in communication– Form the basis for visual design– Form the basis for HTML production / templates

• Show (at a minimum)– All major page elements– Target window size (in pixels)– Navigation– Media– Functional elements– Messaging / content areas– Complex Example

– See course website for example to assist with your web project planGoto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

Site structure: Site view and Page view

WEB PROJECT ASSIGNMENT

Web project assignment

• Stage 1 of this assignment is the production of a planning document (worth 20%)• Due by: Monday, November 2nd at 4:30pm via email

• Stage 2 is the production of the site itself (worth 15%)• Due by Friday December 4th at 4:30pm (via email)

• Before you develop your website, you need to PLAN

• Assignment instructions, some samples and the marking scheme are on the course website

PART 1 – WEBSITE PLANNING AND DESIGN DOCUMENTATION

• Sections of your plan– SECTION 1: Goals and target audience– SECTION 2: Information architecture, page

layout etc– SECTION 3: Design “look and feel” and

usability– SECTION 4: Site content - images, video,

search engine optimization

Exercise on setting goals for a website

• You will need to do this for your web site project

• This exercise will give you some practice• Remember the goals you set MUST be able to

be achieved via the websiteGoal =>> =>> website design feature / content / functionality