Skip to main content

Wester Computer Audit (Part 3)

Lesson 48 from: Creating High Converting Landing Pages

Isaac Rudansky

Wester Computer Audit (Part 3)

Lesson 48 from: Creating High Converting Landing Pages

Isaac Rudansky

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

48. Wester Computer Audit (Part 3)

Lessons

Class Trailer

Landing Page Design Fundamentals

1

Laying the groundwork for good design

13:23
2

The Myth Of The Perfect Landing Page Conversion Rate

12:05
3

The 3 Main Types of Landing Pages and How To Use Them Effectively

18:57
4

Business Models and Understanding Your Conversion Actions

06:04
5

The AIDA Sales Funnel and The Online Decision Making Process

16:48
6

The Awareness Stage of the Funnel ... Where It All Begins

17:26
7

The Interest Stage of the Funnel ... Tell Me More

14:10
8

The Desire Stage of the Funnel ... I Want What You Sell

12:44
9

The Action Stage of the Funnel ... I'm Going to Buy What You Sell

09:05
10

The Fogg Behavior Model and how it Applies to Good Landing Page Design

19:25
11

Making Your Landing Page Design Memorable

12:44
12

Quiz: Landing Page Design Fundamentals

Principles of Good Landing Page Design: Examples, Case Studies & Best Practices

13

The Primacy of Product and The Concept of Usability in Landing Page Design

15:23
14

Eschew Obfuscation ... Clarity and the Quest for Fewer Question Marks

11:17
15

The 5 Second Usability Test in Landing Page Design (and how you can use it now)

12:25
16

The Art and Science Behind Designing High-Converting Calls To Action (CTA's)

18:29
17

Readability and Visual Hierarchy Landing Page Design

19:50
18

Respecting Web Conventions in Landing Page Design

13:22
19

Using Videos, Graphics and Imagery to Increase Landing Page Conversion Rates

19:53
20

Information Architecture and Accessibility - Landing Page Design Best Practices

19:51
21

Trust, Safety and Credibility (Part 1) Landing Page Design Best Practices

15:34
22

Trust, Safety and Credibility (Part 2) Landing Page Design Best Practices

08:43
23

Dedicated Landing Page Design Best Practices (Part 1)

14:57
24

Dedicated Landing Page Design Best Practices (Part 2)

12:18
25

Quiz: Principles of Good Landing Page Design: Examples, Case Studies & Best Practices

Principles Of Persuasion in Conversion Rate Optimization

26

Using Scarcity to Improve Conversion Rates on Your Landing Pages

09:46
27

Principles of Persuasion - Reciprocal Concessions & Reciprocity in Landing Pages

12:07
28

Principles of Persuasion ... Anchoring and Cognitive Dissonance Theory

18:56
29

User Scenarios and Contextual Perception in Landing Page Design

16:37
30

Quiz: Principles Of Persuasion in Conversion Rate Optimization

Building a High Converting Landing Page From Scratch

31

My Favorite Landing Page Builders and Getting Started With Our Unbounce Page

10:02
32

Getting Familiar With the Unbounce Page Builder and Adding Our Header Section

07:28
33

Creating a Logo in Photoshop and Using the Unbounce Image Uploader Tool

16:25
34

Working With Background Imagery in Landing Pages and Developing Our Hero Section

15:36
35

Creating a Form, Action Block, and Finishing the Hero Section in Unbounce

19:27
36

Discussing Landing Page Design Changes and Creating our Primary Content Section

16:17
37

Finishing Page Content, Adding Icons, Footer and Working With Buttons Unbounce

10:42
38

Publishing Your Unbouonce Landing Page on Your Custom Domain

03:43
39

Adding Custom CSS in Unbounce to Create Professional Drop Shadows

06:03
40

Making Your Landing Page Design Work Better With Custom Javascript Snippets

08:08
41

Mobile Site Layout in Unbounce Based on Mobile Landing Page Design Guidelines

02:30
42

Designing Your Form Confirmation Dialogue in Unbounce and Testing Your Live Form

03:30
43

Assigning A_B Testing Variants in Unbounce and Assigning Traffic Weights

12:20
44

Integrating Your Unbounce Form Submissions With Your Mailchimp Account

09:06
45

Quiz: Building a High Converting Landing Page From Scratch

Landing Page Audit in Action

46

Wester Computer Audit (Part 1)

08:28
47

Wester Computer Audit (Part 2)

09:16
48

Wester Computer Audit (Part 3)

15:19
49

Wester Computer Audit (Part 4)

13:52
50

Quiz: Landing Page Audit in Action

Conclusion

51

Conclusion

02:52

Final Quiz

52

Final Quiz

Lesson Info

Wester Computer Audit (Part 3)

So here is a blank canvas in Photoshop and once again, this is not something we usually do on atlantic page review, but I thought it would be really helpful um for you guys to kind of see our our ideas laid out and these are ideas that really could be applied to um to anywhere else in the site. So the header section, um we have the menu which is obviously just taken from the menu, but if you notice right away, um we have an image that is not competing for attention in the background of this section and we have a clear headline. This clear headline goes a long way in explaining to a person how this software work. I'm not I'm sorry, not how the software works, but what this, what this page, we're not gonna explain to anybody how the software works per se, but this does a good job in helping a person understand um what this page is about, like what information are they going to be getting once they land on this page and that's what it's called. That's what the uh this header section aims ...

to do. Mhm. Mhm. And I'm just opening up my brush tool here just to maybe do some meditations as we talk. Um so that's that's that's that's a nice concept in the header and I like, I like the images something which could always be changed, but it's something that should the it's important to not have images that are too visually distracting. Um we're not a travel blog. So the vision, the visuals should be very much understated and the visuals should be um very much a side point from the header section down, we have um Trust and security, Trust and security is not something we talked about yet. But you have these great uh icons in your recognition section of your footer and you have them I believe on the contact page of the about page and it's ah it's it's so important to have those icons prominently displayed. People are not only looking at Western computer when they click on the click pay per click ad or if they go to organic listings and these icons that they might not even know what these what these associations are. But the Trust and security icons are very powerful. Many, many tests have been done. There are some famous tests that were done by, by Jacob Nielson who is one of the pioneers in web usability, tim Ashes on a bunch of studies like this who is also you know, kind of one of the modern day gurus and web usability and they've shown that the more prominently displayed, the more prominently your logos and your partnerships and your recognition and your awards displayed. You're conversion rates increase significantly. So it's really important as we're redesigning its current page and any page on the Western computer site that we are very clear and and we take great care to kind of in a tasteful way promote the trust and trust and security symbols. So going back into Photoshop um if you see what I did, I I kind of um took them, took these images, we turned them into black and white and we dropped down the opacity. So that's something which is a nice touch. It it kind of creates a little bit more of a of a tasteful not in your face sort of look to these, to these recognition the awards, but they're there and the fact that they're there um have a major impact. They have a major impact. So so speaking about the menu that we created is this secondary nav and this is a really, really cool feature. It's a really powerful function. Um if we could get this novel working, it could really make a big difference because instead of a person having to scroll or go to different pages or or kind of navigate deeper into the site to find some supporting information to the to the kind of the gist of the page, they can simply click on any of these links and the body content will swap out and let's take in the let's bring in the body content now. So here's our body content. And clicking on any of these links over here will swap out this content with supporting information. Now, if you notice in the body content, we have bullets, one sentence, introduction and a supporting short paragraph of text and that's a good way to go overall. It's a good way to go. Um you you want to be very brief with your text. Once again, people are not reading their scanning, that's a major focus. People are not reading their scanning and let's bring in our clearly defined action block, which is our contact us and I think this is a really cool looking Contact us block. Once again we have a kind of a matching graphic to the top graphic, but it's it's it's quite transparent where it's, it's a pleasant background, it just looks professional, looks polished, it looks sharp. Um it looks like we're a serious company in a major way. Now if we compare, you know, just this page, this current page, side by side with, with this page. Now we're already starting to see a major difference in the information visible above the fold. Um I'm coming to the page and right away, I'm seeing wholesale distribution solutions and this could be changed, There could be a sub headline here, this could be a different headline. You guys are ultimately going to be able to write the best headlines because you understand how to describe your product. But what's what's what's lacking is is I think an awareness of, of how beginners, so to speak, a lot of these potential visitors of yours are. So we're seeing um, headline above the fold, we have the trust and security, we have the secondary nav which is missing over here. This is this, this big blank blank space would be a great place for the secondary nav, there's the contents of a little bit too thick and then we have these conflicting contact us blocks which is just kind of drab, there's nothing that's bringing the eye to look at these contact as blocks. Whereas in our Photoshop mock up so far we have this really nice aesthetically pleasing contact us block get started today, we could change the button text but button text is important. Button text should always follow or finish the sentence I want to dot dot dot what do you want to do? And once again remember we spoke about the BJ fogg's behavioral model, motivation and ability. We need to um increase the perceived ability for our specific company. So the text to speak with a specialist today, that's something I'm going to speak with a specialist, a specialist will be able to explain what all this stuff means, how it works, what it's gonna cost and and walk me through the steps and in in figuring out if this is the right solution for our company or send us an email by clicking on the button below and it's it's the continents of how we, you know, I put these together but this is something which could always be changed solutions for the wholesale distribution industry. Um just one, you know what the solution will mean if your business, the emotional psychological payoffs. That's what that sentence should be swapped out with how we integrate with your current technology quick, easy and to the point what systems we work with mentioned all the systems that are requirements. Let people figure out on their own right off the bat. If this is for sure enough for them or if it's something which may be for them, that's an important aspect of these initial bullets and then the best way to get started. And once again it's this is not, I'm not saying that these are the paragraphs that you have to have. But what I'm trying to show here is you're getting a sense of a very sharp page, a very professional looking page. The secondary nav secondary navigation over here, how it works. Why Western Computer support and Epic. You this will give people the ability to engage further without having to be nervous about digging further into the site and scrolling through a lot more content. And another great advantage of having the secondary nav. If you think about it is every time they click either how it works, why Western computer or support F. A. Q. They're staying in this main section. They still they they're still gonna have there, they're they're still going to be able to see the quality action section no matter what page they're on because this entire above nice kind of above the fold situation we have going on here is always gonna be visible regardless of what um specific page and our secondary nav there on. uh so we're so um and then once again obviously you also always have the trust symbols that are gonna be visible. So we're we're looking we're we're in good shape with where we're holding so far on this page. Now let's jump back and and continue going down the page and covering the rest of the important features. So a person is landing on this page. They're going down and here we have this kind of floating section and let me just grab up my pen tool. Again we have kind of this floating section which is really like a feature section. It's a feature slash benefits section. Um It's just kind of here in the middle of nowhere and there's nothing that really separates these two sections and it just looks like more content so that's bad. It looks like more content and it doesn't tell me exactly what these things are describing that's an issue. A person gets down to this this um ah the person gets down to the section and they don't know what this is describing it and you might come back into me to say Isaac these people are searching for our products and services. Um They must know when I say when we write solve your biggest headaches with trade management. They must know what that means. We're describing. One of the psychological benefits, headache. You know you're solving a headache that's a great benefits, psychological benefit. They must know what that means when I say that. So I come back and I say they may have to think about what it means, but one of the most fundamental guiding principles and web design. In fact, steve Krug wrote the bestselling book called Don't make me think um, the ultimate guide to usability. Don't make me think, you don't want to make people think the more a person has to think, the more a person has to think, hey, is this call to action different than this call to action? What's gonna happen when I click this? What's gonna happen when I click this? What's going to happen when I click this? What is these icons representing and what do this? These blocks of texts describe? You're making a person think more and more and more and it and it creates a great sense of frustration and a great sense of confusion and it's this is all subliminal, it's subtle but it impacts conversion rates. So you want to once again in this section here. You want to have a headline? What are these features going to describe? Potentially a sub headline. Each one of these should have their own headline. What are these describing. Okay, let's continue to move down the page. Mm hmm mm hmm. So we have a very interesting situation over here. Um, any new visitor will, will at this point be completely overwhelmed and just look at all this interesting stuff that I could read. Trade management software, it's unclear what happens is this, you know, is this clickable, Is this a download? Am I going to get something downloaded on my computer that I don't want if I click that image, nothing's nobody's telling me what this click does. It looks like it's clickable. But I don't know is it just an image and improve your margins with trade management, deliver goods where and when your customer needs them? Once again, what happens when I click on this image? I don't want to I'm nervous. I'm not ready to click on an image that I don't know what's gonna happen. So what I'm getting at here, you know, my insults sarcasm is people can't be surprised. Obviously I'm not gonna go into depth talking about how much there's there's too much, there's too much text here and this needs to this badly needs to be redesigned. But my first impression and and kind of our team went through this and this is one of the first things we all said is we don't know if this looks like it's clickable. We don't know what's gonna happen when you click it. And lo and behold we're clicking it. Um Well, the link, by the way guys, you know, the link is not working, but it seems to bring bringing me to some potential white paper? But I'm getting a bad request if you are going to offer a white paper and white paper and we'll talk about the importance of offering a white paper in a second, if you're going to offer a white paper, you got to make sure you're offering the white paper um framed and and and kind of proposed in in the right way. So let's just talk about, let's just knock off some of the major issues with this section right here. First of all we have um a lot of text, a lot of text and no visual appeal here, right? And I'm not going to have to go down the whole page, we'll just talk about it all. This is repeated itself many times. The second thing that's important is is if you're gonna offer white paper, there's a tremendous value in offering white papers that people web designers don't realize. We think that the sole value of the white papers that a person reads our content, they see our content, it looks great, it looks really professional. The information is good and they're gonna call us. In fact, once again, studies have shown these are studies that were done by Jacob Nielson um and steve Krug studies have shown that it's the it's the subliminal sense of reciprocity, the need to reciprocate that really makes a white paper download so valuable and so effective when you offer a free gift and you give something to somebody that and of course it has to be useful. Of course the content itself has to be really good. But when you offer somebody a free gift it makes a strong impression and it creates a psychological need to reciprocate that that gesture. And studies have shown those studies have shown that oftentimes the web users will reciprocate that small gesture um in a in a much greater way with with much greater recertification than that which they received. So offering this white paper should be framed as um here is a free gift for you to read on your free time. Uh how to improve your margins with trade management. And then of course you'll plug the software through the download. One of the things you might want to consider is making this gated content. Um you don't need to make it gated. And a lot of cases have been made a lot of there's there's one school of thought that says you shouldn't ask for an email um Past you know and I'm sorry name email company named phone number. But a lot of people will say for the sake of our marketing we might get fewer uh downloads or fewer people reading the book but the people who are reading the book will be more committed and will have their information. We can market to them. So consider making your white papers um gated. And when you when you redesign the white paper, download section, I'm gonna show you how we designed it in a second. Um make sure to make sure to really promote the white paper with a nice kind of subtle background image or a section that that clearly promotes a like a really happy and and pleasant sense that they're going to get something really valuable and it's really free. So that's something which is powerful as well. And and if you think that the Western computer clientele don't fall for that stuff, it's not true. The most sophisticated web users, um the brightest people, they they they like to get things for free that are valuable and they feel that they want to stay connected up with that company as a result of their of their of their need to reciprocate. Let's jump back into Photoshop. Let me show you our feature section. Um before we go too far further down the page, I want to show you how we did it.

Class Materials

Bonus Materials with Purchase

Dedicated Landing Page Design Best Practices

RELATED ARTICLES

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

RELATED ARTICLES

Recent

Articles