← Back to Portfolio
ReactTailwind CSSTanStack RouterViteUI DesignFrontend DevPersonal Project

Marka Promosindo — Souvenir & Merchandise Website

A full marketing website designed and built end-to-end for a Jakarta-based custom souvenir and merchandise business targeting corporate, wedding, and personal event buyers.

Role

UI/UX Designer & Frontend Developer

Timeline

2025

Platform

Web (Desktop & Mobile)

Marka Promosindo homepage

The Brief

Marka Promosindo is a Jakarta-based business specializing in custom-printed souvenirs and merchandise — kipas, tumblers, and goodie bags — for corporate events, weddings, and personal occasions. The business needed a professional marketing website to establish credibility, showcase its product catalog, and convert visitors into WhatsApp inquiries.

Design and build a premium marketing website that feels boutique and trustworthy — one that makes a small souvenir business look as credible as an established brand, and turns product browsing into direct contact.

Visual Direction

The core challenge was tone: souvenir businesses often look generic. The brief was to go in the opposite direction — editorial, premium, and memorable. Every visual decision was made to reinforce the brand's tagline: "Setiap Momen Layak Dikenang" (Every Moment Deserves to Be Remembered).

Dark & Gold
Near-black backgrounds (#111) with a warm gold accent (#C9A96E) — signals premium quality without pretension
Serif + Sans
Cormorant Garamond for display headings, Plus Jakarta Sans for body — editorial feel with strong readability
Warm Cream
Off-white (#FAF9F7) as the body background — softer than pure white, reinforces the boutique warmth
Hover States
Cards lift with translateY(-3px) and gold border on hover — tactile feedback that feels considered, not default

Key Pages

Homepage

Marka Promosindo best sellers dan FAQ section

The homepage is structured to answer the visitor's three questions in sequence: Who is this? (hero + tagline) → Why trust them? ("Kenapa Marka Promosindo?" with 4 trust cards) → What do they do? (6 service cards) → What's popular? (best-seller product grid). A gold marquee strip between sections acts as a brand moment and pacing tool.

Product Catalog

Marka Promosindo product catalog

26 products across 3 categories (Kipas, Tumbler, Goodie Bag) displayed in a filterable grid. Filter tabs — Semua / Kipas / Tumbler / Goodie Bag — let buyers narrow by category without a full page reload. Each card shows the product image, category badge, volume/capacity, price in IDR, and a direct "Pesan Sekarang" CTA linking to the contact page.

Contact & WhatsApp Integration

Marka Promosindo contact page

The contact page uses a split layout — contact details on the left, inquiry form on the right. The form collects name, WhatsApp number, occasion type (Corporate, Wedding, Personal, Other), and a message. A persistent green WhatsApp CTA button in the navbar links directly to a pre-filled WhatsApp message, reducing friction for buyers who prefer not to fill forms.

Key Design Decisions

FAQ as a Trust Mechanism

Six accordion questions cover MOQ, custom design, production timeline (3–14 working days), express orders, and the full ordering process. Positioned next to a "Masih Ada Pertanyaan?" CTA card — so visitors who still have doubts have an immediate escape hatch to contact directly. FAQ reduces pre-sale anxiety, which directly increases conversion.

Mobile-First Navigation

The navbar uses a blur-backdrop effect and collapses to a hamburger on mobile. The hero's 2×2 image grid — visible on desktop — is hidden on mobile to keep the fold clean and the CTA immediately thumb-reachable. Every breakpoint was considered independently, not as a responsive shrink.

Tech Stack

React
Component architecture and state management
Vite
Build tool — fast HMR during development
TanStack Router
File-based routing with type-safe navigation
Tailwind CSS
Utility-first styling with custom design tokens

Outcome

The site is live at marka-promosindo-website.vercel.app, deployed on Vercel. This project demonstrates the full design-to-code pipeline — from visual direction and component design through to production deployment — in a single project.

Unlike my enterprise UX work at BRI where design and development are separate disciplines, Marka Promosindo shows I can own the full stack: brand direction, UI design, component architecture, and deployment — end to end.