Jakarta · --:-- WIB
Open to the right next role · Jakarta, Indonesia

Turning complex business requirements into clear product experiences.

I'm Yoga Arya Nudatar (Goy), a Lead UI/UX Designer with a product management background in B2B and government e-procurement. I work hands-on and with my design team to translate product requirements into user flows and interfaces, carrying the work through UI/UX quality assurance.

5+years at Mbizmarket, since 2021
2+years as product manager first
2024Lead UI/UX Designer since February
3user roles: buyer, vendor, approver
At a glance

The short version, for busy recruiters.

Product thinking

Requirements, scope, consequences

  • 2+ years as Mbizmarket’s product manager before design
  • PRDs built from procurement regulations
  • Initiated Open Quotation
Design execution

Flows and interfaces, hands-on

  • Solo design of Open Quotation: buyer and vendor flows
  • Clickable HTML prototypes
  • Figma and design tokens
Design leadership

From brief to UI/UX QA

Selected work

Four features, three ways of working.

From Mbizmarket, a B2B and government e-procurement platform: one feature I designed solo, one I led end to end, and two I delivered with my team. Side projects are further down.

Solo design · Initiated the project 01 — OPEN QUOTATION

Mini-competitions built around the two-quote rule

A request-for-quotation and negotiation flow for government buyers. The comparison screen brings quote details and procurement requirements into one place, and the two-vendor minimum is shown where the buyer acts.

Solo designGovTechBuyer + Vendor
2flows designed and prototyped: buyer and vendor
3roles in one transaction: buyer, vendor, approver
Read case study →
End-to-end lead · UI/UX QA 02 — MBIZTRAVEL HOTELS

Flights and hotels in one business trip

Extended the booking experience to support hotels alongside flights, inside the same trip, approval and document trail.

End-to-end leadNew productBuyer + Agent
4steps to set up a trip before booking
4documents per hotel order: order, invoice, payment, fee
Read case study →
Design lead · UI/UX QA 03 — ORDER ADDENDUM

Change a running order without cancelling it

Buyers can request quantity changes on an existing PO, with seller approval and a recorded change history.

Team deliveryGovTechBuyer + Seller
+10%limit on value increases, shown in the form
3 daysworking-day window for the seller to answer
Read case study →
Design lead · UI/UX QA 04 — DOCUMENT MANAGER

Sharing deal documents with the right people

Recipient-based sharing with clear access and deletion states, with consent recorded before anything is uploaded or shared.

Team deliveryPrivacy by designBuyer + Seller
3consent sections: upload, share, download
100 MBstorage per company, with a warning at 90%
Read case study →
AI in my workflow

AI is my assistant. Every call is mine.

I use Claude Code to build HTML prototypes and to check them against the live product. What it produces is a draft: the design decisions, the review and what gets corrected stay with me. Here is one documented example.

Windows PowerShell · reenactment
Example · Open Quotation prototype
  • Task: turn the OQ design-file screens into clickable HTML pages that match the live Mbizmarket UI.
  • AI output: 12 prototype pages, measurements of buttons, inputs, icons and shadows on the live test environment, and scripts that apply those values to every page.
  • Problem found: page headers rebuilt from scratch drifted from page to page, and the measurements showed 15px text across the pages.
My review and the correction
  • My check: each page against the design file and the live product, alongside the automated measurements.
  • Correction: a rule that every page copies the same header and sidebar instead of rebuilding them, and a type scale with even sizes only, both written into the project instructions and the sync scripts.
  • Result: on 31 Oct 2026, all 12 pages shared the same header markup and none used 15px text. That is a consistency check, not a usability result.

This portfolio too: Claude Code did the typing; I made the calls and checked each claim against its source.

Side projects

Off the clock, still building.

What I build when nobody's handing me tickets: a ride-app prototype for my crew and a cycling apparel brand in the making.

Side project · App prototype, paused

Bulakbalik CYC

Group rides where nobody gets left behind.

A ride-app concept for my own cycling crew: start a group, pick a route, see everyone on the map, then post the ride. I took it from Figma to a clickable prototype with Claude Code. It's a prototype, not a released app, and it's no longer in active development.

  • Crew roles, not just members. Captain, Navigator, Documentation and Sweeper, named after how group rides already split the work.
  • No distance alarms. Tracking who fell behind was left out to keep the app simple; the Sweeper watches the back, with one-tap signals: Wait!, Flat tyre, Something’s wrong.
  • Free to run. Sign-in uses Google or an email code instead of SMS, so a community app doesn’t pay for every login.
  • Failure states drawn out. Wrong email format, wrong or expired code, too many code requests, a temporary lock and denied location access each have their own screen.
4crew roles
2platforms tried: watch, then phone
Try the prototype ↗Best on desktop, with a screen list on the left.

It started as a Garmin watch app (a Connect IQ bike computer running in the simulator), then I went phone-first so the whole crew could join.

Brand · Apparel

Bulak Balik Cycling logoBulak Balik Cycling

A cycling apparel brand I'm building. Playful and anti-race-team, made for kids on push bikes and the parents who ride with them. I do all of it: the logo, the graphics, the mockups, and a landing page with a 3D jersey you can flip and recolour. The first collection is still coming soon.

Brand identityThree.js landing pageGraphic design
Visit the landing page ↗
Bulak Balik Cycling · Coming soonBulak Balik Cycling landing page with a 3D Rujak jersey
Experience

From product manager to design lead.

Five years at Mbizmarket, one domain, two hats. As a product manager I wrote the PRDs, and because I couldn't wait for a mockup, I designed the screens myself. In 2024 that habit became the job.

Feb 2024 – Present · 2 yrs 9 mosNow

Lead UI/UX Designer

Mbizmarket · Jakarta, on-site
  • Initiated Open Quotation and owned its end-to-end design as the sole designer, working from an initial PM brief: buyer and vendor flows for requesting, comparing and negotiating quotes.
  • Led Mbiztravel Hotels from the PM brief through design and UI, UX and product QA, with a designer supporting UI execution, to add hotels to business-trip booking.
  • Translated PM briefs for Order Addendum and Document Manager into design solutions with the team, then reviewed the UI and UX in QA.
  • Built a clickable HTML prototype of Open Quotation with an AI assistant, reviewing every page against the design file and the live UI.
↑ PRDs became pixels · Feb 2024
Sep 2021 – Feb 2024 · 2 yrs 6 mos

Product Manager

Mbizmarket · South Jakarta
  • Wrote the PRDs. Turned procurement regulations and stakeholder requests into requirements, flows and edge cases for engineering.
  • Designed while I specced. My PRDs often came with my own flows, wireframes and UI.
  • Worked across teams. Took features from requirements to release with engineering, QA and the business team.
  • Learned the marketplace from every side: government buyers, vendors big and small, internal admins and partners.
2017 – 2021 · before Mbizmarket

Regulations, before they were screens

  • Graphic Designer · British Propolis, freelance · 2021
  • HSE Manager, NCICD coastal protection project · PT Wijaya Karya Beton Tbk · 2019–2021
  • Individual Consultant · Ministry of Public Works and Housing (PUPR) · 2017–2019

Four years of reading regulations, running audits and working with government teams. Same muscles I use to design compliance into a flow today.

Design

Product designInteraction designDesign systemsPrototypingDesign tokensUX writing

Product

Product requirementsPrioritisationRule-heavy flowsRelease planningStakeholder management

Collaboration

Design reviewPRDs & specsCross-functional delivery

Tools

FigmaFigJamHTML / CSSClaude CodeAI agents & automationPlaywrightAdobe CC

Languages

Indonesian (native)English (professional working)

Education

  • UI/UX DesignPurwadhika Digital Technology School · 2020
  • Bachelor's degreeUniversitas Diponegoro · 2017
Why a PM got the design keys

I didn't switch careers. I just stopped switching tabs.

01

I already knew the rules

Two and a half years of procurement rules, edge cases and approval chains. Now I design them straight into the flow.

02

I write the why, then draw the how

PRD on one screen, Figma on the other. I write down the business reason behind a design choice.

03

I was already designing

My PRDs came with my own wireframes and UI. Moving into design just made the side hustle official.

About

Half product brain, half design hands.

I've spent five years in one of the trickiest corners of Indonesian tech: procurement for companies and government institutions. As a PM I learned why the rules and approval steps exist. As a designer, I try to make those rules clear on screen, so people can focus on the job they came to do.

Good design here is rarely about bold visuals. It's flows that follow the rules, treat every vendor fairly (small businesses included), and make sense to people who'd rather get back to their actual job.

What I do
  • Lead UI/UX Designer at Mbizmarket since Feb 2024
  • Design flows and interfaces hands-on, like Open Quotation
  • Lead design work with my team from brief to UI/UX QA
  • Write specs with the why, a habit from my PM years
  • Use AI for prototyping and checks, and review every output
Outside work: I ride, I'm building a cycling apparel brand, and I prototyped a group-ride app for my crew, because a WhatsApp group just wasn't enough.