Optmize Website UX And Landing Pages

You've planned your content, created it,distributed and promoted it.Now let's look at what role your website and landing pages play.In this lesson, you'll understand how your marketing campaigns and website work together,apply user experience or UX design principles toyour website and create tests and optimize landing pages.


After planning, creating, and distributing content,content markers often forget to come home,back towards their content is likely to originate, their website.In addition, much of your digital marketing effortswill lead customers back to your website.Let's focus there now.Your website should not only look good but also relate to your marketing objectives.Do you want customers to make purchases?Is your website designed to support that?Do you want customers to fill out a contact form?Is your webs designed to support that?Your website should also relate to your marketing campaigns.Do you include a link back to your website at the end of your content?Does your ad make it clear where users will land if they click on it?It's important to think about every interaction users have with your web site.The process of designing websites,so that they are easy to use and delightful to interact with,is called website UX,or website user experience.The website UX that is right for you is a blend of your users needs,your technical constraints, and your objectives.

Website User Experience (UX)

When thinking about the website user experience (UX), there are three aspects to keep in mind:

1. There should be a clear path for the user to follow
2. A website should have ‘responsive design’
3. A website’s design should be accessible

A website should have all three in order to provide a good user experience. So, let’s take these one by one.

1. Clear Path

The path that customers take when they reach your website is called the user flow. The path you design for users must be clear and intentional.

The user flow begins with your website’s layout and navigation. These need to be clear, consistent and complete. You want to have a good idea of the different steps you want your customer to take. Consider where in the website you think your customers will enter, and which next steps you want them to take. Aside from the layout and navigation, the website copy (written text), can also help keep customers moving in the right direction.

You want each step the user takes to bring them closer to your objective or, said another way, the action you want them to take. This is often called the conversion path.

The conversion path often ends with a ‘Thank You’ page. The thank you pages are important. They reassure your user of their action and they are a good opportunity to move the user along in the flow. For example, they might encourage users to check their email, promote your company and share on social media, or go to another section in your website.

Example: User Flow for Betabrand

Websites can have many paths in and out of the site and therefore, many user flows. Let’s look at one user flow for Betabrand.

Step 1

A user could start on the Betabrand homepage, and click on the ‘Yoga Pant’ product picture he/she finds there.

Step 2

The user lands on a page where she can select which type of yoga pants she would like

Step 3

A page follows where color and size selections can be made and the user can click to buy the pants.

Step 4

The user then sees the cart page, indicating something has been added to the shopping cart and from here the user can go to check out.

Step 5

The user can then proceed to check out.

Step 6

The user is sent an email to confirm the order, closing the loop on the action the user took. 

User Flow Diagrams

As you can see, this path is clear and short. There are only 5 steps to checkout, which aligns with Betabrand’s objective, and there are no distractions that could take the user off that path.

It’s helpful when building or evaluating a website to draw out how the user flow of your website should work. Here is an example diagram of three different user flows:

Alternatively you can use a more technical diagram like this:

This type of diagram may more effectively communicate the user flow you want to your website designer and developer. These technical diagrams often utilize commonly known symbols for different steps that distinguish the start or the end of the flow, the direction, the process or page and the decision.

In any case, you will want your user flow to be organized around your objective and have defined start and end points. Having a user flow diagram related to your main objectives will help you to measure how successful you were at reaching those objectives, and it will come in handy when you set up tools like Google Analytics to evaluate success (we will see more about that later).

If you’re just getting started or need to redesign your current website, it is a good idea to first develop a ‘wireframe’ for your website. Wireframes are sketches of how you want the navigation on your website to flow. They are a very rough way of laying out your website and the different actions a user can take on each page. You can start with the main user flows you have in mind, and then think through the full structure of your website (or app). There are tools that can help you with this, e.g. Balsamiq and Proto.io.

2. Responsive Design

You want your website to be responsive. This means that your website is designed to be viewed and used with multiple devices, like a desktop, tablet or mobile phone, and will automatically respond to the dimensions of that device, providing a tailored experience. You will want to talk to your website developer about designing your site in such a way that it responds to different screen sizes. Off-the-shelf website building tools like Squarespace, Wix, Weebly etc. have many responsive designs for customers to choose from.

3. Accessible

You want your website to be accessible. This means you’ve designed your site so that people with disabilities can interact with it.

For example, making sure to underline links in addition to changing their color so that color blind people can distinguish that there is a link or even coding a page so that users can navigate it by means of a keyboard alone.

Finally, studies have found that 55% if visitors spend fewer than 15 seconds on a page. That means you don’t have a lot of time to make a good impression. So make sure that the path you create for your users is clear, contains great content, and gets them to your goals quickly.

A landing page is talked about in two ways.First that's a page on your Web site thata customer is directed to when they click on a link,the page where they land.Second landing page refers to a page created for a specific marketing purpose,where user lands after the click on a link toyour site is important to your web site's user flow.It's also very important to search engines like Google.Google, when ranking your website for keyword search,looks at the landing page experience of your site,meaning how good they thinksomeone's experience will be when they get to your landing page.We'll cover that in more detail in the search engine marketing course.For now, remember that where you land your customer on your site, matters.Let's turn to landing pages meant for specific marketing purposes.Landing pages for specific marketing purposes can be broadlycategorized as click through or lead landing pages.Click through landing pages are used when you have the goalof persuading your visitors to click through to another page.A lead page is used to capture data on your users such as a name,e-mail or mobile number through a form.A form is a box with input fields for information that you want to collect.The data you collect is called The Lead.The sole function of lead pages is to collect information you will use tomarket your leads with the objective of turning those leads into conversions or sales.

Creating Landing Pages

Our partners at HubSpot have created this overview with tips for the creation of landing pages focused on conversion. It is a good idea to keep these tips in mind as you set up landing pages for traffic you are leading to your site. If you want to learn more about improving landing pages for conversions, you may also find this e-book from HubSpot helpful.

11 Top Tips for Creating Better Converting Landing Pages

1) Include All Critical Elements of an Effective Landing Page

Landing pages, sometimes also called "lead-capture pages," are used to convert visitors into leads by completing a transaction or by collecting contact information from them. In order to make these transactions happen, it’s critically important that your landing pages consist of the following components:

• A headline and (optional) sub-headline
• A brief description of the offer that clearly emphasizes its value
• At least one supporting image
• (Optional) supporting elements such as testimonials or security badges
• And most importantly, a form to capture visitors' information

2) Remove the Main Navigation

Once a visitor arrives on a landing page, it’s your job to keep them there. So if there are links on the page that enable visitors to move about your website, you run the risk of distracting them, which creates lead generation friction and increases the chance they'll abandon the page before even converting. And, let's face it: No respectable marketer wants that. One of the best ways to reduce this friction and increase your landing page conversion rates is to simply remove the main navigation from the page. Simple as that!

3) Match the Headline of the Landing Page to its Corresponding CTA

Keep your messaging consistent in both your call-to-action (CTA) and the headline of the landing page. If people click on a CTA for a free offer only to find out there’s a catch on the landing page, you’ll instantly lose their trust. Similarly, if the headline reads differently than the CTA, it might lead to confusion, and the visitor might wonder if the CTA is linked to the wrong page. Eliminate any and all confusion, and make sure your landing page consistently reflects what you promised in your call-to-action -- and vice versa.

4) Remember: Less Is More

Many of you are probably aware of the phrase "keep it simple, stupid." Apply that same philosophy to your landing pages. A cluttered page usually results in a distracted, confused, and/or overwhelmed visitor. Talk about landing page friction! Instead, embrace white space, and keep the text and images on the page simple and to-the-point.

5) Emphasize the Offer's Value

Highlight the benefits of the offer with a brief paragraph or a few bullet points. The best landing page description offers more than just a list what comprises the offer; it also clearly highlights the value of the offer and gives visitors a compelling incentive to download. For example, instead of "Includes specifications of product XYZ," say something along the lines of, “Find out how XYZ can increase productivity by 50%.” In other words, emphasize how the offer addresses a specific problem, need, or interest your target audience cares about.

6) Encourage Social Sharing

Don’t forget to include social media sharing buttons that enable your prospects to evangelize your content and offers. To limit cluttering, just be sure to only include buttons for the social platforms your audience uses. And don't forget to add an email forwarding option, since people have different sharing preferences. Keep in mind that even if your social media contacts never buy from you, there's always a possibility that someone in their personal network will!

7) Create More Landing Pages to Generate More Leads

According to HubSpot's 2012 Marketing Benchmarks Report,companies see a 55% increase in leads when increasing their number of landing pages from 10 to 15. The takeaway is simple: The more content, offers, and landing pages you create, the more opportunities you have to generate leads for your business. More landing pages also usually means more targeted content that better appeals to your various buyer personas, which can help to increase your conversion rates. To increase the number of landing pages you have on your site, invest in an easy-to-use landing page creation tool, create more offers, tweak the offers you already have to cater to individual personas, and repurpose content you already have. In fact, we elaborate on all of the above in this blog post about why you (yes, you) need to create more landing pages.

8) Only Ask for the Information You Really Need

You might be wondering how much or how little information you should require in your forms. There is no magic answer to this, but the best balance is to collect only the information you really need to qualify leads. In general, the fewer fields you have on a form, the higher the conversion rate. This is because, with each new field you add to a form, it creates more work for the visitor, and thus fewer conversions. A longer form looks like more work and will often be avoided altogether. On the other hand, the more fields you require, the better quality those leads will likely be, because they thought your offer was valuable enough to warrant a form completion. Essentially, the best way to determine what form length works best for your business is to test it for yourself.

9) Consider Whether "To Submit, or Not to Submit?"

That is the question most of your visitors are probably asking. That's why one simple yet effective way to increase form conversion rates is to avoid using the default word "Submit" on your form button. If you think about it, no one wants to "submit" to anything. Instead, turn the statement into a benefit that relates to what prospects will be getting in return. For example, if the form is to download a brochure kit, the submit button should say, “Get Your Brochure Kit.” Other examples include “Download Whitepaper,” “Get Your Free Ebook,” or “Subscribe to Our Newsletter.” Here's another helpful tip: Make the button big, bold, and colorful, and make sure it looks like a button, which is usually beveled and appears “clickable.”

10) Reduce Anxiety With Proof Elements

People are even more resistant to give up their personal information now than ever before. It's understandable, considering all the spam out there. Luckily, there are a few different features you can add to your landing pages to help reduce visitors' form completion anxiety:

• Add a privacy message (or a link to your privacy policy) that indicates visitors' email addresses will not be shared or sold.
• If your form requires sensitive information, include security seals, a BBB rating, or certifications so visitors know their information is safe and secure.
• Add testimonials or customer logos. It's a great way to leverage social proof. For example, if your offer is for a free trial of your product or service, you might want to include a few customer testimonials about that particular product or service.

11) Make the Form Appear Shorter

Sometimes people won’t fill out a form just because it looks long and time-consuming. If your form requires a lot of fields, try making the form appear shorter by adjusting its styling. For example, reduce the spacing in between fields or align the titles to the left of each field instead of above it so that the form appears shorter. If the form covers less space on the page, it may seem as if you’re asking for less. And whenever possible, implement Smart Fields -- dynamic form fields that automatically adjust to a shortened version if a visitor has already been entered into your marketing database.

A/B Testing for Landing Pages

A very common way to test and improve landing pages is through A/B testing. The principle behind A/B testing is really simple. Basically, you create a test in which you let two versions of a landing page compete with one another, version A and version B. You then evaluate which one of the pages performs best in achieving your goal (e.g. conversions). The A/B testing principle can also be used for email copy, ads etc.

So, how does it work in practice?

1. Decide what you will test

You pick one aspect of the page that you would like to test. You may decide to test the headline, the call to action, the image you use etc.

PICK ONLY ONE variable to test. If you change more than one thing on your page, you won’t know what lead to the differences in the results later on.

Here is an example from Unbounce, a tool that lets you build landing pages.

As you can see in this example, these are two versions of the same landing page where the headline is the only element that has been changed.

2. Run two versions

Then you will run two versions of your page concurrently. You may have chosen to change the headline on the page as in the example above. You would then run version A with one headline and version B with the other headline - where everything else is exactly the same. The users that come to your landing page will be shown version A or version B randomly and automatically, usually with the help of software.
Most tools that help you build landing pages, email campaigns, advertising etc. have A/B testing options built into their tool and they provide it as a test option. If you want to test the pages on your website, you can also use tools like Optimizely or Visual Web Optimizer (VWO) for instance.

3. Measure results

Finally, you’ll measure clicks or conversion on each of the versions of the page to see which version got better results. If one version of a page performs significantly better than the other version, it is a good idea to use that page as your final option.

But, how do you know what is ‘significantly better’? We will talk about that in what follows.

Example

Here is another example of an A/B test for Electronic Arts (EA) as described by HubSpot:

Their Goal: Increase Revenue

SimCity 5, one of EA’s most popular video games, sold 1.1 million copies in the first two weeks of its launch last year. 50% of sales were digital downloads, thanks to a strong A/B testing strategy.

The Original

As EA prepared to release the new version of SimCity, they released a promotional offer to drive more game pre-orders. The offer was displayed as a banner across the top of the pre-order page -- front-and-center for shoppers. But according to the team, the promotion was not driving the increase in pre-orders they had expected.

They decided to test some other options to see what design or layout would drive more revenue.

The Variation

One variation removed the promotional offer from the page altogether. The test lead to some very surprising results: The variation with no offer messaging whatsoever drove 43.4% more purchases. Turns out people really just wanted to buy the game -- no extra incentive necessary.

Most people believe that direct promotions drive purchases, but for EA, this turned out to be totally false. Testing gave them the information needed to maximize revenue in a way that would not have been otherwise possible.

Statistical Significance

Take a look at these two landing pages:

Visitors to landing page A purchased 250 pairs of pants or said another way, landing page A resulted in 250 conversions. While visitors to landing page B purchased 300 pairs of pants or landing page B resulted in 300 conversions.

Which landing page performed better? Which landing page would you choose to run?

If you were tempted to say landing page B, you would be wrong. How can that be?

First, you don’t have enough data. Second, even if you had more data, you can’t really understand data until you have a way to evaluate it. For that you need the concept of statistical significance.

Statistical Significance

Statistical significance is basically a way to determine if your results are due to factors other than purely chance.

What those factors might be depends on your hypothesis. In our example above, the hypothesis could have been: there is a relationship between the landing page visitors see and their conversion rate. When your data is statistically significant, that means you can feel confident that the result is real - based on the landing page seen - and not just due to luck.

To complete a statistical significance analysis you also need to understand

• Sample size - the number of people that saw both landing page versions
• Sample variation - the type of people that saw both landing page versions
• Your target significance level - also referred to as the confidence interval and often expressed as a “p-value”.

If this sounds intimidating, don’t worry. The key take-away is that whenever you are evaluating data from marketing tests, you need to calculate whether your results are statistically significant.

Stat Sig Calculators:

There are calculators to help you do all this. Hubspot has a calculator that you can use for landing pages or ads.

Even if you use a calculator it’s a good idea to understand the math behind it. For more on the math, see HubSpot’s guide to statistical significance.

Even after you run the numbers, your numbers may not add up! Here are a few things to watch out for in your results.

Not enough data or not extreme enough differences to reach confidence: Your test didn’t have enough people experience it, or the success rates were not wide enough for you to reach confidence in your results. If you can, run the test longer to get more trials. The tool, Optimizely, will keep a test running until you reach significance.

In some cases, you won’t be able to have more people experience the test, for example in an email experiment. If you send out two versions of an email to your entire list and you don’t get a significant result, you’ll just have to call the test inconclusive.

Too many success metrics: Before you begin your tests, you need to pick one metric you’re trying to optimize. If you run a test without picking a metric, or compare results for more than one measurement, you’ll get lost in too much analysis. You’ll be unable to evaluate the results of your test and decide what to do next based on those results.

**Invalid experimental design: **This problem is hard to spot. You can get results, calculate them as significant, and they can still be misleading. For example, if you ran a website test, saw “significant” results, but failed to notice that you were sending repeat visitors to one version and only new visitors to another version, your results would be biased. In other words, the difference you saw may be due to the fact that one group was new to the site, not due to the change you made that you were testing.

To prevent this, make sure that each group experiencing your test is randomly selected. Avoid common mistakes like dividing a sorted list in half, directing only new traffic to one version of a website, or not clearly identifying which results occurred during your testing period.

Communicate your Results

After you’ve run your test and evaluated the results, you’ll need to communicate what you discovered. Be sure that when when communicating the results of your tests you include:

• Your hypothesis, all variations, and a definition of the metric you’re trying to optimize
• Details about all groups in the test. How large was the group? What percentage of the total saw a version? How were the groups selected?
• Your results. Include the time period in which the test ran, what you considered successful, and the raw numbers so others can validate your work.
• Suggestions for next steps. What should be done as a result of the test? Are there other tests that you would propose? If your tests results were inconclusive or not statistically significant, you’ll want to include how you would change your test such that you’ll get actionable results the next time you run the test.

There’s a lot more to statistical significance that’s beyond the scope of this class. For now, it’s important that anytime you do a test you remember to take a step back and consider - are these results statistically significant?

If stats get you really excited, consider going deep and taking Udacity’s statistics course, specifically the Hypothesis Test lesson.

https://blog.hubspot.com/marketing/marketers-guide-understanding-statistical-significance

Look at these two versions of a landing page.Which version do you think gets more people to take action?Or what about these two pages.Which one was more successful at getting people to purchase yoga pants?You may have an opinion,but the best way to understand what actually performs well,is to run a test and evaluate the results.A test is no different from what you did in science class in middle school.To start you need to observe the current situation andwhat has occurred in the past in similar situations.How has this landing page performed in the past?Did people fill out the form for example.How many? Previous data serve asyour benchmark to help you evaluate the results of a test.Based on current or past performance,you can then formulate a hypothesis as to how the landing page might perform.What are you going to change and what do you thinkwill happen as a result of that change?Next you design and run an experiment.You create your versions to find your experimental groupsand set a timeframe for collecting results and evaluating them.Once you have your data, you need to analyze it.Which version performed best?Was your hypothesis confirmed or not?Are your results statistically significant?Then based on the results,what did you learn. What will you try next?Optimizing landing pages is a continual process.What works now may only work fora short time or not at all under different circumstances.




Let's quickly recap this lesson.Your marketing should relate to your website.Your website should have a clear path for users,be responsive and accessible.You should utilize test and optimize landing pages. Are we done yet?Almost. The last thing and perhaps the most important is tounderstand if all this content marketing is working. Let's see.