The online customer experience:
researching and planning a web
presence
MBA 563
WEEK 1
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 is
the hub for all
other activities
Planning and
management
Email /
messaging
Domains,
usernames,
hashtags
Being
found
Demographics
Market research
Advertising
Own
Website
Social
media
(owned
&
earned)
Content &
technologies
Text, video,
images, AR, VR
Analytics,
Data
management
Law,
Regulation,
ethics
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
Plan
Discovery
(define the
project)
Build and
improve
Create
content
and
build
site
Launch and
evaluate
Build and
integrate
content
Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders
Design and
develop the
website
structure
Design the
visual
interface
Plan
Plan
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
Why does
your web site
exist?
objectives
Site objectives
What do you
want site
visitors to do?
Success criteria
Design your site to achieve these
What
functions and
content will
your site
provide?
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
your 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
• 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
Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders
Site structure: Content view
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
Based on: eMarketing eXcellence. 2012. Chaffey et al. BH
Site structure: Site view and Page view
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
DESIGNING THE INTERFACE TO
MEET YOUR GOALS
Elements / success factors to consider in developing a web presence
Product
Interactivity
Service
Price /Promotions
Customer journey fit
Fulfillment
Range
Flow and data entry
Support
WEB PRESENCE
Design
Customer
experience
Visual Design
Reassurance
Trust
Emotional values
Style
Credibility
Tone
Rational values
Relevance
Performance
Usability
Content and search
Speed
Customization
Availability
Accessibility and web
standards
Ease of Use
Chaffey et al (2006) pg. 303
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. 2014
https://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 “printready” 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
WEB PROJECT ASSIGNMENT
Web project assignment
• Stage 1 of this assignment is the production of a
planning document (worth 35%)
• Stage 2 is the production of the site itself (worth 15%)
• Both due on Friday November 13th 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 – we will
go though these in detail on Friday