M Card Redesign
Concept Redesign of the M Card Membership Website
A concept redesign of The Mall Group's M Card website. The work is shown here for portfolio purposes only.
Tools behind the build
The core stack used to shape the product experience, interface, and implementation.
A concept redesign of M Card — The Mall Group's membership and loyalty card — reimagined as a single-page marketing site plus a multi-page experience with the polish of a luxury brand website. Every piece of content — promotions, card types, privileges, and group services — is pulled from the real mcardmall.com, and the whole site is fully bilingual (Thai/English). The goal: turn an information-heavy membership site into an experience that's beautiful, fluid, and lets you find any privilege in a few clicks.
The Problem
- The old site was built to "display information" — dozens of promotions, cards, and services scattered across many menus, hard to find, with no search.
- Too many card types (M Card, Prestige, Scarlet, Platinum, four M Power tiers, five Bangkok Bank M Visa cards) and users struggled to understand the differences.
- The design didn't convey the brand's premium feel and had no systematic bilingual support.
- No micro-interactions or sense of flow to make users want to keep scrolling.
Core Features
- Global Search — a full-screen overlay with real-time search across the whole site (promotions, privileges, cards, services), with category filters, keyboard navigation (↑↓/Enter), match highlighting, and links both in-site and out to the real mcardmall pages.
- Floating glass-pill navbar — a translucent floating bar with a "Services" dropdown (M Travel / M Junior Club / M Story), route-based active states, and client-side multi-page routing (7+ pages).
- Hero carousel — real campaign banners auto-advancing with a Ken-Burns zoom and progress dots.
- Every card type — four membership tiers (real imagery + a shine sweep on hover), M Power's White/Red/Blue/Black tiers by spend, and five Bangkok Bank M Visa cards with their privileges.
- Content sections — promotions (1:1 grid), lifestyle (eight immersive tiles), M Dining (scrollable carousel), a brand wall, and M Travel/Junior/Story.
- Fully bilingual — every string switches TH/EN through a central dictionary.
Tech Stack
- Framework — Next.js 15 (App Router, RSC) + React 19 + TypeScript
- Animation — GSAP (ScrollTrigger, useGSAP) + Lenis (smooth scroll)
- Styling — pure custom CSS (no UI framework), CSS variables + clamp() fluid typography
- Typography — DB Airy Std (self-hosted via @font-face)
- i18n — dynamic [locale] route + middleware redirect (TH/EN)
- Data pipeline — Playwright scraping real data from mcardmall.com for exact accuracy
- Verification — type-check (tsc) + live preview + DOM assertion
