System Requirements Document (SRD)

Project Name: spicy-website

1. Introduction

The spicy-website project aims to deliver a modern, premium, high-trust multi-page website UI for OBSURV Building Surveyors, a UK-based residential surveying company. OBSURV specializes in providing detailed property surveys to homebuyers, ensuring they make confident decisions before purchasing. The website will reflect the company's expertise, attention to detail, and commitment to quality service, while generating direct enquiries and building trust with its target audience.

This document outlines the system requirements for the spicy-website project, ensuring alignment with Sachin's vision and business goals.

2. System Overview

The spicy-website will serve as the primary digital platform for OBSURV Building Surveyors, targeting property buyers in the UK. It will feature a clean, modern, and professional design with trust-focused UI elements, spacious layouts, and strong call-to-action buttons. The website will be optimized for mobile responsiveness, fast loading, and SEO, ensuring high visibility and user engagement.

Key objectives:

• Generate direct enquiries from property buyers.
• Build trust through authority signals (e.g., RPSA regulation, testimonials).
• Improve Google visibility through SEO-friendly structure.
• Encourage visitors to request a quote via strategically placed CTAs.
• Provide a visually engaging and modern homepage with refined hierarchy and sections.

3. Functional Requirements

As User:

• I should be able to navigate the website easily via a sticky header with clear menu items.
• I should be able to request a quote using a prominent "Get a Quote" button.
• I should be able to view detailed information about each survey service.
• I should be able to access testimonials and reviews to build trust.
• I should be able to find areas covered by OBSURV Building Surveyors.
• I should be able to contact the company via an enquiry form or call button.

As Admin:

• I should be able to update service pages with new information.
• I should be able to manage testimonials and reviews.
• I should be able to add or modify areas covered.
• I should be able to view and respond to enquiries submitted via the contact form.
• I should be able to selectively trigger SRD regeneration for specific sections.

4. User Personas

Admin

• Role: OBSURV staff managing website content and enquiries.
• Needs: Easy-to-use CMS for updating service pages, testimonials, and areas covered.

User

• Role: Property buyers, first-time buyers, property investors, buyers of older homes.
• Needs: Clear information about survey services, trust signals, and easy access to quotes.

Guest

• Role: Visitors exploring OBSURV services without immediate intent to purchase.
• Needs: Informative content and trust-building elements to encourage future engagement.

5. Visuals Colors and Theme

Color Palette

• Primary Color: Dark Blue (#00274D) – conveys professionalism and trust.
• Secondary Color: White (#FFFFFF) – ensures clean and spacious layouts.
• Neutral Color: Light Grey (#F5F5F5) – adds subtle contrast for backgrounds.
• Accent Color: Bright Blue (#007BFF) – highlights CTAs and interactive elements.

Typography

• Headings: Modern bold sans-serif (e.g., Montserrat or Open Sans Bold).
• Body Text: Clean readable sans-serif (e.g., Roboto or Lato).
• Hierarchy: Large headings with comfortable line spacing for readability.

6. Signature Design Concept

Interactive Blueprint Homepage with Enhanced Visual Hierarchy

The homepage will feature a dynamic blueprint aesthetic, resembling architectural drawings, with refined sections and a modern visual hierarchy. Upon landing, users will see a pencil-sketch animation of a house being "built" in real-time, symbolizing OBSURV's detailed approach to property surveys.

Details:

• Hero Section: A large animated blueprint of a house fades into a professional image of a surveyor inspecting a property. The headline and subheadline will be prominently displayed with clear CTAs ("Get a Quote" and "Speak to a Surveyor").
• Trust Bar: Icons and credibility indicators will appear as "stamped approvals" on the blueprint, reinforcing trust.
• Services Overview: Service cards will feature hover animations, icons, and concise descriptions, arranged in a grid layout for easy navigation.
• Why Choose OBSURV Section: Feature blocks will use modern card designs with subtle shadowing and hover effects to emphasize key benefits.
• Process Section: A step-by-step visual process with numbered icons and smooth transitions will guide users through the survey process.
• Client Reviews: A testimonial slider with star ratings and user photos will add a personal touch.
• Micro-interactions: Hovering over menu items will reveal subtle "sketch" effects, while CTAs like "Get a Quote" will pulse with a bright blue glow.
• Transitions: Smooth scrolling transitions mimic the movement of a drafting table, giving users a tactile, engaging experience.

This unforgettable design will immediately communicate OBSURV's expertise, precision, and trustworthiness, while ensuring a visually engaging experience.

7. Non-Functional Requirements

• Performance: Pages must load within 2 seconds to ensure user retention.
• Scalability: The website should support future additions, such as a blog or live chat.
• Accessibility: Ensure compliance with WCAG 2.1 standards for accessibility.
• Security: Protect user data with SSL encryption and secure enquiry form submissions.
• Localization: Content tailored for UK audiences, including British English spelling and terminology.

8. Tech Stack

Frontend

• React for Web

Backend

• Python
• FastAPI

Database

• MySQL (preferred for structured data like enquiries and service details)

AI Tools

• GPT 5.2 for user-friendly responses (e.g., FAQ automation).

Local Orchestration

• Docker
• docker-compose

Server-Side Orchestration

• Kubernetes

9. Assumptions and Constraints

• Assumptions:

  • Users will primarily access the website via desktop and mobile devices.
  • OBSURV staff will manage content updates via a CMS.

• Constraints:

  • The website must adhere to UK regulations for data protection (GDPR).
  • OBSURV branding must remain consistent across all pages.

10. Glossary

• RPSA: Residential Property Surveyors Association, the regulatory body for OBSURV.
• CTA: Call-to-Action, a button or link encouraging user interaction.
• WCAG: Web Content Accessibility Guidelines, ensuring websites are accessible to all users.
• SEO: Search Engine Optimization, improving website visibility on search engines.
• SRD Regeneration: A feature allowing selective re-run capability for specific sections of the System Requirements Document.

This document provides a comprehensive roadmap for the spicy-website project, ensuring alignment with Sachin's vision and OBSURV's business goals.