System Requirements Document (SRD)

Project Name: azure-insurance
Prepared For: Saphal Joshi
Country: Nepal (NP)
Version: 1.2
Date: 2025

1. Introduction

This System Requirements Document (SRD) outlines the design, functional, and technical requirements for the azure-insurance project — a customer-facing website for Anwar Insurance, a franchisee insurance agency. The website is intended to serve end customers looking to explore, understand, and initiate the process of obtaining insurance policies.

The document serves as the primary reference for designers, developers, and stakeholders involved in building and maintaining the platform. It captures all functional requirements, visual design direction, user personas, and technical specifications needed to deliver a polished, trustworthy, and conversion-optimized insurance website.

Saphal, this document reflects your vision of a warm, minimal, and approachable digital presence for Anwar Insurance — one that builds trust with customers from the very first scroll.

2. System Overview

The azure-insurance website is a static-to-lightly-dynamic marketing and lead generation website for Anwar Insurance. It targets individual end customers who are seeking insurance coverage and want to understand their options before committing.

The website will feature:

• A compelling hero section to capture attention
• Trust-building sections (Why Choose Anwar, About Anwar)
• Policy coverage information
• A simplified 3-step quoting process walkthrough
• Social proof via reviews and testimonials
• Clear calls-to-action (CTAs) throughout
• A complete footer with navigation and contact details

The system is not a full insurance management platform — it is a marketing and lead generation website that guides customers toward initiating contact with an Anwar Insurance agent.

3. Functional Requirements

Story Points

• As a Customer, I should be able to view a hero section that clearly communicates what Anwar Insurance offers and prompts me to take action.
• As a Customer, I should be able to read about why I should choose Anwar Insurance over competitors in a dedicated section.
• As a Customer, I should be able to browse the different policy coverages offered by Anwar Insurance.
• As a Customer, I should be able to learn about Anwar Insurance's background, mission, and values in an About section.
• As a Customer, I should be able to understand the quoting process through a clear 3-step walkthrough:
  • Step 1 — Consultation Call: I can learn that the process begins with a personal consultation call with an agent.
  • Step 2 — Select a Policy: I can see how an agent helps me choose the right policy based on my needs.
  • Step 3 — Finalize & Get a Quote: I can understand how the final quote is prepared and delivered to me.
• As a Customer, I should be able to read reviews and testimonials from existing Anwar Insurance customers.
• As a Customer, I should be able to interact with a clear Call-to-Action (CTA) that prompts me to get in touch or start the quoting process.
• As a Customer, I should be able to navigate the website using a footer that includes links, contact information, and other relevant details.
• As a Visitor, I should be able to view the website on any device (mobile, tablet, desktop) with a fully responsive layout.
• As a Visitor, I should be able to navigate between sections smoothly using anchor links or a sticky navigation bar.

4. User Personas

4.1 End Customer (Primary User)

• Description: An individual or family seeking insurance coverage for health, life, auto, home, or other needs.
• Goals: Understand available policies, trust the brand, and initiate the quoting process easily.
• Pain Points: Confused by complex insurance jargon; wants a simple, human-first experience.
• Behavior: Browses on mobile, skims content, responds to social proof and clear CTAs.

4.2 Prospective Customer (Visitor)

• Description: Someone who has heard of Anwar Insurance and is visiting the website to evaluate whether to proceed.
• Goals: Quickly assess credibility, understand offerings, and find contact information.
• Pain Points: Skeptical of insurance companies; needs trust signals and transparency.
• Behavior: Reads testimonials, checks the About section, and looks for easy ways to reach out.

4.3 Insurance Agent / Admin (Internal)

• Description: An Anwar Insurance agent or internal staff member who may manage content or respond to leads generated by the website.
• Goals: Receive qualified leads from the website's CTA forms or contact prompts.
• Pain Points: Needs leads to be clearly organized and actionable.
• Behavior: Does not interact with the public-facing website directly but benefits from its lead generation capability.

5. Visuals, Colors, and Theme

Design Philosophy

The website should evoke a sense of warmth, trust, and simplicity. The aesthetic is minimal and clean — avoiding clutter while using rich tones to communicate reliability and approachability. The design should feel like a premium boutique insurance experience, not a corporate giant.

Color Palette

Usage Guidelines

• #232A40 (Deep Navy Slate): Used for the navbar, hero background, footer, and primary buttons.
• #F5EFE6 (Cream Beige): Used as the background for cards, panels, testimonial blocks, and policy coverage tiles.
• #FDFAF6 (Warm White): Used as the main page background for sections like About and How It Works.
• #C9A84C (Muted Gold): Used for accent lines, icon highlights, step numbers in the quoting process, and hover states.
• #1C1C2E (Charcoal Ink): Primary body text and headings.
• #8A8A9A (Soft Ash): Subheadings, captions, and secondary text.

Typography

• Headings: Playfair Display — elegant, serif, conveys trust and heritage.
• Body: Inter — clean, modern, highly readable sans-serif.
• Accent/Labels: DM Sans — friendly and approachable for CTAs and step labels.

Tone & Mood

• Warm, minimal, and human-first.
• Avoids cold corporate blues or aggressive reds.
• Feels like a trusted local advisor, not a faceless corporation.

6. Signature Design Concept

✦ "The Warmth Map" — A Living, Breathing Hero Experience

Concept: The homepage hero section features a softly animated topographic map rendered in the primary Deep Navy Slate (#232A40), with glowing contour lines that pulse gently in Muted Gold (#C9A84C) — as if the landscape itself is alive and breathing. This is not a photograph or a stock image. It is a custom SVG/canvas animation that gives the impression of warmth radiating from within the earth — a metaphor for protection, coverage, and security from the ground up.

What the User Sees:

• On page load, the hero fades in with a slow, cinematic reveal — the topographic lines draw themselves from left to right, like a map being sketched in real time.
• The headline "Protection That Feels Like Home" types itself in Playfair Display, letter by letter.
• Subtle hover effects on the CTA button (Amber Glow #E0B55A) make it feel tactile and inviting.
• Micro-interactions: As users scroll, the map subtly shifts perspective, creating a dynamic sense of depth.

Why It Works: This design is bold, memorable, and instantly communicates warmth and trust. It sets the tone for the rest of the website, making visitors feel secure and intrigued.

7. Non-Functional Requirements

• Performance: The website must load within 3 seconds on a standard 4G connection.
• Accessibility: WCAG 2.1 AA compliance for color contrast, keyboard navigation, and screen reader support.
• Responsiveness: Fully responsive design for mobile, tablet, and desktop devices.
• SEO: Optimized for search engines with meta tags, alt text, and structured data.
• Security: HTTPS encryption and secure handling of contact form data.
• Scalability: Designed to handle up to 10,000 monthly visitors without degradation in performance.

8. Tech Stack

Frontend

• React for Web

Backend

• Python