URBAN XXV

URBAN XXV is my own thing — a Vietnamese niche-perfume brand built on one idea: a fragrance is a place you can wear. The debut NYC collection maps three scents to three New Yorks — Brooklyn, Central Park, 5th Avenue — with a discovery set to lower the barrier to a first sniff. This case study is about the rebuild: the new Next.js storefront, currently in its final pre-launch pass before it replaces the old site at theurban25.com. The brand, the design, and the code are all mine.

The idea: a scent map of New York

Perfume unfolds adventure. That's the line, and the product is built to earn it. Each fragrance is pinned to a location and a mood — Brooklyn is rebellion and freedom, Central Park is nature breathing inside concrete, 5th Avenue is quiet, expensive difference. You're not buying "a woody amber"; you're buying a neighbourhood. Hong Kong is the collection teased next, which means the whole thing had to be built to grow.

Designing the brand before the build

I designed the brand first and let it drive every screen. Each scent gets its own world colour — a deep navy (#0C1159) for Brooklyn, forest green (#0E3533) for Central Park, burgundy (#601119) for 5th Avenue — set against ivory rather than stark white, with near-black ink for type. Montserrat carries the interface; Playfair Display in italic carries the romance of the tagline. The reference point was the editorial restraint of the high-end fragrance houses — lots of air, photography doing the talking, nothing shouting. I wrote it down as a small system so a new product page inherits its world instead of being styled by hand.

The storefront, in Next.js

The rebuild runs on Next.js 16 (App Router) with React 19, Tailwind v4, and Framer Motion. Product and collection pages are statically rendered, so they're fast and fully legible to crawlers on first load. The commerce front end is real: a client-side cart (React Context) with a slide-in drawer, quantity controls, a free-shipping threshold, VND formatting via Intl, and toast feedback — plus a collection browser, product pages with an image carousel and related-product rail, and an editorial About page. It's image-forward and mobile-first, because that's where this audience lives.

What's done, and what's next — honestly

This is pre-launch, and I'd rather be straight about the line. The NYC storefront is feature-complete — home, collections, product detail, cart — and that's the half a customer falls in love with. The next phase is the commerce back half: a real checkout with Vietnamese payments (VietQR / SePay), a Sanity CMS so the catalogue isn't hardcoded, and VI/EN bilingual. I sequenced it on purpose — ship the brand experience first, wire the money in second. On SEO the same logic holds: the foundation is in (Vietnamese-localised metadata, static rendering), and the structured data and sitemap land with the CMS phase rather than being faked now.

Where it stands

The rebuild is in its final pass and deploys to theurban25.com. It's the most end-to-end thing I've made: I drew the brand, designed the pages, and shipped the code — a marketer's project that happens to be a real Next.js storefront. The fun part is still ahead, when the NYC bottles go live and the scent map starts filling in.