Chai Mahel

A brand website for a chai franchise, where a cup of chai pours as you scroll.

Fig. 01 — The chai palace at night, before the first scroll.

Fig. 01 — The chai palace at night, before the first scroll.

Overview

A night-time palace that opens as you scroll.

About

A demo site, designed and built for a chai franchise brand: a phone-first site where the chai pours, fills and steams as you scroll, with a franchise enquiry page.

Where it is live

A demo on the web, at chai-mahel.pages.dev (opens in a new tab).

What we built

A home page that tells its story as you scroll
A franchise enquiry form
An Instagram page
An English and Hindi switch

Scroll story

The chai pours as you scroll.

Scroll, and the palace gate opens. Keep going, and a copper pot pours a glass of chai until it is full and steaming.

The gate opens

The Chai Mahel home page on desktop as it scrolls: the palace gate opening, with light glowing through the doorway and the headline fading. — Fig. 02 — The first scroll fades the headline and opens the gate.

The pour

Fig. 03 — The pour, step by step, on desktop and on a phone.

Fig. 03 — The pour, step by step, on desktop and on a phone.

Home page

Flavours, then five steps to a grand opening.

Below the pour come the flavours, each glass filling as the row slides past, and the five steps from a first enquiry to opening day.

Flavours

Fig. 04 — A palace of flavours: each glass fills as the row slides past.

Fig. 04 — A palace of flavours: each glass fills as the row slides past.

Five steps

Fig. 05 — From enquiry to grand opening, in five steps.

Fig. 05 — From enquiry to grand opening, in five steps.

Enquiry

An enquiry form, styled as ordering a chai.

A glass beside the form fills as each part is completed. Sending pours the last of it and shows a receipt with a pre-filled WhatsApp message.

The whole Chai Mahel enquiry page on desktop, from the headline Pour your own Tea Palace. through the four parts of the form, half filled in, to the Pour my enquiry button. The glass beside the form is half full. — Fig. 06 — The whole enquiry page, half filled in. Scroll inside the window.

The enquiry page on a phone: the headline Pour your own Tea Palace. with call and WhatsApp buttons. — Fig. 07 — The enquiry page on a phone.

The enquiry form on a phone: a progress bar at 50 percent, and the first question with A full outlet picked. — Fig. 07 — The enquiry page on a phone.

Next project

UI/UX design

Dabba

A restaurant ordering experience, designed end to end.

UI/UX design

Have a project in mind?

Tell us what you want to build, and we will reply with the next steps.

Start a project See our work