{"id":2159,"date":"2026-03-22T11:44:01","date_gmt":"2026-03-22T11:44:01","guid":{"rendered":"https:\/\/dominhtunglam.com\/?page_id=2159"},"modified":"2026-03-22T14:03:07","modified_gmt":"2026-03-22T14:03:07","slug":"hc-vietnam-showcase-clone","status":"publish","type":"page","link":"https:\/\/dominhtunglam.com\/?page_id=2159","title":{"rendered":"MetagetX Showcase"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2159\" class=\"elementor elementor-2159\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa90ec9 e-con-full e-flex e-con e-parent\" data-id=\"fa90ec9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd37d35 elementor-widget elementor-widget-html\" data-id=\"cd37d35\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- BLOCK 01: HERO -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n.cs{font-family:'Plus Jakarta Sans',sans-serif}\n.cs *,.cs *::before,.cs *::after{box-sizing:border-box}\n.cs h1,.cs h2,.cs h3,.cs h4,.cs p,.cs ul,.cs li{margin:0;padding:0}\n\n.cs .cs-pill{background:#141c18;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:7px 14px;font-size:12px;color:#7a9488;line-height:1.4}\n.cs .cs-pill strong{color:#e8f0ec;font-weight:600}\n\n\/* Hero shell *\/\n.cs-hero{\n  background:#0b0f0e;\n  border-radius:20px;\n  overflow:hidden;\n}\n.cs-hero-inner{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  min-height:480px;\n}\n\n\/* \u2500\u2500 Left \u2500\u2500 *\/\n.cs-hero-l{\n  padding:56px 44px 56px 48px;\n  display:flex;\n  flex-direction:column;\n  justify-content:center;\n  position:relative;\n}\n.cs-hero-l::before{\n  content:'';\n  position:absolute;inset:0;\n  background:radial-gradient(ellipse at 10% 50%,rgba(69,203,133,.1) 0%,transparent 65%);\n  pointer-events:none;\n}\n\n.cs-badge{\n  display:inline-flex;align-items:center;gap:7px;\n  background:rgba(69,203,133,.08);\n  border:1px solid rgba(69,203,133,.2);\n  border-radius:100px;\n  padding:5px 14px 5px 9px;\n  margin-bottom:20px;\n  width:fit-content;\n  position:relative;\n}\n.cs-badge-dot{\n  width:6px;height:6px;border-radius:50%;\n  background:#45CB85;\n  animation:cspulse 2s infinite;\n}\n@keyframes cspulse{\n  0%,100%{opacity:1;transform:scale(1)}\n  50%{opacity:.3;transform:scale(1.5)}\n}\n.cs-badge-text{\n  font-size:11px;font-weight:700;\n  color:#45CB85;text-transform:uppercase;letter-spacing:.08em;line-height:1;\n}\n\n.cs-hero-title{\n  font-size:clamp(24px,3.2vw,36px);\n  font-weight:800;\n  color:#fff;\n  line-height:1.18;\n  letter-spacing:-0.02em;\n  margin-bottom:14px;\n  position:relative;\n}\n.cs-hero-title em{color:#45CB85;font-style:normal}\n\n.cs-hero-desc{\n  font-size:14px;\n  color:#7a9488;\n  line-height:1.75;\n  margin-bottom:36px;\n  max-width:360px;\n  position:relative;\n}\n\n.cs-pills{\n  display:flex;\n  flex-wrap:wrap;\n  gap:8px;\n  position:relative;\n}\n\n\/* CTA buttons *\/\n.cs-hero-actions{\n  display:flex;\n  flex-wrap:wrap;\n  align-items:center;\n  gap:12px;\n  margin-bottom:24px;\n  margin-top:24px;\n  position:relative;\n}\n.cs-btn-live{\n  display:inline-flex;align-items:center;gap:8px;\n  background:#45CB85;\n  color:#0b0f0e;\n  font-family:'Plus Jakarta Sans',sans-serif;\n  font-size:13.5px;font-weight:700;\n  line-height:1;\n  padding:11px 22px;\n  border-radius:10px;\n  border:none;\n  text-decoration:none;\n  cursor:pointer;\n  transition:background .2s,transform .15s;\n}\n.cs-btn-live:hover{\n  background:#38b872;\n  transform:translateY(-1px);\n  text-decoration:none;\n  color:#0b0f0e;\n}\n.cs-btn-live-ico{\n  font-size:14px;line-height:1;\n}\n.cs-btn-live-arrow{\n  font-size:14px;line-height:1;\n  transition:transform .2s;\n}\n.cs-btn-live:hover .cs-btn-live-arrow{\n  transform:translateX(3px);\n}\n.cs-btn-live-dot{\n  width:7px;height:7px;border-radius:50%;\n  background:#0b0f0e;\n  opacity:.5;\n  animation:cspulse 2s infinite;\n}\n\n\/* \u2500\u2500 Right: placeholder \u2500\u2500 *\/\n.cs-hero-r{\n  position:relative;\n  background:#0f1a14;\n  border-left:1px solid rgba(69,203,133,.1);\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  overflow:hidden;\n  min-height:480px;\n}\n.cs-hero-r::before{\n  content:'';position:absolute;\n  top:-60px;right:-60px;\n  width:280px;height:280px;border-radius:50%;\n  background:radial-gradient(circle,rgba(69,203,133,.1) 0%,transparent 70%);\n  pointer-events:none;\n}\n.cs-hero-r::after{\n  content:'';position:absolute;\n  bottom:-50px;left:-30px;\n  width:200px;height:200px;border-radius:50%;\n  background:radial-gradient(circle,rgba(69,203,133,.06) 0%,transparent 70%);\n  pointer-events:none;\n}\n\/* Dot grid *\/\n.cs-hero-grid{\n  position:absolute;inset:0;\n  background-image:\n    radial-gradient(circle,rgba(69,203,133,.12) 1px,transparent 1px);\n  background-size:24px 24px;\n  pointer-events:none;\n}\n\n\/* Image (shown when src set) *\/\n.cs-hero-img{\n  position:absolute;inset:0;\n  width:100%;height:100%;\n  object-fit:cover;\n  display:block;\n  z-index:1;\n}\n\n\/* Placeholder *\/\n.cs-hero-ph{\n  position:relative;z-index:2;\n  display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:12px;padding:48px 32px;\n  text-align:center;\n  pointer-events:none;\n}\n.cs-hero-ph-box{\n  width:72px;height:72px;\n  border-radius:18px;\n  border:2px dashed rgba(69,203,133,.28);\n  background:rgba(69,203,133,.05);\n  display:flex;align-items:center;justify-content:center;\n  font-size:28px;\n  margin-bottom:4px;\n}\n.cs-hero-ph-title{\n  font-size:12px;font-weight:700;\n  color:rgba(69,203,133,.45);\n  text-transform:uppercase;letter-spacing:.08em;line-height:1;\n}\n.cs-hero-ph-note{\n  font-size:12px;color:#2d4a3a;\n  line-height:1.55;\n}\n.cs-hero-ph-size{\n  font-size:10.5px;color:#243c2c;\n  background:rgba(69,203,133,.05);\n  border:1px solid rgba(69,203,133,.1);\n  border-radius:6px;padding:4px 12px;\n  font-family:monospace;line-height:1.4;\n}\n.cs-hero-ph-tag{\n  position:absolute;top:14px;left:14px;z-index:3;\n  background:rgba(11,15,14,.88);\n  border:1px solid rgba(69,203,133,.2);\n  border-radius:7px;padding:5px 11px;\n  font-size:10px;font-weight:700;\n  color:#45CB85;line-height:1;\n}\n\n\/* \u2500\u2500 Responsive \u2500\u2500 *\/\n@media(max-width:720px){\n  .cs-hero-inner{grid-template-columns:1fr}\n  .cs-hero-l{padding:36px 24px 32px}\n  .cs-hero-desc{max-width:100%}\n  .cs-hero-r{min-height:260px;border-left:none;border-top:1px solid rgba(69,203,133,.1)}\n}\n<\/style>\n\n<div class=\"cs\">\n<div class=\"cs-hero\">\n  <div class=\"cs-hero-inner\">\n\n    <!-- Left: Text -->\n    <div class=\"cs-hero-l\">\n      <div class=\"cs-badge\">\n        <span class=\"cs-badge-dot\"><\/span>\n        <span class=\"cs-badge-text\">Product Design Case Study<\/span>\n      <\/div>\n      <h1 class=\"cs-hero-title\">\n        Metagetx \u2014 Asia's<br>\n        <em>NFT Rewards<\/em><br>\n        Marketplace\n      <\/h1>\n      <p class=\"cs-hero-desc\">\n        Designing an NFT marketplace that bridges mainstream SEA consumers with blockchain-powered brand rewards \u2014 from fashion drops to game studios.\n      <\/p>\n      <div class=\"cs-hero-actions\">\n        <a href=\"https:\/\/metagetx.io\/\" target=\"_blank\" rel=\"noopener\" class=\"cs-btn-live\">\n          <span class=\"cs-btn-live-dot\"><\/span>\n          View Live Website\n          <span class=\"cs-btn-live-arrow\">\u2192<\/span>\n        <\/a>\n      <\/div>\n\n      <div class=\"cs-pills\">\n        <div class=\"cs-pill\"><strong>Role<\/strong>&nbsp;&nbsp;Product Designer<\/div>\n        <div class=\"cs-pill\"><strong>Duration<\/strong>&nbsp;&nbsp;1 Year<\/div>\n        <div class=\"cs-pill\"><strong>Platform<\/strong>&nbsp;&nbsp;Web App<\/div>\n        <div class=\"cs-pill\"><strong>Domain<\/strong>&nbsp;&nbsp;NFT \u00b7 Web3 \u00b7 Rewards<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Right: Image placeholder -->\n    <!--\n      \ud83d\udcf8 C\u00c1CH TH\u00caM \u1ea2NH: x\u00f3a <div class=\"cs-hero-ph\">...<\/div>\n      r\u1ed3i th\u00eam: <img decoding=\"async\" class=\"cs-hero-img\" src=\"URL_\u1ea2NH\" alt=\"Mockup\">\n      \u1ea2nh t\u1ef1 cover v\u00f9ng ph\u1ea3i. G\u1ee3i \u00fd: 900\u00d7700px tr\u1edf l\u00ean.\n    -->\n    <div class=\"cs-hero-r\">\n      <div class=\"cs-hero-grid\"><\/div>\n        <img decoding=\"async\" class=\"cs-hero-img\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Frame-5279-1.png\" alt=\"Mockup\">\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1d66b37 e-con-full e-flex e-con e-parent\" data-id=\"1d66b37\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-24e8f56 elementor-widget elementor-widget-html\" data-id=\"24e8f56\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- BLOCK 02: DISCOVERY & PROBLEM -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n.cs{font-family:'Plus Jakarta Sans',sans-serif}\n.cs *,.cs *::before,.cs *::after{box-sizing:border-box}\n.cs h1,.cs h2,.cs h3,.cs h4,.cs p,.cs ul,.cs li{margin:0;padding:0}\n\n.cs-shell{background:#0b0f0e;border-radius:20px;padding:48px 44px}\n.cs-hd{display:flex;align-items:flex-start;gap:16px;margin-bottom:36px}\n.cs-num{width:36px;height:36px;flex-shrink:0;background:rgba(69,203,133,.09);border:1px solid rgba(69,203,133,.22);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#45CB85;line-height:1}\n.cs-hd-txt{display:flex;flex-direction:column;gap:5px}\n.cs-title{font-size:22px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-0.015em}\n.cs-sub{font-size:13px;font-weight:500;color:#4d6b5c;line-height:1.4}\n\n\/* Grid *\/\n.cs-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}\n.cs-span2{grid-column:1\/-1}\n\n\/* Card *\/\n.cs-card{background:#141c18;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:24px;transition:border-color .2s}\n.cs-card:hover{border-color:rgba(69,203,133,.18)}\n.cs-ctitle{font-size:14px;font-weight:700;color:#fff;line-height:1.4;margin-bottom:12px}\n.cs-body{font-size:13.5px;color:#7a9488;line-height:1.72}\n.cs-body+.cs-body{margin-top:10px}\n\n\/* HMW *\/\n.cs-hmw{background:rgba(69,203,133,.06);border:1px solid rgba(69,203,133,.16);border-radius:10px;padding:14px 18px;margin-top:14px}\n.cs-hmw-lbl{font-size:10px;font-weight:800;color:#45CB85;text-transform:uppercase;letter-spacing:.08em;line-height:1;margin-bottom:8px}\n.cs-hmw-body{font-size:13.5px;color:#e8f0ec;line-height:1.65}\n\n\/* Problem card inner layout *\/\n.cs-prob-inner{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start}\n\n\/* Insight pills *\/\n.cs-ipills{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0}\n.cs-ipill{display:flex;align-items:flex-start;gap:10px;background:#192320;border:1px solid rgba(69,203,133,.12);border-radius:10px;padding:12px 14px}\n.cs-ipill-ico{font-size:18px;flex-shrink:0;line-height:1;margin-top:1px}\n.cs-ipill-name{font-size:12.5px;font-weight:700;color:#e8f0ec;line-height:1.3;margin-bottom:3px}\n.cs-ipill-desc{font-size:11.5px;color:#7a9488;line-height:1.4}\n\n\/* Research sidebar *\/\n.cs-research{background:#111916;border:1px solid rgba(69,203,133,.1);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px;height:100%}\n.cs-rlbl{font-size:10px;font-weight:800;color:#4d6b5c;text-transform:uppercase;letter-spacing:.08em;line-height:1}\n.cs-bar-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}\n.cs-bar-txt{font-size:11.5px;color:#7a9488;line-height:1.3}\n.cs-bar-pct{font-size:11.5px;font-weight:700;color:#45CB85;line-height:1}\n.cs-track{height:5px;border-radius:100px;background:#192320;overflow:hidden}\n.cs-fill{height:100%;border-radius:100px;background:linear-gradient(to right,#45CB85,#2faa69)}\n.cs-target{display:flex;align-items:center;gap:10px;background:#141c18;border-radius:8px;padding:10px 12px;margin-top:4px}\n.cs-target-ico{font-size:16px;flex-shrink:0;line-height:1}\n.cs-target-name{font-size:12px;font-weight:700;color:#e8f0ec;line-height:1.3;margin-bottom:2px}\n.cs-target-sub{font-size:11px;color:#4d6b5c;line-height:1.3}\n\n\/* Pain grid *\/\n.cs-pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}\n.cs-pain{background:#141c18;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:20px 18px;transition:border-color .2s}\n.cs-pain:hover{border-color:rgba(69,203,133,.18)}\n.cs-pain-ico{font-size:24px;line-height:1;display:block;margin-bottom:14px}\n.cs-pain-title{font-size:13px;font-weight:700;color:#fff;line-height:1.35;margin-bottom:8px}\n.cs-pain-body{font-size:12.5px;color:#7a9488;line-height:1.65}\n\n@media(max-width:720px){\n  .cs-shell{padding:32px 20px}\n  .cs-grid2{grid-template-columns:1fr}\n  .cs-prob-inner{grid-template-columns:1fr}\n  .cs-ipills{width:100%;flex-direction:row;flex-wrap:wrap}\n  .cs-pain-grid{grid-template-columns:1fr}\n}\n<\/style>\n\n<div class=\"cs\">\n<div class=\"cs-shell\">\n  <div class=\"cs-hd\">\n    <div class=\"cs-num\">01<\/div>\n    <div class=\"cs-hd-txt\">\n      <div class=\"cs-title\">Discovery &amp; Problem<\/div>\n      <div class=\"cs-sub\">Understanding the landscape and the real challenge<\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"cs-grid2\">\n\n    <!-- Context card -->\n    <div class=\"cs-card\">\n      <div class=\"cs-ctitle\">\ud83d\udd2d Project Context<\/div>\n      <p class=\"cs-body\">Metagetx was conceived as Asia's first NFT Rewards Marketplace \u2014 connecting users with digital assets from brands, content creators, and game studios across Southeast Asia.<\/p>\n      <p class=\"cs-body\">The core vision was to democratize NFT ownership by tying it to real-world value: brand loyalty programs, exclusive event access, and collectible rewards.<\/p>\n    <\/div>\n\n    <!-- Research bars -->\n    <div class=\"cs-research\">\n      <div class=\"cs-rlbl\">Discovery Research<\/div>\n      <div>\n        <div class=\"cs-bar-row\"><span class=\"cs-bar-txt\">Aware of NFTs<\/span><span class=\"cs-bar-pct\">82%<\/span><\/div>\n        <div class=\"cs-track\"><div class=\"cs-fill\" style=\"width:82%\"><\/div><\/div>\n      <\/div>\n      <div>\n        <div class=\"cs-bar-row\"><span class=\"cs-bar-txt\">Never purchased an NFT<\/span><span class=\"cs-bar-pct\">71%<\/span><\/div>\n        <div class=\"cs-track\"><div class=\"cs-fill\" style=\"width:71%\"><\/div><\/div>\n      <\/div>\n      <div>\n        <div class=\"cs-bar-row\"><span class=\"cs-bar-txt\">Prefer brand NFTs over art<\/span><span class=\"cs-bar-pct\">68%<\/span><\/div>\n        <div class=\"cs-track\"><div class=\"cs-fill\" style=\"width:68%\"><\/div><\/div>\n      <\/div>\n      <div>\n        <div class=\"cs-bar-row\"><span class=\"cs-bar-txt\">Primary device: Mobile<\/span><span class=\"cs-bar-pct\">91%<\/span><\/div>\n        <div class=\"cs-track\"><div class=\"cs-fill\" style=\"width:91%\"><\/div><\/div>\n      <\/div>\n      <div class=\"cs-target\">\n        <span class=\"cs-target-ico\">\ud83c\udf0f<\/span>\n        <div>\n          <div class=\"cs-target-name\">Target: SEA Mainstream Users<\/div>\n          <div class=\"cs-target-sub\">Vietnam \u00b7 Singapore \u00b7 Malaysia<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Problem statement \u2014 full width -->\n    <div class=\"cs-card cs-span2\">\n      <div class=\"cs-prob-inner\">\n        <div>\n          <div class=\"cs-ctitle\">\u26a1 Problem Statement<\/div>\n          <p class=\"cs-body\">Existing NFT platforms are built for crypto-native users \u2014 they assume wallet knowledge, are overwhelmed with speculative content, and lack the trust signals needed for mainstream adoption.<\/p>\n          <div class=\"cs-hmw\">\n            <div class=\"cs-hmw-lbl\">How Might We<\/div>\n            <div class=\"cs-hmw-body\">Design an NFT marketplace that feels familiar to casual consumers while still being powerful enough for collectors and creators \u2014 and bridges the trust gap between Web2 users and Web3 assets?<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"cs-ipills\">\n          <div class=\"cs-ipill\">\n            <span class=\"cs-ipill-ico\">\ud83d\udd11<\/span>\n            <div>\n              <div class=\"cs-ipill-name\">Wallet Friction<\/div>\n              <div class=\"cs-ipill-desc\">Invisible barrier before first interaction<\/div>\n            <\/div>\n          <\/div>\n          <div class=\"cs-ipill\">\n            <span class=\"cs-ipill-ico\">\ud83c\udf0f<\/span>\n            <div>\n              <div class=\"cs-ipill-name\">SEA Gap<\/div>\n              <div class=\"cs-ipill-desc\">No platform tailored for the region<\/div>\n            <\/div>\n          <\/div>\n          <div class=\"cs-ipill\">\n            <span class=\"cs-ipill-ico\">\ud83c\udf81<\/span>\n            <div>\n              <div class=\"cs-ipill-name\">Reward-First<\/div>\n              <div class=\"cs-ipill-desc\">Users value utility over speculation<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <!-- Pain points -->\n  <div class=\"cs-pain-grid\">\n    <div class=\"cs-pain\">\n      <span class=\"cs-pain-ico\">\ud83d\ude30<\/span>\n      <div class=\"cs-pain-title\">Complexity Barrier<\/div>\n      <p class=\"cs-pain-body\">Setup requiring MetaMask, seed phrases, and ETH gas fees deterred 7 in 10 first-time visitors from ever completing a purchase.<\/p>\n    <\/div>\n    <div class=\"cs-pain\">\n      <span class=\"cs-pain-ico\">\ud83c\udfad<\/span>\n      <div class=\"cs-pain-title\">Speculative Content<\/div>\n      <p class=\"cs-pain-body\">Existing platforms prioritize speculative art collectibles over utility-driven NFTs \u2014 misaligned with SEA consumers' reward-focused motivations.<\/p>\n    <\/div>\n    <div class=\"cs-pain\">\n      <span class=\"cs-pain-ico\">\ud83d\udee1\ufe0f<\/span>\n      <div class=\"cs-pain-title\">Trust Deficit<\/div>\n      <p class=\"cs-pain-body\">Users reported hesitation about scams, unverified creators, and unclear ownership rights \u2014 all solvable UX and content problems.<\/p>\n    <\/div>\n  <\/div>\n\n<\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0d38d09 e-con-full e-flex e-con e-parent\" data-id=\"0d38d09\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b30008b elementor-widget elementor-widget-html\" data-id=\"b30008b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- BLOCK 03: KEY FINDINGS -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n.cs{font-family:'Plus Jakarta Sans',sans-serif}.cs *,.cs *::before,.cs *::after{box-sizing:border-box}.cs h1,.cs h2,.cs h3,.cs h4,.cs p,.cs ul,.cs li{margin:0;padding:0}\n.cs-shell{background:#0b0f0e;border-radius:20px;padding:48px 44px}\n.cs-hd{display:flex;align-items:flex-start;gap:16px;margin-bottom:36px}\n.cs-num{width:36px;height:36px;flex-shrink:0;background:rgba(69,203,133,.09);border:1px solid rgba(69,203,133,.22);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#45CB85;line-height:1}\n.cs-hd-txt{display:flex;flex-direction:column;gap:5px}\n.cs-title{font-size:22px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-0.015em}\n.cs-sub{font-size:13px;font-weight:500;color:#4d6b5c;line-height:1.4}\n\n.cs-find-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}\n.cs-fcard{background:#141c18;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}\n.cs-fcard:hover{border-color:rgba(69,203,133,.2);transform:translateY(-2px)}\n.cs-fcard-ico{font-size:24px;line-height:1;margin-bottom:14px}\n.cs-fcard-title{font-size:13.5px;font-weight:700;color:#fff;line-height:1.4;margin-bottom:8px}\n.cs-fcard-body{font-size:12.5px;color:#7a9488;line-height:1.65;flex:1}\n.cs-fcard-stat{margin-top:14px;font-size:26px;font-weight:800;color:#45CB85;letter-spacing:-0.02em;line-height:1}\n.cs-fcard-stat-lbl{margin-top:3px;font-size:10.5px;font-weight:600;color:#4d6b5c;text-transform:uppercase;letter-spacing:.06em;line-height:1.3}\n\n.cs-strip{background:linear-gradient(135deg,#111916 0%,rgba(69,203,133,.05) 100%);border:1px solid rgba(69,203,133,.15);border-radius:14px;padding:24px 28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}\n.cs-strip-ico{font-size:32px;line-height:1;flex-shrink:0}\n.cs-strip-txt{flex:1;min-width:200px}\n.cs-strip-title{font-size:15px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:8px}\n.cs-strip-body{font-size:13.5px;color:#7a9488;line-height:1.65}\n.cs-strip-stats{display:flex;gap:24px;flex-wrap:wrap;flex-shrink:0}\n.cs-stat{text-align:center}\n.cs-stat-val{font-size:28px;font-weight:800;color:#45CB85;line-height:1;display:block}\n.cs-stat-lbl{font-size:10px;font-weight:600;color:#4d6b5c;text-transform:uppercase;letter-spacing:.06em;line-height:1.4;display:block;margin-top:4px}\n\n@media(max-width:720px){.cs-shell{padding:32px 20px}.cs-find-grid{grid-template-columns:1fr 1fr}.cs-strip{flex-direction:column;align-items:flex-start}}\n@media(max-width:480px){.cs-find-grid{grid-template-columns:1fr}}\n<\/style>\n<div class=\"cs\"><div class=\"cs-shell\">\n  <div class=\"cs-hd\">\n    <div class=\"cs-num\">02<\/div>\n    <div class=\"cs-hd-txt\">\n      <div class=\"cs-title\">Key Findings<\/div>\n      <div class=\"cs-sub\">User research insights that shaped the design direction<\/div>\n    <\/div>\n  <\/div>\n  <div class=\"cs-find-grid\">\n    <div class=\"cs-fcard\"><div class=\"cs-fcard-ico\">\ud83d\udd11<\/div><div class=\"cs-fcard-title\">Crypto-Literacy Barrier<\/div><p class=\"cs-fcard-body\">The primary blocker was not price, but complexity \u2014 wallets, seed phrases, and gas fees created invisible drop-off before first purchase.<\/p><div class=\"cs-fcard-stat\">71%<\/div><div class=\"cs-fcard-stat-lbl\">never purchased an NFT<\/div><\/div>\n    <div class=\"cs-fcard\"><div class=\"cs-fcard-ico\">\ud83d\udcac<\/div><div class=\"cs-fcard-title\">Trust Through Familiarity<\/div><p class=\"cs-fcard-body\">Users trusted NFTs more when attached to recognizable brands \u2014 fashion, sports, music \u2014 rather than anonymous digital artists.<\/p><div class=\"cs-fcard-stat\">3\u00d7<\/div><div class=\"cs-fcard-stat-lbl\">more likely to buy branded NFT<\/div><\/div>\n    <div class=\"cs-fcard\"><div class=\"cs-fcard-ico\">\ud83d\udcf1<\/div><div class=\"cs-fcard-title\">Mobile-First Behavior<\/div><p class=\"cs-fcard-body\">Target users in SEA discovered and transacted primarily on mobile. Desktop was a secondary, research-only surface.<\/p><div class=\"cs-fcard-stat\">91%<\/div><div class=\"cs-fcard-stat-lbl\">primary device is mobile<\/div><\/div>\n    <div class=\"cs-fcard\"><div class=\"cs-fcard-ico\">\ud83c\udfc6<\/div><div class=\"cs-fcard-title\">Gamification Appeal<\/div><p class=\"cs-fcard-body\">Leaderboards, reward streaks, and exclusive event access were compelling motivators \u2014 more so than resale value potential.<\/p><div class=\"cs-fcard-stat\">\u219168%<\/div><div class=\"cs-fcard-stat-lbl\">engagement with reward features<\/div><\/div>\n    <div class=\"cs-fcard\"><div class=\"cs-fcard-ico\">\ud83d\udcb8<\/div><div class=\"cs-fcard-title\">Low Price Sensitivity<\/div><p class=\"cs-fcard-body\">Users were comfortable with USD$25\u2013$50 purchases when tied to brand rewards \u2014 unlike the volatile crypto-art market.<\/p><div class=\"cs-fcard-stat\">$25<\/div><div class=\"cs-fcard-stat-lbl\">sweet spot price point<\/div><\/div>\n    <div class=\"cs-fcard\"><div class=\"cs-fcard-ico\">\ud83d\udee1\ufe0f<\/div><div class=\"cs-fcard-title\">Safety Signals Matter<\/div><p class=\"cs-fcard-body\">Platform credibility came from creator verification, brand partnerships, and clear ownership policies \u2014 not blockchain transparency.<\/p><div class=\"cs-fcard-stat\">\u219154%<\/div><div class=\"cs-fcard-stat-lbl\">conversion with trust badges<\/div><\/div>\n  <\/div>\n  <div class=\"cs-strip\">\n    <span class=\"cs-strip-ico\">\ud83d\udca1<\/span>\n    <div class=\"cs-strip-txt\">\n      <div class=\"cs-strip-title\">Core Strategic Insight<\/div>\n      <p class=\"cs-strip-body\">SEA users don't resist NFTs because of price or technology \u2014 they resist because of complexity and lack of relevance. Simplify the entry, add familiar brand context, and conversion increases dramatically.<\/p>\n    <\/div>\n    <div class=\"cs-strip-stats\">\n      <div class=\"cs-stat\"><span class=\"cs-stat-val\">6<\/span><span class=\"cs-stat-lbl\">Research<br>Sessions<\/span><\/div>\n      <div class=\"cs-stat\"><span class=\"cs-stat-val\">24<\/span><span class=\"cs-stat-lbl\">Users<br>Interviewed<\/span><\/div>\n      <div class=\"cs-stat\"><span class=\"cs-stat-val\">4<\/span><span class=\"cs-stat-lbl\">Markets<br>Studied<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ea71564 e-con-full e-flex e-con e-parent\" data-id=\"ea71564\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c8f7f3c elementor-widget elementor-widget-html\" data-id=\"c8f7f3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- BLOCK 04: COMPETITOR RESEARCH -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n.cs{font-family:'Plus Jakarta Sans',sans-serif}.cs *,.cs *::before,.cs *::after{box-sizing:border-box}.cs h1,.cs h2,.cs h3,.cs h4,.cs p,.cs ul,.cs li{margin:0;padding:0}\n.cs-shell{background:#0b0f0e;border-radius:20px;padding:48px 44px}\n.cs-hd{display:flex;align-items:flex-start;gap:16px;margin-bottom:36px}\n.cs-num{width:36px;height:36px;flex-shrink:0;background:rgba(69,203,133,.09);border:1px solid rgba(69,203,133,.22);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#45CB85;line-height:1}\n.cs-hd-txt{display:flex;flex-direction:column;gap:5px}\n.cs-title{font-size:22px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-0.015em}\n.cs-sub{font-size:13px;font-weight:500;color:#4d6b5c;line-height:1.4}\n\n.cs-comp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}\n.cs-comp{background:#141c18;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px 18px;transition:border-color .2s}\n.cs-comp:hover{border-color:rgba(69,203,133,.18)}\n.cs-comp-logo{width:36px;height:36px;border-radius:9px;background:#192320;border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px;line-height:1}\n.cs-comp-name{font-size:14px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:3px}\n.cs-comp-type{font-size:11px;color:#4d6b5c;font-weight:500;line-height:1.3;margin-bottom:14px}\n.cs-comp-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:7px}\n.cs-comp-lbl{font-size:10px;font-weight:700;color:#4d6b5c;text-transform:uppercase;letter-spacing:.07em;line-height:1.3;min-width:44px;flex-shrink:0;padding-top:2px}\n.cs-comp-val{font-size:11.5px;color:#7a9488;line-height:1.4;flex:1}\n\n.cs-tag{display:inline-flex;align-items:center;border-radius:6px;padding:2px 9px;font-size:10.5px;font-weight:700;line-height:1.5}\n.cs-tag-g{background:rgba(69,203,133,.1);color:#45CB85;border:1px solid rgba(69,203,133,.22)}\n.cs-tag-r{background:rgba(255,100,100,.09);color:#ff7c7c;border:1px solid rgba(255,100,100,.18)}\n.cs-tag-y{background:rgba(255,200,70,.09);color:#ffc846;border:1px solid rgba(255,200,70,.18)}\n\n\/* Metagetx highlight card *\/\n.cs-us{background:linear-gradient(160deg,#141c18,rgba(69,203,133,.04));border:1px solid rgba(69,203,133,.25);border-radius:14px;padding:20px;margin-bottom:12px}\n.cs-us-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}\n.cs-us-logo{width:36px;height:36px;border-radius:9px;background:rgba(69,203,133,.1);border:1px solid rgba(69,203,133,.2);display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;flex-shrink:0}\n.cs-us-name{font-size:16px;font-weight:800;color:#45CB85;line-height:1.2;margin-bottom:2px}\n.cs-us-type{font-size:11px;color:#4d6b5c;font-weight:500;line-height:1.3}\n.cs-us-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}\n.cs-us-col-lbl{font-size:10px;font-weight:700;color:#4d6b5c;text-transform:uppercase;letter-spacing:.07em;line-height:1;margin-bottom:6px}\n.cs-us-col-val{font-size:12px;color:#7a9488;line-height:1.4}\n\n\/* Strategy *\/\n.cs-strategy{background:linear-gradient(135deg,#111916 0%,rgba(69,203,133,.05) 100%);border:1px solid rgba(69,203,133,.15);border-radius:14px;padding:24px 28px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}\n.cs-strategy-ico{font-size:28px;line-height:1}\n.cs-strategy-title{font-size:15px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:10px}\n.cs-strategy-body{font-size:13.5px;color:#7a9488;line-height:1.7}\n.cs-opp{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:rgba(69,203,133,.09);border:1px solid rgba(69,203,133,.2);border-radius:8px;padding:8px 14px;font-size:12px;font-weight:700;color:#45CB85;line-height:1}\n\n@media(max-width:720px){.cs-shell{padding:32px 20px}.cs-comp-grid{grid-template-columns:1fr 1fr}.cs-us-cols{grid-template-columns:1fr}.cs-strategy{grid-template-columns:1fr}}\n@media(max-width:480px){.cs-comp-grid{grid-template-columns:1fr}}\n<\/style>\n<div class=\"cs\"><div class=\"cs-shell\">\n  <div class=\"cs-hd\">\n    <div class=\"cs-num\">03<\/div>\n    <div class=\"cs-hd-txt\">\n      <div class=\"cs-title\">Competitor Research<\/div>\n      <div class=\"cs-sub\">Mapping the NFT marketplace landscape to find white space<\/div>\n    <\/div>\n  <\/div>\n  <div class=\"cs-comp-grid\">\n    <div class=\"cs-comp\">\n      <div class=\"cs-comp-logo\">\ud83c\udf0a<\/div>\n      <div class=\"cs-comp-name\">OpenSea<\/div>\n      <div class=\"cs-comp-type\">General Marketplace<\/div>\n      <div class=\"cs-comp-row\"><span class=\"cs-comp-lbl\">Strength<\/span><div class=\"cs-comp-val\"><span class=\"cs-tag cs-tag-g\">Largest volume<\/span><\/div><\/div>\n      <div class=\"cs-comp-row\"><span class=\"cs-comp-lbl\">Audience<\/span><div class=\"cs-comp-val\">Crypto-native collectors<\/div><\/div>\n      <div class=\"cs-comp-row\"><span class=\"cs-comp-lbl\">Gap<\/span><div class=\"cs-comp-val\">Complex UX, no rewards<\/div><\/div>\n    <\/div>\n    <div class=\"cs-comp\">\n      <div class=\"cs-comp-logo\">\ud83e\udd8b<\/div>\n      <div class=\"cs-comp-name\">Rarible<\/div>\n      <div class=\"cs-comp-type\">Creator Platform<\/div>\n      <div class=\"cs-comp-row\"><span class=\"cs-comp-lbl\">Strength<\/span><div class=\"cs-comp-val\"><span class=\"cs-tag cs-tag-g\">Creator tools<\/span><\/div><\/div>\n      <div class=\"cs-comp-row\"><span class=\"cs-comp-lbl\">Audience<\/span><div class=\"cs-comp-val\">Artists &amp; creators<\/div><\/div>\n      <div class=\"cs-comp-row\"><span class=\"cs-comp-lbl\">Gap<\/span><div class=\"cs-comp-val\">No brand partnerships<\/div><\/div>\n    <\/div>\n    <div class=\"cs-comp\">\n      <div class=\"cs-comp-logo\">\ud83c\udfc0<\/div>\n      <div class=\"cs-comp-name\">NBA Top Shot<\/div>\n      <div class=\"cs-comp-type\">IP-Driven NFT<\/div>\n      <div class=\"cs-comp-row\"><span class=\"cs-comp-lbl\">Strength<\/span><div class=\"cs-comp-val\"><span class=\"cs-tag cs-tag-g\">IP-led adoption<\/span><\/div><\/div>\n      <div class=\"cs-comp-row\"><span class=\"cs-comp-lbl\">Audience<\/span><div class=\"cs-comp-val\">Sports fans, US-centric<\/div><\/div>\n      <div class=\"cs-comp-row\"><span class=\"cs-comp-lbl\">Gap<\/span><div class=\"cs-comp-val\">Single vertical, not SEA<\/div><\/div>\n    <\/div>\n    <div class=\"cs-comp\">\n      <div class=\"cs-comp-logo\">\ud83d\udd36<\/div>\n      <div class=\"cs-comp-name\">Binance NFT<\/div>\n      <div class=\"cs-comp-type\">Exchange-backed<\/div>\n      <div class=\"cs-comp-row\"><span class=\"cs-comp-lbl\">Strength<\/span><div class=\"cs-comp-val\"><span class=\"cs-tag cs-tag-y\">Large user base<\/span><\/div><\/div>\n      <div class=\"cs-comp-row\"><span class=\"cs-comp-lbl\">Audience<\/span><div class=\"cs-comp-val\">Crypto traders in Asia<\/div><\/div>\n      <div class=\"cs-comp-row\"><span class=\"cs-comp-lbl\">Gap<\/span><div class=\"cs-comp-val\"><span class=\"cs-tag cs-tag-r\">Intimidating UX<\/span><\/div><\/div>\n    <\/div>\n  <\/div>\n  <div class=\"cs-us\">\n    <div class=\"cs-us-head\">\n      <div class=\"cs-us-logo\">\ud83c\udf3f<\/div>\n      <div>\n        <div class=\"cs-us-name\">Metagetx \u2014 Our Position<\/div>\n        <div class=\"cs-us-type\">Rewards-First SEA Marketplace<\/div>\n      <\/div>\n    <\/div>\n    <div class=\"cs-us-cols\">\n      <div><div class=\"cs-us-col-lbl\">Positioning<\/div><div><span class=\"cs-tag cs-tag-g\">Rewards-first \u00b7 SEA-native<\/span><\/div><\/div>\n      <div><div class=\"cs-us-col-lbl\">Audience<\/div><div class=\"cs-us-col-val\">Mainstream SEA consumers<\/div><\/div>\n      <div><div class=\"cs-us-col-lbl\">Differentiator<\/div><div class=\"cs-us-col-val\">Brand partnerships + simple onboarding<\/div><\/div>\n    <\/div>\n  <\/div>\n  <div class=\"cs-strategy\">\n    <span class=\"cs-strategy-ico\">\ud83c\udfaf<\/span>\n    <div>\n      <div class=\"cs-strategy-title\">Strategic Insight<\/div>\n      <p class=\"cs-strategy-body\">No existing platform combined simplified onboarding, brand partnership infrastructure, and a rewards-first value proposition for the SEA market. This white space became Metagetx's core positioning \u2014 not competing on crypto feature depth, but on accessibility and brand relevance.<\/p>\n      <div class=\"cs-opp\">\u2726 White space: Rewards-NFT for mainstream SEA users<\/div>\n    <\/div>\n  <\/div>\n<\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e8b5eb6 e-con-full e-flex e-con e-parent\" data-id=\"e8b5eb6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7defbb4 elementor-widget elementor-widget-html\" data-id=\"7defbb4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- BLOCK 05: PERSONA & USER JOURNEY MAP -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n.cs{font-family:'Plus Jakarta Sans',sans-serif}.cs *,.cs *::before,.cs *::after{box-sizing:border-box}.cs h1,.cs h2,.cs h3,.cs h4,.cs p,.cs ul,.cs li{margin:0;padding:0}\n.cs-shell{background:#0b0f0e;border-radius:20px;padding:48px 44px}\n.cs-hd{display:flex;align-items:flex-start;gap:16px;margin-bottom:36px}\n.cs-num{width:36px;height:36px;flex-shrink:0;background:rgba(69,203,133,.09);border:1px solid rgba(69,203,133,.22);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#45CB85;line-height:1}\n.cs-hd-txt{display:flex;flex-direction:column;gap:5px}\n.cs-title{font-size:22px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-0.015em}\n.cs-sub{font-size:13px;font-weight:500;color:#4d6b5c;line-height:1.4}\n\n\/* Persona grid *\/\n.cs-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}\n.cs-persona{background:#141c18;border:1px solid rgba(255,255,255,.07);border-radius:16px;overflow:hidden;transition:border-color .2s}\n.cs-persona:hover{border-color:rgba(69,203,133,.2)}\n\n.cs-p-top{padding:20px 20px 18px;background:linear-gradient(160deg,#141c18,#0e1a12);border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:14px}\n.cs-p-avatar-wrap{position:relative;flex-shrink:0}\n.cs-p-avatar{width:52px;height:52px;border-radius:14px;background:#192320;border:2px solid rgba(69,203,133,.15);display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1}\n.cs-p-check{position:absolute;bottom:-4px;right:-4px;width:18px;height:18px;background:#45CB85;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;border:2px solid #141c18;line-height:1}\n.cs-p-name{font-size:16px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:3px}\n.cs-p-role{font-size:11.5px;color:#45CB85;font-weight:600;line-height:1.3;margin-bottom:3px}\n.cs-p-loc{font-size:11px;color:#4d6b5c;line-height:1.3}\n\n.cs-p-body{padding:18px 20px 20px}\n.cs-p-desc{font-size:13px;color:#7a9488;line-height:1.65;margin-bottom:14px}\n.cs-p-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}\n.cs-ptag{background:#192320;border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:3px 9px;font-size:11px;color:#7a9488;line-height:1.4}\n.cs-p-pain{background:rgba(255,100,100,.06);border:1px solid rgba(255,100,100,.12);border-radius:8px;padding:10px 12px;font-size:12px;color:#ff8a8a;line-height:1.5;margin-bottom:7px}\n.cs-p-goal{background:rgba(69,203,133,.06);border:1px solid rgba(69,203,133,.15);border-radius:8px;padding:10px 12px;font-size:12px;color:#45CB85;line-height:1.5}\n.cs-p-pain::before{content:'\u26a1 Pain  ';font-weight:800}\n.cs-p-goal::before{content:'\ud83c\udfaf Goal  ';font-weight:800}\n\n\/* Journey *\/\n.cs-journey{background:#141c18;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:28px}\n.cs-journey-title{font-size:14px;font-weight:700;color:#e8f0ec;line-height:1.4;margin-bottom:6px}\n.cs-journey-sub{font-size:12px;color:#4d6b5c;line-height:1.3;margin-bottom:28px}\n\n.cs-jsteps{display:grid;grid-template-columns:repeat(5,1fr);position:relative}\n.cs-jsteps::before{content:'';position:absolute;top:26px;left:calc(10% + 6px);right:calc(10% + 6px);height:2px;background:linear-gradient(to right,#45CB85,#2faa69);opacity:.18}\n.cs-jstep{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px;position:relative;z-index:1}\n.cs-jdot{width:52px;height:52px;border-radius:14px;background:#192320;border:2px solid rgba(69,203,133,.15);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px;transition:border-color .2s,background .2s;line-height:1;flex-shrink:0}\n.cs-jstep:hover .cs-jdot{border-color:#45CB85;background:rgba(69,203,133,.09)}\n.cs-jstep-num{font-size:9px;font-weight:800;color:#4d6b5c;text-transform:uppercase;letter-spacing:.06em;line-height:1;margin-bottom:5px}\n.cs-jstep-title{font-size:12px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:5px}\n.cs-jstep-body{font-size:11px;color:#4d6b5c;line-height:1.5}\n\n\/* Emotion bar *\/\n.cs-emotion{display:grid;grid-template-columns:repeat(5,1fr);margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.05)}\n.cs-emo-cell{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 6px}\n.cs-emo-bar{width:28px;border-radius:4px;background:linear-gradient(to top,#45CB85,#2faa69);opacity:.6;transition:opacity .2s}\n.cs-emo-cell:hover .cs-emo-bar{opacity:1}\n.cs-emo-lbl{font-size:9.5px;color:#4d6b5c;font-weight:600;text-align:center;line-height:1.3}\n\n@media(max-width:720px){\n  .cs-shell{padding:32px 20px}\n  .cs-pgrid{grid-template-columns:1fr}\n  .cs-jsteps{grid-template-columns:1fr;gap:10px}\n  .cs-jsteps::before{display:none}\n  .cs-jstep{flex-direction:row;text-align:left;gap:14px}\n  .cs-jdot{margin-bottom:0;width:44px;height:44px;font-size:18px}\n  .cs-emotion{display:none}\n}\n<\/style>\n<div class=\"cs\"><div class=\"cs-shell\">\n  <div class=\"cs-hd\">\n    <div class=\"cs-num\">04<\/div>\n    <div class=\"cs-hd-txt\">\n      <div class=\"cs-title\">Persona &amp; User Journey Map<\/div>\n      <div class=\"cs-sub\">Defining who we design for \u2014 and their path to value<\/div>\n    <\/div>\n  <\/div>\n  <div class=\"cs-pgrid\">\n    <div class=\"cs-persona\">\n      <div class=\"cs-p-top\">\n        <div class=\"cs-p-avatar-wrap\">\n          <div class=\"cs-p-avatar\">\ud83d\udc69\u200d\ud83d\udcbc<\/div>\n          <div class=\"cs-p-check\">\u2713<\/div>\n        <\/div>\n        <div>\n          <div class=\"cs-p-name\">Linh Nguyen, 26<\/div>\n          <div class=\"cs-p-role\">Lifestyle Consumer \u00b7 Brand Loyalist<\/div>\n          <div class=\"cs-p-loc\">\ud83d\udccd Ho Chi Minh City, Vietnam<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"cs-p-body\">\n        <p class=\"cs-p-desc\">Marketing executive who follows K-pop artists and fashion brands on Instagram. Curious about NFTs but intimidated by crypto wallets. Shops via mobile apps and trusts brand recommendations.<\/p>\n        <div class=\"cs-p-tags\"><span class=\"cs-ptag\">Mobile Shopper<\/span><span class=\"cs-ptag\">Brand Loyalist<\/span><span class=\"cs-ptag\">Instagram User<\/span><span class=\"cs-ptag\">Web2 Native<\/span><\/div>\n        <div class=\"cs-p-pain\">NFTs feel \"not for her\" \u2014 too technical and speculative with no clear personal benefit.<\/div>\n        <div class=\"cs-p-goal\">Own a digital collectible from her favorite brand or artist, simply and safely.<\/div>\n      <\/div>\n    <\/div>\n    <div class=\"cs-persona\">\n      <div class=\"cs-p-top\">\n        <div class=\"cs-p-avatar-wrap\">\n          <div class=\"cs-p-avatar\">\ud83c\udfae<\/div>\n          <div class=\"cs-p-check\">\u2713<\/div>\n        <\/div>\n        <div>\n          <div class=\"cs-p-name\">Marcus Tan, 31<\/div>\n          <div class=\"cs-p-role\">Mobile Gamer \u00b7 Digital Collector<\/div>\n          <div class=\"cs-p-loc\">\ud83d\udccd Kuala Lumpur, Malaysia<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"cs-p-body\">\n        <p class=\"cs-p-desc\">Software developer who plays mobile games daily and already owns some crypto. Wants NFTs that offer real in-game utility or event access. Has tried OpenSea but finds it overwhelming.<\/p>\n        <div class=\"cs-p-tags\"><span class=\"cs-ptag\">Crypto-Aware<\/span><span class=\"cs-ptag\">Gamer<\/span><span class=\"cs-ptag\">Utility-Focused<\/span><span class=\"cs-ptag\">Collector<\/span><\/div>\n        <div class=\"cs-p-pain\">Existing platforms feel generic \u2014 no curated section for game or event NFTs.<\/div>\n        <div class=\"cs-p-goal\">Find game studio NFTs with real utility and resale value in a trusted, curated space.<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n  <div class=\"cs-journey\">\n    <div class=\"cs-journey-title\">User Journey \u2014 First-time NFT Buyer<\/div>\n    <div class=\"cs-journey-sub\">Linh's path from discovery to collection<\/div>\n    <div class=\"cs-jsteps\">\n      <div class=\"cs-jstep\"><div class=\"cs-jdot\">\ud83d\udd0d<\/div><div class=\"cs-jstep-num\">Step 1<\/div><div class=\"cs-jstep-title\">Discover<\/div><div class=\"cs-jstep-body\">Sees brand NFT on Instagram, clicks to Metagetx<\/div><\/div>\n      <div class=\"cs-jstep\"><div class=\"cs-jdot\">\ud83d\udd10<\/div><div class=\"cs-jstep-num\">Step 2<\/div><div class=\"cs-jstep-title\">Sign Up<\/div><div class=\"cs-jstep-body\">Email only \u2014 no wallet or crypto required<\/div><\/div>\n      <div class=\"cs-jstep\"><div class=\"cs-jdot\">\ud83d\uddbc\ufe0f<\/div><div class=\"cs-jstep-num\">Step 3<\/div><div class=\"cs-jstep-title\">Explore<\/div><div class=\"cs-jstep-body\">Browses by category: Fashion, Lifestyle, Events<\/div><\/div>\n      <div class=\"cs-jstep\"><div class=\"cs-jdot\">\ud83d\udcb3<\/div><div class=\"cs-jstep-num\">Step 4<\/div><div class=\"cs-jstep-title\">Purchase<\/div><div class=\"cs-jstep-body\">Buys with card at clear USD price<\/div><\/div>\n      <div class=\"cs-jstep\"><div class=\"cs-jdot\">\ud83c\udfc5<\/div><div class=\"cs-jstep-num\">Step 5<\/div><div class=\"cs-jstep-title\">Collect &amp; Redeem<\/div><div class=\"cs-jstep-body\">Views NFT, redeems reward or attends event<\/div><\/div>\n    <\/div>\n    <div class=\"cs-emotion\">\n      <div class=\"cs-emo-cell\"><div class=\"cs-emo-bar\" style=\"height:28px;opacity:.5\"><\/div><div class=\"cs-emo-lbl\">Curious<\/div><\/div>\n      <div class=\"cs-emo-cell\"><div class=\"cs-emo-bar\" style=\"height:20px;opacity:.35\"><\/div><div class=\"cs-emo-lbl\">Hesitant<\/div><\/div>\n      <div class=\"cs-emo-cell\"><div class=\"cs-emo-bar\" style=\"height:36px;opacity:.6\"><\/div><div class=\"cs-emo-lbl\">Engaged<\/div><\/div>\n      <div class=\"cs-emo-cell\"><div class=\"cs-emo-bar\" style=\"height:44px;opacity:.8\"><\/div><div class=\"cs-emo-lbl\">Confident<\/div><\/div>\n      <div class=\"cs-emo-cell\"><div class=\"cs-emo-bar\" style=\"height:56px;opacity:1\"><\/div><div class=\"cs-emo-lbl\">Delighted<\/div><\/div>\n    <\/div>\n  <\/div>\n<\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4de6f6c e-con-full e-flex e-con e-parent\" data-id=\"4de6f6c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e81e709 elementor-widget elementor-widget-html\" data-id=\"e81e709\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- BLOCK 07: SOLUTION -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n.cs{font-family:'Plus Jakarta Sans',sans-serif}.cs *,.cs *::before,.cs *::after{box-sizing:border-box}.cs h1,.cs h2,.cs h3,.cs h4,.cs p,.cs ul,.cs li{margin:0;padding:0}\n.cs-shell{background:#0b0f0e;border-radius:20px;padding:48px 44px}\n.cs-hd{display:flex;align-items:flex-start;gap:16px;margin-bottom:36px}\n.cs-num{width:36px;height:36px;flex-shrink:0;background:rgba(69,203,133,.09);border:1px solid rgba(69,203,133,.22);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#45CB85;line-height:1}\n.cs-hd-txt{display:flex;flex-direction:column;gap:5px}\n.cs-title{font-size:22px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-0.015em}\n.cs-sub{font-size:13px;font-weight:500;color:#4d6b5c;line-height:1.4}\n\n\/* Solution item: text left, image right *\/\n.cs-sol{display:grid;grid-template-columns:1fr 1fr;background:#141c18;border:1px solid rgba(255,255,255,.07);border-radius:16px;overflow:hidden;margin-bottom:14px;transition:border-color .2s}\n.cs-sol:last-child{margin-bottom:0}\n.cs-sol:hover{border-color:rgba(69,203,133,.18)}\n\n\/* Text side *\/\n.cs-sol-txt{padding:28px;border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column}\n.cs-sol-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}\n.cs-sol-n{width:40px;height:40px;flex-shrink:0;background:rgba(69,203,133,.08);border:1px solid rgba(69,203,133,.2);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;color:#45CB85;line-height:1}\n.cs-sol-title{font-size:14.5px;font-weight:700;color:#fff;line-height:1.35;margin-top:2px}\n.cs-sol-body{font-size:13px;color:#7a9488;line-height:1.72;flex:1}\n.cs-sol-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}\n.cs-stag{background:rgba(69,203,133,.07);border:1px solid rgba(69,203,133,.15);color:#45CB85;border-radius:100px;font-size:11px;font-weight:700;padding:3px 10px;line-height:1.5}\n\n\/* Image side \u2014 auto-sizes to image height *\/\n.cs-sol-img{\n  background:#111916;\n  position:relative;\n  overflow:hidden;\n}\n.cs-sol-img::before{\n  content:'';position:absolute;inset:0;\n  background-image:radial-gradient(circle,rgba(69,203,133,.09) 1px,transparent 1px);\n  background-size:22px 22px;pointer-events:none;z-index:0;\n}\n\/* Real image \u2014 paste inside .cs-sol-img, replaces .cs-ph div\n   <img decoding=\"async\" src=\"YOUR_URL\" alt=\"\" style=\"width:100%;height:auto;display:block;position:relative;z-index:1\">\n*\/\n.cs-sol-img img{\n  width:100%;\n  height:auto;\n  display:block;\n  position:relative;\n  z-index:1;\n}\n\n\/* Placeholder \u2014 shown when no real image *\/\n.cs-ph{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 20px;text-align:center;min-height:180px;justify-content:center}\n.cs-ph-box{width:48px;height:48px;border-radius:13px;border:1.5px dashed rgba(69,203,133,.28);background:rgba(69,203,133,.05);display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1}\n.cs-ph-lbl{font-size:11px;font-weight:700;color:rgba(69,203,133,.38);text-transform:uppercase;letter-spacing:.07em;line-height:1}\n.cs-ph-size{font-size:10px;color:#2d4a3a;line-height:1.3}\n.cs-ph-tip{font-size:10.5px;color:#2d4a3a;line-height:1.5;text-align:center}\n\n\/* Outcome *\/\n.cs-outcome{background:linear-gradient(135deg,#111916 0%,rgba(69,203,133,.06) 100%);border:1px solid rgba(69,203,133,.15);border-radius:16px;padding:28px 32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:20px}\n.cs-outcome-txt{flex:1;min-width:200px}\n.cs-outcome-title{font-size:15px;font-weight:800;color:#fff;line-height:1.3;margin-bottom:8px}\n.cs-outcome-body{font-size:13px;color:#7a9488;line-height:1.65}\n.cs-outcome-stats{display:flex;gap:24px;flex-wrap:wrap;flex-shrink:0}\n.cs-ostat{text-align:center}\n.cs-ostat-val{font-size:28px;font-weight:800;color:#45CB85;line-height:1;display:block}\n.cs-ostat-lbl{font-size:10px;font-weight:600;color:#4d6b5c;text-transform:uppercase;letter-spacing:.06em;line-height:1.4;display:block;margin-top:4px}\n\n@media(max-width:720px){\n  .cs-shell{padding:32px 20px}\n  .cs-sol{grid-template-columns:1fr}\n  .cs-sol-txt{border-right:none;border-bottom:1px solid rgba(255,255,255,.05)}\n  .cs-sol-img{min-height:160px}\n  .cs-outcome{flex-direction:column;align-items:flex-start}\n}\n<\/style>\n<div class=\"cs\"><div class=\"cs-shell\">\n  <div class=\"cs-hd\">\n    <div class=\"cs-num\">05<\/div>\n    <div class=\"cs-hd-txt\">\n      <div class=\"cs-title\">Solution<\/div>\n      <div class=\"cs-sub\">Design decisions that defined the MVP<\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"cs-sol\">\n    <div class=\"cs-sol-txt\">\n      <div class=\"cs-sol-head\"><div class=\"cs-sol-n\">1<\/div><div class=\"cs-sol-title\">Onboarding <\/div><\/div>\n      <p class=\"cs-sol-body\">A custodial wallet is created in the background on email sign-up \u2014 no MetaMask, no seed phrase. Users encounter wallet concepts only when they choose to withdraw, reducing first-session drop-off dramatically.<\/p>\n      <div class=\"cs-sol-tags\"><span class=\"cs-stag\">Custodial Wallet<\/span><span class=\"cs-stag\">Email Sign-up<\/span><span class=\"cs-stag\">Progressive Disclosure<\/span><\/div>\n    <\/div>\n    <div class=\"cs-sol-img\">\n      <!-- \ud83d\udcf8 PLACEHOLDER 1 \u2014 Onboarding \/ Sign-up screen -->\n      <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Login-1.png\" alt=\"mockup\" style=\"width:100%;height:auto;display:block;position:relative;z-index:1\">\n    <\/div>\n  <\/div>\n\n  <div class=\"cs-sol\">\n    <div class=\"cs-sol-txt\">\n      <div class=\"cs-sol-head\"><div class=\"cs-sol-n\">2<\/div><div class=\"cs-sol-title\">Homepage \u2014 Brand-First Discovery<\/div><\/div>\n      <p class=\"cs-sol-body\">The homepage leads with trending NFTs and brand-curated categories \u2014 Lifestyle, Fashion, Games, Collectibles \u2014 rather than generic blockchain asset listings. A Hot NFTs section, Top Sellers leaderboard, and upcoming event drops create a sense of live activity and community momentum from the first scroll.<\/p>\n      <div class=\"cs-sol-tags\"><span class=\"cs-stag\">Category Browse<\/span><span class=\"cs-stag\">Trending NFTs<\/span><span class=\"cs-stag\">Top Sellers<\/span><\/div>\n    <\/div>\n    <div class=\"cs-sol-img\">\n      <!-- \ud83d\udcf8 PLACEHOLDER 2 \u2014 Homepage \/ category browsing -->\n       <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Web-3-scaled.png\" alt=\"mockup\" style=\"width:100%;height:auto;display:block;position:relative;z-index:1\">\n    <\/div>\n  <\/div>\n\n  <div class=\"cs-sol\">\n    <div class=\"cs-sol-txt\">\n      <div class=\"cs-sol-head\"><div class=\"cs-sol-n\">3<\/div><div class=\"cs-sol-title\">Product Detail \u2014 Transparent NFT Information<\/div><\/div>\n      <p class=\"cs-sol-body\">The NFT detail page displays USD pricing as the primary value with METGX token shown as secondary \u2014 removing the price anxiety that crypto-only marketplaces create. Transaction history, creator verification, item attributes, and a \"Recommended for You\" section are all surfaced clearly, giving buyers the confidence to complete a purchase without leaving the page.<\/p>\n      <div class=\"cs-sol-tags\"><span class=\"cs-stag\">Transaction History<\/span><span class=\"cs-stag\">Creator Verification<\/span><span class=\"cs-stag\">Recommendations<\/span><\/div>\n    <\/div>\n    <div class=\"cs-sol-img\">\n      <!-- \ud83d\udcf8 PLACEHOLDER 3 \u2014 POA event \/ campaign screen -->\n      <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/product-detail-scaled.png\" alt=\"mockup\" style=\"width:100%;height:auto;display:block;position:relative;z-index:1\">\n    <\/div>\n    <\/div>\n      <div class=\"cs-sol\">\n    <div class=\"cs-sol-txt\">\n      <div class=\"cs-sol-head\"><div class=\"cs-sol-n\">4<\/div><div class=\"cs-sol-title\">Dashboard for Seller \u2014 Creator Analytics Hub<\/div><\/div>\n      <p class=\"cs-sol-body\">Creators and brand partners need visibility into how their NFTs perform. The Seller Dashboard surfaces Sales Charts by period, total revenue, profit breakdown, marketplace traffic trends, and a Potential Buyers breakdown by category \u2014 giving creators the data they need to plan future drops and optimize pricing strategy without needing a separate analytics tool.<\/p>\n      <div class=\"cs-sol-tags\"><span class=\"cs-stag\">Sales Analytics<\/span><span class=\"cs-stag\">Revenue Tracking<\/span><span class=\"cs-stag\">Traffic Insights<\/span><\/div>\n    <\/div>\n    <div class=\"cs-sol-img\">\n      <!-- \ud83d\udcf8 PLACEHOLDER 3 \u2014 POA event \/ campaign screen -->\n      <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Dashboard-scaled.png\" alt=\"mockup\" style=\"width:100%;height:auto;display:block;position:relative;z-index:1\">\n    <\/div>\n    <\/div>\n      <div class=\"cs-sol\">\n    <div class=\"cs-sol-txt\">\n      <div class=\"cs-sol-head\"><div class=\"cs-sol-n\">5<\/div><div class=\"cs-sol-title\">Dashboard for Buyer \u2014 Personal Collection Overview<\/div><\/div>\n      <p class=\"cs-sol-body\">The Buyer Dashboard gives collectors a single view of their current auction activity, purchased items, and portfolio status. A live Top Sellers and Top Buyers leaderboard adds a social and competitive layer \u2014 rewarding active collectors with recognition. The Trending Items sidebar keeps buyers engaged with what's happening across the marketplace in real time.<\/p>\n      <div class=\"cs-sol-tags\"><span class=\"cs-stag\">Portfolio View\n<\/span><span class=\"cs-stag\">Auction Activity\n<\/span><span class=\"cs-stag\">Leaderboard\n<\/span><\/div>\n    <\/div>\n    <div class=\"cs-sol-img\">\n      <!-- \ud83d\udcf8 PLACEHOLDER 3 \u2014 POA event \/ campaign screen -->\n      <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Marketplace-Insight.png\" alt=\"mockup\" style=\"width:100%;height:auto;display:block;position:relative;z-index:1\">\n    <\/div>\n        <\/div>\n      <div class=\"cs-sol\">\n    <div class=\"cs-sol-txt\">\n      <div class=\"cs-sol-head\"><div class=\"cs-sol-n\">5<\/div><div class=\"cs-sol-title\">Account Detail \u2014 Creator Profile & Collection Page<\/div><\/div>\n      <p class=\"cs-sol-body\">Each creator has a public profile page combining identity, verification status, and their full NFT collection in a filterable grid \u2014 sorted by Collected, Founded, Created, Activity, and Favorited. Category filters and collection groupings help buyers navigate large inventories quickly. This page functions as both a storefront and a social proof mechanism for creators building their reputation on the platform.<\/p>\n      <div class=\"cs-sol-tags\"><span class=\"cs-stag\">Creator Profile\n<\/span><span class=\"cs-stag\">Collection Grid\n<\/span><span class=\"cs-stag\">Social Proof<\/span><\/div>\n    <\/div>\n    <div class=\"cs-sol-img\">\n      <!-- \ud83d\udcf8 PLACEHOLDER 3 \u2014 POA event \/ campaign screen -->\n      <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/account-detail-scaled.png\" alt=\"mockup\" style=\"width:100%;height:auto;display:block;position:relative;z-index:1\">\n    <\/div>\n           <\/div>\n      <div class=\"cs-sol\">\n    <div class=\"cs-sol-txt\">\n      <div class=\"cs-sol-head\"><div class=\"cs-sol-n\">6<\/div><div class=\"cs-sol-title\">Connect Wallet \u2014 Zero-Friction Purchase Flow<\/div><\/div>\n      <p class=\"cs-sol-body\">When a first-time buyer clicks \"Buy Now,\" a wallet connection panel slides in rather than redirecting to a separate page \u2014 keeping the user in context. The panel guides users through selecting a wallet provider (MetaMask, Coinbase, and others) with clear labeling and a \"Popular\" badge to reduce decision paralysis. For users without a wallet, the prompt \"If you don't have a wallet yet, you can select a provider and create one now\" removes the feeling of being locked out \u2014 framing wallet creation as a natural next step rather than a prerequisite.<\/p>\n      <div class=\"cs-sol-tags\"><span class=\"cs-stag\">Wallet Connection \n<\/span><span class=\"cs-stag\">Side Panel\n<\/span><span class=\"cs-stag\">Contextual Flow<\/span><\/div>\n    <\/div>\n    <div class=\"cs-sol-img\">\n      <!-- \ud83d\udcf8 PLACEHOLDER 3 \u2014 POA event \/ campaign screen -->\n      <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Connect-Wallet-1.png\" alt=\"mockup\" style=\"width:100%;height:auto;display:block;position:relative;z-index:1\">\n    <\/div>\n    <\/div>\n\n  \n  \n \n  \n  \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4496808 e-con-full e-flex e-con e-parent\" data-id=\"4496808\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2867386 elementor-widget elementor-widget-html\" data-id=\"2867386\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- BLOCK 08: DESIGN SYSTEM -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap\" rel=\"stylesheet\">\n<style>\n.cs{font-family:'Plus Jakarta Sans',sans-serif}.cs *,.cs *::before,.cs *::after{box-sizing:border-box}.cs h1,.cs h2,.cs h3,.cs h4,.cs p,.cs ul,.cs li{margin:0;padding:0}\n.cs-shell{background:#0b0f0e;border-radius:20px;padding:48px 44px}\n.cs-hd{display:flex;align-items:flex-start;gap:16px;margin-bottom:36px}\n.cs-num{width:36px;height:36px;flex-shrink:0;background:rgba(69,203,133,.09);border:1px solid rgba(69,203,133,.22);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#45CB85;line-height:1}\n.cs-hd-txt{display:flex;flex-direction:column;gap:5px}\n.cs-title{font-size:22px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-0.015em}\n.cs-sub{font-size:13px;font-weight:500;color:#4d6b5c;line-height:1.4}\n\n\/* Section divider label *\/\n.cs-ds-lbl{font-size:10px;font-weight:800;color:#4d6b5c;text-transform:uppercase;letter-spacing:.09em;line-height:1;display:flex;align-items:center;gap:10px;margin-bottom:16px;margin-top:32px}\n.cs-ds-lbl:first-of-type{margin-top:0}\n.cs-ds-lbl::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.05)}\n\n\/* Colors *\/\n.cs-color-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px}\n.cs-swatch{flex:1;min-width:80px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.07)}\n.cs-swatch-chip{height:60px}\n.cs-swatch-info{background:#141c18;padding:9px 12px}\n.cs-swatch-name{font-size:11.5px;font-weight:700;color:#e8f0ec;line-height:1.3;margin-bottom:2px}\n.cs-swatch-hex{font-size:10.5px;color:#4d6b5c;font-family:monospace;line-height:1.3;margin-bottom:1px}\n.cs-swatch-role{font-size:10px;color:#4d6b5c;line-height:1.3}\n\n\/* Typography *\/\n.cs-type-row{display:flex;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.04)}\n.cs-type-row:last-child{border-bottom:none}\n.cs-type-meta{min-width:160px;flex-shrink:0}\n.cs-type-token{font-size:11px;font-weight:700;color:#45CB85;font-family:monospace;line-height:1.3;margin-bottom:2px}\n.cs-type-spec{font-size:10.5px;color:#4d6b5c;line-height:1.3}\n.cs-type-sample{color:#e8f0ec;line-height:1.2}\n\n\/* Spacing *\/\n.cs-sp-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:4px}\n.cs-sp-item{display:flex;flex-direction:column;align-items:center;gap:5px}\n.cs-sp-bar-wrap{display:flex;align-items:flex-end;height:52px}\n.cs-sp-bar{background:linear-gradient(to top,rgba(69,203,133,.55),rgba(69,203,133,.15));border:1px solid rgba(69,203,133,.2);border-radius:4px;width:22px}\n.cs-sp-val{font-size:11px;font-weight:700;color:#45CB85;font-family:monospace;line-height:1}\n.cs-sp-name{font-size:10px;color:#4d6b5c;line-height:1}\n\n\/* Radii *\/\n.cs-r-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px}\n.cs-r-item{background:#141c18;border:1px solid rgba(255,255,255,.07);padding:18px;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:76px}\n.cs-r-box{width:42px;height:42px;background:rgba(69,203,133,.09);border:1.5px solid rgba(69,203,133,.25)}\n.cs-r-val{font-size:11px;font-weight:700;color:#45CB85;font-family:monospace;line-height:1}\n.cs-r-name{font-size:10px;color:#4d6b5c;line-height:1}\n\n\/* Components *\/\n.cs-comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px}\n.cs-comp-box{background:#141c18;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px}\n.cs-comp-label{font-size:10px;font-weight:700;color:#4d6b5c;text-transform:uppercase;letter-spacing:.07em;line-height:1;margin-bottom:16px}\n\n\/* Buttons *\/\n.cs-btns{display:flex;flex-wrap:wrap;gap:8px}\n.cs-btn{display:inline-flex;align-items:center;gap:6px;border-radius:10px;font-size:13px;font-weight:700;padding:9px 18px;border:none;cursor:default;font-family:'Plus Jakarta Sans',sans-serif;line-height:1}\n.cs-btn-p{background:#45CB85;color:#0b0f0e}\n.cs-btn-s{background:rgba(69,203,133,.1);color:#45CB85;border:1px solid rgba(69,203,133,.2)}\n.cs-btn-g{background:transparent;color:#e8f0ec;border:1px solid rgba(255,255,255,.12)}\n.cs-btn-sm{padding:6px 14px;font-size:11.5px;border-radius:8px}\n\n\/* Badges *\/\n.cs-badges{display:flex;flex-wrap:wrap;gap:7px}\n.cs-badge{display:inline-flex;align-items:center;gap:5px;border-radius:100px;padding:4px 11px;font-size:11px;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;line-height:1.4}\n.cs-badge-g{background:rgba(69,203,133,.12);color:#45CB85;border:1px solid rgba(69,203,133,.22)}\n.cs-badge-r{background:rgba(255,100,100,.1);color:#ff7878;border:1px solid rgba(255,100,100,.18)}\n.cs-badge-y{background:rgba(255,200,70,.1);color:#ffc846;border:1px solid rgba(255,200,70,.18)}\n.cs-badge-n{background:#192320;color:#7a9488;border:1px solid rgba(255,255,255,.08)}\n.cs-bdot{width:5px;height:5px;border-radius:50%;flex-shrink:0}\n\n\/* Input *\/\n.cs-input{width:100%;background:#192320;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 14px;font-size:13px;color:#7a9488;font-family:'Plus Jakarta Sans',sans-serif;outline:none;display:block;line-height:1.4}\n\n\/* NFT card *\/\n.cs-nft{background:#192320;border:1px solid rgba(255,255,255,.07);border-radius:12px;overflow:hidden;margin-top:0}\n.cs-nft-img{height:72px;background:linear-gradient(135deg,#1e3028,#0f2018);display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1}\n.cs-nft-body{padding:10px 12px 14px}\n.cs-nft-name{font-size:12.5px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:2px}\n.cs-nft-creator{font-size:10.5px;color:#4d6b5c;line-height:1.3;margin-bottom:10px}\n.cs-nft-row{display:flex;align-items:center;justify-content:space-between}\n.cs-nft-price{font-size:13px;font-weight:800;color:#45CB85;line-height:1}\n.cs-nft-btn{background:#45CB85;color:#0b0f0e;border-radius:7px;padding:4px 12px;font-size:11px;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;border:none;cursor:default;line-height:1.4}\n\n\/* Motion *\/\n.cs-motion-row{display:flex;flex-wrap:wrap;gap:10px}\n.cs-motion-item{background:#141c18;border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:14px 16px;flex:1;min-width:140px}\n.cs-motion-name{font-size:12px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:4px}\n.cs-motion-val{font-size:11px;color:#45CB85;font-family:monospace;line-height:1.4;margin-bottom:4px}\n.cs-motion-use{font-size:11px;color:#4d6b5c;line-height:1.3}\n\n@media(max-width:720px){.cs-shell{padding:32px 20px}.cs-comp-grid{grid-template-columns:1fr}.cs-color-row .cs-swatch{min-width:calc(50% - 5px);flex:unset}}\n<\/style>\n<div class=\"cs\"><div class=\"cs-shell\">\n  <div class=\"cs-hd\">\n    <div class=\"cs-num\">\u2726<\/div>\n    <div class=\"cs-hd-txt\">\n      <div class=\"cs-title\">Design System \u2014 Metagetx<\/div>\n      <div class=\"cs-sub\">Tokens, components, and patterns that make up the product's visual language<\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Colors -->\n  <div class=\"cs-ds-lbl\">Color Palette<\/div>\n  <div class=\"cs-color-row\">\n    <div class=\"cs-swatch\"><div class=\"cs-swatch-chip\" style=\"background:#45CB85\"><\/div><div class=\"cs-swatch-info\"><div class=\"cs-swatch-name\">Primary Green<\/div><div class=\"cs-swatch-hex\">#45CB85<\/div><div class=\"cs-swatch-role\">CTA \u00b7 Accent \u00b7 Brand<\/div><\/div><\/div>\n    <div class=\"cs-swatch\"><div class=\"cs-swatch-chip\" style=\"background:#2faa69\"><\/div><div class=\"cs-swatch-info\"><div class=\"cs-swatch-name\">Green Dim<\/div><div class=\"cs-swatch-hex\">#2faa69<\/div><div class=\"cs-swatch-role\">Hover \u00b7 Gradient end<\/div><\/div><\/div>\n    <div class=\"cs-swatch\"><div class=\"cs-swatch-chip\" style=\"background:#0b0f0e\"><\/div><div class=\"cs-swatch-info\"><div class=\"cs-swatch-name\">Background<\/div><div class=\"cs-swatch-hex\">#0b0f0e<\/div><div class=\"cs-swatch-role\">Page background<\/div><\/div><\/div>\n    <div class=\"cs-swatch\"><div class=\"cs-swatch-chip\" style=\"background:#141c18\"><\/div><div class=\"cs-swatch-info\"><div class=\"cs-swatch-name\">Surface<\/div><div class=\"cs-swatch-hex\">#141c18<\/div><div class=\"cs-swatch-role\">Cards \u00b7 Panels<\/div><\/div><\/div>\n    <div class=\"cs-swatch\"><div class=\"cs-swatch-chip\" style=\"background:#192320\"><\/div><div class=\"cs-swatch-info\"><div class=\"cs-swatch-name\">Surface 2<\/div><div class=\"cs-swatch-hex\">#192320<\/div><div class=\"cs-swatch-role\">Inputs \u00b7 Chips<\/div><\/div><\/div>\n    <div class=\"cs-swatch\"><div class=\"cs-swatch-chip\" style=\"background:#e8f0ec\"><\/div><div class=\"cs-swatch-info\"><div class=\"cs-swatch-name\">Text Primary<\/div><div class=\"cs-swatch-hex\">#e8f0ec<\/div><div class=\"cs-swatch-role\">Headings \u00b7 Labels<\/div><\/div><\/div>\n    <div class=\"cs-swatch\"><div class=\"cs-swatch-chip\" style=\"background:#7a9488\"><\/div><div class=\"cs-swatch-info\"><div class=\"cs-swatch-name\">Text Secondary<\/div><div class=\"cs-swatch-hex\">#7a9488<\/div><div class=\"cs-swatch-role\">Body \u00b7 Descriptions<\/div><\/div><\/div>\n    <div class=\"cs-swatch\"><div class=\"cs-swatch-chip\" style=\"background:#4d6b5c\"><\/div><div class=\"cs-swatch-info\"><div class=\"cs-swatch-name\">Text Muted<\/div><div class=\"cs-swatch-hex\">#4d6b5c<\/div><div class=\"cs-swatch-role\">Metadata \u00b7 Hints<\/div><\/div><\/div>\n  <\/div>\n\n  <!-- Typography -->\n  <div class=\"cs-ds-lbl\">Typography \u2014 Plus Jakarta Sans<\/div>\n  <div>\n    <div class=\"cs-type-row\"><div class=\"cs-type-meta\"><div class=\"cs-type-token\">display-xl<\/div><div class=\"cs-type-spec\">36px \u00b7 800 \u00b7 \u22120.02em<\/div><\/div><div class=\"cs-type-sample\" style=\"font-size:clamp(20px,3vw,36px);font-weight:800;letter-spacing:-.02em\">Asia's NFT Rewards<\/div><\/div>\n    <div class=\"cs-type-row\"><div class=\"cs-type-meta\"><div class=\"cs-type-token\">heading-lg<\/div><div class=\"cs-type-spec\">22px \u00b7 800 \u00b7 \u22120.015em<\/div><\/div><div class=\"cs-type-sample\" style=\"font-size:22px;font-weight:800;letter-spacing:-.015em\">Marketplace Design<\/div><\/div>\n    <div class=\"cs-type-row\"><div class=\"cs-type-meta\"><div class=\"cs-type-token\">heading-md<\/div><div class=\"cs-type-spec\">16px \u00b7 700 \u00b7 normal<\/div><\/div><div class=\"cs-type-sample\" style=\"font-size:16px;font-weight:700\">Brand Partnership NFTs<\/div><\/div>\n    <div class=\"cs-type-row\"><div class=\"cs-type-meta\"><div class=\"cs-type-token\">body-md<\/div><div class=\"cs-type-spec\">14px \u00b7 400 \u00b7 1.75lh<\/div><\/div><div class=\"cs-type-sample\" style=\"font-size:14px;font-weight:400;line-height:1.75;color:#7a9488\">Bringing NFT experience to mainstream Southeast Asian consumers through familiar brand contexts and simplified onboarding flows.<\/div><\/div>\n    <div class=\"cs-type-row\"><div class=\"cs-type-meta\"><div class=\"cs-type-token\">body-sm<\/div><div class=\"cs-type-spec\">12.5px \u00b7 400 \u00b7 1.65lh<\/div><\/div><div class=\"cs-type-sample\" style=\"font-size:12.5px;line-height:1.65;color:#7a9488\">Creator verified \u00b7 47 of 200 remaining \u00b7 USD $30<\/div><\/div>\n    <div class=\"cs-type-row\"><div class=\"cs-type-meta\"><div class=\"cs-type-token\">label-xs<\/div><div class=\"cs-type-spec\">10px \u00b7 800 \u00b7 uppercase<\/div><\/div><div class=\"cs-type-sample\" style=\"font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#45CB85\">Product Design \u00b7 NFT Marketplace<\/div><\/div>\n  <\/div>\n\n  <!-- Spacing -->\n  <div class=\"cs-ds-lbl\">Spacing Scale (4px base)<\/div>\n  <div class=\"cs-sp-row\">\n    <div class=\"cs-sp-item\"><div class=\"cs-sp-bar-wrap\"><div class=\"cs-sp-bar\" style=\"height:4px\"><\/div><\/div><div class=\"cs-sp-val\">4<\/div><div class=\"cs-sp-name\">xs<\/div><\/div>\n    <div class=\"cs-sp-item\"><div class=\"cs-sp-bar-wrap\"><div class=\"cs-sp-bar\" style=\"height:8px\"><\/div><\/div><div class=\"cs-sp-val\">8<\/div><div class=\"cs-sp-name\">sm<\/div><\/div>\n    <div class=\"cs-sp-item\"><div class=\"cs-sp-bar-wrap\"><div class=\"cs-sp-bar\" style=\"height:12px\"><\/div><\/div><div class=\"cs-sp-val\">12<\/div><div class=\"cs-sp-name\">md<\/div><\/div>\n    <div class=\"cs-sp-item\"><div class=\"cs-sp-bar-wrap\"><div class=\"cs-sp-bar\" style=\"height:16px\"><\/div><\/div><div class=\"cs-sp-val\">16<\/div><div class=\"cs-sp-name\">lg<\/div><\/div>\n    <div class=\"cs-sp-item\"><div class=\"cs-sp-bar-wrap\"><div class=\"cs-sp-bar\" style=\"height:20px\"><\/div><\/div><div class=\"cs-sp-val\">20<\/div><div class=\"cs-sp-name\">xl<\/div><\/div>\n    <div class=\"cs-sp-item\"><div class=\"cs-sp-bar-wrap\"><div class=\"cs-sp-bar\" style=\"height:24px\"><\/div><\/div><div class=\"cs-sp-val\">24<\/div><div class=\"cs-sp-name\">2xl<\/div><\/div>\n    <div class=\"cs-sp-item\"><div class=\"cs-sp-bar-wrap\"><div class=\"cs-sp-bar\" style=\"height:32px\"><\/div><\/div><div class=\"cs-sp-val\">32<\/div><div class=\"cs-sp-name\">3xl<\/div><\/div>\n    <div class=\"cs-sp-item\"><div class=\"cs-sp-bar-wrap\"><div class=\"cs-sp-bar\" style=\"height:40px\"><\/div><\/div><div class=\"cs-sp-val\">40<\/div><div class=\"cs-sp-name\">4xl<\/div><\/div>\n    <div class=\"cs-sp-item\"><div class=\"cs-sp-bar-wrap\"><div class=\"cs-sp-bar\" style=\"height:52px\"><\/div><\/div><div class=\"cs-sp-val\">48<\/div><div class=\"cs-sp-name\">5xl<\/div><\/div>\n  <\/div>\n\n  <!-- Border Radius -->\n  <div class=\"cs-ds-lbl\">Border Radius<\/div>\n  <div class=\"cs-r-row\">\n    <div class=\"cs-r-item\" style=\"border-radius:6px\"><div class=\"cs-r-box\" style=\"border-radius:4px\"><\/div><div class=\"cs-r-val\">4px<\/div><div class=\"cs-r-name\">tag<\/div><\/div>\n    <div class=\"cs-r-item\" style=\"border-radius:8px\"><div class=\"cs-r-box\" style=\"border-radius:7px\"><\/div><div class=\"cs-r-val\">7px<\/div><div class=\"cs-r-name\">btn-sm<\/div><\/div>\n    <div class=\"cs-r-item\" style=\"border-radius:10px\"><div class=\"cs-r-box\" style=\"border-radius:10px\"><\/div><div class=\"cs-r-val\">10px<\/div><div class=\"cs-r-name\">input<\/div><\/div>\n    <div class=\"cs-r-item\" style=\"border-radius:12px\"><div class=\"cs-r-box\" style=\"border-radius:12px\"><\/div><div class=\"cs-r-val\">12px<\/div><div class=\"cs-r-name\">card-sm<\/div><\/div>\n    <div class=\"cs-r-item\" style=\"border-radius:14px\"><div class=\"cs-r-box\" style=\"border-radius:14px\"><\/div><div class=\"cs-r-val\">14px<\/div><div class=\"cs-r-name\">card<\/div><\/div>\n    <div class=\"cs-r-item\" style=\"border-radius:16px\"><div class=\"cs-r-box\" style=\"border-radius:16px\"><\/div><div class=\"cs-r-val\">16px<\/div><div class=\"cs-r-name\">card-lg<\/div><\/div>\n    <div class=\"cs-r-item\" style=\"border-radius:20px\"><div class=\"cs-r-box\" style=\"border-radius:20px\"><\/div><div class=\"cs-r-val\">20px<\/div><div class=\"cs-r-name\">section<\/div><\/div>\n    <div class=\"cs-r-item\" style=\"border-radius:24px\"><div class=\"cs-r-box\" style=\"border-radius:50%\"><\/div><div class=\"cs-r-val\">full<\/div><div class=\"cs-r-name\">pill<\/div><\/div>\n  <\/div>\n\n  <!-- Components -->\n  <div class=\"cs-ds-lbl\">Components<\/div>\n  <div class=\"cs-comp-grid\">\n    <div class=\"cs-comp-box\">\n      <div class=\"cs-comp-label\">Buttons<\/div>\n      <div class=\"cs-btns\" style=\"margin-bottom:10px\">\n        <button class=\"cs-btn cs-btn-p\">Buy Now<\/button>\n        <button class=\"cs-btn cs-btn-s\">Explore<\/button>\n        <button class=\"cs-btn cs-btn-g\">Cancel<\/button>\n      <\/div>\n      <div class=\"cs-btns\">\n        <button class=\"cs-btn cs-btn-p cs-btn-sm\">Claim NFT<\/button>\n        <button class=\"cs-btn cs-btn-s cs-btn-sm\">Follow<\/button>\n      <\/div>\n    <\/div>\n    <div class=\"cs-comp-box\">\n      <div class=\"cs-comp-label\">Badges &amp; Tags<\/div>\n      <div class=\"cs-badges\">\n        <span class=\"cs-badge cs-badge-g\"><span class=\"cs-bdot\" style=\"background:#45CB85\"><\/span>Verified Creator<\/span>\n        <span class=\"cs-badge cs-badge-r\">Sold Out<\/span>\n        <span class=\"cs-badge cs-badge-y\">\ud83d\udd25 Trending<\/span>\n        <span class=\"cs-badge cs-badge-n\">Collectible<\/span>\n        <span class=\"cs-badge cs-badge-g\">Limited Drop<\/span>\n        <span class=\"cs-badge cs-badge-n\">Fashion<\/span>\n      <\/div>\n    <\/div>\n    <div class=\"cs-comp-box\">\n      <div class=\"cs-comp-label\">Form Inputs<\/div>\n      <input class=\"cs-input\" placeholder=\"Search NFTs, creators...\" style=\"margin-bottom:8px\">\n      <input class=\"cs-input\" value=\"linh@email.com\" style=\"border-color:rgba(69,203,133,.4);color:#e8f0ec\">\n    <\/div>\n    <div class=\"cs-comp-box\">\n      <div class=\"cs-comp-label\">NFT Card<\/div>\n      <div class=\"cs-nft\">\n        <div class=\"cs-nft-img\">\ud83d\uddbc\ufe0f<\/div>\n        <div class=\"cs-nft-body\">\n          <div class=\"cs-nft-name\">KAZUHA #005<\/div>\n          <div class=\"cs-nft-creator\">by Mandy Ling \u00b7 \u2713 Verified<\/div>\n          <div class=\"cs-nft-row\"><span class=\"cs-nft-price\">$30 USD<\/span><button class=\"cs-nft-btn\">Buy<\/button><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Motion -->\n  <div class=\"cs-ds-lbl\">Motion &amp; Transitions<\/div>\n  <div class=\"cs-motion-row\">\n    <div class=\"cs-motion-item\"><div class=\"cs-motion-name\">Default<\/div><div class=\"cs-motion-val\">200ms ease<\/div><div class=\"cs-motion-use\">Hover \u00b7 Focus \u00b7 Color change<\/div><\/div>\n    <div class=\"cs-motion-item\"><div class=\"cs-motion-name\">Lift<\/div><div class=\"cs-motion-val\">200ms ease \u00b7 translateY(-2px)<\/div><div class=\"cs-motion-use\">Card hover state<\/div><\/div>\n    <div class=\"cs-motion-item\"><div class=\"cs-motion-name\">Entrance<\/div><div class=\"cs-motion-val\">500ms ease \u00b7 fadeUp<\/div><div class=\"cs-motion-use\">Page sections load<\/div><\/div>\n    <div class=\"cs-motion-item\"><div class=\"cs-motion-name\">Pulse<\/div><div class=\"cs-motion-val\">2s infinite \u00b7 scale + opacity<\/div><div class=\"cs-motion-use\">Live \/ active indicators<\/div><\/div>\n  <\/div>\n\n<\/div><\/div>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e52be87 e-con-full e-flex e-con e-child\" data-id=\"e52be87\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6f34c0 elementor-widget elementor-widget-html\" data-id=\"b6f34c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- BLOCK 09: WHAT I LEARNED -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n.cs{font-family:'Plus Jakarta Sans',sans-serif}.cs *,.cs *::before,.cs *::after{box-sizing:border-box}.cs h1,.cs h2,.cs h3,.cs h4,.cs p,.cs ul,.cs li{margin:0;padding:0}\n.cs-shell{background:#0b0f0e;border-radius:20px;padding:48px 44px}\n.cs-hd{display:flex;align-items:flex-start;gap:16px;margin-bottom:36px}\n.cs-num{width:36px;height:36px;flex-shrink:0;background:rgba(69,203,133,.09);border:1px solid rgba(69,203,133,.22);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#45CB85;line-height:1}\n.cs-hd-txt{display:flex;flex-direction:column;gap:5px}\n.cs-title{font-size:22px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-0.015em}\n.cs-sub{font-size:13px;font-weight:500;color:#4d6b5c;line-height:1.4}\n\n\/* \u2500\u2500 Quote banner \u2500\u2500 *\/\n.cs-quote{\n  background:linear-gradient(135deg,#111916 0%,rgba(69,203,133,.06) 100%);\n  border:1px solid rgba(69,203,133,.18);\n  border-radius:16px;\n  padding:32px 36px;\n  margin-bottom:24px;\n  position:relative;\n  overflow:hidden;\n}\n.cs-quote::before{\n  content:'\"';\n  position:absolute;\n  top:-12px;left:24px;\n  font-size:96px;font-weight:800;\n  color:rgba(69,203,133,.07);\n  line-height:1;\n  font-family:'Plus Jakarta Sans',sans-serif;\n  pointer-events:none;\n}\n.cs-quote-text{\n  font-size:17px;font-weight:600;\n  color:#e8f0ec;line-height:1.65;\n  position:relative;z-index:1;\n  font-style:italic;\n}\n.cs-quote-text em{color:#45CB85;font-style:normal;font-weight:800}\n\n\/* \u2500\u2500 Learnings grid \u2500\u2500 *\/\n.cs-learn-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:14px;\n  margin-bottom:24px;\n}\n.cs-learn-card{\n  background:#141c18;\n  border:1px solid rgba(255,255,255,.07);\n  border-radius:14px;\n  padding:24px;\n  transition:border-color .2s;\n}\n.cs-learn-card:hover{border-color:rgba(69,203,133,.18)}\n\n.cs-learn-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}\n.cs-learn-ico{\n  width:40px;height:40px;flex-shrink:0;\n  background:rgba(69,203,133,.08);\n  border:1px solid rgba(69,203,133,.15);\n  border-radius:11px;\n  display:flex;align-items:center;justify-content:center;\n  font-size:18px;line-height:1;\n}\n.cs-learn-title{font-size:14px;font-weight:700;color:#fff;line-height:1.35}\n.cs-learn-body{font-size:13px;color:#7a9488;line-height:1.72}\n\n\/* \u2500\u2500 What I'd do differently \u2500\u2500 *\/\n.cs-diff{\n  background:#141c18;\n  border:1px solid rgba(255,255,255,.07);\n  border-radius:14px;\n  padding:24px 28px;\n  margin-bottom:24px;\n}\n.cs-diff-title{font-size:14px;font-weight:700;color:#fff;line-height:1.35;margin-bottom:16px;display:flex;align-items:center;gap:8px}\n.cs-diff-list{display:flex;flex-direction:column;gap:10px}\n.cs-diff-item{display:flex;align-items:flex-start;gap:12px}\n.cs-diff-dot{\n  width:20px;height:20px;flex-shrink:0;\n  background:rgba(69,203,133,.08);\n  border:1px solid rgba(69,203,133,.2);\n  border-radius:6px;\n  display:flex;align-items:center;justify-content:center;\n  font-size:10px;font-weight:800;color:#45CB85;line-height:1;\n  margin-top:1px;\n}\n.cs-diff-text{font-size:13px;color:#7a9488;line-height:1.65}\n.cs-diff-text strong{color:#e8f0ec;font-weight:600}\n\n\/* \u2500\u2500 Closing \/ Thank you \u2500\u2500 *\/\n.cs-closing{\n  background:linear-gradient(135deg,#111916 0%,rgba(69,203,133,.06) 100%);\n  border:1px solid rgba(69,203,133,.15);\n  border-radius:16px;\n  padding:32px 36px;\n  display:grid;\n  grid-template-columns:1fr auto;\n  gap:24px;\n  align-items:center;\n}\n.cs-closing-title{font-size:18px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:8px}\n.cs-closing-body{font-size:13.5px;color:#7a9488;line-height:1.65}\n.cs-closing-body em{color:#45CB85;font-style:normal;font-weight:600}\n\n.cs-closing-meta{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex-shrink:0}\n.cs-avatar{\n  width:64px;height:64px;border-radius:16px;\n  background:linear-gradient(135deg,rgba(69,203,133,.2),rgba(69,203,133,.05));\n  border:2px solid rgba(69,203,133,.25);\n  display:flex;align-items:center;justify-content:center;\n  font-size:28px;line-height:1;\n}\n.cs-author-name{font-size:13px;font-weight:700;color:#e8f0ec;line-height:1.3;text-align:right}\n.cs-author-role{font-size:11px;color:#4d6b5c;line-height:1.3;text-align:right}\n\n.cs-links{display:flex;gap:8px;margin-top:4px}\n.cs-link{\n  display:inline-flex;align-items:center;gap:6px;\n  background:rgba(69,203,133,.08);\n  border:1px solid rgba(69,203,133,.2);\n  border-radius:8px;\n  padding:7px 14px;\n  font-size:12px;font-weight:700;color:#45CB85;\n  text-decoration:none;line-height:1;\n  transition:background .2s;\n}\n.cs-link:hover{background:rgba(69,203,133,.15);text-decoration:none;color:#45CB85}\n\n@media(max-width:720px){\n  .cs-shell{padding:32px 20px}\n  .cs-learn-grid{grid-template-columns:1fr}\n  .cs-closing{grid-template-columns:1fr}\n  .cs-closing-meta{align-items:flex-start}\n  .cs-author-name,.cs-author-role{text-align:left}\n}\n<\/style>\n\n<div class=\"cs\">\n<div class=\"cs-shell\">\n\n  <div class=\"cs-hd\">\n    <div class=\"cs-num\">\u2726<\/div>\n    <div class=\"cs-hd-txt\">\n      <div class=\"cs-title\">What I Learned<\/div>\n      <div class=\"cs-sub\">Reflections after 1 year designing Metagetx<\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Quote -->\n  <div class=\"cs-quote\">\n    <div class=\"cs-quote-text\">\n      Designing for Web3 taught me that <em>the biggest UX problem is not the interface<\/em> \u2014 it's the mental model gap between what the technology assumes and what real users understand.\n    <\/div>\n  <\/div>\n\n  <!-- Learning cards -->\n  <div class=\"cs-learn-grid\">\n\n    <div class=\"cs-learn-card\">\n      <div class=\"cs-learn-head\">\n        <div class=\"cs-learn-ico\">\ud83e\udde0<\/div>\n        <div class=\"cs-learn-title\">Simplicity is a product decision, not just a design one<\/div>\n      <\/div>\n      <p class=\"cs-learn-body\">Making NFT ownership feel simple required alignment across product, engineering, and business \u2014 not just UI polish. The custodial wallet approach only worked because the whole team committed to abstracting complexity at every layer, not just the surface.<\/p>\n    <\/div>\n\n    <div class=\"cs-learn-card\">\n      <div class=\"cs-learn-head\">\n        <div class=\"cs-learn-ico\">\ud83c\udf0f<\/div>\n        <div class=\"cs-learn-title\">Context is everything in regional design<\/div>\n      <\/div>\n      <p class=\"cs-learn-body\">SEA users don't behave like the Western crypto audience that most Web3 design patterns were built for. Designing for Vietnam, Malaysia, and Singapore meant questioning every assumed pattern \u2014 from payment flow to trust signals to how \"ownership\" is communicated.<\/p>\n    <\/div>\n\n    <div class=\"cs-learn-card\">\n      <div class=\"cs-learn-head\">\n        <div class=\"cs-learn-ico\">\ud83d\udd01<\/div>\n        <div class=\"cs-learn-title\">Research early, test often \u2014 even in fast-moving markets<\/div>\n      <\/div>\n      <p class=\"cs-learn-body\">NFT market conditions changed rapidly throughout the project. Having a solid user research foundation meant we could adapt feature priority and messaging without losing sight of our core user needs \u2014 the fundamentals stayed stable even when the market didn't.<\/p>\n    <\/div>\n\n    <div class=\"cs-learn-card\">\n      <div class=\"cs-learn-head\">\n        <div class=\"cs-learn-ico\">\ud83e\udd1d<\/div>\n        <div class=\"cs-learn-title\">Brand partnerships are a UX strategy, not just marketing<\/div>\n      <\/div>\n      <p class=\"cs-learn-body\">Bringing in recognizable brands wasn't just a growth tactic \u2014 it was a trust mechanism built directly into the product experience. The design had to reflect and reinforce that trust at every touchpoint, from creator verification to how brand NFTs were displayed and categorized.<\/p>\n    <\/div>\n\n    <div class=\"cs-learn-card\">\n      <div class=\"cs-learn-head\">\n        <div class=\"cs-learn-ico\">\ud83d\udcd0<\/div>\n        <div class=\"cs-learn-title\">Design systems pay off in fast-paced startups<\/div>\n      <\/div>\n      <p class=\"cs-learn-body\">Investing early in a consistent component library \u2014 tokens, card patterns, spacing rules \u2014 meant we could ship new features and brand drops without rebuilding UI from scratch each time. The system became the team's shared language for speed and consistency.<\/p>\n    <\/div>\n\n    <div class=\"cs-learn-card\">\n      <div class=\"cs-learn-head\">\n        <div class=\"cs-learn-ico\">\ud83d\udcf1<\/div>\n        <div class=\"cs-learn-title\">Mobile-first is not a constraint \u2014 it's a filter<\/div>\n      <\/div>\n      <p class=\"cs-learn-body\">Forcing every design decision through the lens of a mobile thumb zone eliminated unnecessary complexity naturally. If something couldn't be made clear and tappable on a 375px screen, it usually meant the concept itself needed simplifying \u2014 not just the layout.<\/p>\n    <\/div>\n\n  <\/div>\n\n  <!-- What I'd do differently -->\n  <div class=\"cs-diff\">\n    <div class=\"cs-diff-title\">\ud83d\udd27 What I'd Do Differently<\/div>\n    <div class=\"cs-diff-list\">\n      <div class=\"cs-diff-item\">\n        <div class=\"cs-diff-dot\">1<\/div>\n        <div class=\"cs-diff-text\"><strong>Involve users earlier in the wallet abstraction decision.<\/strong> We made assumptions about how invisible to make the wallet \u2014 earlier usability testing on that specific flow would have saved iteration cycles later.<\/div>\n      <\/div>\n      <div class=\"cs-diff-item\">\n        <div class=\"cs-diff-dot\">2<\/div>\n        <div class=\"cs-diff-text\"><strong>Build the design system before the first feature, not alongside it.<\/strong> Retrofitting tokens and components mid-project created inconsistencies that took time to resolve across screens.<\/div>\n      <\/div>\n      <div class=\"cs-diff-item\">\n        <div class=\"cs-diff-dot\">3<\/div>\n        <div class=\"cs-diff-text\"><strong>Push harder for localization testing.<\/strong> Designs looked great in English mockups but revealed spacing and readability issues when tested with Vietnamese text. This should have been caught earlier in the process.<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Closing -->\n  <div class=\"cs-closing\">\n    <div>\n      <div class=\"cs-closing-title\">Thanks for reading \ud83d\udc4b<\/div>\n      <p class=\"cs-closing-body\">This project pushed me to design at the intersection of emerging technology and mainstream accessibility \u2014 one of the most challenging and rewarding spaces to work in. If you'd like to discuss the project or explore working together, feel free to reach out.<\/p>\n      <div class=\"cs-links\" style=\"margin-top:16px\">\n        <a href=\"https:\/\/metagetx.io\/\" target=\"_blank\" rel=\"noopener\" class=\"cs-link\">\ud83c\udf10 Live Site<\/a>\n        \n      <\/div>\n    <\/div>\n    <div class=\"cs-closing-meta\">\n      <div class=\"cs-avatar\">\ud83d\udc64<\/div>\n      <div>\n        <div class=\"cs-author-name\">Product Designer<\/div>\n        <div class=\"cs-author-role\">Metagetx \u00b7 2023 \u2013 2024<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n<\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Product Design Case Study Metagetx \u2014 Asia&#8217;s NFT Rewards Marketplace Designing an NFT marketplace that bridges mainstream SEA consumers with blockchain-powered brand rewards \u2014 from fashion drops to game studios. View Live Website \u2192 Role&nbsp;&nbsp;Product Designer Duration&nbsp;&nbsp;1 Year Platform&nbsp;&nbsp;Web App Domain&nbsp;&nbsp;NFT \u00b7 Web3 \u00b7 Rewards 01 Discovery &amp; Problem Understanding the landscape and the real [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1724,"parent":10,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-2159","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/2159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2159"}],"version-history":[{"count":8,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/2159\/revisions"}],"predecessor-version":[{"id":2210,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/2159\/revisions\/2210"}],"up":[{"embeddable":true,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/10"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/media\/1724"}],"wp:attachment":[{"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}