Vinsen's Portfolio
The Atlas
Redefining a home for the local cafe scene, together with @ngopidiserpong
Redefining a home for the local cafe scene, together with @ngopidiserpong
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.
Year
2026
Scope
Concept & Strategy, Product Design, Brand Design, Visual Engineering
One Tap for Every Detail
One Tap for Every Detail
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.
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.
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
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.
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
DEALS AND COUPONS
The Atlas lets stores nitpick, customize, and publish their own promotions via a dedicated page.
The Atlas lets stores nitpick, customize, and publish their own promotions via a dedicated page.
The Atlas lets stores nitpick, customize, and publish their own promotions via a dedicated page.
THE CLAIM FLOW
THE CLAIM FLOW
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.
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.
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
Scope
Concept & Strategy, Product Design, Brand Design, Visual Engineering
Role
Scope
Scope
Concept & Strategy, Product Design, Brand Design, Visual Engineering
Role
DESIGNED BEFORE BEING BUILT
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.
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
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.
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.
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
EL GATO
Using the stylized cat as a visual companion helps to warm the scene and achieve the “editorial-but-friendly” look.
Using the stylized cat as a visual companion helps to warm the scene and achieve the “editorial-but-friendly” look.
TECHNOLOGY USED TO BUILD
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.
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.
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.
