A comprehensive frontend prototype demonstrating a streamlined will drafting workflow system for Forbes Kirby, designed to transform estate planning practice through AI-powered automation and client self-service capabilities.
Visit the prototype at: http://localhost:3000
- Client Portal: Click "Client" on homepage → Experience client journey
- Admin Dashboard: Click "Admin" on homepage → Manage clients and appointments
- Solicitor Interface: Click "Solicitor" on homepage → Review AI drafts and manage cases
- Paralegal Review: Click "Paralegal" on homepage → Quality assurance and compliance checking
This prototype showcases a complete will drafting workflow that:
- Reduces administrative time by 65%
- Streamlines client intake through online self-service
- Automates document drafting with AI assistance
- Ensures quality through intelligent review processes
- Improves client experience with real-time progress tracking
- ✅ Online registration and onboarding
- ✅ Document upload for ID verification
- ✅ Real-time progress tracking
- ✅ Draft will review and approval
- ✅ Secure messaging with solicitors
- ✅ Appointment booking system
- ✅ Admin dashboard with client management
- ✅ Solicitor case review and AI draft approval
- ✅ Paralegal quality assurance and compliance checking
- ✅ Automated workflow coordination
- ✅ Performance metrics and reporting
- ✅ Intelligent will drafting from consultation notes
- ✅ Clause verification against precedent library
- ✅ Legal compliance checking
- ✅ Tax planning suggestions
- ✅ Quality assurance automation
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS v4
- Icons: Lucide React
- Animations: Framer Motion
- UI Components: Headless UI
├── app/ # Next.js App Router pages
│ ├── client/ # Client-facing pages
│ │ ├── dashboard/ # Client portal
│ │ └── onboarding/ # Registration flow
│ ├── staff/ # Staff interfaces
│ │ ├── admin/ # Administrative dashboard
│ │ ├── solicitor/ # Solicitor workflow
│ │ └── paralegal/ # Quality assurance
│ └── demo/ # Interactive demo page
├── components/ # Reusable React components
├── lib/ # Utilities and business logic
│ ├── context/ # React context providers
│ ├── data/ # Mock data and types
│ └── utils.ts # Helper functions
└── types/ # TypeScript type definitions
- ✅ Complete UI/UX for all user roles
- ✅ Realistic data and workflows
- ✅ Interactive demonstrations
- ✅ Professional Forbes Kirby branding
- ✅ Mobile-responsive client onboarding
- ✅ Role-based navigation and permissions
- ❌ No real backend integration
- ❌ No actual document generation
- ❌ Simulated AI responses only
- ❌ No real authentication
- ❌ No actual file uploads
- ❌ No email notifications
- Node.js 18+
- npm or yarn
# Navigate to the project directory
cd "Will Drafting Workflow Prototype"
# Install dependencies
npm install
# Start development server
npm run devVisit http://localhost:3000 to view the prototype.
Use these credentials to test different user perspectives:
| Role | Password | Description | |
|---|---|---|---|
| Client | client@demo.com | demo | Client portal experience |
| Admin | admin@demo.com | demo | Administrative dashboard |
| Solicitor | solicitor@demo.com | demo | Case management interface |
| Paralegal | paralegal@demo.com | demo | Quality assurance workflow |
- Start at homepage to see overview and value proposition
- Click demo account buttons for instant access
- Use role switcher in navigation to move between perspectives
- Explore workflow timeline to understand process flow
- Visit
/client/onboardingfor registration experience - Complete 4-step onboarding process
- Access dashboard to track progress
- Review draft documents and communicate with solicitors
- Admin: Manage clients, view metrics, schedule appointments
- Solicitor: Review AI drafts, add notes, approve/request changes
- Paralegal: Quality check documents, verify compliance, approve final versions
- Primary:
#1e3a5f(Professional navy) - Secondary:
#d4a574(Warm gold accent) - Success:
#22c55e(Green for completions) - Warning:
#f59e0b(Amber for attention) - Error:
#ef4444(Red for issues)
- Font: Geist Sans (system fallbacks)
- Hierarchy: Clear heading structure with proper contrast
- Accessibility: WCAG compliant color ratios
- Registration → Online form + ID upload (5 min)
- Consultation → Automated booking + questionnaire (30 min)
- Drafting → AI generates will from notes (2 min)
- Review → Paralegal + client approval (1 day)
- Execution → Signing appointment + delivery
- Intake → Admin processes new registrations
- Meeting → Solicitor conducts consultation
- Generation → AI creates draft will
- Review → Solicitor reviews and approves
- Quality Check → Paralegal verifies compliance
- Client Approval → Client reviews and approves
- Completion → Final document preparation
- Backend API integration
- Real document generation
- Email automation system
- Digital signature integration
- Document management system
- Payment processing
- Multi-document support (trusts, LPAs)
- Advanced AI capabilities
- Client portal enhancements
- Mobile applications
- Third-party integrations
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
This prototype is designed to gather stakeholder feedback on:
- User Experience: Is the workflow intuitive?
- Feature Completeness: Are key features represented?
- Visual Design: Does it reflect Forbes Kirby's brand?
- Value Proposition: Are efficiency gains clearly demonstrated?
For questions about this prototype:
- Development Team: Ollie Randall, Matt Lim
- Project Stakeholders: Mitch Tolcon, Stefan Del Pizzo
Note: This is a demonstration prototype showcasing the proposed Forbes Kirby will drafting workflow. All data is simulated and no real legal documents are generated.