《Concept》 Fit-out and renovation change orders

AyosGawa Variations

A one-page site and a 21-screen demo desk for a fictional AyosGawa product that turns a foreman's Taglish voice note into a priced change order the client approves with one tap. For Philippine fit-out contractors. Sample data only.

Concept · 2026

Concept · fictional business · sample data

Variations home page as a Facebook post: the whole landing page in columns.

The problem

On a fit-out job the client asks for extras on site, and the foreman agrees by voice. The change is rarely written down or priced, so it turns into a dispute at handover. Leads from Facebook, Messenger and walk-ins also end up spread over a page and an Excel sheet, and some get lost.

The idea

On this page, a voice note becomes an approved change order. The foreman records a Taglish note and photos. AI drafts the lines from the contractor's price list and flags what it can't price. The office checks it, and the client approves with one tap. Every inquiry also lands in one lead list.

The story

  1. Cover slide for AyosGawa Variations.
  2. Before and after slide 1 of the Variations site audit.
  3. Before and after slide 2 of the Variations site audit.
  4. Before and after slide 3 of the Variations site audit.
  5. Before and after slide 4 of the Variations site audit.
  6. The demo desk's variation review screen on a phone.

Screens

  • Variations home page as a vertical story.
  • Variations home page, carousel slide 1.
  • Variations home page, carousel slide 2.
  • Variations home page, carousel slide 3.
  • Variations home page, carousel slide 4.
  • Variations home page, carousel slide 5.
  • Variations home page, carousel slide 6.
  • Variations home page, carousel slide 7.
  • Variations home page, scroll image 1, a column of the full page.
  • Variations home page, scroll image 2, a column of the full page.
  • Variations home page, scroll image 3, a column of the full page.
  • Variations home page, scroll image 4, a column of the full page.
  • The Today screen of the fit-out demo desk.
  • The schedule screen of the fit-out demo desk.
  • The variation review screen, where a flagged line locks Send.
  • The progress claims screen of the fit-out demo desk.

What it does for the business

If this were a real product, extras would be priced and approved before the work is built, then added to the next progress claim. The handover date moves with the change, and the office stops arguing over what was agreed on site.

Figures marked sample are illustrations, not real results.

How it's built

  • AI drafts the variation from the foreman's voice note, priced only from the contractor's own price list. Anything it can't price is flagged, never guessed.
  • The LED line in the demo is flagged, so Send stays locked until someone prices it. The human stays in the loop.
  • The client approves from a Viber or SMS link with one tap. No app, no login.
  • Changing the crew-day rate re-prices unsent drafts. A sent variation keeps the rate the client saw.
  • The page works without JavaScript. The voice-note demo and the four-stage track use radio buttons, checkboxes and :has().

HTML · CSS · JavaScript · Scroll-driven CSS · ChatGPT images