// Direction D — "Neural" (AI / công nghệ / tương lai, ref: zeroes.framer.website)
// Dark-only, violet glow, grotesque display type, 3D neural core.
// Recruiter-first pass: role/location up top, evidence-led headline,
// stats before work, only real case studies featured, verified recognition.
// Reuses window.PF_DATA + window.PFC. Exports window.NeuralDirection.
(function() {
const { useState, useEffect } = React;
const { ProjectMock, BrandMark, LangSwitch } = window.PFC;
const D = window.PF_DATA;
const CV_URL = "https://drive.google.com/file/d/1Pinq8K7oT7JSfnkFWBOcqlgZhZIVHJAZ/view?usp=sharing";
function caseHref(p) {
return p.slug === "atx" ? "case-study-atx-d.html" : `case-study-d.html?slug=${p.slug}`;
}
/* ── Career detail — same data as the Editorial direction's CV modal ── */
const CAREER = [
{
id: "atx",
time: { vi: "07/2021 — nay", en: "07/2021 — now" },
org: "ATX · Finpath",
role: { vi: "Product Design Lead & Project Manager", en: "Product Design Lead & Project Manager" },
note: {
vi: "Sàn crypto cho thị trường VN + nền tảng AI phân tích chứng khoán",
en: "VN-focused crypto exchange + AI investment intelligence platform",
},
about: {
vi: "ATX là sàn giao dịch tiền mã hoá được thiết kế chuyên biệt cho thị trường Việt Nam. Finpath là nền tảng dùng AI để cung cấp thông tin, quan điểm, phân tích và tin tức đầu tư về thị trường chứng khoán Việt Nam.",
en: "ATX is a crypto exchange built specifically for the Vietnamese market. Finpath is an AI platform delivering investment intelligence, analysis and news on the Vietnamese stock market.",
},
metrics: [
{ v: "2M+", l: { vi: "user ATX · 700K MAU", en: "ATX users · 700K MAU" } },
{ v: "150K", l: { vi: "user Finpath · 65K MAU", en: "Finpath users · 65K MAU" } },
{ v: "3", l: { vi: "team điều phối", en: "teams coordinated" } },
],
points: {
vi: [
["Quản trị chiến lược & stakeholder", "Làm việc trực tiếp với ban lãnh đạo và các trưởng bộ phận để bóc tách yêu cầu thành tài liệu sản phẩm; đánh giá tính khả thi nhằm cân bằng giữa mục tiêu kinh doanh và giá trị người dùng."],
["Quyền tự quyết & thiết kế hệ thống", "Nắm toàn quyền quyết định, thiết kế toàn bộ cấu trúc thông tin, hành trình người dùng và giao diện. Trực tiếp thiết kế giao diện, xây design system, kiểm thử và đảm bảo chất lượng đầu ra cho toàn bộ tính năng của hệ sinh thái ATX & Finpath."],
["Tối ưu trải nghiệm & tăng trưởng", "Kiểm thử khả dụng và nghiên cứu hành vi để giảm tải nhận thức, giúp người mới bắt đầu tiếp cận các luồng giao dịch tài chính phức tạp một cách đơn giản. Đóng góp trực tiếp vào tăng trưởng: ATX 2M+ users (700K MAU), Finpath 150K users (65K MAU)."],
["Quản lý dự án E2E", "Quản lý toàn bộ vòng đời phát triển tính năng. Phối hợp cùng kỹ thuật, marketing và điều phối ba nhóm (Data, Interface, Integration) để xử lý rào cản kỹ thuật, linh hoạt điều chỉnh ưu tiên nhằm giữ tiến độ phát hành."],
["Team leadership", "Điều phối và phân công công việc cho nhân sự thiết kế cấp trung. Trực tiếp hướng dẫn và soát chất lượng đầu ra để thiết kế đi đúng định hướng sản phẩm và tuân thủ design system."],
["Thiết kế trải nghiệm AI", "Dẫn dắt phát triển, định hình giao diện và luồng tương tác các tính năng AI (News, Chat Bot, Chart) nhằm cá nhân hoá thông tin đầu tư. Định hình chiến lược prompt, xây cơ sở tri thức chuyên sâu cho AI và tối ưu chi phí vận hành LLM."],
["Tối ưu qua dữ liệu & feedback", "Kết hợp số liệu từ marketing, phản hồi từ chăm sóc khách hàng và phỏng vấn người dùng để xác định điểm nghẽn, từ đó xây các cải tiến thiết kế nhằm tăng tỷ lệ chuyển đổi trên luồng sản phẩm lõi."],
["Tối ưu hiệu suất", "Ứng dụng quy trình dựng giao diện cùng AI, rút ngắn thời gian từ ý tưởng đến bản thiết kế từ vài ngày xuống còn vài giờ."],
],
en: [
["Strategy & stakeholder management", "Work directly with C-level and department heads to turn briefs into PRDs; assess feasibility to balance business goals against user value."],
["Design ownership & systems", "Full decision ownership across information architecture, user journeys and UI. Hands-on UI design, design-system build, QA and output quality for every feature in the ATX & Finpath ecosystem."],
["Experience & growth", "Usability testing and behavioural research to cut cognitive load so first-time investors can navigate complex financial flows. Direct contribution to growth: ATX 2M+ users (700K MAU), Finpath 150K users (65K MAU)."],
["End-to-end delivery", "Own the full feature lifecycle. Partner with the tech lead and marketing, and coordinate three teams (Data, Interface, Integration) to clear technical blockers and re-prioritise to protect release dates."],
["Team leadership", "Assign and coordinate work for mid-level UI/UX designers; mentor and review output so designs follow product direction and the design system."],
["AI experience design", "Lead development and shape the interfaces and interaction flows of AI features (News, Chat Bot, Chart) to personalise investment intelligence. Own prompt strategy, deep knowledge-base build and LLM cost optimisation."],
["Data & feedback loop", "Combine marketing metrics, CS feedback and user interviews to locate pain points, then design improvements that lift conversion on core flows."],
["Throughput", "Applied an AI-assisted workflow, shortening idea-to-mockup from days to hours."],
],
},
projects: ["App ATX", "Web ATX", "App Finpath", "Web Finpath", "Savin"],
caseHref: "case-study-atx-d.html",
},
{
id: "topica",
time: { vi: "06/2020 — 07/2021", en: "06/2020 — 07/2021" },
org: "Topica Edtech Group",
role: { vi: "Product Designer", en: "Product Designer" },
note: {
vi: "Sản phẩm giáo dục: LuyenToan, Toan247, Japan Math",
en: "Education products: LuyenToan, Toan247, Japan Math",
},
about: {
vi: "Topica là công ty hàng đầu trong lĩnh vực công nghệ giáo dục (EdTech) tại Đông Nam Á.",
en: "Topica is a leading education-technology company in Southeast Asia.",
},
metrics: [],
points: {
vi: [
["Chiến lược sản phẩm", "Đề xuất chiến lược và giải pháp thiết kế cho danh mục sản phẩm giáo dục."],
["Từ yêu cầu đến UI", "Tiếp nhận và phân tích yêu cầu từ quản lý sản phẩm để nghiên cứu tính năng, dựng cấu trúc thông tin và thiết kế giao diện."],
["Nghiên cứu & usability", "Nghiên cứu người dùng và thị trường, đánh giá khả dụng để liên tục cải thiện sản phẩm."],
["Nền tảng thiết kế", "Xây dựng design system, chân dung người dùng, hành trình khách hàng, sơ đồ màn hình và luồng người dùng."],
["Phối hợp liên phòng ban", "Phối hợp cùng lập trình và tăng trưởng để lên kế hoạch, thiết kế, kiểm thử và xây dựng sản phẩm."],
],
en: [
["Product strategy", "Proposed strategy and design solutions across the education product portfolio."],
["Requirements to UI", "Took requirements from PO/BA, researched features, built information architecture and designed UI."],
["Research & usability", "User and market research plus usability evaluation to continuously improve the products."],
["Design foundations", "Built the design system, user personas, customer journeys, screen maps and user flows."],
["Cross-functional work", "Partnered with dev and growth to plan, design, test and ship."],
],
},
projects: ["LuyenToan", "LuyenToan Landing page", "Notification Tool", "Reply Tool", "Expeto", "Toan247", "Japan Math"],
},
{
id: "onteractive",
time: { vi: "01/2019 — 06/2020", en: "01/2019 — 06/2020" },
org: "Onteractive",
role: { vi: "UI/UX Designer", en: "UI/UX Designer" },
note: {
vi: "Agency UI/UX & research: VinBase, Ubank, WireKit",
en: "UI/UX & research agency: VinBase, Ubank, WireKit",
},
about: {
vi: "Onteractive là agency chuyên thiết kế giao diện UI và nghiên cứu chuyên sâu về trải nghiệm người dùng, cung cấp các giải pháp kiểm thử sản phẩm trực tiếp hoặc từ xa.",
en: "Onteractive is an agency specialising in UI design and in-depth user-experience research, offering moderated and remote product-testing solutions.",
},
metrics: [],
points: {
vi: [
["Làm việc với khách hàng", "Làm việc trực tiếp với khách hàng, cùng nhóm phân tích đề bài và đề xuất giải pháp; tham gia cùng nhóm thương hiệu xây dựng định hướng."],
["Research & thiết kế", "Phối hợp nhóm nghiên cứu để tìm hiểu người dùng và đánh giá khả dụng; nghiên cứu đối thủ, dựng cấu trúc thông tin, design system, luồng người dùng, khung giao diện và bản mẫu."],
["Training", "Hướng dẫn thiết kế giao diện cho nhân sự mới."],
],
en: [
["Client work", "Worked directly with clients, analysed briefs with the team and proposed solutions; contributed to brand strategy with the branding team."],
["Research & design", "Partnered with UX research on user studies and usability evaluation; competitive research, IA, design system, user flows, wireframes, UI and prototypes."],
["Training", "Ran UI design training for freshers."],
],
},
projects: ["VinBase", "Mypoint", "Người Dân", "Poshaco", "Ubank", "E-cabinet", "WireKit", "Quảng Ninh Tourism", "VR Museum", "Remo"],
},
{
id: "wiloke",
time: { vi: "05/2018 — 01/2019", en: "05/2018 — 01/2019" },
org: "Wiloke",
role: { vi: "UI/UX Designer", en: "UI/UX Designer" },
note: {
vi: "Theme WordPress bán trên ThemeForest: WilCity",
en: "WordPress themes on ThemeForest: WilCity",
},
about: {
vi: "Wiloke là công ty chuyên thiết kế và cung cấp giao diện, plugin và bộ công cụ hỗ trợ cho nền tảng WordPress.",
en: "Wiloke designs and sells themes, plugins and toolkits for the WordPress platform.",
},
metrics: [],
points: {
vi: [["Thiết kế sản phẩm thương mại", "Nghiên cứu và thiết kế giao diện web/ứng dụng bán trên ThemeForest; làm việc trực tiếp với khách hàng và hỗ trợ tuỳ biến giao diện."]],
en: [["Commercial product design", "Researched and designed web/app UI products sold on ThemeForest; worked directly with buyers and supported UI customisation."]],
},
projects: ["WilCity"],
},
];
function NeuralDirection() {
const [lang, setLang] = useState("vi");
const t = (obj) => obj?.[lang] ?? obj;
const [emailCopied, setEmailCopied] = useState(false);
const [openJob, setOpenJob] = useState(null);
// Topbar blends with the page at rest; gains a dark blur only once scrolled.
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 24);
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
return () => window.removeEventListener("scroll", onScroll);
}, []);
const copyEmail = () => {
navigator.clipboard?.writeText(D.identity.email);
setEmailCopied(true);
setTimeout(() => setEmailCopied(false), 1500);
};
// Only projects with a real, written case study get a hero card.
const featured = D.projects.filter(p => p.slug === "finpath" || p.slug === "atx");
const archive = D.projects.filter(p => p.slug !== "finpath" && p.slug !== "atx");
const EXPERIENCES = CAREER;
// Verified, checkable recognition only (same list the Editorial direction uses).
const RECOGNITION = [
{
year: "2025",
kind: { vi: "Chứng chỉ", en: "Certificate" },
title: { vi: "Designing Digital Product per Stage and Metric", en: "Designing Digital Product per Stage and Metric" },
org: "UXCamp Vietnam",
},
{
year: "2024",
kind: { vi: "Thành tích sản phẩm", en: "Product milestone" },
title: { vi: "Top 10 ứng dụng Fintech trên App Store Việt Nam", en: "Top 10 fintech apps on the Vietnam App Store" },
org: "ATX",
},
{
year: "2020",
kind: { vi: "Học vấn", en: "Education" },
title: { vi: "Kỹ sư Công nghệ Thông tin — GPA 3.62, xếp loại Xuất sắc", en: "BEng Information Technology — GPA 3.62, with distinction" },
org: { vi: "Đại học Giao thông Vận tải", en: "University of Transport and Communications" },
},
];
const STATS = [
{ v: "6+", l: { vi: "năm kinh nghiệm Product Design", en: "years of experience in Product Design" } },
{ v: "5", l: { vi: "năm chuyên sâu trong lĩnh vực Fintech", en: "years specializing in Fintech" } },
{ v: "2M+", l: { vi: "người dùng đã tiếp cận", en: "users reached" } },
{ v: "3x", l: { vi: "tốc độ ra mắt thiết kế nhờ quy trình AI", en: "design delivery speed thanks to AI workflow" } },
];
const MARQUEE = ["ATX Securities", "Finpath", "Topica EdTech", "Onteractive", "Wiloke", "VinBase", "Ubank"];
return (