Hi, I'm Vathana

avathana.design@gmail.com

Available

I create products that work as hard as you do

Product Design Design Systems Fintech & SaaS

3 +

Years of experience

Crafting enterprise banking systems, fintech architectures & scalable design systems.

Let's Talk north_east Explore Work south

01 / INTERACTIVE WORKBENCH

How I Design, Automate, & Ship Modern Software

AN OPEN INTERACTIVE OPERATING SYSTEM SHOWCASING LIVE AI AGENT PIPELINES, FIGMA MCP, AND PRODUCT CRAFT.

PORTFOLIO // WORKSPACE // VATHANA

READY · AGENTS ACTIVE

01 / Ideation & Architecture
PERSONAS · LOGIC TREE · IA
02 / AI Workflow & Agents
SKILLS · AGENTS · MCP
03 / Design System
TOKENS · COMPONENTS · SYNC
04 / End-to-End Workflow
START TO FINISH

Vathana

WORKSPACE // IDEATION & LOGIC TREE BENCH · LIVE

01 PERSONAS & JTBD

➔

02 EMPATHY MAP

➔

◇ ERROR / EDGE CASE?

➔

04 WIREFLOWS

➔

⚡ VALIDATED IA

01 / PERSONAS & EMPATHY RESEARCH

👤 Fintech Ops Lead

SAYS: "Needs to be 10x faster."
FEELS: Anxious about bulk errors.

                      JTBD: 1-click batch auth with biometric confirmation.
                    

02 / LOGIC DECISION TREE FLOW LOGIC

✓ VALID ➔ Execute Batch Instant

↳ TIMEOUT ➔ AI Async Fallback & Retry

● 12 Failure States & Empty States Mapped

03 / AI STRESS-TEST CLAUDE

"Stress-test 15 edge cases: zero connectivity, permission revokes, and high-latency drops."

✓ 0 DEAD-ENDS · ZERO DEBT

"Validate mental models with 5 users before writing 1 line of UI code."

Persona ➔ Empathy Map ➔ Decision Tree ➔ Wireflow

"Every flow must have a happy path, zero state, and recovery route."

01 FIGMA MCP

➔

02 CLAUDE & SKILLS

➔

03 ANTIGRAVITY IDE

➔

04 SUBAGENT QA

● ANTIGRAVITY AGENT // FIGMA MCP 140ms

"Inspect Figma node 'SwiftCard#104' via MCP, sync CSS variables from design.md, and run browser subagent validation."

✓ Node fetched via MCP. Synced 8 tokens. Browser QA passed with 0 layout shifts.

"AI accelerates code synthesis; human taste & systems architecture define the standard."

TOKENS

orange

#F48E3E

ink

#171717

line

#E4E4E7

Aa font

Geist Mono / Manrope

Button

Card

Badge

Modal

Input

Toggle

COMPONENTS
24 PARTS · 4 BRANDS · SSOT

DOCS

tokens.css

+ --color-orange: #f48e3e;

+ --font-mono: 'Geist Mono';

✓ 24 components rebuilt

preview live

SYNCED · SSOT

"One token moves and it lands in every part at once."

Token ➔ Component ➔ Page

"24 parts, one single source of truth."

01 RESEARCH (Claude + Notion)

➔

02 WIREFLOWS (Figma)

➔

03 AGENT CODE (Antigravity + MCP)

➔

04 SHIP (Vite + Cloudflare)

"From whiteboard to production in days, not months. Precision engineering meets high-fi craft."

"Zero handoff friction. Designers who code eliminate the gap between vision and reality."

FIGMA MCP CLAUDE ANTIGRAVITY DESIGN SYSTEM SSOT VITE

LIVE · NEVER FINISHED

· workspace initialized — notes, shapes, tokens loaded

✓ figma mcp connected: 42 tokens in parity with codebase

❯ track 01 live: flowchart & system architecture active

↳ Ask for it, draw it, ship it with Antigravity.

❯ try: switch track [1-4] or click node

FIG. 002 — VATHANA WORKBENCH // 4 TRACKS, ONE ECOSYSTEM FLOWCHART, AI AGENTS, DESIGN SYSTEM, END-TO-END WORKFLOW

02 / EXPERIENCE & PARTNERS

Where I've Worked

FROM GLOBAL BANKS TO INDEPENDENT APPS — PRODUCT, BRAND, AND SYSTEMS FOR TEAMS OF EVERY SIZE.

A 1

ABA Bank

Lead Product Designer

Led design for core loan origination SaaS & enterprise banking systems used across the region.

A 2

Swift Financial

Senior Product Designer

Designed UX banking flows and mobile iOS/Android ecosystem used by thousands of customers.

A 3

Smart Axiata

Product & UX Designer

Led discovery and design for digital career & self-service portals for 5M+ subscribers.

A 4

twd. Digital

Design Technologist

Product and brand interface work, design systems, and web applications for global clients.

A 5

Kakcent

UI / Product Designer

Designed digital publishing reader experience and high-conversion content platforms.

A 6

Tinh Ot

Product Designer

Crafted end-to-end mobile shopping experience and streamlined checkout workflows.

A 7

Lifelthy

Lead UX Designer

Designed telemedicine consultation platform connecting patients with doctors in real-time.

A 8

Hotel Grand

Brand & Interface

Designed luxury hospitality booking engine and responsive guest reservation journeys.

A 9

Automize AI

AI Workflow Designer

Designed AI-assisted automation pipelines and conversational relationship intelligence tools.

A 10

Design Tokens

Design & AI Workflows

Author of modular UI design system tokens, MCP integrations, and creative components.

03 / SYSTEM ARCHITECTURE

Exploded SaaS Architecture & Satellites

DECONSTRUCTING HIGH-DENSITY ENTERPRISE SYSTEMS INTO ATOMIC DESIGN TOKENS, LIVE AGENT PIPELINES, AND DATA TABLES.

DESIGN SYSTEM TOKENS v2.4

--radius-enterprise: 10px; --accent-brand: #f48e3e; --font-data: "Geist Mono"; --elevation-core: 0 24px 60px;

FINTECH BATCH AUTH Multi-Sign Passkey 2FA

$1,250,000.00

14 Loan Entities • Core Batch Ready

BIOMETRIC PASSKEY VERIFIED (12ms)

PERFORMANCE +34.8%

4.2 min

Avg Origination Time (was 48 hrs)

AI AGENT MCP LIVE STREAM

> Prompt: Stress-test 15 edge cases...

> 0 dead-ends detected. (14ms)

> Auto-fallback webhook: ARMED

POST /v2/originate/batch 200 OK

9:41 ●●●

URGENT BATCH

Commercial Facility

$450,000.00

Slide to Release ➔

LOAN ID	BORROWER / ENTITY	FACILITY TYPE	AMOUNT	RISK SCORE	STATUS
`#LN-89024`	Phnom Penh Logistics Ltd.	Working Capital	$650,000.00	A1 (Low)	● APPROVED
`#LN-89025`	Mekong River Solar Grid	Project Infrastructure	$520,000.00	A2 (Low)	● APPROVED
`#LN-89026`	Kirirom AgriTech Farm	Equipment Leasing	$250,000.00	B1 (Med)	⚡ 2FA PENDING
`#LN-89027`	Apex Bio-Chemical Hub	Trade Finance Line	$890,000.00	A1 (Low)	⏳ UNDERWRITING