Home Page Design Tips

Monica Pitts 00:00 Hello again, and welcome back to marketing with purpose. My name is Monica Pitts, and today we're going to talk about home pages, specifically why most of them are doing way too much and confusing the heck out of visitors in the process. Your homepage has one job, just one. It needs to be a good receptionist. It needs to greet people, tell them what you do, and point them in the right direction. But somewhere along the way, businesses started treating their homepage like it needs to be a novel, a portfolio, a company history lesson and a full menu of services all rolled into one overwhelming scroll, or they just put pictures on it, and that's it, just pictures. And both don't work. They don't work. Okay? So in this episode, we're breaking down exactly what your homepage needs to do and what it definitely doesn't need to do. We'll talk about the billboard test, why your header area matters more than you think, and how to prove you're awesome without just saying I'm awesome over and over and over. So if you've ever looked at your homepage and thought, is this actually working, this episode's for you. Now, let's get to business. You're on a mission, and you just need more people to know about it. And whether you're brand new to marketing or a seasoned pro, we are all looking for answers to make marketing decisions with purpose. I'm Monica Pitts, a techie, crafty business owner, mom and aerial dancer who solves communication challenges through technology. This podcast is all about digging in and going digital. I'll share my marketing know how and business experience from almost 20 years of misadventures. I'll be your backup dancer so you can stop doubting and get moving towards marketing with purpose. I just want to give a quick thank you before we get started to our featured resource sponsor, what to put on your website. This is a page by page website content checklist, and it's one of mayecreates most popular free resources. It has more than 7000 downloads. It outlines suggestions of what content to put on each page of your website in an easy to understand checklist format. And my nonprofit friends, we've got a special one for you. Just check the nonprofit box and it will deliver a nonprofit specific checklist right to your inbox, so you can download it for [email protected] Monica Pitts 02:25 that's m, a, y, E, C, R, E, A, T, e.com, or you can just click on the Resources tab at the top, or that's m, a, y, E, C, R, E, A, T, e.com, or you can just click on the Resources tab at the top, or you can click on the link and the show notes. Now I like to think of websites like employees. Okay, your website is an employee, and your homepage is not your salesperson. It's not your deal closer, it's not your product expert, it's a receptionist. So your homepage greets people at the door, it explains what you do, and it leads them where they need to go. A good receptionist doesn't dump your entire company manual on visitors a second they walk in, they're friendly, they're clear, and they make sure you get to the right place without wandering around the halls confused. It's just awkward, right? No one wants to wander through your office and try to find the bathroom. They want to know exactly where it is. So the problem is, most homepages fall into one of two traps, either they're crammed with every service, all the information about those services, accolades and every piece of company history. So your business feels like a cluttered mess, like a receptionist who won't stop talking long enough for you to explain why you're there, or they're just a barren wasteland of images with a sprinkle of text, like the receptionist who ignores you until you stand in front of the desk and clear your throat, and even then, won't help you find what you need. And the result of each of these problems is that people leave your website before they even figure out what you do. A great homepage is simple. It's scannable and it's strategic. It tells visitors what you do, it proves that you're good at it, and it and it makes it ridiculously easy for them to take the next step. And that's it. Everything else is just noise. So in order to have a successful homepage, first, we have to know the goals of your homepage. There's only four goals of your homepage. Goal number one, let visitors act fast without thinking. Number two, tell visitors what you do immediately. Three, explain why you're awesome, and four, invite them to the party. Okay, so let's start at the top. Goal number one, let visitors act fast without thinking your homepage isn't the spot for long, eloquent poetry. It's basically a slide deck. Okay, so you want people to roll through it like a PowerPoint presentation, grabbing what they need without even touching your navigation, unless they're trying to, like, dig in deeper right away and they know exactly what they want, so you need to only share the most important information on your homepage. Do not overwhelm people with too much content. Give them quick overviews and then link to details elsewhere. Inside of your site. Now here's the deal, though, this quick scan principle, it applies to your entire homepage, not just one section of it, not just the top, the whole homepage needs to be easy to scan, and honestly, so do all of the landing pages inside of your site. Scan, scan, okay. And unfortunately, this is where AI fails. So if you're using AI to write your website content, and you start with your homepage, or you start with the landing page of a section, then nine times out of 10, it will give you way too much content to start. It always does it. So before calling it done, because AI is making you sound really, really cool, and you didn't have to write it yourself. You need to ask AI and yourself, did I share only the most important information on the homepage? Am I allowing people to scan this quickly? And scanning is twofold. Okay, part of it is not giving them too much content. The other part of it is designing it, so that way they can scan it. Okay, so there's two pieces to that. And last but not least, did I get too specific? Did I share too much information? Should some of this content be housed on other pages of the site? So if you're not sure, ask your AI program. We use Claude, and I ask it this question all the time, especially on home and landing pages, and it often admits that the content is too wordy for a homepage, and then it suggests other pages on the site where the content would be more appropriate. So that's just a word of warning. If you're using AI, it's going to give you too much, and you're going to have to pair it back. Now your homepage is a springboard. Okay, like the receptionist, it's guiding people where they need to go. So if we want visitors to act fast and launch into the site, first, we need to actually take a step back and ask ourselves, what are visitors looking for? Because unlike the receptionist, who can say, How can I help you, your website has to anticipate what they need, and then you can ask yourself, what do you want them to see or do? Right? So we want them to get what they need quickly, without thinking, and then sprinkle in the things that you'd like them to take action on. So for example, if you're a nonprofit, visitors might be looking for ways to get involved or sign up for services, and you might want them to donate or check out your needs list. If you're a commercial paving company, visitors might be looking for your service list, your service area or completed project photos, and you want them to see your career section, because you're focused on hiring. So make sure to reserve a section at the top of your page to focus on what visitors need. And I mean, you can absolutely sneak in where you want them to go next, because if it's not relevant to them, they're just going to ignore it and move on, which is totally fine. But sometimes what's even better is that what they need and what you want them to do are actually the same thing. Now, if you're not sure what your audience is looking for, just look and ask around. You can ask your sales human or the person who answers the phone or the company email. You can talk to people in your audience. It's actually a really fun icebreaker at networking events to ask people their opinions. Google your company. Yeah, Google yourself. Usually the most visited pages on your site, display just below your homepage and search results which will tell you the parts of your website that people most likely visit. It might surprise you. It might you can even look at your competitors homepages to get ideas. You'll likely see a trend between them, but don't let that cloud your judgment, because you can be smarter than your competitor's web designer. Okay? You can even ask chat GPT, and then one of my favorite tricks is to go to AI. I use Claude, but you can also use chat GPT for this. And you just describe your audience. Tell the AI program everything that you know about those people, and then ask them, What do you think they're looking for on the homepage? What do you think they need to make a buying decision? What would you put on my homepage? And it'll tell you, it'll give you an outline, and then you can use your ri your real intelligence, to decide whether or not that actually clicks. Okay, so goal number one is, let visitors act fast without thinking. Goal number two is tell people what you do immediately. Now, what you do does not equal Welcome to our website. Okay, I do not want to see Welcome to our website at the top of your website. This is going to feel hard, okay, especially for you Midwesterners, but follow me here. This is very, very valuable real estate. People should feel welcome. They should feel it. But you don't need to say welcome. Welcome them by anticipating their needs. Tell them what you do so they know if they're in the right place. And make it clear in nanoseconds, this is not the time for poetic stanzas I am talking to you. Vague mission statement holders, vague. You know, you know if you were that person, right? If you were wondering if your mission statement is vague, it probably is okay. It was probably crafted by a board. I am so sorry. I'm so sorry. If you fear that this is you take your mission statement and have someone read it that has no idea what you do and ask them if it makes sense. Most of the time they will say no. Or you can, once again, feed it into AI and ask AI, does this seem vague? Is it over flowery? Is this clear to people? Can people with a ninth grade reading level understand this and it will tell you no, right? Okay, so we do not want people to guess or read in between the lines at the top of the page, it's got to be super clear. That's how we're going to make them feel comfortable. That's how we're going to make them feel welcome. Let them know that they're in the right place. So we're going to do this in two main places. First, we're going to do it in that big area up at the top of the site. You can call it the hero image, or slider your header video. I'm going to call it the header area, and you're also going to do it in your services or product overview area. So I want you to think of that header area at the top of your page like a billboard. Your logo needs to be big enough to read, yes, and if your logo has an acronym on it, I want you to spell out your full name someplace in the very top part of your site, and then tell people what you do in simple, easy to understand terms that they can read while driving past at 70 miles per hour. This part of your homepage is more than just ambiance. It's your first opportunity to give value to your visitors, so give them the very best gift ever. Don't make them think, okay, and then right below it, usually we house the services or product overview area. And on most pages, it tells people your services or your product categories. It's basically a visual overview of what you do. And this builds on your header area because it gives visitors a quick way to jump into what they actually care about. So you're going to use clear labels and imagery. You'll pair them with brief descriptions if the labels need backup, and then keep it super scannable, so that way they can pick their path and go. Now, these need to look like you can click on them. They need to look like they're clickable. I know that sounds crazy, but sometimes they just look like boxes. No, they got to look like you can click on them, and not just when you hover over them, right? Because not everybody is using a mouse. So they need to be like kind of button, like, all right? And they need to be big enough to click on mobile, but not so huge that they take up the entire screen and multiple parts should be clickable, not just a tiny Learn More button at the bottom. So make the image and the text and the button clickable so people can get where they want to go with zero frustration. You would be surprised how many people are trying to click on that image that doesn't go anywhere because they feel like it's part of the button. Okay? So now we know goal number one, let visitors act fast without thinking. Goal number two, tell visitors what you do immediately. You got to do it up at the top of the page. And again, don't make people think. And then. Goal number three, explain why you're awesome. So now that people know what you do, you need to back it up. Don't just talk the talk. Show them. You walk the walk. Use the middle of your homepage to build credibility and answer the question every visitor is silently asking, Why should I trust you? I want you to think of this as your social proof section, a place to show real results, real people, real impact. And there are lots of ways that you can do that. I know right now you're thinking, I need, I need to go get some testimonials. I don't have any. Don't freak out. Okay, there are so many ways that we can build credibility on your homepage. Yes, testimonials are awesome, and there are lots of other ways too. But since I started by saying testimonials, we might as well talk about them just a little bit. So written or video testimonials both work great. Make sure, if you're doing written testimonials, they're on the shorter side, because nobody is reading seven paragraphs. Okay, once again, let's it's got to be scannable. It's got to be quick. So what's cool is you can actually pull testimonials from Google or Facebook reviews, and if you mainly get great Google reviews. You can automatically pull Google reviews into your website, which that builds some serious credibility. Right when you're just displaying the Google reviews there, because you're just it's a feed. You didn't curate these things. They came to you from people. They're real people's words. And I know it sounds crazy, but having a not so great review is actually not a terrible thing. It shows that a some people are crazy, Monica Pitts 14:50 and it shows how patient and kind you are when dealing with crazy people. So you want to have discerning clients. You don't just want to have anybody so if they. Resonate with the crazy person, you probably don't want to work with them anyway. Right now, with these testimonials, bonus points, if you include photos, especially with those written testimonials, and if your main goal is hiring, then you can feature employee testimonials on your websites. It's not just for client testimonials. It's testimonials that tell YOUR story to the people that you want to hear to motivate them to do what you want them to do. And if that's hiring, that would be your employees. Now, if you don't have testimonials, you probably have one of these other things. Okay, so other ways that you can build credibility on your homepage right away is to link to your portfolio or your work. You want to show off what you do with images that make people say, I want that, right? So your portfolio could just be a simple photo gallery, or it could be a full fledged project section. Either way, you just want to make sure it's really easy to find and get to. You can share case studies. So if you solve problems for a living, explain how you solve them, right? So walk people through your marvelous and brilliant process, step by step, so they can see themselves getting those exact same results. You can share data like roll in numbers that matter. I love those little animated blocks. They're so cool. Make sure yours is ADA compliant. Cadence blocks has an ADA compliant one, and that's what we use. But basically you can share years in business, projects, completed, clients, served, money, raised like whatever. Metrics actually prove that you know what you're doing. Link to resources that solve people's problems, another easy way to build credibility is to link to resources that solve your visitors problems. So they've got a problem and you have a solution. So why not share? Right? You're probably writing blog posts. You might have a podcast. Maybe you just have downloadable checklists. It doesn't matter what it is like, your free and helpful content will show that you're smart without being salesy, and it can help introduce you to them and your process so they are even closer to buying from you when they make that contact with you. You can highlight recent community service, because people want to work with real humans that care. I mean, don't you want to work with real humans that care? How annoying is it whenever you have whenever you have a problem and you can't even find a company's phone number, right? Yeah, it sucks. So showing your community involvement humanizes your business, and it proves that you're not just chasing dollars like you actually care about the greater good. Monica Pitts 17:36 You can display logos of clients you work for or organizations that you're a part of, because it makes people want to join your club, right? So when potential clients see you've worked with companies, they recognize even if those companies compete with each other, it makes them want to be part of that roster too. We literally have people that contact us and they're like, You must be doing something right, because you're working with all my competitors. I want you to build my website. That's what they say. Now if you don't want to share client logos, you can also just show logos of organizations that you're a part of, because when people come to your website and they see organizations that they're also part of, it's like an instant connection, right? It's like you're already friends. Now if you're looking for credibility, building content, and you recently won an award. By all means, put it up on your homepage now. Do not leave the award up forever. Okay, you could leave it up for like, a year or two, but unless it's your industry's equivalent of the Nobel Prize, don't leave it up there forever. It just feels like you don't have anything else to brag about. And last but not least, show off your awesome employees, because you are only as good as the people who work for you. So introduce visitors to the great humans who make your business successful. It humanizes your business, and it shows that you respect and appreciate your team, which is very powerful, and it says a lot about you, and it might even entice visitors to join your team or want to work with them. Hopefully, you can find some piece of creative inspiration in that big list of ideas to build credibility. Certainly, you have testimonials or pictures of your work, case studies, cool data, resources that solve people's problems. Maybe you've done recent community service. You've got clients that you work with, for sure, and organizations that you're a part of, you might have won an award, and if nothing else, you have yourself and your employees right now, do not put everything that we just talked about on your homepage that would be overwhelming. Okay, pick the things that best tell your story and show people why you're awesome, and then save the rest of the ideas, if you have content for them, for other pages on your site, where they'll actually make an impact. Doing everything is overwhelming, which is the exact opposite of what we're going for here, right? So now that we know how to explain why you're awesome without just saying that you're awesome. Over and over again. We can move on to goal number four, which is invite them to the party. Now, just because this is number four, it doesn't mean that you only invite people to the party at the bottom of your homepage. You can sprinkle party invitations throughout the page, okay, but by all means, if people get all the way down to the bottom of your page. You need to tell them exactly what to do next. Do not leave them hanging. Okay? So to determine exactly what you need to do to invite them to the party, I want you to ask yourself, what is the next step? Right? They got to the bottom of the homepage. They didn't decide to go anywhere else. What do you want them to do, and what do they need to take action and then match that CTA with how your business actually works, right? So do you want visitors to call? If so, make your phone number really big, clickable and visible on mobile. If you want them to visit your store, show your location hours and maybe even a map. If you want them to schedule an appointment, then link to your booking system, or just put it right there on the page. Sign up for your newsletter. Make the sign up really easy to spot. Don't ask for too many things from them. Make it super streamlined. If you want them to donate, show a big bold donate now button. Or if you want them to apply for a job, then link to your careers page or your application portal. So just ask yourself, what is the next step, and what do they need to take action and make sure that you give it to them in a way that matches how you want to do business with them, and don't make them hunt for it? Okay? So your primary call to action can appear multiple times on your homepage. It can be at the top the middle and at the bottom, because people are going to decide to take action at different points while they're scrolling. So give them opportunities to say yes, wherever they are on the page. And this doesn't just apply to your homepage, it applies to any page that they're on. Okay? So now that you understand your homepage goals, let visitors act fast without thinking. Tell visitors what you do immediately, explain why you're awesome and invite them to the party. I want to talk about a few design tips that need to be done throughout to make them successful. I have said the word scannable a lot of times in this podcast so far, and so I'm going to start there with how to make things scannable. You're going to use space to group items together into scannable patterns. The white space around stuff isn't wasted space. It makes your page readable. It's okay. If the page scrolls, that's totally fine. Okay. It just has to have like, items, related items, grouped together, and there has to be breathing room between the sections so your brain gets a little bit of a break. You're going to create clear visual hierarchy so people know where to look next. You're going to use headings and design techniques to make sure that they know where to look next. It's going to feel like a PowerPoint, right? Because a cluttered homepage makes visitors brains hurt, and that's not what we want. So use space to group items together into scannable patterns. Also, your homepage has to have words. Yes, it does. It actually needs words, because Google and aI don't really read images. They need actual context to understand what you do. So shoot for 400 to 800 words of text on your homepage and write for humans first. Right that humans are the people that are reading it, and there are so many bot visitors to your website right now, we need to capitalize on every single human visitor that you come in contact with, so write for them and but I mean, make sure that there's enough words on the page for Google Chat, GPT, Claude, and every other AI out there to know exactly what you offer and who you serve. Now AI summaries, they often favor specific content, rich pages. They look more at your blog posts, your guides, your FAQs, than they look at your homepage. But your homepage influences how AI tools interpret your brand and the Trust for your site. So words, you got to have them. Your homepage cannot just be a collection of images, and since we're talking about words, let's make sure that those words that you put on this super valuable real estate actually sound like you. Okay? If you're a laid back nonprofit, don't write like a law firm like that. Consistency and authenticity builds trust with your readers, and when people are searching for a service like yours, you need them to remember you. And if you look and sound exactly like your competitors, you're just going to get lost in the shuffle. Now your words are not the only thing that needs to be real. You need to use real images of the things that you've done, of your people, of yourself, stock photos of people in suits, shaking hands, suck. Okay, they suck. And visitors can smell the fake imagery from a mile away. It just makes you seem. Like not real at all. So show your actual team, your real work, your physical space. Even a decent smartphone photo of your actual business beats a perfectly lit stock photo of strangers every single time. Now, all those photos and everything else on your site, really it needs to load quickly, because your homepage above all pages needs to load fast, right? If it takes more than three seconds to load, people are already hitting the back button and they're leaving. You know, if you live in an area with crappy internet, you know if most of the people are accessing your website via a phone, okay, so you have to compress those huge header images, optimize files and videos and test your page speed on mobile especially. And we have all kinds of resources about it on our website. And, I mean, there's tons of stuff out on the internet too. Okay, so I know that last tip felt a little techie, okay? And I'm gonna go even a little bit more techie on you kind of and I'm gonna tell you that you really need to make sure that your homepage, really your entire website, is ADA compliant. It needs to be accessible to everyone. It's the right thing to do, okay? And it's the law, quite frankly. And that means you have to have alt text on your images, proper heading, structure, color contrast that's readable, keyboard navigation that works in captions for any audio, video content and more. So when in doubt, run it through an accessibility checker. And if you need to learn more about how to make your website ADA compliant, we have so many resources for you on the MayeCreate website. We even made a whole training module for our clients. And if you really need it, you just let me know. I'll get you access to it. Seriously, I made it. People need to use it. Let's make these websites usable by everyone, my friends, everyone. Okay, now we just talked about loading. We talked about ADA, I need to talk to you about videos on your homepage, because they are super freaking cool. They look awesome. They look so awesome. But if they're not properly formatted, they can be huge, enormous, and they're just going to slow your site down to a grinding halt, especially on mobile, and if you don't treat them correctly, they will not be ADA compliant. So my suggestion is for you, if you have to have an auto playing video on your homepage, make sure that you format a separate, smaller video for mobile. It does not need to be enormous on mobile, right? The dimensions are way smaller, so make it smaller. It will be smaller. It will load faster. Then be honest with yourself, this is a tricky one, and we talked to a lot of our clients about this. If the video doesn't add the same flare on mobile, and it usually doesn't, because it's super tiny, and so it just doesn't feel is glamorous, then replace it with a static image, and your load time will be redonkulously faster. Seriously, redonkulous. That's that's actually a technical term for load time anyway. So just be honest with yourself. If it's not giving that same ambience, just take it off. It's okay right now, if it auto plays, your video needs to be possible to meet ADA compliance. You need to pause button, and for the love of all the totally do not make it auto play with sound. It should have no sound, absolutely none. When it auto plays. That is a big no no for everyone, for so many reasons, and it's not ADA compliant. Now, I know I've said this in a lot of different ways, but we have to make sure it's mobile friendly. Over half of visitors on websites are coming from mobile phones. Even if you are a business to business company, they're coming on their phones. Okay? So if your homepage looks like garbage on mobile, or if it requires pinching and zooming to read, you just lost everybody, right? So test it on an actual phone, not just by resizing your browser window. Now those design tips, those are things that you should use on your entire website. They're things that we talk about all over the MayeCreate vlog and in this podcast. So there are so many more resources that you can find about them. I just wanted to make sure to to drive them home here while we're talking about the homepage, because this is your first impression, and they absolutely need to come through here. All right, so now, armed with this newfound knowledge about what a homepage should be, I want you to go out and take a good hard look at your current homepage. Ask yourself, Does it pass the billboard test. Can someone driving by at 70 miles per hour understand what you do? Are you showing real proof, or are you just talking about how great you are, and is your call to action obvious? Or are people having to hunt for your phone number, or maybe you didn't even let them know the way you wanted them to contact you, right? And if you don't feel comfortable giving yourself an honest review of your homepage. Put the link to your homepage and chat GBT. Explain to chat GBT what you do and have it review your homepage for you. It will tell you what you're doing right and what you need to fix. It really will. And then, knowing what you know now, you can use your real intelligence paired with that article. Social intelligence to make a great list of what needs to be adjusted to fix your homepage. And honestly, if you want me to look at your homepage, you just let me know, and I'll send you a quick video, and I'll let you know what I find. Okay? And if you want it completely fixed, you know where to find me, right? Mayecreate.com, M, a, y, E, C, R, E, A, T, e.com, all right, so that is it for today. Thank you so much for hanging out with me and nerding out about homepages. I hope you found this helpful. If you learned a thing or two, consider leaving us a review. It really does help other people find the show. Now, speaking of things that help our next far less techie episode is one I'm really excited about how to tell your boss that part of your job sucks, or your board or your clients, whoever you need to tell right? And I'm not saying how to tell them the company sucks or your whole job sucks, but the one piece of it that really irks you, the one you know can be done better, or maybe doesn't need to be done at all. That's what we're going to talk about in this episode, because that conversation is really difficult for some teams. They perceive talking about an itchy task as conflict. I personally love it, though, because when someone on my team tells me that part of their job sucks, I can actually do something about it. We can streamline it. We can make it more efficient. We can hand it off to somebody who genuinely loves doing it, or maybe just eliminate it all together. It allows me to streamline our workflows and keep my employees with me longer, because I want them here forever, and I can't fix what I don't know about. And so Stacey and I are going to give you some pointers on how to have this kind of conversation, the one that feels like conflict, but really isn't. It's an opportunity for growth in a way that gets people to sit up, listen and make change. So make sure you're subscribed so you don't miss it. So until then, thanks again. Now go forth and mark it with purpose. I just want to give one more quick thank you to our mayecreateresource sponsor. What to put on your website? Now in this checklist, you'll find the must haves for every page of your site, tips on how to make the most of your content, and practical advice to help guide you through creating your website. You can download your copy for [email protected] Monica Pitts 32:16 that's m, a, y, E, C, R, E, A, T, e.com, or you can click on the link in the show notes.