Today, I share insights on a critical but often overlooked factor that could be silently undermining your outbound efforts: your website's visual hierarchy.
Let's dive in.
— Kevin
Attio
Brought to you by Attio — the AI-native CRM.
Attio is built to scale with your business from day one. Connect your email and calendar, and Attio instantly builds a CRM that matches your business model — with all your companies, contacts, and interactions enriched with actionable insights.
With Attio, AI isn’t just a feature - it’s the foundation. You can do things like:
* instantly prospect and route leads with research agents
* act on AI insights with Attio’s native call intelligence
* and build Zapier-style AI automations
Industry leaders like Flatfile, Replicate, and Modal are already experiencing what’s next for CRM.
This Simple Design Principle Will Increase Your Website Conversion Rate
Insight from Kevin DePopas—our Chief Growth Officer
First, a confession: I'm not a designer by trade. I've picked up these principles over years tinkering in Figma, Webflow, and countless marketing automation tools, testing what works and what doesn't.
The high-stakes reality of cold outreach
When you're doing outbound sales as an early-stage startup, here's what typically happens:
- You spend hours crafting the perfect cold email
- If it resonates, the prospect clicks through to your website
- In under 10 seconds, they decide whether your company is worth their time
This critical 10-second window is where many startups unknowingly lose potential customers—not because of their product or offering, but because of poor visual hierarchy.
What is visual hierarchy?
Visual hierarchy is how all the pieces of your website are arranged and styled to guide visitors' eyes in a specific order. It uses size, color, contrast, spacing, font choices, weight, and even movement to tell people what to look at first, second, and third—like creating a roadmap for their attention.
When done well, your visitors seamlessly absorb your value proposition and know exactly what action to take. When done poorly, they feel confused and bounce.
Real-world examples: A respectful analysis
I recently received cold emails from two companies that successfully got me to click through. Both are likely doing great work (kudos for getting the cold email opened in the first place!), but their websites could benefit from some visual hierarchy adjustments.
Note: This analysis isn't meant to reflect negatively on these companies whatsoever—I'm merely pointing out potential areas for improvement that could boost their already successful outreach efforts.
Company #1
While the headline is really clear and outcome-focused, there are a few hierarchy issues worth addressing:
- The second line is hard to read against the gradient backdrop
- The embedded video creates a second hero message that pulls attention away from the main header
- The high-contrast white cards below compete for attention with the primary CTA
The result: I feel visually confused about what I'm looking at and where to focus during those critical first seconds.
Company #2
While this site looks cleaner at a glance, the visual hierarchy can be improved:
- Social proof logos placed under the hero header disrupt the typical flow
- Testimonial section is placed before I understand what the product is
- No UI shots to help the viewer glean what the company does
- Long-form paragraph text is hard to scan
The result: I find my eyes bouncing around this page, comprehending very little about the problem they solve and how they solve it.
The fix:
Here's how I would fix this landing page in 5-10 mins, without changing the copy and messaging.
Here's a full video of me editing the new landing page, step by step.
Four principles any non-designer can implement today
1. Size = Importance
The largest text should be your most important message. Your headline should be the largest, followed by subheadlines, then body copy.
2. Contrast creates focus
Elements that stand out visually get noticed first. This applies to color (bright vs. muted), size (large vs. small), and even spacing (isolated vs. grouped). Use contrast to highlight what you want visitors to see first.
3. One primary message per section
Each section should direct users toward a single key takeaway. Multiple competing messages decrease comprehension.
4. Put your product or UI front and center
Visitors want to see what they're getting ASAP. A well-placed product or UI shot can communicate more than paragraphs of text.
For SaaS founders, if you don't show your UI, I assume you're hiding it because it's bad. I'll bounce 99% of the time if there's no UI on your landing page.
The 10-second test anyone can run
- Show someone your homepage for exactly 10 seconds.
- Close it and ask:
- What does this company do?
- Who is it for?
- What action were they supposed to take?
If they can't answer clearly, your visual hierarchy likely needs work. Lack of clear value prop messaging may also be the problem. If you need help with copy and positioning, check out the Demand Curve Growth Program.
BONUS TIPS:
Use Templates (the shortcut to good design)
Imagine going to your first guitar lesson and your teacher tells you to compose an original song. You'd be lost – you don't even know the basic chords yet! That's what it's like trying to build a website from scratch without being a designer. Start by using templates (like beginners play other people's songs). Master fundamental design principles before you consider breaking them.
- Find a template on Figma, Webflow, or Framer that's directionally aligned with your brand
- Use it as the base for how you lay out content on your site
- Change as little as possible (seriously)
Why not change it? Here's another analogy. If I took "Game of Thrones" and started adding random characters or changing major plot points without being a seasoned writer, I'd likely ruin what made it great in the first place.
The same applies to website templates. Professional designers have already solved visual hierarchy problems—trust their expertise. Slot your story into their framework.
Another way to do this is to find a company that has great visual hierarchy and model after them. Take Attio, today's sponsor, their website demonstrates all of the design principles discussed above.
Pro Resource
Check out Relume (relume.io). They have a massive Figma library with hundreds of website components. The components offer a starting point that you can apply your brand colors, font, and copy to.
Remember, the goal isn't to reinvent design—it's to communicate clearly so your potential customers understand your value proposition.
These principles apply beyond websites
If you were wondering, yes, visual hierarchy applies to all your content—emails, pitch decks, ads, resumes, and social posts. Clear visual hierarchy helps people understand your message faster, regardless of the medium.
Before you blame your cold email copy or offer, run a critical eye over your website's visual hierarchy. This simple check could dramatically improve your conversion rates.
For more tactical content like this, follow me on LinkedIn.
—Kevin