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)

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).
Key Pages
Homepage

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

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

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
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.