1. E-Commerce
Customer Interface

2. Customer Interface

3. Agenda











Introduction
The seven design elements of the customer interface
The alternative “look and feel” approaches to design
The five content archetypes
Be concerned with community
The levers used to customize a site
Types of communication a firm maintains with its
customer base
Firms connect with other businesses
The alternative pricing models of commerce
archetypes
Case studies: Palm
Conclusion

4. Quote

"On the Internet, ease of use comes
first and transfer of money comes
second. Revenues on the Web are
determined almost completely by
usability."

Jakob Nielsen, The Economist , April 28,
2001

5. Introduction


The customer interface is the virtual representation of a
firm's chosen value proposition
Seven design elements of the customer interface (7 Cs)
 Context
 Content
 Community
 Customization
 Communication
 Connection
 Commerce

6. 7 Cs of the customer interface




Context

Site’s layout and design. [how]
Content

Text, pictures, sound, and video that the
website contains. [what]
Community

The way that the site enables user-to-user
communication. [Shop with a friend]
Customization
Sites ability to tailor itself to different users
or to allow users to personalize the site.

7. 7 Cs of the customer interface

Communication
 The way the site enables site-to-user [email
notification], user-to-site[customer service request],
or two-way communication [instant messaging]
Connection
 Degree that site is linked to other sites.
 Commerce
 Site’s capability to enable commercial
transactions. Sale of goods and services on
the site.


8. 7Cs of the Customer Interface
Context
Content
Text, pictures, sound
and video that web
pages contain
Site’s layout and design
Commerce
Site’s capabilities to
enable commercial
transactions
Community
The ways sites enable
user-to-user
communication
Connection
Customization
Site’s ability to selftailor to different users
or to allow users to
personalize the site
Degree site is linked to
other sites
Communication
The ways sites enable siteto-user communication or
two-way communication

9. Business Model
Business Model
Individual Supporting
FIT
Context
Context
Content
Content
Community
Communication
Communication
Customization
Customization
Consistent
Reinforcement
Commerce
Commerce
Connection
Connection

10. Online and Offline Integration of the 7Cs
The integration of online and offline strategies is important to success:
Context
Polo.com
Both online and
offline stores appear
simple and elegant.
Community
Both the site and the
store attempt to
create a culture
surrounding the
product offering.
Commerce
Both storefronts
enable and facilitate
commerce.
Communication
Online sales help is
available, just like in
stores.
Connection
Polo is very
independent in both
formats, with few links
on the website and
no apparent in-store
relationships.
Content
Same clothes, same
prices, similar
selection.
Ralph Lauren, Madison Ave., NY
Customization
The online shopping
experience is more
customizable
(registration,
shopping cart, etc.)
than the offline
experience.

11. 1-Context


The context of a website captures its aesthetics
and functional look-and-feel
Dimensions of Context

Function Refers to the organization and accessibility of
information
 Section Breakdown is the way the site is organized into
subcomponents



Linking Structure enables users to move easily between sections
Navigation Tools facilitate how the user moves through the site
Site Performance is measured in terms of speed, reliability,
platform independence, media accessibility and usability

12. What is Archetypes?


the original pattern or model of which all
things of the same type are representations
or copies
prototype; also : a perfect example

13. Context (Cont’d)

Aesthetics Refers to the visual characteristics of a site



Color Scheme refers to the colors used throughout the site
Visual Themes help to tell the story portrayed across the site
Context Archetypes

Aesthetically Dominant: Emphasis is on the look-and-feel of
the site. This type of site makes heavy use of visual elements

Functionally Dominant: Emphasis is on the display of textual
information. This type of site limits the visual design to a
minimum

Integrated: Balance of form and function. These sites have a
clear and appealing theme that support the underlying graphics

14. Form vs. Function — The Design Context Frontier
The age old argument of form vs. function is being changed by the Web:
High
Integrated
Aesthetically
Dominant
Aesthetic/
Form
Frontier is
Frontier is
gradually
gradually
moving outward
moving outward
as technology
as technology
advances
advances
Low
Functionally
Dominant
Low
High
Function

15. Aesthetic Example — KMGI.com
High form, low function: The
KMGI approach used to make
heavy use of visual elements, but
lacked performance capability.
BEFORE
Now, KMGI has integrated more
functionality into its site, while still
maintaining some of the strong
visual elements.
AFTER

16. Functional Dominant — @Brint.com
Low form, high function: Brint.com assumes its users have little need for visual
elements or themes and instead seek ease of use and plentiful information:
Notice the
Notice the
plethora of
plethora of
links
links
The site is
The site is
also textalso textladen
laden

17. Integrated Approach
Example — Patagonia.com
Patagonia’s integrated approach is a balance of form and function that creates an
attractive and easy-to-use interface:
The links,
for instance,
are both
textual and
graphical

18. The 7Cs of CarPoint
CarPoint takes a predominantly functional approach to the context of the site:
The site is informationThe site is informationintensive with lots of
intensive with lots of
links and options to
links and options to
access other parts of the
access other parts of the
site.
site.
Visually, the site’s graphics
Visually, the site’s graphics
denote the theme of the
denote the theme of the
value proposition; even if
value proposition; even if
there were no words,
there were no words,
one could still derive that
one could still derive that
this is a site devoted to
this is a site devoted to
car sales.
car sales.
Functionally, the site
Functionally, the site
appears to have
appears to have
adequate speed,
adequate speed,
reliability and usability.
reliability and usability.

19. 2-Content
 Content


Text, pictures, sound, and video that the website
contains.
Dimensions of Content




Offering Mix: product, information, services

Less emphases on information or services
Appeal Mix: promotional & communication

Cognitive: functional aspects eg: low price
 Emotional: affect of product or brand; humor or stories
Multimedia Mix: text, audio, images, video
Content Type: time sensitive vs. reference

20. Dimensions to Content
There are four key dimensions to content, each carrying choices about how to convey the
site’s content::
Dimension
Dimension
Offering Mix
Offering Mix
Products
Choices
Appeal Mix
Appeal Mix
Cognitive
functional,
low price,
availability,
etc.
Information
Services
Multimedia
Multimedia
Mix
Mix
Content Type
Content Type
Text
Current
Audio
Image
Emotional
humor,
warmth,
stories,
etc.
Video
Reference
Graphics

21. Content Archetypes





Superstore
Based
Category Killer
Mix
Specialty Store
Information Dominant
Market Dominant
on Offering

22. Five Contents Archetypes



Superstore

one-stop shop where a customer can find a
wide range of goods in multiple categories.
Category killer

exclusively provide products and services by
specific products or by a customer-need
category.
Specialty store (Offering Dominant):
focuses on exceptional quality and exclusivity
while selling single or multiple products.

23. Superstore Example — Amazon.com
One-stop shop where the customer can find a wide range of goods in multiple product
categories:
Note the array
Note the array
of product
of product
categories on
categories on
the site.
the site.

24. Category Killer Example — Petsmart.com
Exclusively provides products and services by specific product or by a customerneeds category:
Again, note the
Again, note the
categories;
categories;
rather than
rather than
being broad,
being broad,
they focus on a
they focus on a
single vertical.
single vertical.

25. Specialty Store Example —
Frontgate.com
Focuses on exceptional quality and exclusivity while selling single or multiple
categories of products:
The site offers a
The site offers a
broad array of
broad array of
products, but
products, but
they are all highthey are all highend, premium
end, premium
quality products
quality products

26. Contents Archetypes


Information Dominant
 focus heavily on information, a subset of
these sites focuses on entertainment as well.
Market Dominant
 do not directly offer goods or services for sale
but create a market where buyers and sellers
congregate to conduct transactions.

27. Information-Dominant
Example — Business 2.0
Organize and house vast archives of information and provide tools to the customer to
explore areas of interest and find answers to specific questions:
“New economy,
“New economy,
new rules, new
new rules, new
leaders” — this
leaders” — this
site is focused
site is focused
entirely on
entirely on
providing timely
providing timely
information to
information to
business leaders
business leaders

28. Offering-Dominant Archetypes
Multiple
Number of
Product
Categories
Single
Superstore
Specialty
Store
Category
Killer
Broad
Narrow
Depth of Product Line

29. Market-Dominant
Example — PlasticsNet.com
Create markets where buyers and sellers congregate to conclude transactions:
This site creates
This site creates
an online market
an online market
for the plastics
for the plastics
industry; note the
industry; note the
supplier
supplier
information and
information and
product specs
product specs
available
available

30. Content Archetypes vs. Offering Types
Content
Archetype
Physical
Product
Information
Service
Superstore
Walmart.com
CEOExpress.com
IBMSolutions.com
Category Killer
Petsmart.com
DowJones.com
Schwab.com
Specialty
Frontgate.com
tnbt.com
Tradex.com
Census.gov
IFilm.net
Digitalthink.com
PlasticsNet.com
VerticalNet.com
Monster.com
Information and
Entertainment
Market Maker

31. 3-Community



Community includes a feeling of membership in a
group along with a strong sense of involvement and
shared common interests
Community refers to the interaction between site
users
Dimensions of Community

Interactive Communication: Users can directly exchange
responses with one another in real time via Chat, Instant
Messaging, Message Boards or Member-to-Member e-mails

Non-interactive Communication: Site presents static information
and only allows unidirectional communication with users

32. Communities — Elements, Types and Benefits
Elements of
Community
•• Cohesion
Cohesion
•• Effectiveness
Effectiveness
•• Help
Help
•• Relationships
Relationships
•• Language
Language
•• Self-Regulation
Self-Regulation
Types of
Communities
Just Friends
Just Friends
Member Outcomes:
Participation and Benefits
Degree of
Degree of
Participation
Participation
Enthusiasts
Enthusiasts
Friends in
Friends in
Need
Need
Need Fulfillment
Need Fulfillment
•• Inclusion
Inclusion
Players
Players
•• Mutual Influence
Mutual Influence
Traders
Traders
•• Shared Emotional
Shared Emotional
Experiences
Experiences

33. Elements of community
Six criteria.
 Cohesion
 Sense of group identity and sense of belonging
to the group.
 Effectiveness
 Impact of group on member’s life
 Help
 Perceived ability to ask for and receive help

34. Elements of community



Relationships
 Likelihood of individual interaction and
friendship.
Language
 The prevalence of specialized language.
Self-Regulation
 The ability of the group to police itself.

35. Types of Communities


Just Friends—social
Enthusiasts, shared interests




Community of Practice
Friends in need, support groups
Players, games
Traders

36. Degrees of Participation



Passives, look but don't post
Actives, participate in topics created by
others
Motivators, create topics, plan activities


Hosts
Caretakers or moderators, keep order

37. Member benefits

Need fulfillment: emotional or information
needs

Inclusion: encourage to participant in each
others activities.


Mutual influence: Openly discuss issues.
Shared emotional experiences

38. Intro. to Six Community Archetypes
Each archetype will be defined and an example of each will be given:
Bazaar
Bazaar
Theme Park
Theme Park
Club
Club
Shrine
Shrine
Theatre
Theatre
Cafe
Cafe

39. Archetypes of CommunityCommunity Classification



Bazaar
 allow users to wander through a number of
interest areas but does not provide any means
for users to interact with one another. Yahoo
games
Theme Park
 focus on finite number of interest areas that are
categorized by categories and sub categories
Club
 highly focused on only one area of interest and
promotes a considerable amount of interaction
among members.

40. Archetypes of Community



Shrine
 highly focused community with minimal interactions
between members. Intensely personal rather than
public eg: biographies of TV shows
Theater
 focused in a particular area but allows for moderate
interaction among members.
Café
 focuses on a common area of interest but provides
considerable interaction among members.

41. Bazaar Example — Yahoo Games
Community that allows users to wander through a vast number of interest areas but
does not provide any means for users to interact:
The site offers a wide
The site offers a wide
collection of games
collection of games
that can be played with
that can be played with
other users, but
other users, but
community is not a
community is not a
priority; the elements
priority; the elements
of community are not
of community are not
present (cohesion,
present (cohesion,
effectiveness, etc.).
effectiveness, etc.).

42. Theme Park Example — VoxCap.com
Community that focuses on a finite number of interest areas that are organized by
categories and subcategories:
This site encourages
This site encourages
activism on world
activism on world
and community
and community
issues, but it is
issues, but it is
activism that is the
activism that is the
theme.
theme.

43. Club Example — Gillette Women’s Cancer
Connection
Community that is highly focused on one area of interest and promotes a
considerable amount of interaction among members:
The most
The most
prominent link
prominent link
on the site
on the site
encourages
encourages
member
member
communication
communication
on message
on message
boards
boards

44. Shrine Example — The Unofficial Cheers
Website
Highly focused community with minimal interaction between members:
This site allows
This site allows
comprehensive
comprehensive
exposure to a
exposure to a
single topic (in
single topic (in
this case, a TV
this case, a TV
show) with no
show) with no
interaction
interaction
among users.
among users.

45. Theater Example — iFilm.com
Community that is focused in a particular area but allows for moderate interaction
among members:
Not as focused
Not as focused
as a “shrine,” this
as a “shrine,” this
site concentrates
site concentrates
on film, but still
on film, but still
allows for little
allows for little
interaction
interaction
among users.
among users.

46. Cafe Example — Bolt.com
Community that focuses on a common area of interest but also provides for
considerable interaction among members:
“Everything you need
“Everything you need
to speak your mind,
to speak your mind,
hang out, hook up...
hang out, hook up...
whatever” — this teen
whatever” — this teen
site allows for a high
site allows for a high
level of interaction
level of interaction
among its users.
among its users.

47. 4-Customization


Customization refers to a site's ability to tailor itself to each
user or to be tailored by the user
Dimensions of Customization


Personalization: The user initiates and manages the
customization process
Tailoring by site: Software dynamically publishes unique
versions of the site to address specific user's interests,
habits and needs more appropriately

Tailoring based on past user behavior
 Tailoring based on behavior of other users with similar
preferences

48. Personalization by User
Example — Mylook.com
Enables the user to modify site content and context based on consciously
articulated and acted-upon preferences:
The first step in this
The first step in this
site’s customization
site’s customization
process is to
process is to
choose the
choose the
category with which
category with which
you are the best fit;
you are the best fit;
content will then be
content will then be
customized
customized
accordingly.
accordingly.

49. Tailoring by Site Example —
Amazon.com
Enables the site to reconfigure itself based on past behavior by the user or by
others with similar profiles:
Without consciously
Without consciously
articulating
articulating
preferences, users
preferences, users
find that
find that
Amazon.com makes
Amazon.com makes
recommendations
recommendations
based on their past
based on their past
buying habits.
buying habits.

50. 5-Communication


Communication refers to the dialogue between a
site and its users
Dimensions of Communication

Broadcast: One-way information exchange from organization to
user. Broadcast communication can be in the form of mass
mailing, FAQ, e-mail newsletters, content-update reminders and
broadcast events

Interactive: Two-way communication between the organization
and a user. Interactive communication can be in the form of ecommerce dialogue, customer service and user input

Hybrid: Combination of broadcast and interactive communication

51. Communication Archetypes

One-to-many, non-responding user


One-to-many, responding user



Seminar, chat, celebrity chat
One-to-one, non-responding user


Survey, questionnaire, etc.
One-to-many, live interaction


No need to respond
Updates or reminders via e-mail
One-to-one, responding user: order notices
One-to-one, live interaction: LivePerson

52. 6-Connection with Other Businesses


Connection is the degree to which a given site is able to link
to other sites
Dimensions of Connection

Links to Sites: Links that take the user completely outside the home site and
into a third-party site

Home Site Background: Links that take the user to a third-party site, but the
home site is noticeable in the background

Outsourced Content: The site content is derived from third parties

Pathway of Connection: Refers to the links to access additional information


Pathway-out - links cause the user to completely exit website
Pathway-in - links cause the retrieval of material from the same or other sites
without exiting the current website

53. Dimensions of Connection
Sites connect with other businesses in the following ways:
Links
Links
Links can take the user
completely outside of the
home site
% of Home Site Content
% of Home Site Content
%?
What percentage of
content originates from
the home site and how
much is outsourced?
Home Site Background
Home Site Background
Outsourced Content
Outsourced Content
Links can take the user to a new
site, but the home site is still in the
background
Pathway of Connection
Pathway of Connection
?
Does the site lead users to other
sites, or does it simply retrieve
information from outside sites?
Site content is
derived from
third parties
KEY
Home site
Connected
Sites

54. Connection Archetype

Six alternative connection approaches






Destination site
Hub site
Portal site
Affiliate Programs
Outsourced contents
Meta software

55. Connection (Cont’d)

Connection Archetypes

Destination Site: Provides almost exclusively site-generated content with
very few links to other sites

Hub Site: Provides a combination of site-generated content and selective
links to sites of related interests

Portal Site: Consists almost exclusively of links to a large number of other
sites

Affiliate Programs: Directs users to affiliated websites through embedded
links

Outsourced Content: Contains content generated by third parties

Meta-Software: Utilities and Plug-in software applications created to assist
user in narrowly defined tasks

56. Intro. to Six Connection Archetypes
Each archetype will be defined and an example of each will be given:
Destination
Destination
Hub
Hub
Portal
Portal
Affiliate
Affiliate
Outsourced Content
Outsourced Content
Meta-Software
Meta-Software
PATHWAY-OUT
PATHWAY-OUT
Links lead the user outside
Links lead the user outside
the environment of the site;
the environment of the site;
links are absolute in that the
links are absolute in that the
user’s click causes an exit
user’s click causes an exit
from the original website.
from the original website.
PATHWAY-IN
PATHWAY-IN
Links are hybrid; the user’s
Links are hybrid; the user’s
click causes the retrieval of
click causes the retrieval of
material from the same or
material from the same or
other sites without exiting the
other sites without exiting the
current website.
current website.

57. 7-Commerce


Commerce refers to the sale of goods, products or services
on the site.
Dimensions of Commerce
Functional tools that are the commerce-enabling features
of a website
 Registration
 Orders Through Affiliates
 Shopping Cart
 Configuration Technology
 Security
 Order Tracking
 Credit-Card Approval
 Delivery Options
 One-Click Shopping


58. Commerce (Cont’d)

Commerce Archetypes

Catalog Pricing: The price of goods and services are preset by the
seller

Auction Pricing: Buyers bid against each other, and the highest bid
wins the supplier's products or services

Reverse-Auction Pricing: Sellers bid against each other, and the
lowest bid wins the buyer's business

Demand-Aggregation Pricing: Buyer demand for specific
products is aggregated in order to achieve economies of scale

Haggle Pricing: Buyer and seller can negotiate over price

59. Archetypes of Commerce (Transaction Models)
The following are Internet-based transaction models:
Catalog Pricing
Seller dictates price to buyer
Demand Aggregation
Auction Pricing
Multiple buyers bid
(seller chooses
highest bid)
Reverse Auction
Multiple sellers bid
(buyer chooses
lowest bid)
Haggle Pricing
KEY
Buyer
demand is
aggregate
d to
achieve
economie
s of scale
Buyer
Buyers and sellers
negotiate
Seller

60. The 7Cs of Palm.com
Context
Content
Palm.com takes an integrated
approach to the look and feel of
its site; there are prominent
graphics, but also functionality.
Palm.com is an informationdominant site with all of its
content created in-house.
Commerce
Community
The Palm Store is located at
Palm.com; hardware, software
and peripherals can all be
purchased.
Palm.com has a community
section with message boards,
software exchange and other
online user-to-user info.
Connection
Customization
Palm.com provides links to a
number of alternate providers of
software products in a metasoftware environment.
MyPalm allows users to
personalize the site to handle all
of their Palm data online.
Communication
Palm.com is a one-to-many nonresponding site; it sounds out
updates on product info, but
users response is limited.

61. Learning outcome






7 Cs of the customer interface in detail
Critical factors in the layout (Function)
The levers used to customize a site
Dimensions of performance
Dimensions of Connection
Dimensions of Commerce