Chronicles of an unconventional designer refusing the corporate agency playbook, building products from first principles.
CHALLENGER OF
CONVENTIONAL
WISDOM.
Hamzah Ikhsan (Aniki). Product Designer & Design-to-Code MVP Engineer based in Jakarta / Bogor, Indonesia.
“Code is the ultimate expression of design intent. When designers understand code, compromises disappear.”
Trained 100+ vocational students and trainees across 5 schools & bootcamps in high-fidelity Figma and modern frontend engineering.
Most designers treat their job as creating static pictures in Figma, leaving engineers to interpret and often dilute their vision. I reject that dichotomy entirely.
My foundation was built at SMK IDN Bogor, where visual communication design, 3D spatial thinking in Blender, and technical discipline merged. While my peers focused strictly on layout graphics, I dove deep into frontend code—learning TypeScript, component lifecycles, and modern CSS architecture to build working software.
At MAIA Digital, I applied this hybrid capability to MAIOFFICE, an autonomous AI-driven task and workspace scribe. By designing in tokens and writing the corresponding React/Next.js components, we cut development handoff time by 50% and achieved a 6.1 / 7.0 Single Ease Question (SEQ) score across enterprise beta testers.
Beyond commercial client work, my mission is raising the standard of Indonesian digital talent. Through workshops at BBPVP Kemnaker and vocational academies, I teach young designers how to move beyond generic templates into high-taste, code-fluent engineering.
TECHNICAL ARSENAL
Tools and technologies deployed across daily production environments.
Product & UI/UX Design
- Figma (Variables & Dev Mode)Production Master
- Design System ArchitectureEnterprise Grade
- Blender 3D ModelingCommercial Assets
- Usability Testing (SEQ / SUS)Quantitative Benchmark
Frontend & Code Execution
- Next.js 16 & App RouterProduction Ready
- TypeScript Strict ModeType-Safe Systems
- Tailwind CSS v4 & PostCSSPixel-Perfect Layouts
- Framer Motion & Micro-interactionsTactile Motion
Infrastructure & Systems
- Nginx 1.24 Hardened Reverse ProxyStatic SSG Serving
- Linux / Ubuntu Server CLIHeadless Sysadmin
- Git Workflow & BranchingClean Version Control
- Zero-Overhead Edge DeploymentSub-Second TTI
10-DAY DESIGN-TO-CODE SPRINT
A battle-tested production pipeline that transforms concept briefs into live, high-performing web apps.
Discovery & Visual Positioning
Audit, User Journey Mapping, Moodboard & Typographic Direction
- ›Competitive UX Tear-down
- ›Information Architecture (IA)
- ›Brutalist Moodboard & Token Spec
Interactive High-Fidelity Prototype
Figma Dev Mode Architecture, Interactive States & Design Tokens
- ›Figma Prototype with Dynamic States
- ›Responsive Layouts (Mobile, Tablet, Desktop)
- ›Handoff-Ready Token Documentation
Design-to-Code MVP Sprint
Next.js 16 App Router, TypeScript, Tailwind CSS v4 & Motion
- ›Clean Modular Component Hierarchy
- ›Lighthouse 95+ Performance Scores
- ›Dynamic Forms & Micro-interactions
Deployment & Production Hardening
Static Site Generation (SSG), Nginx Host Tuning & Zero-Cost Infra
- ›Next.js Static Export (`out/`)
- ›Hardened Nginx Configuration & SSL
- ›Automated Rsync CI/CD Deployment Script
HARD METRICS & TRUST
Quantifiable benchmarks from live deployments, training programs, and commercial digital assets.
Trainees Mentored
Conducted intensive UI/UX & Frontend workshops at vocational institutions and BBPVP Kemnaker.
SEQ Usability Score
Achieved top-tier usability score for MAIOFFICE AI autonomous project platform.
Net Promoter Score
Validated satisfaction rate across active beta users and client stakeholders.
Commercial Digital Assets
Published premium UI Kits and 3D design packs sold on Gumroad with 5.0 rating.
Editorial essays on why speed is an architectural feature, code literacy for designers, and scalable usability metrics.
CLICK TO NAVIGATE • 003