Website


Optimization

Pimsiri Krajanganuwong
Website Optimization
What is it?

Website optimization is the art of creating and continuously

improving websites to optimize the visitor experience,
resulting in high visitor satisfaction, better user experience,
and high repeat visit and conversion rates.
Website Optimization

What does it involve?

UX
UX Design Display
Website Optimization

What is SEO?

Search engine optimization (SEO) involves making sure

that the website’s information and quality are optimized
correctly, according to best SEO practices.
Website Optimization

The difference between website optimization and SEO

Website
SEO

Optimization
Vs. Makes it easier for search
Deals more with the user engines to find and index
experience and making the website content
website easier to use
Purpose of Website Optimization

Increase user Provide a better user Lead to more return Increase e-commerce
time on site experience visits sales

25% abandonment rate

benchmark for poor design
Website Optimization Affects Buyer
Journey

Awareness
Awareness

The buyer is aware of a problem and they’re trying

to find initial solutions
Interest

Consideration

Conversion

Retention
Barriers to Conversion

Confusing Navigation

Slow Checkout Process If a user doesn’t know where to find the information or product
that they are looking for, they are likely to get frustrated and
leave the website entirely, possibly to never return
Unclear Benefits to Converting

Slow Website
 Website Optimization Affects All
Areas of Digital Marketing

6.1.1.5 SEO
Understand that data breaches can not only damage your business
SEO Graphic Design
but your brand if publicly discussed    Poor design and navigation can make it hard for
  search engines to crawl a site in order to index it.
A/B Testing Email Marketing This can affect whether or not it is shown in search
results.

Social Media Mobile Optimization

Website Page Speed

The Role of a Marketer in Website Design

Writing and editing website copy,

1 including calls-to-action
5

6
4
3
 Key Components of Effective
Website Design
Architecture

Steps involved in building your website:

6.1.1.5
Understand that data breaches can not only damage your business Choose a hosting provider, CMS, and domain
1 name
but your brand if publicly discussed   
Architecture Design
 
2 Install CMS and required plugins or features

Content Optimization Build or install design or theme

3
Add graphic elements, text, and SEO
4
Test
5
Launch
6
Monitor for bugs as needed
7
Website Hosting Options

What are the common website hosting types?

#1 #2 #3 #4

Shared hosting Dedicated server Cloud hosting CMS-specific

hosting
Website Hosting Options

Benefits and limitations of hosting options

Hosting Option Security Affordability Support Downtime Specific Requirements

Shared 4 1 1 4
The hosting provider may require a
Dedicated 1 4 1 1 specific CMS, website size,
monthly traffic etc. for a specific
Cloud 3 3 3 3 hosting plan

CMS Specific Hosting 2 2 2 2

 WordPress.com and
WordPress.org

6.1.1.5- Wordpress.com
Understand that data breaches can not only damage your
business but your
WordPress brandareiffree
websites publicly
and rundiscussed 
on WordPress  
  servers, and their domains are usually something like,
websitename.wordpress.com. Users can pay to have their
own domain (e.g. website.com), but free hosting will still
require ads on their site.

+ Wordpress.org
Build a Website Using WordPress.org

Test and tweak as Buy a domain and

you go hosting plan

Set up tracking Install WordPress

Get your
Setting WordPress
Write content and CMS up a
modify settings website login

Format Log in at
plugins and
themes yourwebsite.com/wp-admin

Add plugins Install theme

 WordPress Theme

A WordPress theme is a set of code and design files that

create the overall look and feel of your website
6.1.1.5
Understand that data breaches can not only damage your
business but your brand if publicly discussed   
 

REVEAL MORE
 WordPress Theme
There are different types of themes based
on their purpose. These include:
A WordPress theme is a set of code and design files that create
Blog or Newspaper

the overall look and feel of your website
6.1.1.5 Business and services

Understand that data breaches can not only damage your
business but your brand if publicly discussed    E-commerce

 
Beauty


Sports


Fashion
REVEAL MORE
 Testing Themes across Devices

6.1.1.5 C
A
Understand that data breaches can not only damage your business but your brand if publicly discussed   
 

B
 Reputable Sources of
WordPress Themes

Find reputable sources of WordPress themes by

6.1.1.5
looking for highly rated theme sites that have a good
reputation. Examples include ThemeForest,
Understand that data breaches can not only damage your
ElegantThemes, and TemplateMonster.
business but your brand if publicly discussed   
 
Design Principles

The importance of web design

First Information Navigation Content

Impressions
Making the
A business’s first Information is Allowing the content easier to
impression online organized in a user to understand
way that navigate easily
makes sense
Design Principles

The key aspects of web design

1. Simple design
2. Easy to navigate
3. Consistency of information
4. Usability
5. Consistency of design
6. Concise and honest information
Design Principles

#1 Simple design
Design Principles

#2 Navigation
Design Principles

#3 Consistent information
Design Principles

#4 Usability
Design Principles

#5 Consistent design

All parts of the website

should look the same
Design Principles

#6 Concise and honest information

Make sure websites are

concise, truthful, and
don’t overdo content
when it’s not needed
 Impact of “Mobilegeddon”

“Mobilegeddon” was an announcement from

Google stating that websites that are not
6.1.1.5
mobile-friendly may not be shown to users in
Understand that data breaches can not only
mobile search results. Because of this and
damage yourmobile-first
Google’s businessindex,
but your
mobilebrand
is the if publicly
discussed 
priority  for SEO
 
 Mobile-Friendly Versus Responsive

6.1.1.5- Mobile-Friendly
Understand that data breaches can not only damage your business
but your brand if publicly discussed   
A different version of a website that is shown
  to mobile users

+ Responsive
SEO and Website Optimization Work
Together in Mobile

Mobile-first
CTAs Content
Experience
SEO and Website Optimization Work
Together in Mobile

Mobile-first CTAs Content

Experience

Create content that is

Create a mobile-first Use CTAs focused on
based on what a mobile
experience mobile users
user would be looking for
Website Copy

The basics of effective copy

Clear Enticing Unique

“We offer air conditioning “We offer award-winning, “No other competitors offer
units to restaurants and certified air conditioning units our same 10-year warranty.”
hotels.” to restaurants and hotels. No
other competitors offer our
same 10-year warranty.”
Website Copy

Website content

1. Easy to read

2. Easy to find

3. Ease to understand

4. Includes a CTA on each page

5. Pages work together

Website Copy

Make sure to include CTAs

• Use a clear, concise command

• Highlight how the offer benefits the user
50% OFF
• Show social proof
BUY NOW • Show sense of urgency

LOW RATE
Website Copy

Creating a cohesive experience

• Home page offers should appear on

interior product pages

• Key messaging should remain the same

on all pages

• Voice and tone need to be the same (e.g.

stay in 1st or 3rd person)
 A/B Testing

A/B testing means comparing two different

elements of a website to determine which
6.1.1.5
receives more clicks, conversions, and
Understand that data breaches can not
engagement only damage your
business but your brand if publicly discussed   
 

REVEAL MORE
 A/B Testing
Areas where A/B Testing is useful

A/B testing means comparing two different

1 Call-to-actions (CTAs)
elements of a website to determine which
6.1.1.5
receives more clicks, conversions, and 2 Headlines
Understand that data breaches can not
engagement only damage your Graphic elements
business but your brand if publicly discussed    3

Wording and content

  4

5
Type of promotion or offer

6 Pop-ups

REVEAL MORE
A/B Testing Tools and Plugins

NelioABTesting.com SimplePageTester.com

Optimizely Five Second Test

VWMO Good for testing different elements on a

WordPress site
UX versus UI

What is user experience?

User experience is defined as a person’s perceptions and

responses resulting from the use and or anticipated use
of a product, system, or service.
UX versus UI

What is a user interface?

UI is the platform on which the user and website interact

with one another. This includes elements such as
clickable links, forms, and other actions a user can
complete on a website.
UX versus UI

The difference between UX and UI

UX - The experience UI - The medium

Interaction design Visual design

Based on data, emotion, & user research Based on design trends & brand guidelines

Wireframes, site maps, & personas Colors, typography, and layout

 Benefits of UX and UI

UX and UI are important to website optimization because they

help to provide a better website that gives users the information
they need, when they need it More Traffic
6.1.1.5
Understand that data breaches can not only damage your business
but your brand if publicly discussed   
  The easier a site is to use and navigate, the more
More Traffic Increased Retention likely it is to be shown to users in search engine
results and the more its content will be shared on
social media by customers and users. This all leads
Increased Time on Site Deeper Emotional to more website traffic.
Connection

More Conversions Better Return Rate

Key UX and UI Attributes to A/
B Test

User Intent

User Intent is what is the user looking to

accomplish on a page
User Intent Influence of Web Design
on UX

Points of Friction Navigation

Poor Website Design
Poor Website Design
Good Website Navigation Gets more clicks Increase time
Easier for
Search
and traffic on sites Engines to
crawl
Good website navigation brings the following
benefits:

Gets more clicks and traffic to interior sub-

pages. This can help the user get around the
site more easily and find pages they may
have not been able to find on their own
before.
Improving User Experience through Navigation
Improving User Experience through Navigation
Responsive Website Higher Better Designs
Better User Preference in Across Devices
Experience Search
Results
A responsive website across desktop, mobile,
and tablet devices brings the following
benefits:

Users are able to see all of the information on

the page and they don’t have to pinch the
screen, squint, or try to see something that is
cut off. It also makes the text easier to read
and navigation easier to use.
 Selecting Call-to-actions

1 Select the best CTAs for your audience through

6.1.1.5 testing different wording, feature boxes, offers, and
more. (These may also vary by device).
Understand that data breaches can not only damage your business
but your brand if publicly discussed   
2 Align the user experience to your specific
  audience. Some audiences want a simpler
experience, while others expect something more
complex
Optimizing CTAs for Your Specific Audience
Optimizing CTAs for Your Specific Audience
Optimize a Website

Page speed

• Page speed is a ranking factor

• Mobile users are much more likely to

leave if it takes longer than 3 seconds

• Page speed is an indicator of other

issues with the site
Optimize a Website

How hosting and website design affects page speed and optimization

Hosting Hosted Files/ Website

Images
Providers Code Elements
Optimize a Website

How hosting and website design affects website optimization

• Elements that don’t load correctly lead to other

“broken” areas of the site

• Errors can affect what information is shown to

user
Website Metrics

SMART goals

Specific Measureable Achieveable Relevant Timed

S M A R T
Website Metrics

The most useful metrics for your website

Conversion Return
 Referral
 Cart 
 Time On Bounce

Rate Rate Source Abandonment
 SIte Rate
Rate
Evaluating Website Effectiveness

Is it hitting its metric Is the website Can someone Is all desired information
goals? viewable and accurately complete a included?
accessible from a task without confusion?
variety of different
devices?
Website Optimization

SEO tools that audit your

Google Analytics for Fetch as Google tool in
website, such as
metrics testing Google Search Console
PowerMapper,
SEMRush, or SE Ranking
Monitor and Report

Setting up regular monitoring on Google Analytics

#1 #2

Create automated Build a tracking

reporting and/or spreadsheet that
custom dashboards will show progress
Monitor and Report

Examples of website metric monitoring

Monitor and Report

Examples of website metric monitoring

Monitor and Report

Create a schedule of metrics reporting and action implementation