《Concept》 Architecture and design-and-build

Hulma Design+Build

A concept website and back office for a fictional architecture and design-and-build firm in Cebu City. Families send their lot details. The site has a scroll film, per-sqm pricing and a homeowner portal, and a 22-screen back office runs behind it. All sample content.

Concept · 2026

Concept · fictional business · sample data

Hulma home page as a Facebook post: the scroll film hero over a modern tropical house in Cebu.

The problem

A family building on its own lot deals with a design, a permit and a builder. The concept starts from the questions owners keep asking: what has been built, what am I paying for, is it approved, and 'update po?'. The site's answer is one team, not three, with billing tied to what is built.

Research

Desk research, 18 Oct 2026: construction about ₱22–28k per sqm basic, ₱30–40k standard, ₱50–75k high-end. Design fees 8–12% of construction. Downpayment 20–30%, recouped per billing, with 10% retention released at acceptance. The back office's sample plan, ₱3,990 a month, sits below BuildMark's ₱7,500–10,000.

The idea

On this page, the house Hulma builds becomes a film you walk through, then a wall of prints. A drawing wipes into the built house, stage cards stack as the project moves, and the homeowner portal shows the same stages the back office tracks.

The story

  1. Story slide: Hulma cover.
  2. Story slide: the scroll film hero, a house approached from above.
  3. Story slide: the drawing that wipes into the built house.
  4. Story slide: the six stage cards, from line plan to keys.
  5. Story slide: the per-sqm estimate calculator.
  6. Story slide: the projects wall of sample prints.
  7. Story slide: the homeowner portal, showing stage and percent done.
  8. Story slide: back office progress billing, with Send locked until photos are tagged.
  9. Story slide: the Start your project form.

Screens

  • Pricing page as a Facebook post.
  • Process page as a Facebook post.
  • Projects page as a Facebook post.
  • Home page as a vertical story.
  • Home page, carousel slide 1.
  • Home page, carousel slide 2.
  • Home page, carousel slide 3.
  • Home page, carousel slide 4.
  • Home page, carousel slide 5.
  • Home page, scroll image 1, a column of the full page.
  • Home page, scroll image 2, a column of the full page.
  • Home page, scroll image 3, a column of the full page.
  • Back office progress billing screen with the accomplishment table.
  • Back office Today screen.
  • Hulma back office: per-sqm estimates.
  • Hulma back office: the homeowner portal view.
  • Hulma back office: permits and their status.

What it does for the business

It would give a firm one path from inquiry to site visit to estimate, billing weighted by work done and backed by site photos, and a portal where the family approves changes and sends payment proof. Concept only, with sample projects and prices.

Figures marked sample are illustrations, not real results.

How it's built

  • It is the firm's own website, not an AyosGawa product page. Every page leads to one action: send your lot details.
  • Progress billing locks Send until every work item that went up has a tagged site photo. Billing 3 comes to ₱890,673 after downpayment and retention.
  • A proof of payment that is short, like Vincent Sy's GCash for ₱273,200 less, can only be recorded as partial.
  • The hero is a 3-clip scroll film. Without JS or with reduced motion it falls back to a poster and an intro.
  • Form input is escaped, so a name like <b>Nonoy</b> shows as text in the Inquiries screen.

HTML · CSS · JavaScript · GSAP · Google Flow video · ChatGPT images