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
- High friction in intake — long forms and unclear next steps led to drop-off.
- Time-sensitive triage — legal team needed quick visibility into high-priority cases (e.g., severe mould, no heating).
- Consistency — answers given to claimants needed to match firm messaging and legal disclaimers.
- 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:
-
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.
-
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.
-
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.
-
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
- Measurement plan — define target conversion metrics (CPL, form completion %, escalation rate) and instrument event tracking.
- Ongoing training — schedule fortnightly review of chat transcripts to refine prompts and retrieval content so Sarah’s answers remain accurate and compliant.
- A/B testing — try different landing messages and form lengths to optimise conversion.
- 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.