Vinsen's Portfolio

The Atlas

2026 • PERSONAL •

Redefining a home for the local cafe scene, together with @ngopidiserpong

The Atlas puts the Greater Serpong cafe scene on a map that actually does justice to the places on it, built together with @ngopidiserpong as the community's most trusted guide to South Tangerang's hangout spots.

Where their editorial voice meets the technology, neighborhood cafes get a home worth the visit. Not a directory or an exclusive list, but a curated platform for the places that make the area worth staying in.

Currently live and in partnership with @ngopidiserpong.

VISIT PLATFORM

Year

2026

Scope

Concept & Strategy, Product Design, Brand Design, Visual Engineering

One Tap for Every Detail

Tap or click any pin to pull up everything worth knowing — photos, hours, pricing, ratings, and a direct link to @ngopidiserpong’s review of that spot.

Filters for days

Not everyone has their own choice from the get go, so adding filters based on @ngopidiserpong’s real data helps to narrow down what you want in a spot.

DEALS AND COUPONS

The Atlas lets stores nitpick, customize, and publish their own promotions via a dedicated page.

THE CLAIM FLOW

Browse active deals, hold to claim, and a single-use code appears — ready to show at the cafe. No app download; just open, claim, and go.

Scope

Art Direction, Web design, Motion Design.

Scope

Art Direction, Web design, Motion Design.

Scope

Art Direction, Web design, Motion Design.

DESIGNED BEFORE BEING BUILT

Starting as satellite imagery and modeled into a custom 3D environment with UI elements sitting above it, every pin sits on real-world coordinates so nothing is approximated.

Scope

Art Direction, Web design, Motion Design.

DESIGNED BEFORE BEING BUILT

Starting as satellite imagery and modeled into a custom 3D environment with UI elements sitting above it, every pin sits on real-world coordinates so nothing is approximated.

BRANDING

Independent of any partnership, the logotype, system, and illustrations were all made from scratch designed to carry the brand across future issues and collaborators beyond ngopidiserpong.

EL GATO

Using the stylized cat as a visual companion helps to warm the scene and achieve the “editorial-but-friendly” look.

EL GATO

Using the stylized cat as a visual companion helps to warm the scene and achieve the “editorial-but-friendly” look.

TECHNOLOGY USED TO BUILD

The Atlas runs on React Three Fiber and Three.js for the 3D map, with GSAP handling all interactions and transitions.

Cafe data comes from a static JSON enriched via the Google Places API — photos are hosted locally after to keep runtime costs at zero. The deals system runs on Supabase, with a Google Sheets sync layer so the editorial team can manage content without touching code.

NEXT PROJECT

Apex

NEXT PROJECT