Kompas Data
A large-scale data journalism and visualization platform serving millions of readers across Indonesia.
About This Project
Kompas Data is the flagship data journalism platform of Kompas Gramedia — one of Indonesia's largest media conglomerates. The platform bridges the gap between raw data and compelling storytelling, enabling journalists and editors to publish data-rich articles complete with interactive charts, infographics, and embeddable visualizations that reach millions of readers every month.
I joined the team as a Software Engineer & UI/UX Designer in 2021, initially tasked with rebuilding the frontend rendering layer. Over three years, my scope expanded to include system architecture, design systems, and cross-team collaboration with the editorial and data science teams.
The Problem
The core challenge was performance. Kompas Data articles routinely contained 10–20 interactive charts rendered on a single page. The previous system used a monolithic render approach — every chart was rendered client-side on page load, resulting in load times of 8–12 seconds on mid-range mobile devices.
Beyond performance, there was a UX gap: journalists were not technically equipped to build chart configurations manually. The existing tooling required JSON configs written by hand, which created a bottleneck where every article depended on a developer. Scaling content production was impossible under that model.
The team also lacked a unified design system. Each section of the platform had evolved independently, resulting in 4–5 different button styles, inconsistent typography, and conflicting color tokens across the codebase.
How We Solved It
I led a three-phase improvement initiative:
Phase 1 — Performance: Replaced the monolithic chart bundle with lazy-loaded, individually code-split chart components. Charts only initialized when they entered the viewport (Intersection Observer API). This reduced initial page load from 8s to under 2s on 4G connections.
Phase 2 — Editor Tooling: Designed and built a no-code chart configuration interface — a drag-and-drop WYSIWYG tool that let journalists configure bar, line, pie, and map visualizations without writing code. Config outputs were stored as JSON and rendered by a standardized chart renderer on the article page.
Phase 3 — Design System: Consolidated all UI patterns into a shared component library using Vue.js and documented in Storybook. This became the foundation for two other internal KG Media products.
Key Capabilities
Lazy-loaded Interactive Charts
Each chart component loads only when scrolled into view, dramatically reducing initial page weight and time-to-interactive.
No-Code Chart Builder
A drag-and-drop editor allowing non-technical journalists to create and publish data visualizations independently.
Unified Design System
Shared Vue component library with documented tokens, patterns, and guidelines used across 3 internal products.
Real-time Preview
Chart configurations previewed live in the editor as changes are made, with mobile/desktop responsive views.
Embed & Share
Each visualization is embeddable via iframe with automatic responsive sizing for third-party publications.
Analytics Integration
Per-chart engagement metrics tracked — scroll depth, hover time, and interaction events reported to the editorial dashboard.
Under the Hood
React and Vue.js were used side-by-side: React for the article rendering layer and Vue.js for the CMS editor tools. This was a deliberate migration strategy — Vue.js was already established in the codebase, and we introduced React incrementally as new features were built.
Node.js REST API served chart data and article configs. PostgreSQL stored structured content metadata, while chart data payloads were cached in Redis to minimize database reads for high-traffic articles.
Fully containerized with Docker, orchestrated via Kubernetes on GCP. CI/CD pipelines ran on GitLab CI, with automated preview deployments for every pull request.
Impact & Outcomes
Page load time reduced from ~8s to <2s on 4G — a 75% improvement
Editorial chart publication rate increased 4x after the no-code builder launched
Design system adopted by 2 additional internal KG Media products
Monthly active readers grew from 800K to 2.4M during the engagement
Zero-downtime deployments achieved across 3 years of continuous development
What I Learned
This project taught me that performance is a feature — not an afterthought. The most impactful engineering decisions we made were invisible to readers: they simply got a faster, smoother experience. I also learned how valuable it is to design tools for non-technical users; the no-code chart builder unlocked editorial velocity that engineering alone could never have provided.