Design of the booking form (popup)

Need within a short timeframe

Technical assignment for the designer: booking form (popup) for the website supertrust.ae

📌 Goal

Develop a convenient and easy-to-use booking form in the form of a popup window, for two services:

    •    Regular cleaning

    •    Deep cleaning

The form should be step-by-step, not overloaded, with an emphasis on mobile UX and in accordance with the brand book. Number of steps — up to 5, the logic adapts based on the selected service.

🖼️ Format

    •    Modal window triggered by the Book Now button

    •    Step-by-step form with "back/forward" switching or progress bar

🧼 Services and calculation logic

1. Regular cleaning

    •    User specifies:

    •    Number of cleaners

    •    Number of hours

    •    Cost = cleaners × hours × rate (rate set by developer)

2. Deep cleaning

    •    User selects:

    •    Number of bedrooms

    •    Cost is calculated based on the number of bedrooms

🧭 Step structure

✅ Step 1: Service selection

    •    Cards:

    •    Regular cleaning

    •    Deep cleaning

    •    Each with a brief explanation below

✅ Step 2: Service details

If Regular cleaning is selected:

    •    Fields:

    •    Number of cleaners (from 1 to 5, selection via buttons or selector)

    •    Number of hours (from 2 to 12, step 1 hour)

    •    Displayed cost (automatically recalculated)

If Deep cleaning is selected:

    •    Fields:

    •    Selection of number of bedrooms (Studio, 1 BHK, 2 BHK, 3 BHK etc. up to 6)

    •    Displayed cost (calculated based on the number of rooms)

✅ Step 3: Contact details

    •    Name

    •    Phone (required field)

    •    Email (optional)

    •    Comment (optional)

✅ Step 4: Time and address

    •    Calendar: date selection

    •    Time: dropdown list/time slots

    •    Address: text line

✅ Step 5: Confirmation and payment

    •    Summary:

    •    Type of cleaning

    •    Specified parameters (cleaners/hours or bedrooms)

    •    Address

    •    Date and time

    •    Total cost

    •    Payment method selection:

    •    Online card

    •    Cash

    •    Button: Confirm Order

🎨 Design

    •    Follow the brand book (colors, fonts, margins, buttons)

    •    Modern, minimalist style

    •    Very important: mobile adaptation

    •    Interactive elements should be large and understandable

🧾 Output from the designer

    •    Layout of all form screens in Figma (or other approved tool)

    •    Ready for handover to developer (export of styles, components, sizes)