Lessons

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.