mossa | Matcha Café Website & Ordering in Framer

mossamatcha.framer.website: build a drink, add a tin to your order and go through checkout.

mossa is an iced matcha bar and tea shop on Al Wasl Road, Dubai. Ceremonial grade matcha from Uji, eleven drinks, three things to take home, open 7am to 10pm. The website has one job: get people from "that looks good" to an order at the bar in as few steps as possible, without losing the calm of a small matcha counter.

mossa is a self-initiated concept brand by Theepa Studio. The site is a working Framer build.

Scope: brand direction, UX & UI design, Framer development, interactive drink builder, shop and checkout. 5 pages, desktop and mobile.

A dark moss green and a pale matcha lime carry the whole site, with a tall serif for headlines and a plain sans for everything you need to read. The photography stays close to the drink: ice, milk and matcha mid-swirl.

The heart of the site. Pick a drink, then milk, size, sweetness, ice and extras, and the glass fills layer by layer as you go. The card tells you where you are ("Half a glass of matcha so far. Next, choose a milk.") and the price updates with every choice, so ordering feels like making the drink rather than filling in a form.

The same matcha whisked at the bar, packed the day you order. One product per card, a short line on what it is, the price and two clear actions.

The Ceremonial tin page explains where the matcha comes from and how it tastes, then ends with "How to use it": grams, water temperature and how long to whisk.

One checkout for drinks and tins together: change a drink or the quantity in place, choose pickup at the bar or delivery in Dubai, add your details and pay at the counter or on delivery. The confirmation greets you by name and repeats the full order.

Most orders start on a phone on the way to the bar, so every page is designed for mobile first: the builder stacks the glass above the choices, and Order and Menu stay in reach at the top.

The About page tells the story behind the name: moss, the green that grows slowly in shade, the same way the leaves for the matcha are grown.

Website design and Framer development by Theepa Studio. Live site: mossamatcha.framer.website