Vinsen's Portfolio
The Atlas
The Atlas
Designing a public directory that doesn't look like a spreadsheet with fancy fonts.
Designing a public directory that doesn't look like a spreadsheet with fancy fonts.
Designing a public directory that doesn't look like a spreadsheet with fancy fonts.
Ask anyone in Gading Serpong where to get coffee, and they're probably not checking Google. They're scrolling TikTok until an influencer they trust says so. Sure, you can look up "cafes near me good wifi" all day, but even that's still cherry picking blind. Like picking up a stray Chihuahua — you don't know whether it'll bite or not unless you've warmed up to it.
That's where @ngopidiserpong comes in: the locally trusted middleman with real eyes for curation, no influencer theatrics. 300+ cafes, personally visited, quietly pulling 170k+ active users in five months off nothing more than a borrowed Google Maps sharing feature, with none of the tools an actual platform needs.
And there's my door: I designed and built the platform that answers "what if I don't want to gamble on an IG reel for my next destination?".
ROLE
ROLE
Product Design, Brand Design, Illustration, and Front-End
SCOPE
0 → 1 product built with real partner community
DESIGNED IN
DESIGNED IN
Figma
BUILT WITH
BUILT WITH
Claude Code, React Three Fiber, Three.js, Supabase
SO, WHAT IS IT?
The Atlas is essentially a 3D rendering of the Greater Serpong cafe scene itself.
The Atlas is essentially a 3D rendering of the Greater Serpong cafe scene itself.
The Atlas is essentially a 3D rendering of the Greater Serpong cafe scene itself.
It's built off real satellite data, so it's mostly accurate to the real world. Here's how it actually works, step-by-step:
Here's how it actually works. Tap to reveal the steps:
It's built off real satellite data, so it's mostly accurate to the real world. Here's how it actually works, step-by-step:
01
View every cafe that @ngopidiserpong has personally curated and in places that reflect their real-life location.
Opening the map
02
Filter by tags such as price, mood, and hours based on real visitation data. This is where you know if the place has good wifi or not.
03
See a place you like? Check the vibe, menu, ratings, and @ngopidiserpong's own review. You can bookmark and make your own list too, if you like.
04
The app's partners publish their promotions directly here. Hold to claim, and redeem them at said cafe for use.
05
Try out a new spot that you found on the app, and more!
01
View every cafe that @ngopidiserpong has personally curated and in places that reflect their real-life location.
Opening the map
02
03
04
05
THE CHALLENGE
THE CHALLENGE
Do we replace the scroll, or work alongside it?
Do we replace the scroll, or work alongside it?
Do we replace the scroll, or work alongside it?
As it stands, the market's discovery on this topic runs on two distinct systems: UGC (user-generated content: Tiktok, IG reels, etc.) and organic search through the likes of search engines. These two, in fact, do not talk to each other.
As it stands, the market's discovery on this topic runs on two distinct systems: UGC (user-generated content: Tiktok, IG reels, etc.) and organic search through the likes of search engines. These two, in fact, do not talk to each other.
And here's the middleground: @ngopidiserpong, as an established voice within the region that curates cafes on a daily basis, serves as the bridge. 28k+ followers across 3 social media channels with tonal delivery that's more magazine than a reel.
What's left is for the product to give that trust the proper structure, so we can combine that discoverability and validation within one motion.
And here's the middleground: @ngopidiserpong, as an established voice within the region that curates cafes on a daily basis, serves as the bridge. 28k+ followers across 3 social media channels with tonal delivery that's more magazine than a reel.
What's left is for the product to give that trust the proper structure, so we can combine that discoverability and validation within one motion.
THE APPROACH
THE APPROACH
An elevated coffee map, with an editorial touch and spatial layers.
An elevated coffee map, with an editorial touch and spatial layers.
An elevated coffee map, with an editorial touch and spatial layers.
My aim was to emulate trust via the feel of actual publications in general. I took reference to some real-life brands like Kinfolk, Cereal, and The Gourmand, and adapted key factors that make them feel curated when reading.
Below is the pipeline I used throughout the project: It's a similar flow to how I work with enterprise and startups through owning the direction and quality-proofing. The latter is equally important since while the design is all me, execution was done through AI instead of human engineers. Which means there's a lot of QA tickets for myself.
My aim was to emulate trust via the feel of actual publications in general. I took reference to some real-life brands like Kinfolk, Cereal, and The Gourmand, and adapted key factors that make them feel curated when reading.
Below is the pipeline I used throughout the project: It's a similar flow to how I work with enterprise and startups through owning the direction and quality-proofing. The latter is equally important since while the design is all me, execution was done through AI instead of human engineers. Which means there's a lot of QA tickets for myself.
In reality, there's a lot of back and forth going on — but you get the idea.
In reality, there's a lot of back and forth going on — but you get the idea.
Scope
Scope
Concept & Strategy, Product Design, Brand Design, Visual Engineering
Role
THE MAP
I sourced the model from satellite data through Blender's OSM plugin (Blosm), manually reworked the missing areas, and separated the locations of cafes and public areas with unique tags.
THE MAP
I sourced the model from satellite data through Blender's OSM plugin (Blosm), manually reworked the missing areas, and separated the locations of cafes and public areas with unique tags.
DESIGNED BEFORE BEING BUILT
DESIGNED BEFORE BEING BUILT
As a refresher, the manifesto is to anchor trust through creative and editorial philosophies. This is expressed via deliberate design decisions emulating real-life novelty items like tearable coupons, bookmarks, and more — all of which starts in Figma.
The reason to go into 3D.
The reason to go into 3D.
The reason to go into 3D.
Coming from a designer's background, I was initially considering a 2D map since it's closer to what I do best. However, there are some concerns with it, particularly around the topics of accuracy, maintenance, and considering my position as a solo dev in this project — my sanity six months from now.
Eventually, the decision came down to maintainability as we agreed to update our database at least once a month, since the area is known for having new spots pop up on a very frequent rate.
Coming from a designer's background, I was initially considering a 2D map since it's closer to what I do best. However, there are some concerns with it, particularly around the topics of accuracy, maintenance, and considering my position as a solo dev in this project — my sanity six months from now.
Eventually, the decision came down to maintainability as we agreed to update our database at least once a month, since the area is known for having new spots pop up on a very frequent rate.
To help with that, I optimized everything. I reduced the polygon count to the extent of its legibility, made a version of the map that only loads on low-spec Android and Apple devices (since they're notoriously fickle in processing limits), then balanced the post-processing filters to still have personality while not sacrificing performance.
To help with that, I optimized everything. I reduced the polygon count to the extent of its legibility, made a version of the map that only loads on low-spec Android and Apple devices (since they're notoriously fickle in processing limits), then balanced the post-processing filters to still have personality while not sacrificing performance.
THE BRAND
THE BRAND
Everyone needs a friend. Even users.
Everyone needs a friend. Even users.
Everyone needs a friend. Even users.
The discovery was in place, and the research was done. But the brand still needs a voice, one that can convey the warm spirit that makes the whole product approachable, but still carries the trust.
The discovery was in place, and the research was done. But the brand still needs a voice, one that can convey the warm spirit that makes the whole product approachable, but still carries the trust.
And this is where this guy comes in.
Meet el gato
Meet el gato
El Gato is a friend, but he's picky.
El Gato is a friend, but he's picky.
El Gato is a friend, but he's picky.
I decided on a cat companion as they don't lead you like a dog would. It's alongside you, sometimes trailing ahead or behind, but never by a leash. If it chooses to be somewhere, it does so because there's an involuntary reason: maybe it's comfortable and warm, but maybe it's just a preferred space to snug. But nobody's paying the cat to be there.
I decided on a cat companion as they don't lead you like a dog would. It's alongside you, sometimes trailing ahead or behind, but never by a leash. If it chooses to be somewhere, it does so because there's an involuntary reason: maybe it's comfortable and warm, but maybe it's just a preferred space to snug. But nobody's paying the cat to be there.
THE VISUAL IDENTIFIER
THE VISUAL IDENTIFIER
El Gato exists on most pages as a deliberate signal that a human created and curated these. He appears on specific functional spots that doesn't disrupt you, — mostly cues on some pages, but also empty states, loading screens, error pages, and more.
THE MAP THAT LIVES AND BREATHES
THE MAP THAT LIVES AND BREATHES
The result is a responsive web app that renders a 3D map of the Greater Serpong cafe scene.
The result is a responsive web app that renders a 3D map of the Greater Serpong cafe scene.
The result is a responsive web app that renders a 3D map of the Greater Serpong cafe scene.
It's made to feel like how a friend tells you of a new place that just popped up on the block. The accurate representation of the area allows it to be easily navigable and scannable, and every cafe info is ready to present itself to you whenever you feel like browsing.
It's made to feel like how a friend tells you of a new place that just popped up on the block. The accurate representation of the area allows it to be easily navigable and scannable, and every cafe info is ready to present itself to you whenever you feel like browsing.
COVERING EVERY BASE
A big part of the live product that I wanted to achieve was how it's ported well within mobile devices, since that's where the bulk of users are going to be accessing it from. Using sidebar UI helps in this regard, and the responsiveness is managed by moving important buttons near to where the human fingers are supposed to be.
A big part of the live product that I wanted to achieve was how it's ported well within mobile devices, since that's where the bulk of users are going to be accessing it from. Using sidebar UI helps in this regard, and the responsiveness is managed by moving important buttons near to where the human fingers are supposed to be.
THE FEATURES
THE FEATURES
Simple and easy to follow
Simple and easy to follow
Simple and easy to follow
The three main things to do here was to browse and filter, collect deals, and save. Using the editorial principles, we wanted to make this like a magazine "issue", so less of a map product and more like that column you see on old magazines — warm, human, but very informative.
The three main things to do here was to browse and filter, collect deals, and save. Using the editorial principles, we wanted to make this like a magazine "issue", so less of a map product and more like that column you see on old magazines — warm, human, but very informative.
HIGHLIGHTING LOCALS
HIGHLIGHTING LOCALS
Places inside the app can list deals through us to highlight them. We're giving a chance for spots to be more known via these features. And to help, there's also an internal interface shared to cafes that partner with us to help monitor what they release to the public.
Places inside the app can list deals through us to highlight them. We're giving a chance for spots to be more known via these features. And to help, there's also an internal interface shared to cafes that partner with us to help monitor what they release to the public.
THE FUTURE
THE FUTURE
The Atlas is still growing, with more features and improvement planned for the future.
The Atlas is still growing, with more features and improvement planned for the future.
We did a mass survey for the app's own targets during the first launch. With an 87.5% finding the app easy to use, 87.5% discovering new cafes, but only 58.3% finding the page load speed quick (mainly from Mac devices specifically), The Atlas remains focused on improving these numbers.
As for the Greater Serpong cafe scene itself, the area is continuously growing in terms of new shops. The Atlas will be there with more and more features that hopefully light something up within the scene, especially for older and more obscure spots. The important thing to acknowledge is: it's live, still early, and still mine — and it's proof that a map can live alongside social media feeds because it gives people a reason to stop.
We did a mass survey for the app's own targets during the first launch. With an 87.5% finding the app easy to use, 87.5% discovering new cafes, but only 58.3% finding the page load speed quick (mainly from Mac devices specifically), The Atlas remains focused on improving these numbers.
As for the Greater Serpong cafe scene itself, the area is continuously growing in terms of new shops. The Atlas will be there with more and more features that hopefully light something up within the scene, especially for older and more obscure spots. The important thing to acknowledge is: it's live, still early, and still mine — and it's proof that a map can live alongside social media feeds because it gives people a reason to stop.
