cleaning-service

byMonish Raj

I am planning to built a website and dashbord for Home service request. Accutaly i like the website "https://www.urbancompany.com" so take this one as a reference Use Black Color gradient theme Satochi Font we are planning to provide Cleaning , Home painting, Ac & Appliance repair, Electrician plumber & carpenter FLow should be - When user click on Cleaning it goes to types (Bathroom , Full home , etc ..) Then there should be display price list. combo list something attractive it should multi select option. after that cart page for overview, promo code. and then payement and confirmation mail. more focus on UX make it more simple steps and more focus to what they wanted. Make it elite style website and use minimal colour.

Home PagePayment PageCart PageCleaning Service Page
Home Page

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 6

System Requirements Document for cleaning-service

1. Introduction

The cleaning-service project aims to develop a premium, modern home services marketplace web application where users can discover, compare, and book trusted professionals for household tasks. The platform will offer services such as cleaning, home painting, AC & appliance repair, electrician, plumber, and carpenter services. The design will be inspired by the Urban Company platform and will feature a clean, minimal, and spacious design with a focus on user experience, simplicity, and directness.

2. System Overview

The system will deliver a web-based platform for users to request various home services. Users can select services, view pricing, and complete transactions through a streamlined process. The platform will focus on user experience, ensuring that the steps from service selection to payment are intuitive and straightforward.

2a. Product Interpretation and Delivery Boundary

The website will be publicly accessible, allowing users to browse and request services. Users will be required to log in when booking a service. The checkout process will include a cart overview, promo code application, and payment confirmation. The system will send confirmation emails upon successful transactions. The design will adhere to a clean and minimal style with specified typography and color palette, ensuring a cohesive and premium aesthetic.

Page 2 of 6

2b. Source Content Inventory

Not applicable as no explicit content_source directive was provided.

2c. Page Content and Component Coverage

Home Page

  • Sticky Header: Includes navigation links to Services, How It Works, Become a Pro, Help, Log in, Sign up, and Book a Service.
  • Hero Section: Features a large lifestyle photograph, a rounded search/booking component, and a trust message.
  • Service Categories: Horizontal navigation with categories such as Cleaning, Handyman, Moving, etc.
  • Featured Service: Large container with lifestyle imagery and service information.
  • Popular Projects: Responsive image-based card grid showcasing various projects.
  • Professional Discovery: Section with professional cards displaying details like photo, name, rating, and availability.
  • Trust Statistics: Soft green background section with statistics on tasks completed, professionals, average rating, and customer satisfaction.
  • Testimonials: Columns or carousel layout with customer reviews.
  • Satisfaction Guarantee: Three-column section highlighting trusted professionals, quality service, and dedicated support.
  • How It Works: Horizontal section with steps on choosing a service, picking a professional, and getting the task done.
  • Get Help Today: Discovery section with service pills.
  • Final CTA: Large section encouraging users to book a professional.
  • Footer: Multi-column layout with links to services, company information, and legal details.

Cleaning Service Page

  • Service Types: Options for Bathroom, Full Home, etc.
  • Pricing and Combos: Display price list and attractive combo offers with multi-select capability.
  • Add to Cart: Button to add selected services to the cart.
Page 3 of 6

Cart Page

  • Overview: List of selected services with pricing.
  • Promo Code: Field to enter and apply promo codes.
  • Proceed to Payment: Button to continue to payment.

Payment Page

  • Payment Options: Various payment methods.
  • Confirmation: Display confirmation message and send confirmation email upon successful payment.

3. Functional Requirements

  • As a user, I should be able to view and select from various home service categories, including Cleaning, Home Painting, AC & Appliance Repair, Electrician, Plumber, and Carpenter. (explicit)
  • As a user, I should be able to select specific types of cleaning services (e.g., Bathroom, Full Home) and view associated pricing and combo offers. (explicit)
  • As a user, I should be able to add selected services to a cart and view an overview of my selections. (explicit)
  • As a user, I should be able to apply promo codes to my cart for discounts. (explicit)
  • As a user, I should be able to proceed to payment and receive a confirmation email upon successful transaction completion. (explicit)
  • As a user, I should be required to log in when booking a service. (explicit)

4. User Personas

  • General User: Individuals seeking home services who will interact with the website to select and purchase services.
Page 4 of 6

5. Core User Flows

  1. Service Selection Flow

    • User visits the Home Page.
    • User selects a service category (e.g., Cleaning).
    • User navigates to the Cleaning Service Page.
    • User selects service types and views pricing/combo offers.
    • User adds services to the cart.
  2. Checkout Flow

    • User reviews selections on the Cart Page.
    • User applies a promo code if available.
    • User logs in to proceed with booking.
    • User proceeds to the Payment Page.
    • User selects a payment method and completes the transaction.
    • User receives a confirmation email.
Page 5 of 6

6. Visuals Colors and Theme

  • Primary Color: #087F5B
  • Dark Green: #056B4C
  • Light Green: #DDF4EC
  • Accent Yellow: #F5C84C
  • Background: #FFFFFF
  • Soft Background: #F7F8F6
  • Text: #17201C
  • Secondary Text: #66736D
  • Border: #E4E9E6
  • Font: Manrope for headings, Satoshi for body text
  • Style: Clean, minimal, premium, and spacious

7. Signature Design Concept

The Home Page will feature a spacious hero section with a large lifestyle photograph on the right and a rounded search component on the left. The design will use a primary green for CTAs and highlights, with a focus on clean and minimal aesthetics.

8. Interaction Model & Motion Direction

  • Interaction Model: Static
  • Motion Tempo: Still
  • Hero Dimensionality: Flat
  • Landing Hero Motion Brief: The Home Page will feature a static hero section with a focus on the service categories, presented in a clean and organized manner.
Page 6 of 6

9. Non-Functional Requirements

  • The website must load within 3 seconds on standard broadband connections. (basic_default)
  • The design must be responsive and accessible on mobile devices. (basic_default)

10. Tech Stack

  • Frontend: React
  • Backend: Python/FastAPI
  • Database: PostgreSQL
  • Deployment: Docker/docker-compose

11. Assumptions and Constraints

  • The website will require user accounts for booking services.
  • The system will rely on third-party payment gateways for transaction processing.

12. Glossary

  • Service Category: A classification of home services offered (e.g., Cleaning, Home Painting).
  • Combo Offer: A bundled service package with a special price.
  • Promo Code: A code that provides a discount on the total purchase amount.
Home Page design preview
Home Page: View service categories
Home Page: Select cleaning category
Cleaning Service Page: Select service type
Cleaning Service Page: View pricing and combos
Cleaning Service Page: Add services to cart
Cart Page: Review cart overview
Cart Page: Apply promo code
Cart Page: Proceed to payment
Payment Page: Select payment method
Payment Page: View confirmation
Home Page design preview
Home Page: View service categories
Home Page: Select cleaning category
Cleaning Service Page: Select service type
Cleaning Service Page: View pricing and combos
Cleaning Service Page: Add services to cart
Cart Page: Review cart overview
Cart Page: Apply promo code
Cart Page: Proceed to payment
Payment Page: Select payment method
Payment Page: View confirmation