GUSTI BAGUS WK
SELECTED WORK 2024–2026 JKT · NOV 2026

PREPARED FOR ANTIKODE · UI/UX DESIGNER · DESIGN ENGINEER

From brief to live site.

Gusti Bagus W.K., UI/UX designer and design engineer in Jakarta.
From business goal and user flow to production.

02 · ABOUT · GUSTI BAGUS WIRABAWA KUSUMA

Hi, I'm Gusti.

Design Engineer and Project Manager at Finetune.id, Jakarta. I studied Industrial Engineering, started out in video and photo, and moved into web design in 2022. Today I design and build to production standard.

AT FINETUNE.ID, I RUN THE WHOLE PROJECT

Pitching · prototyping · client calls · project goals · PRD & ERD · hands-on design and build · project management

× AI

AI multiplies all of it. Claude Code, Figma MCP and agentic workflows let me cover more of the loop myself, without lowering the bar.

50+
Projects a year.
3–4 wks
Typical project delivery.
4+
Years in web design.
  1. 2017–2021

    Video, photo & editing

    Freelance, alongside a degree in Industrial Engineering at UMM.

  2. 2022–2023

    Senior Media Officer

    Susi Air: in-house video, photo and content. On the side, WordPress sites for BiyoBride.

  3. 2024–2025

    UI/UX Designer

    Konakorp. Started UI/UX here, built in Bricks and Elementor, became a Framer expert.

  4. 2025–NOW

    Design Engineer & PM

    Finetune.id. WordPress, Framer, Next.js and Astro with Claude Code and Figma MCP.

CLIENT · CAMPAIGN PLATFORM · 2026

A letter today,
delivered a year from now.

A campaign platform for SOME BY MI's Acne Positivity Day. People write a letter to their future self, seal it with a photo, and receive it a year later.

ROLE
Project Manager & UI/UX Designer
CLIENT
SOME BY MI, global skincare
STACK
Figma · Next.js
SOME BY MI live site, desktop

CLIENT · B2B PRODUCT CATALOGUE · 2025

Specs first,
the sales call second.

A product-led chemical supply website. Buyers find the right grade and request a quote without calling. The structure was mapped in Figma around how they search: category, grade, then specification.

ROLE
Web Designer & WordPress Developer
CLIENT
PT Praglas Raya, chemical supplier
STACK
Figma · WordPress · Bricks

CLIENT · PROPERTY WEBSITE + BOOKING · 2026

Selling the address
as much as the rooms.

A serviced-residence website that sells the address above MRT Senayan as much as the rooms: a 360° aerial view, residences with floor plans to scale, and a WhatsApp booking flow.

ROLE
Design Engineer / Front-end Designer
CLIENT
Sovana by SanLiving, serviced residence
STACK
Next.js
Sovana live site, desktop

CONCEPT · STORYTELLING WEBSITE · 2026

A chocolate bar,
told layer by layer.

A self-initiated, unofficial storytelling site for Dark Wonder chocolate. Press Play the Story or just scroll: video frames follow the scroll as the bar opens into its layers, 47% cocoa and roasted almond, ending on a choice of pouch or bar.

ROLE
Design Engineer
CLIENT
Unofficial concept for Dark Wonder
STACK
Astro · Lenis · canvas frame-scrub
Dark Wonder live site, desktop

IN-HOUSE · 3D WEB EXPERIENCE

Four studios,
one journey through space.

An immersive site for the KonaKorp holding. Visitors enter a 3D spacecraft cockpit, press Start Journey, and scroll through four studios: Konakoni, Finetune, Designfuzz and GMTA.

ROLE
Designer & Developer
CLIENT
KonaKorp holding (in-house)
STACK
Astro · Three.js

CONCEPT · SAAS WEBSITE · 2026

Calm for a
high-stakes queue.

A self-initiated website for a pharmacy operations platform. A clinical hero with a live dashboard of prescription queues, then intake, verification and dispensing in plain language, closing on a demo request.

ROLE
Framer Developer
CLIENT
Self-initiated concept for Framer Template
STACK
Framer
Rx-Flow live site, desktop

CONCEPT · EV BRAND WEBSITE · 2026

A new EV brand that
feels established.

A self-initiated website for an electric vehicle brand. Cinematic imagery and clean mobility come first; models, charging and partners follow. Near-black palette with an Acid Lime accent, across desktop, tablet and mobile.

ROLE
Framer Developer
CLIENT
Self-initiated concept for Framer Template
STACK
Framer
Tevera live site, desktop

11 · HOW I WORK

Business problem first,
pixels second.

Every project starts with the business goal, not the layout. Then design and a working prototype, then documents a developer can build from. Claude Code speeds up the build; the decisions stay with me.

  1. CONTEXT

    01. Business context first

    Goals, users and constraints before any screen. What has to change for the client?

  2. PROBLEM

    02. Frame the problem

    Flows and information architecture in FigJam, agreed with the client before design.

  3. DESIGN

    03. Design & prototype

    A Figma system with tokens and a clickable prototype clients can test and approve.

  4. HANDOFF

    04. Developer handoff

    PRD, ERD, user flows and a DESIGN.md that keeps the design rules in the repo.

  5. BUILD

    05. Build, review & UAT

    Next.js, Astro, Framer or WordPress, synced via Figma MCP and checked before launch.