What's up

Engineering products that make people stop and stare.

A high-craft blend of design systems, frontend architecture, and obsessive attention to visual details.

STATEMENT.TXT

I build digital products that make people stop and ask, who built that?

That reaction is the whole job. Over 7+ years bridging UX architecture, design system precision, and high-performance frontend code for companies that refuse to look generic. No templates, ever.

Asep Syaepul · Since 2018available for projects

METRICS01 // STATS

07+Years of Experience

40+Shipped Projects

100%Pixel Precision & Craft

VERIFIED PORTFOLIO METRICS

CAPABILITIES02 // DOMAINS

UI/UX Design

Frontend Architecture

Design Systems

Motion & Interactions

React & Next.js

Performance & CWV

Full-Stack UI Specialist● Active

hero.frame480 × 320

Asep.fig

Next.js 15

Build bold.

Interactive UI

DESIGNED LIVEFigma ↔ Code

▶ CURRENT STACK

Next.js 15 & React 19

Optimistic UI, Server Components & Fluid Motion

TypeScriptTailwindCSSSupabaseMotion

PHILOSOPHY

★★★★★

“Design without engineering is just decoration. Engineering without design is just utility. The magic happens when both speak the exact same language.”

Asep SyaepulDesign Technologist

Selected Projects

01 tractogo-web-dan-mobile-application-ux-enhancement

TRACtoGO Web dan Mobile Application UX Enhancement

UI/UX Design

Proyek ini berfokus pada peningkatan menyeluruh pengalaman pengguna (UX) aplikasi...

Case Study

Mobile AppsRedesignUI/UX

https://tractogo-web-dan-mobile-application-ux-enhancement.dev

02 crewdible-oms-redesign

Crewdible OMS Redesign

UI/UX Design

Crewdible has a feature to be able to manage your online store in 1 application, namely OMS (Online Management System), can find out the available stock, and manage reserve stock if you want to sha...

Case Study

Android AppRedesignUI/UX

https://crewdible-oms-redesign.dev

03 qr-digital-menu

QR Digital Menu

Product Designer

Golden Lamian digital menu is a state-of-the-art food ordering app that allows customers to view digital menus, order and pay online without queuing. With a user-friendly interface and advanced fea...

Case Study

Mobile AppsProduct DesignUI/UX

https://qr-digital-menu.dev

01 / 03

Cross-platform design
& implementation

Bridging the gap between high-fidelity designs and production-ready interfaces for mobile, tablet, and desktop environments.

9:41

TRACtoGO App

UX Redesign

Flows100% Valid

Speed14ms

Mobile App Redesign

Redesigned TRACtoGO web and mobile, reducing design-to-development time by 30%.

Symbolix.ai — Enterprise ERP

ACTIVE

Latency8.2 ms

Uptime99.98%

RoleUI Lead

Realtime Throughput+32.4%

$ pnpm run build:system✓ 48 modules synced (0 errors)

Enterprise Web Systems

Spearheaded end-to-end redesigns for Symbolix.ai (ERP & POS) using React, Next.js, and Tailwind CSS.

OMS Crewdible

Performance

98.4%

Order Fulfillment

+24% ConvertOptimal

Sync Time1.2s ago

Custom Product Solutions

Designed user flows and high-fidelity mockups for Gizalab and Crewdible OMS.

Design Systems & Tokens

Translating Figma variables into typed React design tokens for 100% visual consistency across platforms.

Enterprise & ERP Systems

Specialized in complex data architectures for Korlantas Polri, PT Liftech, and Symbolix.ai.

+25%Adoption

+28%CSAT

-30%Cycles

Production Impact

Accelerating feature delivery by 30% with zero regression, high accessibility, and 98+ Core Web Vitals.

From Concept To
Production Ready Reality

A disciplined, precision-driven engineering process designed to turn complex digital challenges into clean, accessible, and ultra-performant web interfaces.

Discovery & UX Audit

Research & Strategic Blueprint

Deep dive into user pain points, business goals, and existing systems. I map requirements into clear user stories, performance budgets, and technical feasibility blueprints before committing to code.

Technical AuditUser Journey MapsArchitecture BlueprintPerformance Target

UX Heuristics96% PASSED

Target TTFB< 80ms

Architectural Readiness Checklist

Target User Personas & Task Matrix Defined

Frontend Tech Stack Evaluation (Next.js 15+)

State Management & Data Layer Schema

Accessibility Standards (WCAG 2.1 AA Compliance)

Phase Outcome:System Blueprint Approved

Information Architecture

Wireframes & System Hierarchy

Structuring intuitive page layouts, navigation hierarchies, and low-fidelity prototypes. Every interactive touchpoint is validated to ensure frictionless navigation and optimal user conversion.

Information Flow NodesLAYOUT MAP v2.4

Landing View / Route (/)

SSR Hydrated

├── Hero & Live Metrics Engine<HeroCore />

├── Portfolio Showcase & Filters<ProjectGrid />

└── Interactive Workflow System<WorkflowView />

3 BreakpointsMobile, Tab, Desk

100% ModularityAtomic Specs

FrictionlessValidated Flows

Design Systems & Tokens

Figma Variables & Atomic UI Kit

Translating visual identity into scalable design tokens (colors, typography scales, spacing, shadows, and dark mode palettes). Building atomic UI primitives for consistency across every platform.

design-tokens.config.tsSYNCHRONIZED

export const tokens = {

colors: {

primary: '#84cc16',

surface: '#09090b',

accent: '#10b981',

radius: '1.25rem',

};

Buttons12 Variants

Typography8 Scales

Shadows5 Levels

Cards6 Layouts

Frontend Engineering

React, Next.js & TypeScript Craft

Writing clean, modular, and strictly-typed frontend architecture. Implementing responsive layouts, resilient data-fetching with SSR/ISR, and production-grade state management.

src/components/Experience.tsxStrict TS ✓

interface ExperienceProps {

slug: string;

isProduction: boolean;

}

export async function Page(props: ExperienceProps) {

const data = await fetchPayload(props.slug);

return <ClientMotionpayload={data} />;

}

Next.js 15

•

React 19

•

Tailwind CSS

Motion & Micro-Interactions

Framer Motion & Fluid UX

Elevating digital interfaces from functional to memorable. Implementing 60fps spring animations, scroll-driven reveals, intuitive gestures, and seamless page transitions.

Spring Physics & Curve Engine60 FPS SMOOTH

stiffness: 320

damping: 25

mass: 0.8

Scroll LinkedZero jank reveals

GesturesTouch responsive

Reduced Motiona11y fallback

Testing, CWV & Deployment

Lighthouse 100 & Production Release

Rigorous cross-browser testing, accessibility (a11y) audits, Core Web Vitals optimization, and automated CI/CD deployment to edge networks for sub-second page loads.

Google Lighthouse AuditVERIFIED 100/100

100

Performance

100

Accessibility

100

Best Practices

100

SEO

Deploy Status:Live on Global Edge Network

workflow://phase-01/discovery

Active Phase01 / 06

UX Heuristics96% PASSED

Target TTFB< 80ms

Architectural Readiness Checklist

Target User Personas & Task Matrix Defined

Frontend Tech Stack Evaluation (Next.js 15+)

State Management & Data Layer Schema

Accessibility Standards (WCAG 2.1 AA Compliance)

Phase Outcome:System Blueprint Approved

Click any step to inspect

Ready to Collaborate?

Whether you have a fully-formed idea or just a spark of inspiration, I'm here to help you bring it to life with clean code and exceptional design.

LET'S TALK

What's up

Engineering products that make people stop and stare.

A high-craft blend of design systems, frontend architecture, and obsessive attention to visual details.

STATEMENT.TXT

I build digital products that make people stop and ask, who built that?

That reaction is the whole job. Over 7+ years bridging UX architecture, design system precision, and high-performance frontend code for companies that refuse to look generic. No templates, ever.

Asep Syaepul · Since 2018available for projects

METRICS01 // STATS

07+Years of Experience

40+Shipped Projects

100%Pixel Precision & Craft

VERIFIED PORTFOLIO METRICS

CAPABILITIES02 // DOMAINS

UI/UX Design

Frontend Architecture

Design Systems

Motion & Interactions

React & Next.js

Performance & CWV

Full-Stack UI Specialist● Active

hero.frame480 × 320

Asep.fig

Next.js 15

Build bold.

Interactive UI

DESIGNED LIVEFigma ↔ Code

▶ CURRENT STACK