Overall Score
Roast by AI is a sharp, well-designed SaaS tool with confident branding, crystal-clear value prop, and smart conversion mechanics—but it's resting on its design laurels while ignoring some critical UX debt and trust-building opportunities.
The Roast
This website is basically that friend who gives you brutally honest feedback but won't show you their own report card. It's beautiful, snappy, and the copy is genuinely witty—but it's also asking you to trust an AI roaster without showing real social proof, and the mobile experience feels like it was designed on a desktop monitor. The irony of a website auditor having a Cloudflare staging URL is *chef's kiss*—at least it's honest.
🎯 Start Here
Trust Signals
Performance
SEO
Mobile
Accessibility
Conversion
Design & UX
Copy & Messaging
Trust Signals
The website leans heavily on brand confidence and product credibility ('AI-powered', 'Claude-backed', 'brutally honest') but provides zero social proof—no testimonials, customer logos, ratings, or usage metrics visible anywhere. The FAQ section hints at legitimacy but isn't designed as social proof. For a SaaS tool asking users to audit their websites, this is a glaring miss.
Issues Found
- No customer testimonials, case studies, or user quotes visible anywhere on the page; all assertions are founder-driven
- No visible social proof metrics (e.g., '10,000 websites audited', 'Used by Figma, Stripe, etc.'); the leaderboard is mentioned but not showcased as a trust signal
- No security/privacy badges, certifications, or trust indicators (e.g., SOC 2, GDPR compliance); only a privacy policy link buried in footer
- Pricing page not visible in screenshots, but no transparent pricing or free trial CTA emphasizes the commitment to user-friendliness
Recommendations
-
Add customer testimonial carousel to hero or below-fold high
Include 2-3 short quotes from real users with name/company/role, emphasizing specific results (e.g., 'Fixed my SEO score from 45 to 78 in 2 weeks'). Display on rotating basis.
-
Display leaderboard highlights as social proof high
Add a 'Recently Roasted' widget showing 3-5 recent audits (domain, score, category) pulled from the public leaderboard to demonstrate active usage.
-
Add trust badges and privacy reassurance medium
Include visible SOC 2 / GDPR compliance badges and a brief 'Your data is safe' statement; link privacy policy prominently in footer.
Performance
The site loads visibly fast on desktop (snappy interactions, smooth scrolls), but the screenshot metadata hints at a 46.5 MB uncompressed payload—likely bloated image assets and/or unoptimized JavaScript. The demo card image and feature illustrations are probably not WebP-optimized, and no evidence of lazy loading on below-fold sections.
Issues Found
- Large uncompressed payload (46.5 MB) suggests images are not optimized (not WebP, no srcset, missing AVIF variants)
- Demo results card mockup on hero appears to be a high-res PNG or raster image instead of SVG—easy win for optimization
- No visible lazy-loading attributes on below-fold images; all illustrations and feature cards likely load on initial page paint
Recommendations
-
Convert images to modern formats with fallbacks high
Replace PNG/JPG assets with WebP + AVIF with PNG/JPG fallbacks; use <picture> elements to serve format by browser support. Target <30 MB total.
-
Implement lazy loading on below-fold assets medium
Add loading='lazy' to all images below the fold and use Intersection Observer API to defer illustration loads until viewport approach.
-
Vectorize or convert demo mockup to SVG medium
The orange/dark-navy demo results card in the hero is a perfect candidate for an SVG mockup or lightweight animated HTML—saves significant bytes.
SEO
Meta tags are present and descriptive, H1 is singular and on-brand, and heading hierarchy is mostly clean—but missing schema markup for SaaS pricing/features, no visible FAQs structured as JSON-LD, and the URL structure reveals a Cloudflare staging domain that will tank SEO if deployed to production.
Issues Found
- URL is a Cloudflare staging subdomain (trycloudflare.com)—this is a massive red flag for SEO and suggests the site may not be fully launched or is a demo
- No visible structured data (schema.org) for SoftwareApplication, PricingTable, or FAQPage to help search engines understand the product
- H2/H3 hierarchy is reasonable but some sections lack H2s (e.g., the three-column feature section 'How It Works' has H3s without a parent H2)
Recommendations
-
Deploy to production domain before SEO push high
Move off the staging URL to your real domain (e.g., roastbyai.com) and set up 301 redirects; Cloudflare staging URLs will not rank and signal incomplete launch.
-
Add SoftwareApplication schema markup high
Embed JSON-LD schema in the <head> defining applicationCategory, offers (pricing), aggregateRating, and featureList to improve rich snippet display.
-
Fix heading hierarchy for 'How It Works' medium
Add an H2 'How It Works' above the three-column feature section (Enter URL, Get Roasted, Improve & Track) to create proper nesting under the H1.
Mobile
The mobile hero is readable and the CTA remains prominent, but the layout becomes cramped below the fold—feature cards stack vertically without visual separation, and the burger menu is visually present but lacks affordance. Touch targets appear large enough, but the overall experience feels less polished than desktop.
Issues Found
- Mobile feature cards ('How It Works' and 'More Than Just Feedback') lack distinct visual separation; content bleeds together without clear background containers or spacing
- Demo mockup card on mobile is either hidden or drastically scaled down; users miss the key visual proof of what the product delivers
- Burger menu icon (top-right) has no label, animation, or hover state; unclear if it's interactive or just a visual indicator
Recommendations
-
Add visual separators to mobile feature stacks high
Wrap each feature card in a colored background container (light beige, light green, light blue) or add a bottom border/divider line to create visual hierarchy.
-
Show demo mockup on mobile with adjusted sizing medium
Reduce the desktop mockup height for mobile (e.g., 250px instead of 350px) to maintain visual prominence while respecting screen real estate; use max-width and aspect-ratio.
-
Improve burger menu affordance and interaction medium
Add visible label (e.g., 'Menu'), animate icon on click (rotate or transform), and include aria-expanded state; ensure tap target is >48x48px.
Accessibility
Strong ARIA attribute count (57) and landmarks are present (nav, main, footer), skip link is included, and form inputs are labeled—but color contrast on some interactive elements may not meet WCAG AA, and the orange-on-dark callout text in the demo card is hard to read for low-vision users.
Issues Found
- Orange text ('#FF6B35') on dark navy background (#1A202C) in demo card ('Your website loads slower...') likely fails WCAG AA contrast ratio (needs ~4.5:1)
- Feature icons (orange, green, blue rounded squares) are decorative but may lack sufficient color differentiation for colorblind users; no additional context provided
- Mobile hamburger menu likely lacks aria-expanded and aria-label attributes to signal state changes to screen readers
Recommendations
-
Fix contrast in demo card feedback text high
Change orange text to white or light gray, or darken the background slightly; verify contrast ratio reaches WCAG AA 4.5:1 minimum using WebAIM or similar.
-
Add screen-reader labels to feature icons medium
Wrap each icon with aria-label (e.g., 'Detailed Scoring feature') or add hidden <span> text to clarify purpose for non-visual users.
-
Enhance mobile menu accessibility medium
Add aria-expanded='true|false' and aria-label='Navigation menu' to hamburger button; ensure keyboard focus is trapped and released properly when toggled.
Conversion
Single, prominent CTA in hero positioned after value prop explanation is textbook SaaS funnel design, and the 'Ready to get roasted?' section near footer re-engages drop-off users. However, there's no email capture or softgate, and the free-tier messaging ('2 free roasts per month') could feel limiting to first-time users unfamiliar with the product.
Issues Found
- No secondary CTA or email capture above the fold—relies entirely on the 'Roast My Site' button; could capture intent-driven visitors with a newsletter or feature announcement opt-in
- Free tier limit ('2 free public roasts per month') is mentioned small and late in the flow; positioning it as a strength ('forever free') over a limitation would reduce friction
- Form input placeholder text ('https://yourwebsite.com') is generic and doesn't reinforce urgency or value (e.g., 'Paste your URL to audit in 60s')
Recommendations
-
Add secondary email capture element medium
Include a 'Get roasting tips by email' checkbox or separate CTA below the hero form to build an audience for product updates and onboarding tips.
-
Reframe free-tier messaging as benefit, not limit medium
Change 'Free · 60 seconds · 2 free public roasts per month, forever' to 'Always free. Public roasts. Upgrade for privacy.' to emphasize permanence and transparency.
-
Upgrade form placeholder and microcopy low
Replace 'https://yourwebsite.com' with 'your-site.com' and add microcopy above the form: 'Paste your URL. Get audited. Get roasted.' to reinforce speed and value.
Design & UX
Bold, cohesive orange-and-dark-navy aesthetic with excellent visual hierarchy and breathing room; the staged demo results card is a smart affordance that shows exactly what users get. Hero-to-CTA flow is buttery smooth on desktop, but mobile layout becomes cramped and the burger menu icon lacks visual feedback.
Issues Found
- Mobile navigation burger menu has no visual affordance (no animation on click, unclear if it expands or navigates away)
- Below-fold white-space sections feel orphaned on mobile—content stacks vertically without clear visual separation between feature blocks
- Feature cards (Detailed Scoring, Action Board, Verify & Level Up) lack hover states or interactive hints on desktop, feeling static
Recommendations
-
Add mobile hamburger menu interactivity high
Implement a smooth slide-out drawer with visual feedback (rotation, color change) when toggled, and ensure it collapses when a link is clicked.
-
Enhance feature card interactivity medium
Add subtle hover effects (shadow lift, icon animation, slight background tint) to the three feature cards under 'More Than Just Feedback' to signal clickability.
-
Improve mobile content density & spacing medium
Add visual dividers (lines, background tints, or increased margin) between stacked sections on mobile to create clearer separation without cramping layout.
Copy & Messaging
Punchy, personality-driven copy that nails the brand voice—'brutally honest friend,' 'loads slower than a sloth on sedatives'—and the value prop is crystal clear in the H1. However, the CTA microcopy is vague ('Roast My Site →') and some deeper pages lack the witty tone that makes the hero so engaging.
Issues Found
- Primary CTA button copy 'Roast My Site →' is generic and doesn't reinforce the value prop (could emphasize speed or honesty)
- Subheading under H1 ('Claude reads your homepage...') buries the actual benefit—could lead with 'Find conversion killers' or 'Get 8 audit scores' instead
- Feature descriptions under 'More Than Just Feedback' are functional but lack the personality and humor of the hero—tone inconsistency
Recommendations
-
Sharpen CTA button copy high
Replace 'Roast My Site →' with 'Get Roasted (Free)' or 'Audit in 60s' to reinforce speed and zero-friction value, not just the action.
-
Reorder subheading for clarity medium
Lead with the benefit, not the tool: 'Get 8 audit scores + a punch list to fix them. Claude reads your homepage like a brutally honest friend.'
-
Inject brand voice into feature descriptions low
Add one witty line or confidence-building detail to each feature block (e.g., 'Action Board: Turn AI roasting into actionable wins. No BS task management.').
Think you can beat 73/100?
Get your site brutally analyzed by the same AI. 8 scores, a punch list of fixes, 60 seconds.