Ratu BPJS - The Royal Trust

A web platform for BPJS Health insurance administration services designed specifically for Greater Jakarta residents. Combines premium 'Royal Trust' design with high-conversion strategies to transform traffic into quality WhatsApp leads.

The Challenge

Millions of Greater Jakarta residents face serious challenges in managing their BPJS Health insurance. Accumulated arrears reaching millions of rupiah prevent many families from accessing healthcare services. Complex bureaucratic processes, long queues at government offices, and data synchronization issues with civil registry often become time and energy-consuming obstacles.

For office workers, managing BPJS independently means taking time off work—a luxury not everyone can afford. Meanwhile, elderly individuals and those less tech-savvy often feel overwhelmed by complex online systems. The impact? Delayed healthcare rights, risk of hospital rejection during emergencies, and immeasurable mental burden.

Ratu BPJS emerges as a trusted solution bridging this gap—handling all administrative complexities from A to Z, so people can focus on what truly matters: their family's health.

Core Features

💬

Direct WhatsApp Conversion Engine

Every service button integrates with contextually personalized WhatsApp messages. Users connect directly with admin without filling forms, resulting in higher conversion rates.

📱

Thumb Zone UX Strategy

Mobile-First design with 'Thumb Zone Strategy' ensures all interactive elements are easily reachable by thumb. Floating WhatsApp button with pulse animation attracts attention without disrupting user experience.

👑

Royal Trust Design System

Design system based on color psychology: Blue (Trust/Official), Gold (Premium/Action), Emerald Green (WhatsApp/Health). Creates a professional yet grounded premium impression for the 25-50 age demographic.

🎯

Empathy-First Marketing Flow

Content architecture that starts with user problem validation (Pain Points), then subtly offers solutions. This approach builds trust before the call-to-action.

📍

Local SEO Dominance

On-page optimization for Greater Jakarta local searches with semantic HTML, strategic meta tags, and proper schema structure to appear in search results for Jakarta, Bogor, Depok, Tangerang, and Bekasi areas.

✨

Premium Micro-Animations

Smooth animations using Framer Motion on page transitions, FAQ accordions, and floating elements to create a 'premium' feel and increase user engagement.

Technology Stack

Next.js 16 (App Router) Leverages React Server Components for server-side rendering of SEO-critical content, achieving optimal Google indexing and near-100 Lighthouse Score performance.

React 19 Latest React version with React Compiler feature for automatic rendering optimization and improved concurrent features.

TypeScript Provides strict type safety on service data, WhatsApp messages, and component props, reducing runtime bugs and improving maintainability.

Tailwind CSS v4 Utility-first CSS framework with custom 'Royal Trust' color palette configuration. Uses @theme directive for consistent CSS variables.

Framer Motion Declarative animation library for micro-interactions: accordion expand/collapse, floating button pulse, and smooth page transitions.

Lucide React Icon library with consistent and sharp outline style. Lightweight and tree-shakeable for optimal bundle size.

Plus Jakarta Sans Modern geometric font by Indonesian designers. Suitable for local startups with optimal readability across various device sizes.

clsx + tailwind-merge Library combination for clean className management without Tailwind class conflicts.

Key Advantages

Direct WhatsApp conversion eliminates friction from traditional forms

Mobile-First approach covers 80%+ target users accessing via smartphone

Atomic Design architecture enables easy component scaling and maintenance

Strategic color psychology builds trust while creating urgency

One-page architecture reduces bounce rate and accelerates user journey

Server-side rendering ensures optimal SEO for local business

Barrier-free UX with minimum 16px font for senior user accessibility

Floating CTA with pulse animation increases visibility without being intrusive