Agenda:

Chapter 2
Your Teams
Team Exercise

1
 Chapter 2:
Web Design
(Desktop and Mobile)

2
 Chapter Objectives
1. Understand and utilize multiple design
philosophies to design and revise webpages to
maximize conversion rate.

• Know a variety of webpage elements that should

be reviewed and decided upon when designing
webpages.

• List the dimensions on which an ad and landing

page should match to encourage conversion.
• Know the various types of landing pages.

3
 Web Design Frameworks
• Segments
• Mobile first
• Design for Usability
• Conversion-Centered Design
• Three Questions

4
 Segments
• Conversion, or the next step in the conversion
process, should appeal to a variety of customers

• NOT talking about Intro to Marketing 4 types of

segmentation (demographics, etc.)

• Focus on: 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 5
Segments

6
Segments

7
 Mobile First
• Over 70% of web traffic is from mobile*

• Design for smaller screens first (hardest to do)

• Add features and content for larger screens

(“Progressive enhancement”) – easiest to do

*Source: https://www.bluecorona.com/blog/mobile-marketing-statistics
8
 Landing Pages
What is a landing page?
1- Single page
2- Easy to measure success/numbers
3- Tailored to what searchers are looking for

Objective: Convert!

Variety of conversions: Single product, Multi product,

Lead generation, Subscription, Long copy, or Single
purpose

Easy to use tool/SaaS: Unbounce.com!

9
 Landing Page Elements
• Color Scheme
• Buttons
• Images
• Navigation
• Trust Symbols
• Video
• Forms
• Phone Numbers

Try searching “best deals doordash”

10
 Design for Usability
• Follow website conventions
• Create effective visual hierarchies
• Break pages up into clearly defined areas
• Make it obvious what’s clickable
• Eliminate distractions
• Format content to support scanning

11
Design for Usability (Desktop)
• Go to Walmart.ca

12
 Design for Usability
Conventions: My Account and Shopping Cart at the top right of the
page; Search bar at the top; Brand logo at top left; navigation
across the top  Best business practices

Visual hierarchies: Arranging elements to show their order of

importance. Attention first to boldly-colored “Major Rollbacks”
promotion; orange box to group discount items and separate
them from sponsored products; gray boxes underneath the
orange box.

Clearly defined areas: Areas are visually set apart with both labels
and colored boxes.
13
 Design for Usability
What’s clickable: For this particular page, what’s more important
than making it obvious what’s clickable is to make EVERYTHING
clickable. They should navigate to the product page by clicking
the product image, the price, the text, or the reviews on the
product.

Eliminate distractions: For an ecommerce site, what matters is

whether they see anything compelling without being
overwhelmed by an overly cluttered page. What works for one
shopper is different among all shoppers. What is the best
fit/solution?

14
 Design for Usability
Support scanning or support scannability: Different sections are
labeled so users can quickly jump from section to section.

Objective: ensure that it is easy for visitors to scan/skim-through

the web page in a quick manner.

A Nielsen study indicated less than 20% of content is actually read.

15
Design for Usability (Desktop)
• Go to Walmart.ca
Before Now

16
 Design for Usability (Mobile)
• Conventions • Go to Walmart.ca and press F12
• Visual on Chrome to emulate a S5 or
hierarchies Pixel2 screen

• Clearly
defined areas
• What’s
clickable
• Eliminate
distractions
• Support
scanning

17
 Design for Usability (Mobile)
Conventions: Hamburger menu in top left; shopping cart in top
right; location finder at top; cut-off product at bottom right to
signal right-scrolling is possible.

Visual hierarchies: Blue around navigation-related links; Red

background to separate promotion bar at top.

Clearly defined areas: Maybelline ad is a different size to show

it’s not part of promotion at top; title of sponsored products
section separates it from other content.

18
 Design for Usability (Mobile)
What’s clickable: Practically everything is clickable. What’s more
important on mobile is that no links are too small to click
easily.

Eliminate distractions: With smaller screen size, less content can

be shown, and this page is not cluttered.

Support scanning: Clear labels for each section.

19
 Conversion-Centered Design
• Attention
• Context
• Clarity
• Congruence
• Credibility
• Closing
• Continuance

• More on this in the next slides

20
 Conversion-Centered Design
(Desktop)
• Go to Orgain.com • Attention • Credibility
• Context • Closing
• Clarity • Continuance
• Congruence

21
 Conversion-Centered Design
(Desktop)
Attention: CTAs! Or CTA buttons

What’s a CTA?

Context: The principle of context is especially important for

landing pages, but it also applies to homepages like this one.
Who is Orgain.com’s most likely visitor?

Clarity: It’s clear that the page wants the user to BUY!

Orgain.com does this well.

The page doesn’t make clear about the BRAND of Orgain.

22
 Conversion-Centered Design
(Desktop)
Congruence: The content about Orgain.com... Is this congruent
with what Orgain.com wants to achieve? AKA making lots
and lots of orders/sales/revenues?

Credibility: Is Orgain.com credible?

Closing: Would you want to buy from Orgain.com? Does it make

it easy for you?

Continuance: Is there an easy purchase flow for you to go from

“maybe I am interested” to actually BUYING protein powder?

AKA -> Do visitors know how to continue from one page to

another while achieving what Orgain wants them to do? (i.e.
23
buying something)
Mobile Conversion-Centered Design
• Press F12 on Chrome to
• Attention emulate a mobile screen.
• Context
• Clarity
• Congruence
• Credibility
• Closing
• Continuance

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

25
Your Teams (check “GROUPS” in
BrightSpace)

Introduce Yourselves!

26
Break – 10 minutes

27
 Exercise for Teams 1, 2, and 3
Go to the old MyVega.com website:

Vega | #1 Plant-Based Protein Powder Brand

(archive.org)

Now, compare this with the NEW MyVega.com website:

https://www.myvega.com

Divide into your teams that I made (the project teams)

and do the exercise (see next slide). 28
 Exercise for Teams 4 and 5
Go to the old Fyidctors.com website:
web.archive.org/web/20210220083133/https://fyidoctors.com/

Now, compare this with the Fyidoctors.com website:

https://www.fyidoctors.com

Divide into your teams that I made (the project teams)

and do the exercise (see next slide).

29
 Exercise for Teams 6 and 7
Go to the old Fostergrant.com website:
Foster Grant Reading Glasses and Sunglasses for Men and Women (archive.org)

Now, compare this with the NEW Fostergrant.com

website:

https://www.fostergrant.com

Divide into your teams that I made (the project teams)

and do the exercise (see next slide).

30
 Exercise for your Groups
Compare the old and new websites. 1 to 3 groups to volunteer to
come up to present to the class.

Answer this:
What improved from the old to the new site?

Spend 25 minutes

For the following conversion-centered elements, list 1 thing per

element (so a total of 7 things):

• Attention
• Context
• Clarity
• Congruence
• Credibility
• Closing
• Continuance 31
If you would like, your group can
volunteer to come up and
present your findings!

32
Online learning Day

Read chapter 3.

Read the PPT file for chapter 3.

FUTURE Online learning days will get busier (group work,

assignments, and more).

Online learning days are for you to complete these items.

 Next Class

• Chapter 3 – Analytics

• Google Analytics walkthrough! Yes… you will

learn Google Analytics.
• Super essential to anything related to digital
marketing
• And, even if you are NOT into digital, it will
still help you in “meetings” in your jobs

Tech Trends Report Outline

34