PRODUCT DESIGN · FRONT-END BUILD · LAUNCH

KalaKnot

Designing and shipping a block-print necktie brand — from the first Figma frame to a live, order-taking storefront. I designed it, then taught myself to build and ship it.

ROLEProduct & UX Design · Front-end · Launch

TEAMLianne (design + build) · Astle Colaco (product & ops)

TIMELINEFeb 2025 – Launch

TOOLSFigma, Next.js, Sanity, Razorpay, Supabase, Resend, Vercel

Visit kalaknot.com ↗

01 The Context

Astle wanted to start a necktie business with a twist — every tie block-printed, using a 400-year-old Indian craft where designs are hand-carved into wooden blocks and pressed onto fabric. He had sourcing, manufacturing and operations covered. What the idea needed was a home online that treated the craft with the respect it deserved: clean, considered, and easy to buy from.

How do you sell a slow, handmade craft through a fast, modern storefront — without cheapening either?

02 My Role

I owned the digital product end to end — from the first sketch to the live checkout. That meant not just designing the experience, but building and launching it. Astle brought the craft, the sourcing and the operations; I gave it a home online.

03 Process

Three moves took KalaKnot from an idea to a storefront taking real orders.

01 · RESEARCH & DIRECTION

Studied how craft and heritage brands present themselves online — and where most fall short: weak photography and cluttered checkouts that fight the product. Aligned with Astle on the brand's voice, the product range, and what “premium but honest” should actually feel like.

02 · DESIGN

Defined the brand foundations — a palette of ink, paper, terracotta and ochre, a display + body type pairing, and a hand-drawn क mark. Then designed every screen for mobile and desktop in Figma: home, catalog, product, cart, checkout and order lookup — built around the product photography so the craft stays the hero.

Ink#1E1A17

Paper#F3ECE0

Terracotta#B65C3E

Ochre#D79A3B

03 · BUILD & SHIP

Rather than hand off a static design, I shipped it live. Working with AI assistance (Claude Code) to close my engineering gaps, I built the whole stack myself.

STOREFRONT

Next.js + TypeScript

CATALOG

Sanity headless CMS — products update without touching code

PAYMENTS

Razorpay, orders stored in Supabase (Postgres)

Transactional email via Resend

DEPLOY

Vercel, continuous deployment

→

One example: giving every order a human-readable KN-#### number, generated so two orders can never collide — then wiring the whole flow through payment verification into a confirmation email.

04 The Outcome

A live storefront taking real orders at kalaknot.com — with a brand experience that lets the craft, not the interface, do the talking.

05 What I Learned

You don't need to know how before you start.

I came in as “just the designer” and left having built the whole thing — by being willing to be bad at it first.

Building end to end changed how I design.

I now have a real feel for what's cheap, what's expensive, and where a clean handoff saves a developer a week.

Craft is craft.

Whether it's a carved wooden block or a payments integration, the details are the work.