Match report · Season 2026

Ngejawantah Landing Page

Own product

Team sheet

Full-time stats

Counted from the codebase: the HTML prototype was static and Indonesian only; the built landing has ten Sanity section types, English and Indonesian, and 202 test cases (unit and end-to-end). No traffic or conversion figures yet: the pilot has only just opened.

Match facts

Role: Founder, designer & developer
Team: Solo
Timeline: October 2026
Platform: Web, built with Next.js and Sanity on Cloudflare Workers
Discipline: Landing Page Design & Development
Industry: B2B SaaS · Founder Personal Branding
Tools: pen.dev · Next.js · Sanity · Cloudflare Workers · Playwright · Claude

Before → after

Sections editable in the CMS: 0 to 10
Languages: 1 to 2
Automated test cases: 0 to 202

Minute by minute

How the match went

From the brief at kick-off to the result at full time.

Minute 0, Kick-off
The brief
The public face of Ngejawantah, my own voice-to-content product for founders. A landing page that shows the product working instead of describing it: an animated demo of the real flow, an honest comparison with the alternatives, and every section editable from a CMS in two languages.
I designed it in pen.dev from my Indonesian HTML prototype and built it in Next.js with Sanity.
15’
Minute 15, The opposition
The problem
A new product with no customers yet has to explain an unfamiliar habit to founders who have already seen plenty of AI writing tools: send a voice note, get posts back.
- Unfamiliar idea"voice note in, posts out" is hard to picture from a headline alone.
- Sceptical audiencefounders have tried AI tools that sound generic, so big claims backfire.
- One-person teamthe copy will change every week during the pilot, and fixing a sentence should not need a deploy.
The question
How might we let a founder see, in under a minute, what their week with Ngejawantah looks like, and believe it?
35’
Minute 35, Game plan
Goals and key features
Before
Before, the page was a static HTML prototype in Indonesian: the story was there, but every wording change meant editing code, and there was no English version.
After
After, ten landing sections are content types in Sanity, the page runs in English by default with Indonesian alongside, and the demo, the signup and the translations are covered by automated tests.
1. Animated dashboard demo of the weekly flow
2. Desktop and phone demo layouts sharing one state
3. Hero examples with pause, replay and reduced-motion support
4. Comparison with writing it yourself, generic AI and agencies
5. Ten sections editable in Sanity
6. English and Indonesian
7. Pilot signup, FAQ and roadmap
60’
Minute 60, The play
How it was solved
- Show, don’t describea dashboard demo plays the real flow. A draft arrives, each line traces back to the voice note, and the founder approves, so visitors watch the product instead of reading about it.
- One demo, two layoutsa desktop window and a phone layout, switched at 768 px, share the same demo state, so the story is the same on every screen.
- Two features, two storiesthe hero shows the voice note and video recording as separate examples with pause and replay; with reduced motion they start paused, and video is labelled as planned.
- Compare how, not how muchthe comparison sets Ngejawantah beside writing it yourself, generic AI and an agency by how each one works, without performance claims.
- Editable without meevery section is a Sanity document; copy is written in Indonesian and translated in the Studio, so pilot copy can change without a deploy.
Minute 90, Full time
The result
Live at ngejawantah.com in English and Indonesian, with ten CMS-driven sections, a pilot signup and 202 automated test cases, including end-to-end checks of the signup and translation flow. It is where pilot founders first meet the product.

Tactical calls

Key decisions

The choices that shaped the project, the reasoning behind them, and what they cost.

Show the product, don’t describe it
The problem
"Voice note in, posts out" is hard to picture from a headline.
The call
A dashboard demo plays the real flow on the page: a draft arrives, each line traces back to the voice note, and the founder approves.
Why
Seeing their own words traced back answers "will it sound like me?" before the visitor asks it.
Trade-off
The animation has to stay calm and stoppable: it pauses, replays and respects reduced motion.
One demo, two layouts
The problem
A desktop dashboard shrunk onto a phone is unreadable.
The call
A desktop window and a phone layout, switched at 768 px, both driven by the same demo state.
Why
Many founders will open the link on their phone; they should get the same story, not a smaller one.
Trade-off
Two layouts to maintain; sharing one state keeps them from drifting apart.
Compare how, not how much
The problem
Founders have heard every 10x claim, and there are no pilot numbers yet.
The call
The comparison sets Ngejawantah beside writing it yourself, generic AI and an agency by how each one works.
Why
Honesty persuades a sceptical audience, and nothing has to be taken back later.
Trade-off
No headline statistic to lead with until the pilot produces real ones.
Two features, two stories
The problem
Voice notes work today; video recording is still planned.
The call
The hero shows them as separate examples, and the video one is labelled as planned.
Why
Promising only what exists protects the trust the whole product depends on.
Trade-off
A less flashy hero than one blended demo.
Copy that changes without a deploy
The problem
Pilot feedback will change the wording every week.
The call
Ten sections are Sanity content types; copy is written in Indonesian and translated in the Studio.
Why
The words can keep up with what founders say, without a developer in the loop.
Trade-off
More content modelling up front than hard-coded sections.