Chapter 2:

Web Design
(Desktop and Mobile)

1
 What We Learned Last Session:
• Type of the Website
• Type of the Traffic
• Type of the Action/Conversion
• Increase the Revenue

2
 Chapter Objectives

• Multiple Design philosophies

• Various types of landing pages

• Online Customer Experience (CX)

3
https://www.lingscars.com/

4
What about?

5
 Web Design Frameworks
1) Design for Usability
2) Conversion-Centered Design
3) Three Questions
4) Segments
5) Mobile first

6
 Web Design Frameworks
1) Design for Usability
2) Conversion-Centered Design
3) Three Questions
4) Segments
5) Mobile first

7
 1) Design for Usability
1) Follow website conventions
2) Create effective visual hierarchies
3) Break pages up into clearly defined areas
4) Make it obvious what’s clickable
5) Eliminate distractions
6) Format content to support scanning

8
9
 1) Design for Usability
1) Conventions
2) Visual
hierarchies
3) Clearly
defined
areas
4) What’s
clickable
5) Eliminate
distractions
6) Support
scanning
10
 1) Design for Usability
• Conventions
• Visual
hierarchies
• Clearly
defined areas
• What’s
clickable
• Eliminate
distractions
• Support
scanning

11
https://www.tibii.com.au/

12
 Web Design Frameworks
1) Design for Usability
2) Conversion-Centered Design
3) Three Questions
4) Segments
5) Mobile first

13
 Conversion-Centered Design
(CCD)
1) Attention
2) Context
3) Clarity
4) Congruence
5) Credibility
6) Closing
7) Continuance

The Design of Landing Pages

14
 Conversion-Centered Design
(CCD)
Usually used for
landing pages

1) Attention
2) Context
3) Clarity
4) Congruence
5) Credibility
6) Closing
7) Continuance

15
https://www.youtube.com/watch?v=w87hTii1Dao 16
https://www.youtube.com/watch?v=w87hTii1Dao 17
https://www.youtube.com/watch?v=w87hTii1Dao 18
https://www.youtube.com/watch?v=w87hTii1Dao 19
20
https://www.youtube.com/watch?v=w87hTii1Dao 21
 Attention Ratio
The ratio of the number of things you CAN do on a page
The number of things you SHOULD be doing

22
https://www.youtube.com/watch?v=w87hTii1Dao 23
As Attention Ratio Goes Down,
Conversion Rates ….!

24
As Attention Ratio Goes Down,
Conversion Rates Go Up!

25
26
Hobson+1 Choice Effect

27
 2) Context
There should be a match between the headline
of an Ad with what you say on the landing page.

28
 Message-Match Fail!

SAME DAY FLOWERS UK SEASONAL FLOWERS BOUTIQUE POSTAL OCCASIONS GIFTS FUNERAL FLOWERS INTERNATIONAL

29
 Ask This Question
3) Clarity from 20 People, for
instance….!

30
31
4) Congruence and Credibility

32
6) Closing

33
6) Closing

34
7) Continuance

35
7) Continuance

36
 Web Design Frameworks
1) Design for Usability
2) Conversion-Centered Design
3) Three Questions
4) Segments
5) Mobile first

37
 Three Questions
• What are you offering?
• Why should I pick you?
• What do you want me to do next?

38
 Three Questions
• What are you
offering?
• Why should I
pick you?
• What do you
want me to
do next?

39
 Three Questions
• What are you
offering?
• Why should I
pick you?
• What do you
want me to
do next?

40
 Web Design Frameworks
1) Design for Usability
2) Conversion-Centered Design
3) Three Questions
4) Segments
5) Mobile first

41
 Segments
• Conversion, or the next step in the conversion
process, should appeal to a variety of customers
• Segmentation can have many dimensions
– Search versus category navigation
– Browse versus directed shopping
– Product category
– New versus returning customer
– Preference for online versus in-store shopping
– Many more

42
Segments

43
Segments

44
 Web Design Frameworks
1) Design for Usability
2) Conversion-Centered Design
3) Three Questions
4) Segments
5) Mobile first

45
 Mobile First
• Design for smaller screens first
• Add features and content for larger screens
(“Progressive enhancement”)

46
Mobile First

47
Mobile First

48
Mobile First

49
Mobile First

50
 Landing Pages
1) Single product
2) Multi product LP should match the Ad on:
- Product
3) Lead generation
- Message
4) Subscription - Visual component
5) Long copy
6) Single purpose

The best ones:

- Facilitate conversion
- Should be continually tested.

51
 Customer Experience (CX)
The online customer experience consists of four
dimensions:
• Informativeness (cognitive)
• Entertainment (affective)
• Social presence (social)
• Sensory appeal (sensory)

52
 Informativeness

• Functional
• Impersonal
• Outcome oriented
• Objective

53
 Entertainment
• Spectacle experience on the
webpage
• The fun and play of online
shopping

54
 Social Presence

• Social presence refers to the

warmth, sociability, and feeling of
human contact that a web page
confers.
• Increases perceived tangibility and
psychological closeness to a
product.
• The sensation of ‘being with’ and
interacting with someone in another
place.
• The degree to which users perceive
the physical existence of others and
the perception of interaction with
the other user(s).

55
 Sensory
Customer experience includes aspects that stimulate
• Sight
• Sound
• Smell
https://www.pepsi.com/
• Taste
• Touch

56
57
 How to Sell More?
If you’re selling a search product, strengthen:
- Informativeness:
✓Use text blocks that detail the products’ important
attributes, such as size, functions, or uses
✓Use several bulleted features to summarize and emphasize
product information
✓Add charts that compare the product with similar products
along relevant criteria (attributes, warranties,
compatibilities, etc.)

Alexander Bleier, Colleen M. Harmeling, and Robert W. Palmatier (2018) 58

If you’re selling an experience product…

Strengthen:
- Social presence:
✓ Describe the product in a personable manner, through a
conversational style
✓Add lifestyle photos that show the product in use
✓Directly display all relevant information; avoid “show more”
buttons
- Sensory aspect
✓ Add a video to display the product in an appealing, engaging
way
✓Include a cropped photo that highlights a key attribute of the
product by zooming in on it 59
 If your brand is trusted…

Strengthen:
• Informativeness
✓ Use text blocks that detail the products’ important
attributes, such as size, functions, or uses
✓ Use several bulleted features to summarize and
emphasize product information
✓ Add charts that compare the product with similar
products along relevant criteria (attributes, warranties,
compatibilities, etc.)

60
 If your brand isn’t trusted…

Strengthen:
• Entertainment:
✓ Increase the size of product pictures
✓ Highlight customer star ratings

- An entertaining page can often overcome the uncertainty that people feel toward
an unknown or less-trusted brand.
- Entertainment is also helpful when consumers might rely more on emotional cues
and feelings than on product information.

61
 What We Learned Today

• Multiple Design philosophies

• Various types of landing pages

• Online Customer Experience (CX)

62
 Thanks for Your Attention!
Case Study 1:

On your Stukent eTextbook -> Assignment -> Wishpond

(designing a landing page)

CLASS ID (subdomain name): MSB109

Path: Group name (please form your groups on Canvas-

People)

Copy your published landing page URL, and paste it into 1)

the TASK section and 2) the DISCUSSION section on your
Canvas.

63