How the why become what resonates. Product design, creative direction and growth, from Bandung, Indonesia. A twenty-seven page portfolio presented as a book.
No 0.01 — Indonesia Stock Exchange, 2025
Indonesia Stock Exchange
@2 025 Role Timeline Scope Product Design User Experience & User Interface January to May 2025 Two connected applications Indonesia Stock Exchange Rebuild how Indonesia's stock exchange delivers its market data. Two applications, one system, and the handoffs that hold it together. End to end. The user needs, the flow architecture, the full UI. Context The old system had grown fragmented. Inconsistent navigation, unclear errors, manual work, modules that did not speak to each other, inside a system a national exchange runs on. This was never a cosmetic fix. It was a full rebuild across two applications and three sets of people, without losing the rigor finance demands.
The People Behind
@2 025 Indonesia Stock Exchange The People Behind Three people run this system from the inside. Budi enters and validates client records. He needs a flow that stops a bad submission before it becomes someone else's problem. Mutia is an approver. She needs the queue to flag what is incomplete, before it reaches her. Everything a client submits lands on one of these three desks. That is the constraint the design had to answer. Dimas holds the keys. Roles, permissions, overrides. He needs to see the whole system at once.
The Flows
@2 025 Indonesia Stock Exchange The Flows Registering does not make you a licensee. Neither does buying. Subscription Product Information details Fill PIC Data Fill Billing & Address Upload Constitutive Document Rejected Fill PIC Data Fill Billing & Address Upload Agreement Approval Upload Constitutive Document Approval is the seam. Both paths stop there, and neither moves again until someone inside says yes. Yes Subscribe Start Invoice End Start Choose Product An account is created. The account is approved. A product is purchased. A subscription is signed. Only the last one changes what you are. Data Ready Historical Data Request Data Needed Two paths, and they are almost the same shape. Same forms, same documents, same approval. Only one extra step separates them.
The Decisions
@2 025 Indonesia Stock Exchange The Decisions The rebuild had to start from people, not from what the system inherited. Two sides, one system. What a licensee submits becomes someone else's queue, so both sides had to be designed against the same moment. Internal External Every request lands in a queue before it becomes anything. The pipeline sits on the admin's first screen, not behind a menu. Approval is a workload problem, not only a data problem. The unit head sees the shape of the queue before opening a single record. The last screen before signature. Distribution method, quantity, deposit, tax, total. Nothing revealed after the fact. A licensee is committing to a monthly fee and a data contract. Everything that governs that commitment sits on one page, before the button.
Testing It
@2 025 Indonesia Stock Exchange Testing It Five scenarios, drawn from the work licensees actually do. Register and get approved. Subscribe to a market data feed. Activate an index license. Buy historical data once. Report usage and generate an invoice. No. 1 2 3 4 5 Scenario Registration & Secure Approval Subscribe Market Data Feed Activate Index License One-Time Historical Purchase Self-Report Unit-of-Count Main Objective Registration & upload document. Inquire, configure, e-sign agreement, activate feed. Request display license, pass extra approval, go live. Select date range, e-sign, pay, download. Enter usage, generate invoice. Sessions ran remotely, moderated, with the screen recorded. Each one opened with a warm-up, moved through the five scenarios, then closed with probes on what had just happened and a broader discussion. Same script every time, so the sessions could be compared rather than just collected. I recorded four things. Whether the task was completed, how long it took, how the participant rated it afterwards, and what they said while they were stuck. The last one turned out to matter most.
What Broke
@2 025 Indonesia Stock Exchange What Broke Overall success was 84 percent. That number hid the problem. Historical Purchase sat at 60. One participant bought the wrong product entirely, a market data feed instead of historical data. Another could not find the module at all. Registration & Secure Approval Subscribe Market Data Feed Activate Index License One-Time Historical Purchase Self-Report Unit-of-Count 100 80 100 60 80 The two paths that look alike The failures clustered in two places. People could not tell the products apart. And they could not tell what state they were in.
What Changed
@2 025 Indonesia Stock Exchange What Changed Four of five paused looking for the right module. The sidebar got section headers and collapsed groups, so the shape of the system is visible before you click. Before After Participants could not tell whether a subscription was pending or active. Status moved to the top of the product page, stated plainly. Nobody knew what a fee covered. Prices got their unit back, and the terms that govern them sit beside the number. None of this came from taste. Each change traces to a session I sat in.
Outcome
@2 025 Indonesia Stock Exchange Outcome The redesign cleared institutional review and enters development in 2027. The fixes that came out of testing went in first.
No 0.02 — Orcastrade, 2026
Visit Orcastrade
Orcastrade
@2 02 6 Timeline Scope Role Project Lead Product Design User Experience & User Interface 2026 AI media planning platform Orcastrade Live Website https://orcastrade.ai/ An agency replaced by a system. The hard part was not making it plan. It was making it admit what it does not know. End to end. The planning flow, the reasoning behind it, and the interface both sit in. Context Running ads across Meta, Google, and TikTok means three sets of rules, three buying logics, three reporting formats. Most companies hand this to an agency, and accept the markup and the parts of the invoice nobody explains. Orcastrade takes the agency out. It reads a brief, builds a plan, prices it, and publishes to all three platforms. Four kinds of user sit on top of it, from an SME owner checking between meetings to a CMO replacing a two hundred thousand dollar retainer.
The Wizard
@2 02 6 Orcastrade The Wizard A brief is not a form. It arrives as language, and the first thing the system has to do is decide what it actually means. Seven steps, and each one closes off what the next is allowed to choose. Brief, then platforms and objectives, then audience, then the lead form if the objective demands one. Only then does a priced plan appear, and only after that does anything get built or published. Start Client brief Platform and objectives Audience Lead form Media plan review Campaign structure Upload creative Publish Free text, plus documents Read as language, not fields Only when the objective needs it Priced, with confidence flags Nothing is built until this is accepted Meta, Google, TikTok Live only when all three launch The order is the argument. Nothing is bought until the reasoning behind it has been shown and accepted.
When It Does Not Know
@2 02 6 Orcastrade When It Does Not Know A system that guesses confidently is worse than one that says nothing. Six phases, and every one of them is checked before the next begins. A validator sits behind each generator, reading the same evidence the generator read. Nothing moves forward on the model's word alone. Every field the AI produces also carries a state. Grounded in evidence, inferred from context, assumed outright, or abstained from. When the evidence is thin the system declines rather than fills, and it surfaces what it considered and rejected along the way. Evidence Generates Checked by Brief & Strategy Strategy critic Platform Objectives Objective validator Orcastrade Benchmark Platform Best Practice Business Context Campaign History Audience & Targeting Ads Structure Media Plan Audience validator Media plan validator Structure validator Creative & Copy Asset library Launch to Platform That cost speed. A planner waits longer and sometimes gets less. What they get instead is a plan they can argue with.
No 0.03 — PLABS, 2024
Visit PLABS
PLABS
Role Creative Direction User Experience & User Interface Timeline 2024 Scope Company website Live Website https://www.plabs.id/en PLABS Make a technology company sound advanced and credible without losing its soul @2 024 Creative direction and delivery. Translating how it looks and feels, the judgment calls between bold and restrained, carried through to launch. Context Corporate and creative usually fight. One wants authority, the other wants expression, and most company sites let one swallow the other. PLABS needed both at once. The weight of an enterprise that handles AI and serious R&D, and the boldness of a studio that wins on craft. Neither could win alone.
The Decisions
@2 024 PLABS The Decisions Restraint had to carry the authority, and motion had to carry the boldness. The interface stays minimal and elegant, the language stays confident and enterprise. Underneath, bold animation does the showing off, so the design never has to shout to prove itself. Every choice answered one question. Where does boldness end and restraint begin.
Outcome
@2 024 PLABS Outcome Awwwards Honorable Mention. The site became proof of the studio’s own thesis, that technology and craft belong together.
No 0.04 — Peace Generation, K-HUB, 2024
Visit Peace Generation, K-HUB
Peace Generation, K-HUB
@2 024 Peace Generation, K-HUB https://outlook.khub.id/id/ ensiklopediamodulpve Role Timeline Scope Live Website Project Lead Creative Direction 2024 Research microsite Make research worth reading. Turn a peace study into something people actually feel Creative direction and delivery. Shaping research into a story, and seeing it through to a finished site. Context Research usually dies on the page. Dense text, heavy reports, findings that matter but never get read. Peacegen’s work on peace education and preventing violent extremism deserved better. The subject is serious, even urgent. The challenge was to honor that weight while making people want to stay, scroll, and care.
The Decisions
@2 024 Peace Generation, K-HUB The Decisions The site had to tell a story, not file a report. Each section carries its own narrative, its own expression, its own beauty, while the research stays intact underneath. Nothing was dumbed down. The findings kept their rigor, but they were given a form people could feel.
Outcome
@2 024 Peace Generation, K-HUB Outcome Awwwards Honorable Mention. A peace NGO’s research reached people the way good stories do, proof that rigor and beauty are not enemies.
No 0.05 — BNI Securities, 2022
Visit BNI Securities
BNI Securities
Role Project Lead User Experience & User Interface Timeline 2022 Scope Corporate website Live Website https://www.bnisekuritas.co.id/ BNI Securities Rebuild a national securities firm’s website into something as composed as the institution behind it @2 02 2 Product design and delivery. The UI and UX, the move to headless, and the project carried through to launch. Context BNI Securities is a subsidiary of one of Indonesia’s largest banks. Regulated, serious, enterprise to the core. The old site no longer carried that weight. The revamp had to read elegant and institutional, the kind of restraint that signals trust in finance, without feeling cold or dated.
The Decisions
@2 02 2 BNI Securities The Decisions Composure was the whole brief. Clean structure, generous space, a minimal system that lets the institution speak without noise. The rebuild also moved to a headless architecture, separating content from presentation, so the site could stay fast, flexible, and easy to evolve. Elegance here is not decoration. It is how a financial brand earns confidence at first glance.
Outcome
@2 02 2 BNI Securities Outcome A live corporate site that reads minimal, elegant, and enterprise. The digital face of a major securities firm.