Tips for Optimizing Landing Page Hero Sections

Using insights from tens of thousands of A/B tests, I break down Ramp’s homepage hero ➡️ highlighting both the smart bets and areas for optimization. 1) Social proof at the top of homepages is typically a poor bet. Ramp includes both G2 stars above the header and a logo bar beneath the hero. In our testing, when brands place third-party review stars above headers, these versions consistently lose (I cover this in detail in my LinkedIn article, The Problem with Social Proof). Why? 🔎 Distrust of third-party reviews, often perceived as pay-to-play. 🔎 Key content and CTAs get pushed down, especially on mobile. 🔎 Unintentional signaling, for example "4.8 stars from 200+ reviews" can actually make the brand seem small. 2) Embedded email capture + clear CTA text is a winning combo. About two years ago, Ramp A/B tested an embedded email capture form versus a standard button. The embedded form won. Since then, across dozens of site iterations, they’ve kept it. Brands like Buffer and Rippling have similarly tested into and retained embedded capture forms. Their CTA text, “Get Started for Free,” is also strong: it clearly communicates that it’s a free trial. The only improvement I’d suggest is adding reassurance text below the CTA, clarifying that no credit card is required. We’ve seen this small detail improve conversions in multiple A/B tests (see Twilio’s homepage for a good example). 3) Secondary CTAs are a good bet. Ramp’s secondary CTA, “Explore Product,” beneath the main CTA is smart. We’ve seen extensive testing on one vs. two CTAs in homepage heroes for B2B SaaS and fintech brands. Two CTAs typically win. Why? Most of these companies have both self-service and enterprise buyers, with varied traffic sources (and intent levels). Offering two clear paths lets each group choose their preferred next step. 4) Product imagery works. Across hundreds of tests, product imagery consistently outperforms stock photos, branded graphics, or stylized backgrounds. Prospects want a preview of the actual product. 5) Customer logo bars typically underperform. I’ve written extensively on this, but here’s a quick recap of why logos usually lose: 🚧 Logo blindness: If you’re an industry leader, customers assume you serve top brands, so listing them adds little credibility. 🚧 Logo fit: Irrelevant logos create disconnect. Prospects want proof that companies like theirs trust your product. 🚧 Logos mislead: Many sites display big-brand logos when just a small team or individual used the product, or worse, when that company has already churned. If you do use logos, make them interactive or segmented. Brands like Clay and Hex link logos to case studies, providing depth. Others, like 7shifts, segment logos by industry to improve relevance. Hope this is helpful. Any other brands you would love to see analyzed based on DoWhatWorks's database of tracked tests?

Your homepage hero is arguably one of the single greatest marketing assets your institution has. Not your website. Not even your homepage. Just the hero - what appears above the fold. So before you sink months (or years) into that massive website redesign project you’re still waiting on funding for… stop and ask: What can we do right now, above the fold? Because the answer is: a lot. ➡️ Kill that looping hero video. Nobody needs drone footage of your campus - it just slows down your site and kills conversions. ➡️ Make the hero itself your primary call-to-action. For most schools, that means pulling a program finder front and center, giving first-time visitors a fast, elegant way to get to their program without wading through all your other content. ➡️ Simplify your menu. If that link belongs on the homepage - but not above the fold - put it in the footer. ➡️ Reduce your calls-to-action. The more you add, the more conversions decline. Focus on the vital few - and make them stand out. ➡️ Finally, choose imagery that tells a story. Show prospective students the feeling they aspire to - whether it’s the experience, the finish line, or what comes after. So if you’re looking for a way to improve performance, don’t wait for your next website redesign to do it. Because there’s a whole world of impact to be made just above the fold.

Your hero section is killing potential customers before they scroll. Not because it's bad. Because it's too good... The cognitive assault nobody talks about: Your visitor lands on your page already skeptical. Already overwhelmed. Already comparing you to three competitors. Then you hit them with: - Your clever headline - Your explanatory subheadline - Your hero video - Your navigation options - Your trust badges - Your CTA button - Your chat widget You just asked their brain to process seven things simultaneously. When it only came to solve one problem. The decision paradox destroying conversions: Every element in your hero section is a micro-decision. Every micro-decision burns mental energy. Every bit of mental energy spent processing is energy not spent buying. You think you're giving them options. You're giving them homework. The mirror principle nobody understands: Great hero sections aren't showcases. They're mirrors. Your visitor should see themselves, not you. Their problem, not your solution. Their language, not your marketing speak. When someone sees their exact situation reflected back, they lean in. When they see your company presentation, they lean out. The specificity that actually converts: Vague: "We help businesses grow" Specific: "Your competitor's checkout is 3 steps. Yours is 11." Vague: "Revolutionary marketing platform" Specific: "Your email open rates are stuck at 12%" Vague: "Transform your workflow" Specific: "Your team wastes 3 hours a day on status updates" Notice the pattern? You. Your. Your. Not we. Not our. Not us. The uncomfortable truth about award-winning design: That hero section your designer is proud of? The one that won awards? The one with perfect visual hierarchy? It's optimized for other designers. Not for customers. Designers judge clarity of communication. Customers just want to know you understand their problem. Designers appreciate visual balance. Customers appreciate mental space. Designers love showing everything you can do. Customers only care about the one thing they need. What actually works above the fold: One sentence that names their exact pain. Nothing else competing for attention. Space for their brain to process and respond. Not because minimalism is trendy. Because cognitive load is real. The hero section that converts isn't trying to be a hero. It's trying to be a mirror. And mirrors don't need twelve features to show you exactly who you are. Stop building hero sections that showcase your brand. Start building mirrors that reflect their reality. Because the most expensive real estate on your website isn't valuable when it's overcrowded. Even if that crowd is your own content.

How to create a hero image that actually shows the value of your product: Translating a product experience into a simple, scannable visual is hard. But it’s also one of the highest-leverage things you can do. Your hero section is the most valuable real estate you have as a startup. Visitors need to understand, within seconds—SOMETHING your product can do. Not everything. But something. In a perfect world, every person who lands on your site would watch your demo, explore the product, or sign up right away. (Wouldn’t that be nice?) But most won’t even scroll past your hero section. And it’s almost never because the design wasn’t pretty enough. -- The real problem? Your hero is trying to impress instead of explain. Designers default to what looks impressive. But your hero section isn’t for designers—it’s for your customers. Here’s the 4-step process I use to turn a complex workflow into a clear visual: 1. Pick one feature. Start with something concrete—like “sending invoices.” Make it obvious: this is software, and it’s for them. 2. Document the full workflow. Take screenshots like you’re walking someone through it on a live call. Paste them into Figma (or even a Google Doc or sheet). 3. Highlight the key elements in a collage. Crop out the key UI elements: buttons, labels, interactions. You don’t need to show every step; just the parts that matter. 4. Create a clean, focused image. Simplify. Add context where needed. If a button says “Confirm” in your app, maybe here it should say “Send invoice.” This is about clarity—not pixel perfection. More text is okay if it helps people understand. Balance is key. -- This visual isn’t meant to replace your demo. It’s meant to earn the scroll. Or the sign-up. Or the “Book a demo” click. If someone’s shopping for an invoicing tool, but your hero image is an animated dragon… They’re gone. But if you show them something real, something they can understand. Then, they’ll stick around. They’ll explore. They’ll actually give your product a shot. You don’t need a hero section that wins awards. You need one that wins trust. -- Show a feature. Make it clear. And give people a reason to learn more.

Most brands spend 80% of their CRO budget driving traffic. Then send everyone to the same product page. No tests running. No real thought about what happens after the click. That's where the money's going. Here's where I'd start: 1. Your hero image isn't earning its spot. White background, product centered, nothing else. That's not selling — that's just confirming the product exists. Test a lifestyle shot that shows the outcome. What does life look like after they buy this thing? That's the image that converts. 2. Your ATC button is buried on mobile. Pull up your own page on a 375px screen right now. If someone has to scroll to find the add-to-cart, you're bleeding easy revenue. A sticky ATC bar is a one-day build and I've seen it move mobile conversion 8–12%. Just run the test. 3. Your reviews are sitting in the wrong place. "4.8 stars, 1,200 reviews" at the top doesn't move people. Find your most specific, outcome-driven review — the one where a real customer described exactly how it changed something for them — and put it directly under the product title. Not in a carousel. Not at the bottom. Right in the decision zone. 4. Nothing above the fold is handling objections. Shipping timeline. Return policy. Delivery estimate. Buyers are asking these questions the second they land. If they have to hunt for answers, some percentage just leaves. Put it where they're already looking. 5. The description format hasn't been touched. Most brands pick a format — bullets, paragraphs, whatever — and never revisit it. Test leading with the outcome and the problem being solved in the first two lines. Not specs. Not features. The result they actually want. If your product page hasn't changed in six months, this is probably your biggest testing opportunity right now — more than your ads, more than your emails. Pick one. Build it. Ship it this week. What's the one product page test that actually moved the needle for you? Drop it below.

My agency designed hundreds of websites. Some helped raise $10M. Others added $1M+ in MRR. Here are 9 tips to help you design sites that look great and convert visitors into buyers👇 1/ Hero sections Your hero section is like a 3-second job interview. Make it count. You need: - Clear value prop - Instant credibility - One clear next step Your USP should be stupid-obvious, not clever. Users decide to stay or leave faster than you can blink. 2/ Headlines The biggest mistake is using complex jargon. It sounds smart, but doesn't convert. Instead of writing: "Access verified contact details through advanced data matching" We tried: "Find contact info for anyone" Write so a 5-year-old can understand what you do. 3/ Eyebrows and captions They should make the offer feel like a no-brainer. Add what costs you reduce or what pain you remove. "Save 10 hours per week on prospecting" means more than technical feature lists. Great subheadings raise desire and remove objections. 4/ Main CTAs Your button copy should tell users exactly what happens next. Instead of "Get started" use "Start Finding Emails" Instead of "Learn more" use "Book a Call" Clarity drives action better than creativity. 5/ Secondary CTAs Not everyone's ready to commit immediately. Offer a low-commitment option: - Watch demo video - Download free guide - See pricing plans Give value before asking for more commitment. 6/ Visuals should explain and demonstrate Every image you add should either: - Explain what you do - Show your product in action Product mockups, screenshots, or demo videos work best. Let visitors visualize using your product. This converts both users and investors. 7/ Social proof builds instant trust Use: - Customer logos - App store ratings - User testimonials - Usage statistics "1 Million+ Users choose..." reassures visitors they're choosing a proven solution. Also, 3 powerful testimonials > 20 lower quality ones. 8/ Scrolling-inducing patterns Use visual cues that lead eyes downward: - Arrows pointing down - Partially visible content below the fold - Progressive information reveal Goal: make users want to learn more. Keep them engaged beyond the first screen. 9/ Polish the visual details Once messaging works, tighten the design: - One typeface, 2-3 weights maximum - Consistent spacing throughout - Mobile-optimized layouts Good UX gets attention. Good UI keeps it. Your hero section determines if visitors become customers. It's where people decide to engage or bounce. Test multiple versions and let data decide which converts best. The difference between a good hero and great hero can be worth millions in extra revenue. As always, I hope this was helpful. Appreciate all the likes and comments. Enjoy your day! 👋

Your beautiful landing page is likely burning cash Watching conversion rates flatline despite perfect ad targeting is a brutal experience. It feels like pouring water into a leaking bucket. The traffic isn't the problem. The destination is. You need a page that understands human psychology and user behavior. Here are 6 steps to fix the leak and boost conversions: 1️⃣ The "Message Match" Rule If your ad promises a specific benefit, your headline must scream that exact same benefit. A disconnect here kills trust instantly. 🔸 Keep the "scent trail" hot from the ad click to the page load. 🔸 Use the exact same keywords in your ad copy and your H1 tag. 2️⃣ Kill the Fluff Nobody cares about your "world-class solutions." They care about solving their specific pain. 🔸 Write for the skimmers, not the readers. 🔸 Your subheads should tell the full story if read alone. 3️⃣ Proof Over Praise Generic 5-star reviews are invisible to the modern buyer. "Great service!" means nothing. You need specific outcomes. 🔸 Use screenshots of real data or results. 🔸 Highlight testimonials that mention specific numbers (e.g., "Saved me 10 hours a week"). 4️⃣ The 3-Second Visual Test Can a user understand exactly what you sell without reading a single word? If not, your hero image is wrong. 🔸 Show the product in action, not abstract art. 🔸 Use video clips or GIFs to demonstrate the mechanism quickly. 5️⃣ Minimize Risk As Much As Possible Advanced marketers know that friction isn't just about form fields. It is about fear. A standard "money-back guarantee" is the bare minimum. 🔸 Offer a free trial without asking for a credit card. 🔸 Explicitly state what happens after they click the button so there are no surprises. 6️⃣ Ruthless Mobile Speed Fancy animations and heavy scripts look great on your monitor. They destroy conversions on a 4G connection. 🔸 Strip the code down to the essentials. 🔸 If it takes more than 2 seconds to load, you just lost 30% of your revenue. Stop overthinking the colors and start obsessing over the clarity. ♻️ Repost this to save a marketer from burning their budget. P.S. What is the one thing on a landing page that makes you leave immediately?

First impressions are essential. Your portfolio is your first impression. Is it good? What's the first thing a reader sees? • It's not your "about" page (at least it shouldn't be). • It's not a case study. • It's not a list of projects you did. It is an introduction part. A hero section on your website. Usually, a headline, a short paragraph, and a visual. For me, it has always been a pain to figure out what to place there. Here are some tips and examples that could help you. Tips for the headline: 1. Be clear and concise ↳ Your headline should immediately convey who you are and what you do. Avoid jargon and keep it simple. 2. Highlight your unique selling proposition (USP) ↳ What makes you different from other UX designers? This could be a specific skill, a unique approach, or a notable experience. 3. Use action-oriented language ↳ Encourage visitors to take action, whether it's viewing your work, contacting you, or learning more about your services. 4. Incorporate keywords ↳ Use terms that are likely to be searched by your target audience. Remember also to use keywords you have seen on job ads. Tips for the short paragraph: 1. Expand on your headline ↳ Provide more details about what you do, your skills, and your experience. 2. Showcase key achievements ↳ Mention any notable projects, clients, or results. 3. Focus on benefits: ↳ Explain how your skills can help solve potential clients' or employers' problems. 4. Include a Call to Action (CTA) ↳ Guide your visitors to what to do next, whether they want to view your portfolio, contact you, or read more about you. Some examples: Headline: "Crafting user experiences that delight and convert" Paragraph: "With 5+ years in UX design, I create easy-to-use digital experiences that make users happy and help businesses succeed. My portfolio includes successful projects for top clients in different industries. Check out my work to see how I turn design challenges into user-friendly solutions." Headline: "UX Designer specializing in user-centered design solutions" Paragraph: "Using my knowledge of user behavior and design, I create solutions that boost user engagement and satisfaction. I've worked in many sectors and consistently delivered top-notch projects. Check out my portfolio to see the value I can bring to your team." Headline: "Creating seamless and engaging digital experiences" Paragraph: "As a dedicated UX designer, I focus on crafting seamless and engaging user experiences that resonate with the target audience. From initial research to final design, my process is collaborative and data-driven, ensuring that every project is tailored to specific user and business needs. Check out my work, and let's discuss how we can work together." P.S. • Add a high-quality visual or background • Use clear, readable fonts • The headline should stand out • Use enough whitespace, avoid clutter Follow these tips, capture the reader's attention, encourage to explore more.

The first 600 pixels decide everything. Clarity wins, or visitors bounce. The hero section of your SaaS website is your first impression, and for most visitors, it’s also your only shot. They won’t read your blog. They won’t scroll to your product tour. They won’t even 𝑠𝑒𝑒 your pricing page if your hero section doesn’t do its job. That top 600 pixels has to work hard. It needs to tell people what you do, who it’s for, and why they should care. Quickly. Because if a visitor has to guess what your product does or assume it’s not for them, they’re gone. Let’s break down what separates a SaaS hero section that drives conversions from one that quietly repels them: 𝐀 𝐠𝐨𝐨𝐝 𝐒𝐚𝐚𝐒 𝐡𝐞𝐫𝐨 𝐬𝐞𝐜𝐭𝐢𝐨𝐧: → Clearly states what the product does → Calls out the problem or pain it solves → Makes it obvious who it’s for → Has a CTA with purpose and clarity → Uses visuals that support the message, not distract from it 𝐀 𝐛𝐚𝐝 𝐒𝐚𝐚𝐒 𝐡𝐞𝐫𝐨 𝐬𝐞𝐜𝐭𝐢𝐨𝐧: → Uses vague jargon like “empowering innovation at scale” → Tries to be clever instead of clear → Doesn’t say who it’s for or why it matters → Relies on a single CTA like “Learn More” with zero context → Has generic graphics that don’t explain or reinforce the value People don’t scroll when they’re confused. If your hero section doesn’t earn their attention and explain your value in a matter of seconds, you’re not losing traffic. You’re losing opportunity. So before you tweak your colors or redesign the footer, ask yourself: D𝑜𝑒𝑠 𝑦𝑜𝑢𝑟 ℎ𝑒𝑟𝑜 𝑠𝑒𝑐𝑡𝑖𝑜𝑛 𝑚𝑎𝑘𝑒 𝑠𝑜𝑚𝑒𝑜𝑛𝑒 𝑤𝑎𝑛𝑡 𝑡𝑜 𝑘𝑒𝑒𝑝 𝑔𝑜𝑖𝑛𝑔 𝑜𝑟 𝑐𝑙𝑖𝑐𝑘 𝑎𝑤𝑎𝑦? Drop your favorite SaaS hero section in the comments, or one that totally missed the mark. --- Follow Jeff Gapinski for more content like this. ♻️ Share with someone fixing homepage clarity.

What’s the 𝗵𝗶𝗴𝗵𝗲𝘀𝘁 𝗰𝗼𝗻𝘃𝗲𝗿𝘁𝗶𝗻𝗴 𝗵𝗼𝗺𝗲𝗽𝗮𝗴𝗲 𝗵𝗲𝗿𝗼 𝗶𝗺𝗮𝗴𝗲 for B2B SaaS? We analyzed 249 A/B tests and the winner is… 🏆 𝗦𝘁𝗮𝘁𝗶𝗰 𝗜𝗺𝗮𝗴𝗲 𝗼𝗳 𝗣𝗿𝗼𝗱𝘂𝗰𝘁 – 46% win rate (n=75) Helps users understand what you offer in one glance. Use the most relevant screen. Avoid clutter. 🥇 𝗣𝗿𝗼𝗱𝘂𝗰𝘁 𝗔𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻 / 𝗚𝗜𝗙 – 42% win rate (n=23) Works like a quick, silent demo. Keep it short and smooth — no flashy transitions. 🥈 𝗜𝗺𝗮𝗴𝗲 𝗼𝗳 𝗖𝘂𝘀𝘁𝗼𝗺𝗲𝗿 – 42% win rate (n=20) Humanizes tech. Builds social proof. Pair with a logo or 1-line testimonial. Avoid stock vibes. 🥉 𝗩𝗶𝗱𝗲𝗼 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗿 – 36% win rate (n=30) Very low play rates. Too much commitment for top of home. Use below the fold for engaged users. 🚩 𝗦𝘁𝗼𝗰𝗸 𝗣𝗵𝗼𝘁𝗼 𝗼𝗳 𝗛𝗮𝗽𝗽𝘆 𝗣𝗲𝗼𝗽𝗹𝗲 – 35% win rate (n=20) Feels fake. Zero product context. Replace with product images or customers. 🛑 𝗩𝗮𝗴𝘂𝗲 𝗔𝗿𝘁𝗶𝘀𝘁𝗶𝗰 𝗜𝗺𝗮𝗴𝗲𝘀 – 33% win rate (n=20) Confuses visitors. No clarity = no trust. If using art, overlay clear value props. 🚫 𝗣𝗲𝗼𝗽𝗹𝗲 + 𝗣𝗿𝗼𝗱𝘂𝗰𝘁 𝗖𝗼𝗺𝗯𝗼 – 30% win rate (n=55) Competing focal points = cognitive overload. Pick one hero: faces or products. Not both. ⛔ 𝗦𝗰𝗵𝗲𝗺𝗮𝘁𝗶𝗰 𝗗𝗶𝗮𝗴𝗿𝗮𝗺 – 11% win rate (n=6) Overwhelming. Hard. Complicated. Convince your competitors to do this. If users can't grasp your product in 5 seconds, they’re gone. SaaS teams lift CVR 𝟭𝟬–𝟮𝟬% just by fixing the hero. 𝗪𝗵𝗮𝘁 𝗱𝗼𝗲𝘀 𝘆𝗼𝘂𝗿 𝗵𝗲𝗿𝗼 𝘀𝗲𝗰𝘁𝗶𝗼𝗻 𝘀𝗵𝗼𝘄?