the online customer experience: researching and planning a web presence mba 563 week 1
TRANSCRIPT
The online customer experience: researching and planning a web presence
MBA 563WEEK 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
• 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
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
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
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
PHASE 2 OF A WEB PROJECT: DESIGN AND DEVELOP THE SITE STRUCTURE AND CONTENT
Phase 2. Develop site structure
• 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
What did phase 2 of the site redesign process accomplish?
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 changes take longer than wireframe changes
PHASE 3 OF A WEB PROJECT: DESIGNING THE INTERFACE
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 – how will you include these factors in the site you design for your project?
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)
Some best practices in web design for eCommerce sites:
Ecommerce sites selling goods and services are encouraged to focus on the CUSTOMER’S GOALS rather than the company’s perspective and organization.
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
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• Physical address• Twitter feed• Real-time chat• Employee names are nice• Not just fill-out forms (we look at form design in detail next
week)
• Make sure you answer - and fast
Simple usability tips
• Video from CanadaHelps.org (7 minutes)
• This video summarizes some of the things we have been talking about with respect to usability
Usability testing• Can be done with html prototypes, paper prototypes,
or with a fully-functioning version of the interface• Testers selected from target audience• Usually task oriented• Overt or covert observers• Types
– Diagnostic - to spot problems early on– Comparative - select among alternate designs (A/B testing)– Verification - have goals been met?
Building a global website: 2 basic choices
1. Globalization: One website fits all
2. Localization: different website for each country or locale
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 July 10th 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