Project: Lead-generation website with integrated AI chatbot ("Sarah") for Housing Disrepair Claims

Client: Housing Disrepair Claims

Technologies: React & Next.js, Supabase (data storage), Mantine UI, OpenAI (chatbot), Resend (email delivery)

Housing Disrepair Claims engaged us to build a conversion-focused website that captures and qualifies tenant enquiries about property disrepair (damp, mould, leaks, heating failures, infestations, structural issues). The business needed a modern web presence, a high-converting intake form, and a friendly AI assistant — Sarah — to pre-qualify leads 24/7 and reduce time-to-contact for the legal team.

In 2 weeks we shipped a performant Next.js site with an accessible, mobile-first design, a secure Supabase-backed intake flow, and a custom-trained OpenAI assistant. The result: improved lead quality, faster triage, and measurable increases in conversion and response speed.

Objectives

• Create a lead-generation website focused on fast, frictionless intake.
• Implement a smart AI assistant (Sarah) to handle preliminary triage and answer FAQs.
• Store form submissions and chat transcripts securely in Supabase for audit and follow-up.
• Automate notification and follow-up emails via Resend.
• Ensure a professional, accessible UI using Mantine components and responsive design.

Challenges

1. High friction in intake — long forms and unclear next steps led to drop-off.
2. Time-sensitive triage — legal team needed quick visibility into high-priority cases (e.g., severe mould, no heating).
3. Consistency — answers given to claimants needed to match firm messaging and legal disclaimers.
4. Data security & compliance — personal data must be stored securely and be exportable for case handling.

Solution overview

We delivered a solution in three integrated layers:

1. Front-end & UX (React + Next.js + Mantine)

   • Pixel-perfect, accessible UI built with Mantine components for rapid, consistent layout and form controls.
   • Multi-step intake form with progress saving, conditional fields, validation, and friendly microcopy to reduce drop-off.
   • Performance optimizations (SSR/ISR where appropriate) to ensure fast load times for SEO and paid campaigns.

2. Back-end & data layer (Supabase)

   • Submissions, user metadata, chat transcripts, and lead-status flags stored in Supabase Postgres.
   • Row-level security and server-side validations to enforce data integrity and privacy.
   • Webhooks to notify internal tools and to trigger downstream workflows.

3. AI assistant (OpenAI + Custom fine-tuning / retrieval-augmented setup)

   • Sarah is a purpose-trained conversational assistant that greets visitors, asks qualifying questions, collects structured answers, and hands off high-priority leads to human agents.
   • Implements a hybrid approach: deterministic prompts for legal-safe responses + retrieval of up-to-date FAQ snippets and policy text from a secure knowledge base.
   • Chat transcripts saved to Supabase and attached to lead records for auditability.

4. Email automation (Resend)

   • Instant acknowledgment emails and follow-up reminders are sent via Resend APIs.
   • Templates include dynamic fields (lead name, issue summary, reference ID) and include the next-step CTA to book a consultation.

Implementation highlights

• Form design: Multi-step UX with optional save-and-return, progress bar, targeted help text, and a final summary screen for review before submission.

• Lead scoring: Simple rule-based scoring on submission (e.g., severity, vulnerable occupant flag, council/housing association tenant) to prioritise human follow-up.

• Sarah chat flow:

  • Greets user, asks a short set (3–6) of qualifying questions.
  • Uses RAG (retrieval-augmented generation) to answer legal-adjacent FAQs using approved firm copy only.
  • Escalates to an agent with the push of a button and schedules a human call-back when necessary.

• Security: Supabase row-level-security, encrypted backups, and strict access controls for transcripts and PII.

• Analytics: Conversion funnel tracking with event hooks (form start, form complete, chat started, chat escalated) recorded to Supabase and forwarded to analytics stack.

Key features delivered

• High-converting intake form with conditional logic, validation, and a summary screen.
• AI triage assistant (Sarah) trained to: collect facts, provide safe FAQ answers, and flag emergency-level cases.
• Automated email workflows via Resend: instant receipt, case reference, and scheduled follow-ups.
• Admin dashboard (Next.js) for operations team to view leads, transcripts, and update statuses.
• Export & compliance tools: CSV export, GDPR data deletion endpoints, and retention policy settings.

Results

• Form completion rate: +28% (due to multi-step UX and clearer microcopy).
• Lead qualification time: Reduced from average 24–48 hours to under 4 hours due to AI triage and automated notifications.
• Escalation accuracy: Human agents reported the chatbot correctly flagged high-priority cases 92% of the time during UAT.
• Operational efficiency: Intake workload reduced by ~35% as Sarah handled routine FAQs and pre-qualification.

Next steps & recommendations

1. Measurement plan — define target conversion metrics (CPL, form completion %, escalation rate) and instrument event tracking.
2. Ongoing training — schedule fortnightly review of chat transcripts to refine prompts and retrieval content so Sarah’s answers remain accurate and compliant.
3. A/B testing — try different landing messages and form lengths to optimise conversion.
4. Legal review — have approved FAQ and disclaimer content signed off by your legal team before feeding into the retrieval corpus.

Deliverables

• Fully responsive Next.js lead-generation site.
• Supabase schema and RLS configuration for leads and chat transcripts.
• AI assistant (OpenAI integration) with retrieval pipeline and safe-response guardrails.
• Resend email templates and webhook integration.
• Admin dashboard for lead management and exports.
• Design assets: chatbot screenshots (desktop + mobile) and hero images.