Certified Digital Marketing

Professional

Module 2: Website
Optimization

PRESENTED BY

[SOBOTAMOH Elias M. Ngi]

Certified Digital
Marketing
Professional
(CDMP)

Module 2

Website Optimization

Version 7.0
SOBOTAMOH Elias Manyi NGI
Board Chair@AdMeUp Digital Academy
• Digital Investment Consultant .
• Board Chair of 4 ROCKS Investment LLC.
• Board Chair of AdMeUp Digital Academy LLC.
• 19 Years experience in investment management
• Expert in Digital strategy and planning.

• Researcher in the applicability of IoT

• Member of IEEE.
4
5
6
Website optimization continues to evolve, but its primary focus is optimizing the visitor
experience to make sure your target audience finds what they are looking for on your website.

There are many factors that determine whether your target audience will find what they are
looking for on your site. It’s a mixture of useful design elements, clear content, and an easy-to-
use navigation.

Website optimization involves designers, developers, writers, and SEO experts all working
together to give users a better experience. All roles have an important part to play when it
comes to the best possible website design to represent your organization.

7
Website optimization involves making sure that websites:
• Are easy-to-use (known as UX, or user experience)
• Are well designed (website design)
• Effectively display content and graphics

All of these are aspects to website optimization because they have shown to directly improve
clickthrough rates, time on site, and website traffic numbers. If a website is easy to use, users
will be much more likely to return and make a purchase or complete a conversion. Great
graphics and content also contribute to helping users not only find what they are looking for,
but to convert on the website (whether your conversion goal for the website is a purchase, email
sign up, or something else).

8
You will learn more about search engine optimization (SEO) later in the course. However, for the
purposes of website optimization, there are some basics of SEO that are important to know.
Because design and development may work with the marketing team to implement these
changes, knowing basic terms can help us understand how SEO ties into website optimization in
this module.

Terms include:
• Meta data: This is the meta titles and descriptions, which are shown to users in search
results and in the title bar of internet browsers. There are character limits to meta data - 70
for titles and 160 for descriptions. Search engines use this to determine the content of the
page and whether or not to display it in search results.
• Sitemap: This is a list of all the pages on your website, including blog posts, media, and
forms. This list helps search engines index your content to potentially show it in search
results. Most websites built on CMS platforms have sitemap plugins that update this
automatically.
• Website content pages: These are all the informative pages on your site that aren’t blog
posts. Examples include About Us, Contact, and Services. These pages are usually created
once and are only updated when there is new information to be added. However, regularly
adding new information or pages that provide more niche information can help with SEO.
• Blog posts: These are articles that are published in blog post format – usually with the title,
author, and date on the page. These are sometimes treated differently by search engines,
depending on their content, date, length, and topic. Because of the Google “freshness”
factor, websites with new content can get preference in search results.

9
Website optimization: This deals more with the user experience and making the website easier
to use. Examples include website layout, design, content formatting, buttons, interactive
elements, color, and so on.
SEO: This makes it easier for search engines to find and index website content. Examples include
keyword usage, what content is in the headers, title, and page description, internal linking,
schema tags, and so on.

SEO has an effect on the visitor before they get to your site whereas website optimization
affects your visitor when they arrive on your website. It doesn’t matter how much you optimize
your site rankings in Google if your website isn’t fully optimized to meet your visitors’ needs and
convert them when they engage with your site.

These two types of optimization (SEO and website optimization) work together to create an
effective user experience. Organizations get more conversions and meet business objectives,
and users get to find what they are looking for.

10
Website optimization is important because it has a lot of value for both the users and the
organization:

• Increases user time on site: When a website is easy to navigate, users are much more likely to
stay on the website because they are able to find the information that they are looking for.
• Provides a better user experience: Users are not only able to find what they are looking for,
but they are also left with a better impression of a company because of their great website
optimization.
• Leads to more return visits: When a website is pleasant to use, users are much more likely to
return. A Shopify study (linked below) found that 25% of users abandon their online shopping
cart if the website is hard to use, 21% if the checkout process takes too long, and 15% if the
website times out (stops working).
• Increases e-commerce sales: If it saves them time or is easier than competitors’ websites,
many customers are likely to use a better-optimized site, even if the cost is higher or the
products and services aren’t quite the same. They just want the best experience possible.
Time is money!

11
This slide shows how website optimization will affect all the stages along the buyer’s journey:
1. Awareness: The buyer becomes aware of what they are actually looking for (such as a
solution to their problem). For instance, if a small business owner wants more walk-in
customers, one solution they might find is local SEO. Better website optimization helps
ensure that solutions are more easily found.
2. Interest: The buyer finds your company and its products, which might include product pages,
blog posts, or other content about the company or products. Displaying this information
clearly and making sure it’s easily found on the website will convince users to move into the
Consideration stage.
3. Consideration: The buyer starts considering buying something from the company. This could
include calling the company, liking them on Facebook, reading blog posts from the company,
and so on. When these aspects are easily discoverable on the website, it makes movement
to stage 4 easier.
4. Conversion: A user will only convert to a sale or other type of conversion if the shopping
experience or form is easy to use and the calls to action (CTAs) are clear. Websites should
also be optimized to be consistently directing users toward conversion, so chances for
conversion should be placed throughout the site.
5. Retention: Once a user has converted, the focus should be on keeping them as a recurring
paying customer or regular user or recipient of the company’s products, content, and
services. In terms of website optimization, this includes buttons, banners, related content
suggestions, and more to ensure the user stays engaged with what the company has to
offer.

12
Website optimization makes it easier for a user to convert by removing any potential roadblocks
that could cause a user not to complete a purchase or conversion.

This includes barriers such as:

1. Confusing navigation: 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.
2. Slow checkout process: If the conversion process isn’t quick, easy, and simple, then users
are much more likely to exit before the Conversion stage.
3. Unclear benefits to converting: Users want to know what they get when they buy something
or give a website their information. The layout of benefits should be clear and concise, and
easy to read. For instance, too many animations or not enough contrast between the
website background and the text can cause fatigue and frustration. Usually black text on a
white background is best.
4. Slow website: If website elements or content doesn’t load quickly on every device (tablet,
smartphone, and computer), users are much more likely to leave a site.

13
Website optimization affects the following digital marketing areas:
• SEO: Bad design and navigation can make it hard for search engines to crawl a site in order
to index it (which then affects whether it is shown in search results).
• Graphic design: Good design is a cornerstone of website optimization. How a site is laid out
and what graphics it uses influence user engagement, interest, and brand reputation.
• A/B testing: Testing different elements of the website plays into its optimization. For
instance, factors such as layout, CTA button text or color, length, and placement on the site
are all A/B tests that can be done to test user metrics, such as conversions and
engagement.
• Email marketing: The links used in email promotions play into what the user will see on a
website when they click a link. (There also may be different links depending on whether
there are A/B tests.) Additionally, the design, color, and layout of the emails should also
align with the design of the website to create trust and a more cohesive experience for the
user.
• Social media: Like email, design and color should be similar to the website. Links and what
parts of the website to promote on social media are dependent on how the website is
optimized.
• Mobile optimization: If a website isn’t optimized for mobile (responsive), then users aren’t
going to have the same experience that they would have on their desktop computer or
tablet. Mobile optimization ensures a better user experience, no matter how a user
accesses a website.
• Website page speed: Users will leave a website if it loads too slowly, causing a higher
bounce rate, more abandoned shopping carts, and a lower return visit rate. Website

14
Marketers work with website designers, programmers, and developers to craft a website that is
appealing to both users and search engines.

This includes:
• Writing and editing website copy including CTAs. The way the content is written and laid out
is a collaboration between the designer, developer, and the marketer.
• Collaborating on design layouts based on experience in user engagement. Marketers can
share their experience with other campaigns and how certain elements or designs have
influenced user engagement.
• Setting branding guidelines, including color and font format. These need to be consistent
among all marketing and advertising materials to maintain brand identity.
• Optimizing the site to follow best SEO practices, both for search engine visibility and user
experience.
• Working with the developer to ensure all API and tracking tools are set up correctly so metrics
can be tracked properly.
• Following best practices of user engagement to give feedback on best practices for better
metrics (such as time on site, lower bounce rate, or higher clickthrough rate). Deciding what
to test and track is a collaboration between the developer and marketer as well.

15
The four key components of website design are:

1. Architecture
2. Design
3. Content
4. Optimization

We’ll cover these in detail in the next four slides.

16
The steps involved in building your website:
1. Choose a hosting provider, CMS, and domain name: This is where the website is built, what
platform it’s built on, and its address (URL).
2. Install CMS and required plugins or features: These are the backend features of the site that
add functionality, such as search forms or animated elements, as well as how content is
added and organized. We will go through this in more detail in later slides.
3. Build or install design or theme: This covers the look, layout, and feel of the site.
4. Add graphic elements, text, and SEO: These are additional add-ons to the design and
content
5. Test: This involves testing the site before it goes live on its URL.
6. Launch: Put the finished site on its URL so it’s public and can be accessed by users.
7. Monitor for bugs as needed: Look for errors that need to be fixed once the site is live.

We will go into detail in each of these areas as we progress through this module.

17
The steps involved in designing your website:
1. Create a mockup or wireframe of the website layout. This is basically a map of each website
page and its main elements.
2. Get feedback on the mockup from marketing and developers.
3. Implement changes and get the design approved by supervisors and other team members.
4. Work with developer to get the design placed implemented on the website.
5. Work with the team to finish the components to launch the site.

We will go into detail in each of these areas as we progress through this module.

18
The steps involved in deciding what copy to include on your website:
1. Create a list of required pages for the website. This is added into the wireframe.
2. Write website content for each page, which will be added to the pages once they are built.
3. Copy-edit the content for grammar, flow, and spelling.
4. Add content onto the built website once the design has been uploaded. Make sure the
layout is correct.

We will go into detail in each of these areas as we progress through this module.

19
The steps involved in organizing a website’s information so that it is best presented to users:
1. Set up SEO best practices for your website. (This includes analytics, search console, meta and
description tags, and proper internal linking).
2. Set up metrics reports in Google Analytics based on goals that need to be tracked. (This is
dependent on your own site and industry.)
3. Ask colleagues or outside users for website feedback, using a tool such as UserTesting.com.
Ideally you’d want current or target customers to test your site.

We will go into detail in each of these areas as we progress through this module.

20
21
22
[REF.] 2.2.1

23
Identify types of hosting setups and providers:
1. Shared hosting: This is where your website shares a server with many other users. These
websites and users don’t share information, but they are physically stored in the same
server. This is usually the most affordable solution.
2. Dedicated server: This is the opposite of shared hosting. Your website is hosted on a private
server. This allows for more server options and also can help the server (and therefore, the
website) handle more traffic.
3. Cloud hosting: Instead of resting on one server only, the website is hosted in the “cloud,”
which means it is spread across several different servers. This is ideal for large sites or to
decrease website downtime. Even if one server goes down, because there are copies of the
website across different servers, it is likely to never crash or not load.
4. CMS-specific hosting: Some hosting providers offer shared hosting, but they group the
websites into clusters based on the CMS they are using. This can ensure the server caters to
that CMS’s needs, leading to better scaling, security, and up times.

24
Benefits of some hosting options:
• More security: Dedicated servers and CMS-specific hosting are usually more secure.
• Affordability: Shared hosting is usually the most affordable.
• More support: Dedicated and CMS-specific hosting usually get the most support.
• Less downtime: All but shared hosting usually have less downtime

Limitations:
• Cost: Any hosting option, other than simple shared hosting, is usually more expensive. Cloud
and dedicated hosting are the most expensive.
• Specific requirements: The hosting provider may require a specific CMS, website size, monthly
traffic, or other requirements for a specific hosting plan.

25
There are generally two types of CMS: cloud-hosted platforms like wordpress.com, and self-
hosted platforms such as wordpress.org.

The differences between wordpress.com and wordpress.org websites include:

• WordPress.com websites use the WordPress.org CMS, which is installed onto a website that is
self-hosted on its own domain. Users need to buy and set up their own hosting and domain.
This is better for professional sites that want to have their own domain that isn’t hosted on
WordPress.com.
• WordPress.org websites are free and run on WordPress servers, and their domains are
usually something like, websitename.wordpress.org. Users can pay to have their own domain
(such as website.com), but free hosting will still have ads on the site. This is easier to set up
for beginners.

About 25% of all websites are built on WordPress.

26
1. Buy a domain and hosting plan from a provider such as HostGator, Bluehost, or GoDaddy.
2. Install WordPress onto the website using a service from the hosting provider (some will do it for
free), or by downloading it from Wordpress.org and upload it using FTP or a File Manager. It is
free to download.
3. Get your WordPress login, which you will get during the setup process through your hosting
provider and WordPress. Make sure you keep a written record of it somewhere.
4. You can now use WordPress in the backend of the site by logging in at yourwebsite.com/wp-
admin.
5. Install the desired theme (website layout and design), using one of the free ones in the
Appearance section of WordPress. You can also buy a theme at a marketplace, such as
ThemeForest. This gives you a zip file, which you then upload in its entirety into the WordPress
under Appearance: Themes: Install Theme.
6. Add plugins. You can search under Plugins to find applicable plugins, but some recommended
ones are Yoast SEO for basic SEO, a Google Analytics one, social bookmarking (such as
AddtoAny), and a contact form plugin.
7. Format plugins and themes as needed for your website.
8. Write the website content and modify any settings as needed, such as the desired URL slugs.
9. Set up Google Analytics and Google Search Console for website tracking. Verify by adding a line
of code in WordPress or by logging into a hosting provider, if applicable, during the setup
process.
10. Tweak and test website as you go!

You will find a tutorial going through these steps in the resources section.

27
A WordPress theme is a set of code and design files that create the overall look and feel of your
website. There are several free and paid themes available but often free themes will include
undesirable hidden code, links, or ads, so paid is best.

28
There are different types of themes based on their purpose. These include:
• Blog
• Newspaper
• Business
• Service-based, such as plumbing
• Ecommerce
• Beauty
• Sports
• Fashion

29
Screenshots shown are:
A. Customizing at theme level
B. Where the preview button is on the edit page in WordPress to preview changes
C. Previewing what DMI’s website looks like on a mobile phone using Screenfly

To see how a change to your website looks before it’s published live, use Appearance:
Customize: [Your Theme] in WordPress to view changes at the site-wide, theme level. To go there
directly, go to https:/YOURDOMAIN.com/wp-admin/customize.php.

You can also preview changes on pages by clicking Preview in the edit screen.

Use a service such as Screenfly to see how your live website looks across multiple devices.
http://quirktools.com/screenfly/

You should test mobile, tablet, and desktop in a variety of different models (iPhone, Android,
Mac, PC, and so on).

30
• Find reputable sources of WordPress themes by looking for highly rated theme sites that
have a good reputation. Examples include ThemeForest, ElegantThemes, and
TemplateMonster.
• Test themes to determine their usability across multiple devices by looking at theme demos
that are offered on the theme information landing page.
• Ensure you can view themes on multiple devices. If you already have a theme installed on
your site, you can use the WordPress preview feature in the backend (/wp-admin, under
appearance and themes) to preview themes and changes to layout before saving and
publishing.

31
32
33
34
Web design should aim to make everything self-explanatory and as easy as possible for the user.

Effective web design is important because it:

• Is a business’s first impression online: When a user visits a company’s website for the first
time, the design plays into their first impression of the business as a whole. Thus, it’s
important to have high-quality design because it influences users’ opinions and behavior.
• Helps you properly organize information: Information should be organized in a way that
makes sense.
• Allows the user to navigate easily: Users are able to find the information they are looking
for quickly and easily, without becoming confused or frustrated.
• Makes content easy to understand: Users can read and interact with the information on the
site in a way that flows and makes sense. The layout of the content makes it easier to
understand.

35
The principles of good design are:
1. Simple design: The design isn’t distracting and makes the website easy to use and
understand. It should also have a modern look that doesn’t look outdated, as this
influences users’ opinion of a website and the business as a whole.
2. Easy to navigate: Users are able to get the information or complete the actions they want
to through navigation without becoming confused or wondering where something is.
3. Consistent information: Pages are correct and all information is updated and consistent.
This means there shouldn’t be conflicting information across pages (such as prices, hours
of operation, names, and so on).
4. Usable across different devices: For example, users can access the same pages on mobile
that they can on desktop. This often requires adding a “view as desktop” link at the bottom
of mobile websites.
5. Consistent design: Colors, layout, and design are the same across all areas of the site. This
includes branding, link colors, photo formatting, and so on.
6. Concise and honest information: This helps to build credibility and be a thought leader in
the industry. Website content should be published that is providing education and
information to the users.

36
The website should be easy to navigate and understand. Users shouldn’t be at a loss when it
comes to making sure they are on the right page. The visual effects shouldn’t be overwhelming.

On this slide, the left is really cluttered with all the images from the latest articles, making it a
little overwhelming. Conversely, Business Insider has a collapsible menu (the three lines in the
left corner) so the homepage isn’t cluttered. This is the latest trend in user interface (UI) design
and navigation (the three lines marking a collapsible menu).

37
Navigation should let the user know the parts of the site where they can find what they are
looking for.

In the above-right example, EF Tours has a simple navigation that sticks to what most people
come to their site for – looking at available tours, how their tours work, and their background.
Conversely, John’s Big Deck, a bar and restaurant, has a confusing navigation that you can’t even
see when you load the page. The menu items are also confusing. What is ARC transport? This
may turn users off.

38
Information should be the same across multiple pages. If you offer something on the homepage,
users should also be able to see it on interior pages. Numbers, offers, stats, phone numbers, and
so on should be consistent across the entire website.

In this example, ModCloth offered a sale on their home page. When you click the banner, you
see the exact same offer (with consistent branding, images, and colors) in the sale. If their offer
went to the women’s clothing section, it would be confusing to the user.

39
Sites that take a user through a funnel or purchasing process should be as easy to use as
possible. In this American theater chain example, you can easily filter by location, date, movie,
and additional offerings. Then, you simply choose the time you want to purchase the tickets.

40
All parts of the website should look the same. This includes the blog. Ideally, the blog should be
hosted on the main domain, and not be an external website, such as
companyblog.wordpress.com.

In this example, no matter the part of Ireland, the official Ireland tourism website uses the same
format and design. This makes it easier for visitors to get familiar with the site and navigate
their way around. They can compare different parts of Ireland using the same format of
information to plan their trip.

41
Websites should focus on giving users the information they need, and avoid “dumping” all
possible information onto their website pages.

In the example above, there is too much information on the homepage, making it overwhelming
for the user. Focus on being concise and save the longer content for blog posts and ebooks, if it’s
needed. In this case, it would have been better from a design perspective to separate these
blocks into their own subpages instead of putting it all on the home page.

42
• Understand the impact of “mobilegeddon”! This was an announcement from Google that
announced that websites that are not mobile-friendly (meaning they are not easy to use and
read on mobile devices) may not be shown to users in mobile search results. This led to a
greater push for designers, developers, and SEOs to create responsive websites that are easy
to use on any device.
• Google’s move to a mobile-first index announcement affects SEO and website usability.
Mobile is now more of a priority than desktop, as there is more mobile internet traffic than
desktop. This means that it’s more important that your website is easy to use on mobile as
well as desktop. It also means that Google is going to prioritize mobile search results.

43
What’s the difference between mobile-friendly and responsive?

A mobile-friendly website is a different version of a website that is shown to mobile users.

Responsive means the website design is formatted to its ideal fit for the screen it’s on.
Responsive is the best option, and Google recognizes both as being optimized for the mobile
user. Think of mobile-friendly as a step between nothing at all and a responsive site.

44
•
• Create a mobile-first experience through responsive design.
• Use CTAs focused on mobile users (using location and contact information). What a user is
looking for on mobile is different than what they are likely looking for on desktop. It also
affects their checkout time availability.
• Create content that is based on what a mobile user would be looking for. For instance, they
may not want to view blog posts first if it’s an informative website about a local business.
They are more likely to be looking for phone number, address, reviews, and other
information that allows them to make a decision “on the go” about the business (such as
whether to go there versus its competitors).

45
Effective copy is:
• Clear: The purpose of the copy should instantly be understandable. For instance, “We offer
air conditioning units to restaurants and hotels” is clear. However, “Our top-of-the-line-
system offers the highest possible AC performance for your hospitality business” isn’t.
• Enticing: The copy should pique the user’s interest. It should make them curious and want
to complete the CTA or learn more about the offering. For instance, “We offer award-
winning, certified air conditioning units to restaurants and hotels. No other competitors
offer our same 10-year warranty.” is compelling and intriguing. On the other hand, “Our
top-of-the-line air conditioners are perfect for your restaurant or hotel.” is vague. You
must explain why they are perfect in an intriguing way to get your point across.
• Unique: Be sure to point out how your products, services, and what you offer are different
than your competitors. Be specific. How does what you offer stand out from everyone
else? For instance, “We stand behind our restaurant and hotel air conditioning units. No
other competitors offer our same 10-year warranty.” highlights what makes the company
unique. However, “We outperform our competitors with our air conditioning units.”
doesn’t.

46
Each website page should:
• Be easy to read through proper website design and layout: The layout should be intuitive and
not make it difficult to read the content or interact with the website. The design and layout
should have the sole focus of making the experience easy and seamless for the user.

• Be easy to find through proper website architecture and optimization: The user should
immediately be able to find what they are looking for in a few clicks. Some designers and
developers follow the three-click rule, which means a user should be able to find whatever
they are looking for on a website within three clicks (essentially three pages). This is disputed
though – see the references below for more insight.

• Be easy to understand through proper website content and layout: As mentioned in the
previous slides, copy needs to be easy to understand but keep up the user’s interest at the
same time. Be specific and don’t overwhelm the user with too much information that users
aren’t actually interested in. Most users only care about what is directly important to them,
so cater to their needs.

• Include a CTA on each page: On every blog post and content page, include a CTA that is
directing the user to complete a conversion or go to a related page with more information.
For instance, if there was a landing page that was about a specific air conditioning model for
pizza restaurants, your conversion could be completing an appointment form for a sales call
or a contact form to request a pricing estimate for a specific business.

• Work with other pages: Pages with similar content should link together in a logical way to be
as effective as possible.

47
•
• Use a clear, concise command to tell the user to do something, using phrases such as “Click
here,” “Buy now,” or “Email us”. These give a directive which users are more likely to follow
than a suggestion.
• Highlight how the offer benefits the user. For example, “Buy now and get 50% off!” This
makes it harder to object to the request or offer because you are “fighting” off their excuses
to say no.
• Show social proof. For instance, “Join 100,000 other subscribers by joining our mailing list.”
This is another way to break down objections to completing the conversion. If several of your
peers are doing something, it’s hard to be the one person who doesn’t. (This is known as
social pressure.)
• Create a sense of urgency. For example, “This offer is only available for 48 hours. Buy now to
lock in this low rate.” By showing that something is only temporary, you are putting more
pressure on the buyer because the offer is time-sensitive. This reduces their hesitation when
deciding to take the next step or not.

We will go through some best practices when it comes to CTAs later in the module.

48
Website copy across multiple pages should work together to create a cohesive experience. This
means that the wording of the site, as well as the information, is consistent no matter what
page the user is on. You can have different offers based on different campaigns or promotions,
but the tone, company voice, and key messages should always be the same. The reason for this
is because if users are getting different messages on separate pages on your site, then they may
become confused or frustrated and leave the site or not complete a conversion.

Examples of this consistency include:

• A product offer that is shown on the home page is carried through to the product page.
• The company tagline, mission statement, or main selling points are the same across all pages.
• Tutorial pages link to one another with applicable references.
• Sponsors or offerings are the same on all applicable pages.

49
A/B testing means comparing two different elements of a website to determine what gets more
clicks, conversions, and engagement.

This could include:

• Pricing: lower versus higher sales
• Offers: a percentage discount versus a set amount off discount (which could equate to the
same or different values)
• Colors: whether, for example, a patterned background make users buy more than a gray
background does?
• Placement of CTAs on the page
• Timing of animations or pop-up banners: 5 seconds versus 10 seconds

50
Here we see several examples for where A/B testing can be used:
• CTAs: For example, you could try a green CTA box versus a red CTA box, or different offers,
such as 50% off versus $50 off for a $100 item.
• Headlines: You could write two different headlines for a blog post and test both of them to
see which one gets more clickthroughs.
• Graphic elements: You could test illustrations against stock imagery and see which works
best for your audience.
• Wording and content: Test which works better for your audience, a long landing offer page or
a short and concise one.
• Type of promotion or offer: For example, you could test “Buy one, get one free” versus “$50
off when you spend over $100”.

Some CMSs, such as WordPress, have plugins that will do the A/B testing for you. There are also
tools such as Optimizely that you can set up to run an A/B test on your site.

Remember: It’s important to only test one element at a time!

51
A/B testing can be ineffective if too many tests are running at once: running more than one A/B
test on a website doesn’t give you a clear picture on what actually worked.

The steps of A/B testing are:

1. Pick one variable to test: This could be something such as the CTA button color, page layout, or
campaign offer (such as $50 versus 10% off, even though they are the same value).
2. Choose your goal: What do you want to accomplish with this test? Choosing a specific goal will
help you determine whether making these changes permanent will make a difference. An
example of a goal would be: “Increase conversions 5% in the next 8 weeks.” Make sure it is
specific and actionable.
3. Set up your control and your challenger: Only test one thing at a time, and always have a
“control,” where the element doesn’t change. This is so you can make sure whether that
specific element actually makes a difference. For instance, if you wanted to test your offer, you
would keep your “control” as your existing offer, say, $50. That would be the “A” in the A/B test.
Then, you test the “B” part of the test, the challenger (for example, 10%).
4. Split your sample groups equally and randomly: You must have the same sample size in order
to have a proper test. If one side was bigger than the other, then it may have the advantage.
5. Determine your sample size: Figure out how big your sample sizes are going to be. This is
dependent on what you’re testing. For instance, if it was through email, the number of email
subscribers helps determine the sample size. (For example, if you have 1,000 email subscribers
with a 4% clickthrough rate on average, you can assume 40 people will click through to the
landing page you’re testing. This would mean 20 would be shown test A (the control) and 20
would be show test B (the challenge), on average. In most cases, the A/B test software
randomizes or alternates it.

Suppose you tested both the promotional offer and the headline of the landing page at the same
time, and you got a higher conversion rate. You don’t actually know whether it was the headline or
the promotional offer that caused the higher conversion rate.

52
Be sure to only run one test at a time! Running more than one A/B test on a website doesn’t give you
a clear picture on what actually worked.

A/B testing plugins for WordPress (for WordPress sites only):

• NelioABTesting.com: Good for testing different elements on a WordPress site
• SimplePageTester.com: Focused more on testing landing pages

Other tools that can implement A/B testing include:

• Optimizely: Works across several different types of websites
• Five second test: Only offers initial impressions (the first 5 seconds) to gather users’ first
impressions
• VWMO- test duration calculator: Calculates how long to run a test

There are more examples below in the resources. Whatever test works best for you depends on
your CMS, budget, and what you want to test.

53
54
55
56
The user experience (UX) as outlined by the International Organization for Standardization is a
“person’s perceptions and responses resulting from the use and/or anticipated use of a product,
system, or service.”

UX is influenced by a variety of factors, including how someone uses and navigates a website,
what they are expecting from the website (and the company), and what they are looking for. It
encompasses the users entire experience with a company’s online presence.

57
The definition of 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. This is basically how (the conduit) a user uses a website.

UX and UI work together by providing a better overall picture of how users interact with and get
information from a website. Many elements of UX have to be implemented in the UI in order to
give users the best experience possible.

58
UX: The experience
• Interaction design: This involves the elements that users can interact with, meaning they can
watch, read, click, enter information, or browse.
• Based on data, emotion, and user research: This includes A/B testing, how users interact with
specific colors, words, and layouts, and the website’s target audience.
• Wireframe: This is the “map” or list of all the pages that will be on a website. This includes
Home, About, Contact, Services, and so on.
• Sitemap: An automatically generated list of all the pages on a website. This includes all blog
posts, images, and other files. It can be auto-generated using the Yoast SEO WordPress
plugin.
• Personas: Marketing personas are fictional people that designers use to create a website for.
A persona includes their demographics, likes or dislikes, wants, hobbies, and other personal
attributes.

UI: The medium

• Visual design: This involves the graphic elements of a site, such as the branding, header
images, photos, and other graphic elements.
• Based on design trends and brand guidelines: It uses the brand’s color palette as created by
the designer and uses the latest in design to craft the appropriate “feeling” of a website
(whether modern, classic, old fashioned, and so on).
• Colors: Consider what colors the website uses for the graphic elements, the background, the
text, links, footers, and header.
• Typography: This includes the font and font layout that are used throughout the site. The
decisions depend on branding guidelines and the desired “feeling” of the website (what you
want it to convey).
• Layout: This is how the website looks visually, and the order elements go in. For example, the
home page could have a menu, header, featured post image and text, recent blog posts, ad,
text box, and footer.

59
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.

The benefits of UX and UI:

• More traffic to your website: The easier a site is to use and navigate, the more 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 to more website traffic.
• Increased retention: If information is easy to find and comprehend, users are more likely to
become repeat users and customers.
• Increased average time on site: When users can find products and/or information they are
interested in, they are more likely to browse related content and product pages as well. (This is
why linking to related pages is so important!)
• Evoke an emotional connection with your audience: By playing up the design and usability to
reach users on an emotional level, you can ensure that they will feel a greater connection with
your brand and products. This can lead to better customer loyalty, a more positive brand
sentiment, and possibly more conversions. Non-profits or brands with a cause, such as TOMS
shoes, are good examples of this. TOMS shoes donates a pair of shoes for every pair bought,
leading every customer to feel like they are making a difference in the world whenever they are
making a purchase.
• Increased conversions: If a user is frustrated with a website and can’t find what they are looking
for, they will likely leave the website immediately, sometimes after mere seconds. This leads to
higher bounce rates, abandoned shopping carts, and high exit rates on conversion pages. By
providing the user with a better experience, you make it more likely that will stay on the site and
make a purchase or complete another conversion.
• Return rates: Online users value their time and want convenience. As a result, they are much
more likely to visit or buy repeatedly from a website that saves them time and has high-quality
information or products. They are also more likely to recommend the company or website to
their colleagues and loved ones.

60
The principles of UX and UI are:
• Accessibility: Ensure that the website is easy to use for any user, including vision- or mobility-
impaired users. This should follow w3 guidelines (referenced below) but also follow design best
practices to make text easy to read and make sure any design elements aren’t interfering with the
user experience.
• Clarity: The website is easy to understand and its purpose is clear – this should be key in all pages
that are built. While a user could likely take many paths on your website, the goal is to build
funnels that are taking them toward completing a conversion. For instance, on an ecommerce site,
the home page might have different categories, such as Women’s, Men’s, and Children’s clothing. If
they click Women’s, they should ideally be then taken to a page where they can search or drill-
down into more niche Women’s categories, such as Pants, Shoes, Dresses, or Accessories. This
journey should be as clear as possible.
• Learnability: The website needs to provide valuable information that answers the user’s query or
need. In addition to offering products or services that they are interested in, the website should
offer additional resources that allow the user to learn more about the industry, the company’s
offerings, history, and more. For instance, a clothing store that’s been open since 1912 could have a
page that shares the history of the company and the building it’s in. This makes the company feel
more personal to the user and also gives them some more background on how it’s run, which helps
increase brand trust.
• Credibility: The website should use reliable information from reputable sources to prove its point
or educate the user. In addition to establishing its own credibility through reviews, history, awards,
or recognitions, the website design itself provides credibility by being easy to use and find
information on.
• Relevancy: You need to keep the website layout and content up to date with best practices for the
industry, making it relevant to the user. If there is an outdated design or information, it decreases
user trust and brand sentiment.

61
User intent: What is the user looking to accomplish on a page?
Points of friction: What is stopping a user from completing a desired action on your website?
Places to examine include pages that have the highest bounce rate, abandoned shopping carts,
landing pages that do not convert, and CTAs on pages that aren’t clicked.

Causes of friction include:

• Hard-to-understand content
• Disruptive design elements (for example, the color yellow may turn some buyers away)
• Expensive shipping costs
• Long order fulfillment time
• Complex or time-consuming forms

• Influence of web design on UX: Bad design can create a bad user experience, even if the
website is useful and the company is well regarded. Problems could include off-putting or
outdated colors or design elements, hidden CTAs, or not enough content about products and
services on the home page.
• Navigation: Navigation layout and process can vary. Should it be collapsible (like many mobile
navigation layouts are) or should navigation expand with mouse hovers? Additionally, make
sure you test the nesting of pages. For example, where do sub-pages go in the navigation?
Would the Products page get more clicks if it was on the main navigation instead of as a sub-
page under “About Us”?

62
This is a website with a poor UX and UI because:
• There is no menu so the user can’t get to other pages on the site.
• The background and text contrast could be difficult to read.
• It doesn’t lead with how it benefits the user.
• The Facebook button is leading the user away from the website (where they make a
conversion).
• The layout is not modern or mobile-friendly, so it’s more difficult to use.

63
This is a website with a poor UX and UI because:
• The red text at the top of the page with contact information is hard to read.
• The site isn’t mobile-friendly so it’s hard to use on different devices.
• The menu navigation is hard to read because the words run together, so users may get
frustrated or confused.
• There’s no CTAs, so users don’t know what to do with the information that is on the site.

64
Good website navigation:
• 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.
• Increases time on site and decreases bounce rate because users can find what they are
looking for. This gives users a better impression of the company and its website and makes it
more likely that they will make a purchase or complete a conversion.
• Makes it easier for search engines to crawl the site for better indexing. This leads to better
visibility in search results.

65
This is an example of good e-commerce website navigation because it uses black text on a white
background; the categories are broken out in a way that makes sense; and there is a drop-down
to each top navigation item that lets users go straight to the most specific category page they
are looking for.

66
This is another example of good website navigation because it uses dark text on a white
background; there are CTAs in the navigation; and there is a red button in the top-right corner
(key since this is a non-profit), and what is most important (the content) is listed first in the
navigation (topics). Users who go to this website want to learn more about the issues in a non-
partisan, well-researched way, and that’s what this site does.

67
A responsive website across desktop, mobile, and tablet devices brings the following benefits:
• Much better user experience: Users are able to see all 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 the navigation easier to use.
• Higher preference in search results: As mentioned earlier, Google announced that they are
giving preference to websites that are mobile-friendly in search results over sites that aren’t.
• Better design across devices: This is good for branding and credibility, as it makes the site
look higher quality. This, in turn, reflects well on the business.

68
User expectations and intent differ across difference devices:
• What a user is looking for on mobile may be different than desktop: A/B test placement of
contact information, reviews, services, and CTAs across different devices to see what gets
more clicks.
• Consider whether users need to be driven to an app on the mobile website: For example,
would your app work better than the website on mobile? For some ecommerce sites, such as
Amazon, that is usually the case because the app has more features – for example, searching
by photo and faster product page and search result load times.
• User interface expectations vary: On mobile you need call links for the phone number and the
number formatting for fields that ask for phone number or specific number. This makes the
mobile site easier to use.

69
How to create the perfect CTA:
• Use action words: This inspires users to take action. Examples are: Click now, Buy now, Get
, Order, Purchase, Contact.
• Create urgency and scarcity: Only offer things for a limited time or in limited quantities so
users feel more pressured to buy right away. Something like, “Only 22 books remain” or
“This sale only lasts for 24 hours”. Or use a feature such as a countdown timer to show
when it will no longer be available.
• Minimize risk: Offer money-back guarantees so users feel more confident about making a
purchase. Users will feel like it’s not so permanent and that they have more of a choice.
• Focus on value: Offer a list of honest perceived value (e.g. “Buy now for $49, was $499”) so
customers know what they are getting for their conversion or purchase.
• Invite readers inside: Give them an exclusive look or offer that they won’t get anywhere
else. This makes them feel more exclusive and they feel like they are part of an exclusive
club.
• Get personal: Use mass personalization on website and in email campaigns, such as
mentioning users by name, listing their location, or using retargeting.
• Foster curiosity and anticipation: Make sure the user can interact with the page through
elements such as “click to read more” or “see what discount you get”. You could also set a
countdown timer until a certain sale goes live.
• Show benefits and social proof: Testimonials, comments on social media, photos of
customers using the products, and other forms of social proof show potential customers
that others enjoy the product. Listing out the benefits and what you get with the purchase
also breaks down the hesitancy to buy.

70
User expectations and intent differ across difference devices and audiences. Thus, you should
shape your CTAs and user experience accordingly.
• Select the best CTAs for your audience through testing different wording, feature boxes,
offers, and more. (These may also vary by device). For example, “Call us today to get an
appointment” with a link to call directly on mobile would likely get more clicks on mobile than
a similar link on desktop.
• Align the user experience to your specific audience. Some audiences want a simpler
experience, while others expect something more complex. For example, an older audience
(above age 60) would likely appreciate larger font sizes and bigger headers, with less
animations since they tend to read more slowly. Conversely, a tech-savvy crowd would expect
more innovative and forward-thinking web design, such as interactive elements (quizzes,
games, and so on).

71
These two CTAs are good for Tony Robbins’s audience because they focus on taking action to
change their life, which is something that led them to the site in the first place.

72
This CTA works because it’s easy to find, and simple. Also, it will be what their specific audience
is most likely to want to know when first going to their website. They likely don’t want country
guides or blog posts; they want to know what tours EF Tours has available first.

The format also appeals to their audience – it has a photo of a global location, and the text pulls
them toward exploring the world, which is what EF Tours offers its customers.

73
Why is page speed for websites important for website optimization and SEO?
• Page speed is a ranking factor for Google. They announced that for their mobile-first index,
page speed will be a factor.
• Mobile users, for instance, are much more likely to leave a page if it takes longer than 3
seconds to load. This is one of the reasons why Google invented AMP – to cache pages so they
load faster.
• Page speed is an indicator of other issues with the site, such as bugs in code, plugins that
aren’t updated, or some interactive features or images that need to be compressed or
removed.

74
Hosting and website design affects page speed in the following ways:
• Some hosting providers are faster than others: Some private hosting options make websites
load faster (highly dependent on the provider and your own website).
• Hosted files and code: Some of the code and files on websites can cause them to load more
slowly. This could include several plugins that are outdated or unnecessary.
• Website elements: Some elements – such as widgets, animations, or sliders - can affect page
speed. If they take a long time to run (which can happen especially if they are outdated), it
will affect page speed. Some elements end up not loading at all, which can affect the website
layout and optimization, as mentioned below.
• Image sizes: If image sizes are too big, this can affect page speed, because they take longer to
download and display on the website as it loads.

75
How do website design errors affect website optimization?
• Some elements don’t load correctly, leading to other “broken” areas of the site. For example,
if a slider is broken, the animations and images won’t load.
• Errors can affect what information is shown. For example, if navigation doesn’t work, the user
can’t properly access different areas of a site.

76
77
78
79
Your goals must be SMART:
• Specific: The goal should be as specific as possible so it is clear and easily understood. “Get
more website traffic” isn’t as clear as “get 10% more new website visitors to product pages”.
• Measureable: You should be able to measure the goal with concrete numbers and data, so
you can prove that you’ve met it. Use a percentage or set number.
• Achievable: The goal should be attainable and not impossible to complete in the time
allotted. For instance, a new business setting a goal of $1 million dollars in 12 months likely
isn’t achievable. But maybe $100,000 is, depending on the product.
• Relevant: The goal should focus on the end factor, not the process to get there. For instance,
“be more organized” isn’t a SMART goal, but “streamline work process to work 5 less hours
per week” is better.
• Time-Bound: The goal should have a time deadline. This should be reflective of its
attainability within that timeframe. What can happen in a week is likely different than a
quarter.

80
The most important metrics for your website are (in order):
1. Conversion rate: This is the percentage of converting users to overall users on the website. A
conversion varies by website and could be a sale or something like a newsletter sign up or e-
book download.
2. Return rate: This is the percentage of users who are returning users to your website. This is
tracked by sales and tracking cookies.
3. Referral source: This is the website or medium (like an app) that led users to your website.
This is important for learning how users are finding out about your website, which can help
you decide how to spend your efforts. For instance, if you get the majority of your social
media traffic from Facebook and only 15 visits a month from Instagram, it makes sense to
spend more time on Facebook content (or to experiment with Instagram ads to get your
referrals up from that channel).
4. Cart abandonment rate: This is the percentage of users who leave your website and
“abandon” their online shopping cart without checking out.
5. Time on site: This is how long a user spends on your website.
6. Bounce rate: This is the percentage of users who leave after only visiting one page on your
website (which isn’t always the homepage). The lower the percentage, the better.

81
A website is effective if:
• It is hitting its metric goals, as defined using the SMART goal-creation process and then
assigned specific data points to track.
• A colleague or random test reviewer can accurately complete a task without confusion (for
example, “Buy two shirts in men’s Small and women’s Large”). If there is confusion, note
where and why on the website the tester is confused so you know what needs to be fixed.
• The website is viewable and accessible from a variety of devices, tested manually, including
tablets, iOS and Android phones, and different computers (Mac and PC).
• All desired information is included. Make sure that the website isn’t missing any common
questions or product information that needs to be included.

82
To ensure your website is following the latest best practices in website optimization, you can use
resources such as:
• Google Analytics for metrics testing
• Fetch as Google tool in Google Search Console
• SEO tools that audit your website, such as PowerMapper, SEMRush, or SE Ranking

83
Determine effectiveness of a website by setting up regular reporting on Google Analytics to
track metrics and goals:
• Create automated reporting and/or custom dashboards in Google Analytics (or other
reporting software).
• Build a tracking spreadsheet that will show progress from month to month.

84
Here’s an example of referral sources for a website in the last 28 days. By tracking website data, we
are able to determine whether a website is performing to the best of its ability. Poor metrics or
unmet goals mean that the website needs to be further optimized.

85
Here’s an example of the Google Analytics dashboard for an ecommerce website for the last 28
days.

86
Create a regular schedule of metrics reporting and action implementation based on metric
results by having a dedicated time monthly and quarterly with the involved team members to
set one to three specific goals for the next month or quarter. Then repeat the process of testing,
recording, and making changes, which then repeats on a regular basis. Website optimization is
always a continuous process!

To schedule a metrics report in Google Analytics, go to the dashboard you want to view. In the
example, it is showing the Audience Overview. Click Share in the top-right corner. From there,
you can decide the frequency of the report, the format, and who you want to send it to. PDF is
the easiest-to-read version. Send the report to involved team members as needed.

87
Adjust website optimization accordingly, based on goal performance:
1. Examine which metrics are down and their corresponding pages: For instance, if users
always abandon their cart at the payment page, test different payment options or processes
to see if that decreases cart abandonment rate.
2. A/B test page elements to see if that positively affects metrics: Often, more links or different
CTA buttons or text can lead to more clicks, conversions, and time on site.
3. Make the change permanent if an increase is reported: If you see a positive increase, you
know your change worked. End your A/B test and go with the change that worked best.

88
89
90
91