Why Your Startup Website Isn't Converting

Key Concepts

• Framer: A leading website design platform.
• Growth as a Service (GaaS): A model where companies provide services to accelerate growth, often utilizing AI.
• AI Agents: AI-powered tools used for tasks like customer outreach, research, and content creation.
• User Experience (UX): The overall experience a user has while interacting with a website or product.
• Call to Action (CTA): A prompt encouraging users to take a specific action (e.g., "Book a Demo").
• Visual Hierarchy: The arrangement of elements on a page to guide the user's eye and emphasize important information.
• A/B Testing: Comparing two versions of a webpage or element to see which performs better.
• Conversion Rate Optimization (CRO): The process of increasing the percentage of website visitors who complete a desired action.
• Brutalism (in design): A style characterized by raw, minimalist aesthetics and often unconventional layouts.

Website Reviews: A Detailed Analysis

This discussion features Yorn Van Djk, CEO and co-founder of Framer, reviewing user-submitted websites built on the platform. The review focuses on design, UX, and effectiveness of messaging.

1. Lumari – AI Platform for Procurement

Main Points: Lumari’s website is visually busy with numerous animations and icons. While the core concept (AI for procurement) is clear, the abundance of movement is distracting. The “Book a Demo” CTAs are visually lost due to the extensive use of orange. The site lacks concrete examples of the product in action, relying heavily on abstract graphics.

Specific Details:

• Animations: Excessive animations detract from the message. Recommendation to tone them down.
• CTAs: Two “Book a Demo” buttons blend into the orange color scheme. Suggestion to use a single, prominent CTA (potentially black) and reconsider the generic phrasing.
• Value Proposition: The initial messaging is high-level and doesn’t immediately convey the product’s benefits.
• Tabbed Content: Content hidden within tabs is unlikely to be seen by most users. A scrolling-linked tab system is mentioned as a potential improvement.
• Integration Logos: The “ticker effect” animation of integration logos is too fast and lacks interactivity. Suggestion to slow it down and allow users to click for more information.

Technical Terms:

• Ticker Effect: An animation where elements move horizontally across the screen.
• CTA (Call to Action): A button or link designed to prompt a specific user action.

Key Argument: The website prioritizes visual flair over clear communication and tangible product demonstration.

Quote: “I don't know if the conversion on that generic sort of um CTA [‘Book a Demo’] is ever that great.” – Yorn Van Djk

2. A.Lie – AI Presentation Creator

Main Points: A.Lie’s website showcases parts of the product, offering a better understanding of its functionality. However, the hero section simplifies the product too much, and the rainbow background is distracting. The tabbed interface is well-implemented but could benefit from screenshots of the actual product.

Specific Details:

• Product Demonstration: Showing parts of the product (slide templates) is a positive aspect.
• Hero Section: Simplification of the product in the hero section is a missed opportunity to showcase its capabilities.
• Tabbed Interface: The tabbed layout is visually appealing with large, readable text.
• Rainbow Background: The background color is distracting and lacks a clear container.
• Product Hunt Mention: The site highlights its recent recognition on Product Hunt and positions itself against Gamma.

Technical Terms:

• Hero Section: The prominent section at the top of a webpage, typically used to convey the main value proposition.

Key Argument: While visually appealing, the website needs to better demonstrate the product’s core functionality and avoid distracting design elements.

Quote: “I do really like that bar at the top. Upgrade to pro and get a free 30-minute session to perfect your deck.” – Demonstrating a strong CTA.

3. Juicebox – AI Recruiting Platform

Main Points: Juicebox’s website stands out with its unique and modern aesthetic. The messaging is clear, and the use of recognizable company logos builds trust. However, the logo (emoji) feels disconnected from the enterprise-focused messaging. The overall design is visually strong but lacks a sense of human connection.

Specific Details:

• Aesthetic: Distinct and modern design with attention to detail.
• Messaging: Clear positioning as an AI recruiting platform for modern companies.
• Social Proof: Logos of well-known companies build credibility.
• Logo: The emoji logo feels incongruous with the enterprise focus.
• Visuals: Lack of human faces or imagery creates a distant feel.

Technical Terms:

• Brutalism: The design style employed by Juicebox, characterized by raw and minimalist aesthetics.

Key Argument: Juicebox has a strong visual identity and clear messaging, but needs to balance its modern aesthetic with a more human touch to resonate with its target audience.

Quote: “It feels very distant from being a people solution right it's helping me hire someone but it's very black and white and the hints of color there pretty sparse purple little bit of blue and then the name for me with the logo is that that feels probably the most disconnected from from the solution that it's trying to be.” – Yorn Van Djk on the disconnect between the design and the product’s purpose.

4. Leaping AI – Voice AI Call Center Automation

Main Points: Leaping AI’s website effectively communicates its value proposition (AI-powered call center automation). The animations and immersive design elements are well-executed. However, the initial layout feels more consumer-focused than enterprise-focused, and the demo experience could be improved.

Specific Details:

• Animations: Pulsing background and interactive elements effectively guide user attention.
• Demo: The interactive demo with “Alex” is a strong feature.
• Layout: The initial layout feels more consumer-oriented, despite the enterprise focus.
• Messaging: Clear and concise messaging about the product’s benefits.
• Feature Showcase: The website gradually reveals the product’s features through scrolling.

Key Argument: Leaping AI’s website is well-designed and effectively showcases its product, but could benefit from a more enterprise-focused visual presentation.

Quote: “This is our first video, so let's check this out.” – Highlighting the importance of video content in demonstrating product value.

5. The Hog – Growth as a Service

Main Points: The Hog’s website is visually overwhelming and lacks clarity. The typography is inconsistent, the layout is cluttered, and the messaging is confusing. The logo (a pig) and the name are unconventional and may not resonate with the target audience.

Specific Details:

• Typography: Inconsistent font choices and excessive capitalization.
• Layout: Cluttered and overwhelming design with too much information.
• Messaging: Confusing and unclear value proposition.
• Logo: The pig logo feels disconnected from the “Growth as a Service” concept.
• Spacing: Inconsistent spacing between words and elements.

Key Argument: The Hog’s website suffers from poor design choices and a lack of clarity, hindering its ability to effectively communicate its value proposition.

Quote: “This feels at the first step is like I I don't really know what this is.” – Yorn Van Djk on the initial confusion caused by the website’s design.

Synthesis/Conclusion

The design review highlights the importance of clarity, simplicity, and tangible product demonstration in website design. Successful websites (like Juicebox and Leaping AI) prioritize clear messaging, visually appealing aesthetics, and effective use of animations. Conversely, websites that are cluttered, confusing, or lack concrete examples (like Lumari and The Hog) struggle to effectively communicate their value proposition. The review emphasizes the need for A/B testing, user feedback, and a focus on the user experience to create websites that convert visitors into customers. A key takeaway is that even visually striking designs must prioritize clear communication and a user-centric approach.