{"id":1956,"date":"2026-03-21T06:00:44","date_gmt":"2026-03-21T06:00:44","guid":{"rendered":"https:\/\/dominhtunglam.com\/?page_id=1956"},"modified":"2026-03-21T08:41:30","modified_gmt":"2026-03-21T08:41:30","slug":"carlberg-showcase","status":"publish","type":"page","link":"https:\/\/dominhtunglam.com\/?page_id=1956","title":{"rendered":"Carlberg Showcase"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1956\" class=\"elementor elementor-1956\">\n\t\t\t\t<div class=\"elementor-element elementor-element-99bedcb e-con-full e-flex e-con e-parent\" data-id=\"99bedcb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a96954 elementor-widget elementor-widget-html\" data-id=\"0a96954\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\n\n.b01 { all: initial; display: block; }\n.b01 * {\n  all: unset;\n  box-sizing: border-box !important;\n  word-spacing: normal !important;\n  letter-spacing: normal !important;\n  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;\n}\n.b01 { display: block !important; width: 100% !important; overflow: hidden !important; }\n\n\/* \u2500\u2500 LAYOUT \u2500\u2500 *\/\n.b01-wrap {\n  display: grid !important;\n  grid-template-columns: 1fr 1fr !important;\n  min-height: 100vh !important;\n  background: #0d1f17 !important;\n  position: relative !important;\n  overflow: hidden !important;\n}\n.b01-wrap::before {\n  content: '' !important;\n  position: absolute !important; inset: 0 !important;\n  background:\n    radial-gradient(ellipse 65% 65% at 72% 38%, rgba(0,105,57,.42) 0%, transparent 68%),\n    radial-gradient(ellipse 40% 50% at 12% 82%, rgba(201,153,58,.13) 0%, transparent 58%) !important;\n  pointer-events: none !important; z-index: 0 !important;\n}\n.b01-wrap::after {\n  content: '' !important;\n  position: absolute !important; right: 0 !important; top: 0 !important;\n  width: 54% !important; height: 100% !important;\n  background-image: repeating-linear-gradient(\n    0deg, transparent, transparent 18px,\n    rgba(255,255,255,.03) 18px, rgba(255,255,255,.03) 19px\n  ) !important;\n  pointer-events: none !important; z-index: 0 !important;\n}\n\n\/* \u2500\u2500 LEFT \u2014 text \u2500\u2500 *\/\n.b01-left {\n  display: flex !important; flex-direction: column !important;\n  justify-content: center !important;\n  padding: 80px 60px 80px 80px !important;\n  position: relative !important; z-index: 1 !important;\n}\n\n.b01-pill {\n  display: inline-flex !important; align-items: center !important; gap: 8px !important;\n  background: rgba(0,105,57,.22) !important; border: 1px solid rgba(0,105,57,.5) !important;\n  color: #6ecf9a !important; font-size: 11px !important; font-weight: 700 !important;\n  letter-spacing: .12em !important; text-transform: uppercase !important;\n  padding: 6px 14px !important; border-radius: 100px !important;\n  width: fit-content !important; margin-bottom: 28px !important;\n}\n.b01-pill::before {\n  content: '' !important; width: 6px !important; height: 6px !important;\n  border-radius: 50% !important; background: #6ecf9a !important; flex-shrink: 0 !important;\n}\n.b01-eye {\n  display: block !important; font-size: 12px !important; font-weight: 600 !important;\n  letter-spacing: .1em !important; text-transform: uppercase !important;\n  color: #C9993A !important; margin-bottom: 14px !important;\n}\n.b01-title {\n  display: block !important;\n  font-size: clamp(38px,5vw,64px) !important; font-weight: 800 !important;\n  color: #ffffff !important; line-height: 1.08 !important;\n  letter-spacing: -.025em !important; margin-bottom: 22px !important;\n}\n.b01-title em {\n  font-style: normal !important; color: #C9993A !important;\n  font-size: inherit !important; font-weight: inherit !important;\n}\n.b01-desc {\n  display: block !important; font-size: 15px !important; font-weight: 400 !important;\n  color: rgba(255,255,255,.6) !important; max-width: 420px !important;\n  line-height: 1.75 !important; margin-bottom: 48px !important;\n}\n.b01-meta { display: flex !important; gap: 32px !important; flex-wrap: wrap !important; }\n.b01-mi { display: flex !important; flex-direction: column !important; gap: 4px !important; }\n.b01-ml {\n  display: block !important; font-size: 10px !important; font-weight: 700 !important;\n  letter-spacing: .1em !important; text-transform: uppercase !important;\n  color: rgba(255,255,255,.32) !important;\n}\n.b01-mv {\n  display: block !important; font-size: 14px !important;\n  font-weight: 600 !important; color: #ffffff !important;\n}\n\n\/* \u2500\u2500 RIGHT \u2014 image area \u2500\u2500 *\/\n.b01-right {\n  display: flex !important; align-items: center !important; justify-content: center !important;\n  padding: 52px 60px 52px 32px !important;\n  position: relative !important; z-index: 1 !important;\n}\n\n\/* \u2500\u2500 IMAGE FRAME \u2500\u2500 *\/\n.b01-img-frame {\n  display: block !important;\n  width: 100% !important;\n  max-width: 520px !important;\n  position: relative !important;\n}\n\n\/* Browser chrome decoration *\/\n.b01-chrome {\n  display: block !important;\n  background: rgba(255,255,255,.07) !important;\n  border: 1px solid rgba(255,255,255,.14) !important;\n  border-radius: 14px !important;\n  overflow: hidden !important;\n  box-shadow:\n    0 32px 80px rgba(0,0,0,.5),\n    inset 0 1px 0 rgba(255,255,255,.07) !important;\n}\n\n.b01-chrome-bar {\n  display: flex !important; align-items: center !important; gap: 7px !important;\n  background: rgba(255,255,255,.05) !important;\n  border-bottom: 1px solid rgba(255,255,255,.09) !important;\n  padding: 11px 16px !important;\n}\n.b01-chrome-dot { display: block !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; flex-shrink: 0 !important; }\n.b01-chrome-dot:nth-child(1) { background: #ff5f57 !important; }\n.b01-chrome-dot:nth-child(2) { background: #febc2e !important; }\n.b01-chrome-dot:nth-child(3) { background: #28c840 !important; }\n.b01-chrome-url {\n  display: block !important; flex: 1 !important; margin-left: 10px !important;\n  background: rgba(255,255,255,.06) !important; border-radius: 5px !important;\n  padding: 4px 10px !important; font-size: 10px !important;\n  color: rgba(255,255,255,.35) !important;\n}\n\n\/* \u2500\u2500 IMAGE INSIDE CHROME \u2500\u2500 *\/\n.b01-chrome-body { display: block !important; position: relative !important; }\n\n\/* \u2605 PLACEHOLDER \u2014 xo\u00e1 div n\u00e0y khi c\u00f3 \u1ea3nh th\u1eadt *\/\n.b01-ph {\n  display: flex !important; flex-direction: column !important;\n  align-items: center !important; justify-content: center !important;\n  gap: 14px !important;\n  background: rgba(255,255,255,.04) !important;\n  min-height: 340px !important;\n  padding: 40px 30px !important;\n}\n.b01-ph-ring {\n  display: flex !important; align-items: center !important; justify-content: center !important;\n  width: 72px !important; height: 72px !important;\n  border-radius: 50% !important;\n  border: 2px dashed rgba(255,255,255,.2) !important;\n  font-size: 28px !important;\n}\n.b01-ph-title {\n  display: block !important; font-size: 13px !important; font-weight: 700 !important;\n  color: rgba(255,255,255,.7) !important; text-align: center !important;\n  line-height: 1.5 !important;\n}\n.b01-ph-sub {\n  display: block !important; font-size: 11px !important; font-weight: 400 !important;\n  color: rgba(255,255,255,.35) !important; text-align: center !important;\n  line-height: 1.55 !important; max-width: 280px !important;\n}\n.b01-ph-tag {\n  display: inline-block !important;\n  background: rgba(0,105,57,.35) !important;\n  border: 1px solid rgba(0,105,57,.6) !important;\n  color: #6ecf9a !important;\n  font-size: 10px !important; font-weight: 700 !important;\n  letter-spacing: .08em !important; text-transform: uppercase !important;\n  padding: 5px 14px !important; border-radius: 100px !important;\n  margin-top: 4px !important;\n}\n.b01-ph-code {\n  display: block !important;\n  background: rgba(255,255,255,.06) !important;\n  border: 1px solid rgba(255,255,255,.1) !important;\n  border-radius: 8px !important;\n  padding: 10px 16px !important;\n  font-size: 11px !important; font-weight: 400 !important;\n  color: rgba(255,255,255,.5) !important;\n  text-align: left !important; line-height: 1.7 !important;\n  width: 100% !important;\n}\n.b01-ph-code b {\n  display: block !important;\n  color: #6ecf9a !important; font-weight: 700 !important;\n  font-size: 10px !important; text-transform: uppercase !important;\n  letter-spacing: .08em !important; margin-bottom: 6px !important;\n}\n\n\/* \u2605 REAL IMAGE \u2014 hi\u1ec7n khi c\u00f3 \u1ea3nh th\u1eadt *\/\n.b01-real-img {\n  display: block !important;\n  width: 100% !important;\n  height: auto !important;\n}\n\n\/* floating badge *\/\n.b01-badge-float {\n  display: inline-flex !important; align-items: center !important; gap: 8px !important;\n  position: absolute !important; bottom: -16px !important; left: -20px !important;\n  background: #C9993A !important; color: #0d1f17 !important;\n  font-size: 12px !important; font-weight: 700 !important;\n  padding: 10px 18px !important; border-radius: 100px !important;\n  box-shadow: 0 8px 28px rgba(201,153,58,.45) !important;\n  white-space: nowrap !important;\n}\n\n@media (max-width: 900px) {\n  .b01-wrap { grid-template-columns: 1fr !important; min-height: auto !important; }\n  .b01-left { padding: 60px 24px 36px !important; }\n  .b01-right { padding: 0 24px 72px !important; justify-content: flex-start !important; }\n  .b01-img-frame { max-width: 100% !important; }\n  .b01-badge-float { bottom: -12px !important; left: 0 !important; }\n}\n<\/style>\n\n<div class=\"b01\">\n  <div class=\"b01-wrap\">\n\n    <!-- LEFT: Text content -->\n    <div class=\"b01-left\">\n      <span class=\"b01-pill\">Case Study \u00b7 UX\/UI Design<\/span>\n      <span class=\"b01-eye\">Internal Product \u00b7 Carlsberg Vietnam \u00b7 2021<\/span>\n      <span class=\"b01-title\">E-Recognition<br><em>Platform<\/em><br>Redesign<\/span>\n      <span class=\"b01-desc\">Turning a functional but fragmented recognition portal into a cohesive, brand-aligned experience \u2014 where celebrating great work feels as good as the gesture itself.<\/span>\n      <div class=\"b01-meta\">\n        <div class=\"b01-mi\"><span class=\"b01-ml\">Client<\/span><span class=\"b01-mv\">Carlsberg Vietnam<\/span><\/div>\n        <div class=\"b01-mi\"><span class=\"b01-ml\">Role<\/span><span class=\"b01-mv\">Lead UX Designer<\/span><\/div>\n        <div class=\"b01-mi\"><span class=\"b01-ml\">Platform<\/span><span class=\"b01-mv\">Web \u00b7 Admin \u00b7 Mobile<\/span><\/div>\n        <div class=\"b01-mi\"><span class=\"b01-ml\">Year<\/span><span class=\"b01-mv\">2021<\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- RIGHT: Image -->\n    <div class=\"b01-right\">\n      <div class=\"b01-img-frame\">\n        <div class=\"b01-chrome\">\n\n          <!-- Browser top bar -->\n          <div class=\"b01-chrome-bar\">\n            <span class=\"b01-chrome-dot\"><\/span>\n            <span class=\"b01-chrome-dot\"><\/span>\n            <span class=\"b01-chrome-dot\"><\/span>\n            <span class=\"b01-chrome-url\">e-recognition.carlsberg.vn<\/span>\n          <\/div>\n\n          <!-- Image body -->\n          <div class=\"b01-chrome-body\">\n\n            <!--\n            \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n            \u2605 PLACEHOLDER \u2014 XO\u00c1 KHI C\u00d3 \u1ea2NH TH\u1eacT\n            \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n            -->\n            <div class=\"b01-ph\">\n              <img decoding=\"async\" class=\"b01-real-img\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Admin-scaled.png\" alt=\"Carlsberg E-Recognition Dashboard\">\n            <\/div>\n            <!--\n            \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n            \u2605 KHI C\u00d3 \u1ea2NH TH\u1eacT \u2014 d\u00f9ng d\u00f2ng n\u00e0y thay th\u1ebf div.b01-ph \u1edf tr\u00ean:\n            <img decoding=\"async\" class=\"b01-real-img\" src=\"https:\/\/YOUR-WP-MEDIA-URL.jpg\" alt=\"Carlsberg E-Recognition Dashboard\">\n            \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n            -->\n\n          <\/div>\n        <\/div>\n\n        <!-- Floating badge d\u01b0\u1edbi frame -->\n        <span class=\"b01-badge-float\">\ud83c\udf7a &nbsp;A Greater Us Is Brewing<\/span>\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-1d66b37 e-con-full e-flex e-con e-parent\" data-id=\"1d66b37\" data-element_type=\"container\" data-e-type=\"container\">\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<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\n\n.b02 { all: initial; display: block; }\n.b02 * {\n  all: unset;\n  box-sizing: border-box !important;\n  word-spacing: normal !important;\n  letter-spacing: normal !important;\n  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;\n}x\n.b02 { display: block !important; width: 100% !important; background: #ffffff !important; }\n.b02-in { display: block !important; max-width: 1160px !important; margin: 0 auto !important; padding: 88px 60px !important; }\n\n\/* \u2500\u2500 HEADER \u2500\u2500 *\/\n.b02-lbl { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #006939 !important; margin-bottom: 14px !important; }\n.b02-lbl::before { content: '' !important; width: 24px !important; height: 2px !important; background: #006939 !important; display: block !important; flex-shrink: 0 !important; }\n.b02-h2 { display: block !important; font-size: clamp(28px,3vw,44px) !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -.02em !important; color: #0d1f17 !important; margin-bottom: 16px !important; }\n.b02-lead { display: block !important; font-size: 16px !important; font-weight: 400 !important; color: #5a6872 !important; line-height: 1.75 !important; max-width: 680px !important; margin-bottom: 48px !important; }\n\n\/* \u2500\u2500 METRICS ROW \u2500\u2500 *\/\n.b02-metrics { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 16px !important; margin-bottom: 60px !important; }\n.b02-metric { display: block !important; background: #f3f5f4 !important; border-radius: 14px !important; padding: 22px 20px !important; text-align: center !important; border: 1px solid #e0e8e3 !important; }\n.b02-metric-n { display: block !important; font-size: 40px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -.03em !important; margin-bottom: 8px !important; }\n.b02-metric-n.r { color: #e74c3c !important; }\n.b02-metric-n.o { color: #e67e22 !important; }\n.b02-metric-n.g { color: #006939 !important; }\n.b02-metric-n.p { color: #6741d9 !important; }\n.b02-metric-lbl { display: block !important; font-size: 12px !important; font-weight: 600 !important; color: #5a6872 !important; line-height: 1.45 !important; }\n\n\/* \u2500\u2500 SCREEN AUDIT CARDS \u2500\u2500 *\/\n.b02-screens { display: flex !important; flex-direction: column !important; gap: 40px !important; margin-bottom: 64px !important; }\n\n.b02-sc { display: block !important; border: 1px solid #dde8e1 !important; border-radius: 20px !important; overflow: hidden !important; background: #ffffff !important; }\n\n.b02-sc-head { display: flex !important; align-items: center !important; gap: 12px !important; padding: 16px 24px !important; background: #f3f5f4 !important; border-bottom: 1px solid #dde8e1 !important; }\n.b02-sc-num { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 8px !important; background: #0d1f17 !important; color: #ffffff !important; font-size: 12px !important; font-weight: 800 !important; flex-shrink: 0 !important; }\n.b02-sc-title { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: #0d1f17 !important; }\n.b02-sc-sub { display: block !important; font-size: 11px !important; font-weight: 500 !important; color: #5a6872 !important; margin-left: auto !important; }\n\n.b02-sc-body { display: grid !important; grid-template-columns: 1.15fr 1fr !important; }\n\n\/* screenshot *\/\n.b02-img-side { display: block !important; padding: 20px !important; background: #f8faf9 !important; border-right: 1px solid #dde8e1 !important; }\n.b02-img-wrap { display: block !important; position: relative !important; border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 6px 24px rgba(0,0,0,.13) !important; }\n.b02-img-wrap img { display: block !important; width: 100% !important; height: auto !important; }\n\n\/* annotation dots *\/\n.b02-dot {\n  position: absolute !important;\n  display: flex !important; align-items: center !important; justify-content: center !important;\n  width: 22px !important; height: 22px !important; border-radius: 50% !important;\n  background: #e74c3c !important; color: #ffffff !important;\n  font-size: 10px !important; font-weight: 800 !important;\n  border: 2px solid #ffffff !important;\n  box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;\n  pointer-events: none !important;\n}\n\n\/* issues list *\/\n.b02-iss-side { display: block !important; padding: 22px !important; }\n.b02-iss-list { display: flex !important; flex-direction: column !important; gap: 12px !important; }\n\n.b02-iss { display: block !important; background: #fafafa !important; border: 1px solid #eeeeee !important; border-radius: 10px !important; padding: 13px 15px !important; border-left: 3px solid #e74c3c !important; }\n.b02-iss.hi { border-left-color: #e67e22 !important; }\n.b02-iss.me { border-left-color: #006939 !important; }\n\n.b02-iss-top { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 6px !important; flex-wrap: wrap !important; }\n.b02-iss-n { display: flex !important; align-items: center !important; justify-content: center !important; width: 19px !important; height: 19px !important; border-radius: 50% !important; background: #e74c3c !important; color: #ffffff !important; font-size: 9px !important; font-weight: 800 !important; flex-shrink: 0 !important; }\n.b02-iss.hi .b02-iss-n { background: #e67e22 !important; }\n.b02-iss.me .b02-iss-n { background: #006939 !important; }\n.b02-iss-title { display: block !important; font-size: 12px !important; font-weight: 700 !important; color: #0d1f17 !important; flex: 1 !important; min-width: 0 !important; }\n\n.b02-sev { display: inline-flex !important; align-items: center !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase !important; padding: 2px 7px !important; border-radius: 4px !important; }\n.b02-sev.c { background: #ffe0e0 !important; color: #c0392b !important; }\n.b02-sev.h { background: #fff3cd !important; color: #8a6520 !important; }\n.b02-sev.m { background: #e8f4ee !important; color: #006939 !important; }\n\n.b02-iss p { display: block !important; font-size: 11px !important; font-weight: 400 !important; color: #5a6872 !important; line-height: 1.55 !important; margin-bottom: 5px !important; }\n.b02-heu { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 9px !important; font-weight: 600 !important; color: #aaaaaa !important; }\n.b02-heu::before { content: '\u21b3' !important; }\n\n\/* \u2500\u2500 DIVIDER \u2500\u2500 *\/\n.b02-div { display: block !important; height: 1px !important; background: linear-gradient(90deg,transparent,#d8e6df,transparent) !important; margin: 60px 0 !important; }\n\n\/* \u2500\u2500 ROOT CAUSE SECTION \u2500\u2500 *\/\n.b02-sublbl { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #5a6872 !important; margin-bottom: 16px !important; }\n.b02-sublbl::before { content: '' !important; width: 24px !important; height: 2px !important; background: #5a6872 !important; display: block !important; flex-shrink: 0 !important; }\n.b02-h3 { display: block !important; font-size: clamp(22px,2.5vw,34px) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -.02em !important; color: #0d1f17 !important; margin-bottom: 14px !important; }\n.b02-sublead { display: block !important; font-size: 15px !important; font-weight: 400 !important; color: #5a6872 !important; line-height: 1.72 !important; max-width: 600px !important; margin-bottom: 44px !important; }\n\n.b02-cols { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 52px !important; align-items: start !important; }\n.b02-pains { display: flex !important; flex-direction: column !important; gap: 12px !important; }\n.b02-pitem { display: flex !important; gap: 14px !important; align-items: flex-start !important; background: #ffffff !important; border: 1px solid #dde8e1 !important; border-radius: 12px !important; padding: 18px 20px !important; }\n.b02-pico { display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; border-radius: 9px !important; background: #fff5f5 !important; font-size: 18px !important; flex-shrink: 0 !important; }\n.b02-ptxt { display: block !important; }\n.b02-pitem h4 { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: #0d1f17 !important; margin-bottom: 5px !important; line-height: 1.4 !important; }\n.b02-pitem p { display: block !important; font-size: 13px !important; font-weight: 400 !important; color: #5a6872 !important; line-height: 1.6 !important; }\n\n.b02-gbox { display: block !important; background: #006939 !important; border-radius: 16px !important; padding: 36px !important; }\n.b02-gbox h3 { display: block !important; font-size: 18px !important; font-weight: 700 !important; color: #ffffff !important; margin-bottom: 12px !important; line-height: 1.3 !important; }\n.b02-gbox .sub { display: block !important; font-size: 14px !important; font-weight: 400 !important; color: rgba(255,255,255,.78) !important; line-height: 1.7 !important; margin-bottom: 22px !important; }\n.b02-clist { display: flex !important; flex-direction: column !important; gap: 9px !important; }\n.b02-clist li { display: flex !important; align-items: flex-start !important; gap: 9px !important; font-size: 13px !important; font-weight: 400 !important; color: rgba(255,255,255,.88) !important; line-height: 1.5 !important; }\n.b02-clist li::before { content: '\u2713' !important; color: #C9993A !important; font-weight: 800 !important; font-size: 12px !important; flex-shrink: 0 !important; margin-top: 1px !important; }\n.b02-mgrid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 24px !important; }\n.b02-mitem { display: block !important; background: rgba(255,255,255,.12) !important; border-radius: 10px !important; padding: 14px !important; text-align: center !important; }\n.b02-mnum { display: block !important; font-size: 26px !important; font-weight: 800 !important; color: #C9993A !important; line-height: 1.2 !important; }\n.b02-mlab { display: block !important; font-size: 10px !important; font-weight: 600 !important; color: rgba(255,255,255,.65) !important; margin-top: 3px !important; }\n\n@media (max-width: 960px) {\n  .b02-sc-body { grid-template-columns: 1fr !important; }\n  .b02-img-side { border-right: none !important; border-bottom: 1px solid #dde8e1 !important; }\n  .b02-metrics { grid-template-columns: 1fr 1fr !important; }\n  .b02-cols { grid-template-columns: 1fr !important; gap: 36px !important; }\n  .b02-in { padding: 64px 24px !important; }\n}\n<\/style>\n\n<div class=\"b02\">\n<div class=\"b02-in\">\n\n  <!-- HEADER -->\n  <div class=\"b02-lbl\">Discovery &amp; Audit<\/div>\n  <h2 class=\"b02-h2\">What wasn't working \u2014 and why<\/h2>\n  <p class=\"b02-lead\">A systematic UX audit across 3 core screens of the existing e-Recognition system revealed 14 usability violations evaluated against Nielsen's 10 Heuristics. Issues were scored by severity to anchor the redesign scope in evidence, not opinion.<\/p>\n\n  <!-- METRICS -->\n  <div class=\"b02-metrics\">\n    <div class=\"b02-metric\">\n      <span class=\"b02-metric-n r\">5<\/span>\n      <span class=\"b02-metric-lbl\">Critical issues blocking task completion<\/span>\n    <\/div>\n    <div class=\"b02-metric\">\n      <span class=\"b02-metric-n o\">6<\/span>\n      <span class=\"b02-metric-lbl\">High severity usability friction points<\/span>\n    <\/div>\n    <div class=\"b02-metric\">\n      <span class=\"b02-metric-n g\">3<\/span>\n      <span class=\"b02-metric-lbl\">Medium severity visual inconsistencies<\/span>\n    <\/div>\n    <div class=\"b02-metric\">\n      <span class=\"b02-metric-n p\">3<\/span>\n      <span class=\"b02-metric-lbl\">Screens audited across the system<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- SCREENS -->\n  <div class=\"b02-screens\">\n\n    <!-- S1: Login -->\n    <div class=\"b02-sc\">\n      <div class=\"b02-sc-head\">\n        <span class=\"b02-sc-num\">S1<\/span>\n        <span class=\"b02-sc-title\">Login Page \u2014 Employee Entry Point<\/span>\n        <span class=\"b02-sc-sub\">e-recognition.carlsberg.vn\/dang-nhap<\/span>\n      <\/div>\n      <div class=\"b02-sc-body\">\n        <div class=\"b02-img-side\">\n          <div class=\"b02-img-wrap\">\n            <!-- \u2605 Sau khi upload \u1ea3nh l\u00ean WordPress, thay src b\u1eb1ng URL th\u1eadt -->\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-21-at-12.49.34.png\" alt=\"Old login page\">\n            <span class=\"b02-dot\" style=\"top:5%;left:30%;\">1<\/span>\n            <span class=\"b02-dot\" style=\"top:5%;right:6%;\">2<\/span>\n            <span class=\"b02-dot\" style=\"top:34%;right:3%;\">3<\/span>\n            <span class=\"b02-dot\" style=\"bottom:20%;left:32%;\">4<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"b02-iss-side\">\n          <div class=\"b02-iss-list\">\n            <div class=\"b02-iss\">\n              <div class=\"b02-iss-top\">\n                <span class=\"b02-iss-n\">1<\/span>\n                <span class=\"b02-iss-title\">Disconnected visual zones<\/span>\n                <span class=\"b02-sev c\">Critical<\/span>\n              <\/div>\n              <p>White header strip and yellow branded area look like two separate products on the same URL. Users cannot identify this as one cohesive system at first glance.<\/p>\n              <span class=\"b02-heu\">Consistency &amp; standards<\/span>\n            <\/div>\n            <div class=\"b02-iss hi\">\n              <div class=\"b02-iss-top\">\n                <span class=\"b02-iss-n\">2<\/span>\n                <span class=\"b02-iss-title\">Red border signals error before interaction<\/span>\n                <span class=\"b02-sev h\">High<\/span>\n              <\/div>\n              <p>The login form wrapped in a bold red border universally signals an error or validation failure \u2014 before the user has even touched the form. Creates false anxiety at first impression.<\/p>\n              <span class=\"b02-heu\">Visibility of system status<\/span>\n            <\/div>\n            <div class=\"b02-iss hi\">\n              <div class=\"b02-iss-top\">\n                <span class=\"b02-iss-n\">3<\/span>\n                <span class=\"b02-iss-title\">Decorative icons compete with primary CTA<\/span>\n                <span class=\"b02-sev h\">High<\/span>\n              <\/div>\n              <p>Floating trophy icons scatter visual attention across the entire screen. No hierarchy guides the eye to the login form. Eye-tracking would show extreme scatter on first glance.<\/p>\n              <span class=\"b02-heu\">Aesthetic &amp; minimalist design<\/span>\n            <\/div>\n            <div class=\"b02-iss me\">\n              <div class=\"b02-iss-top\">\n                <span class=\"b02-iss-n\">4<\/span>\n                <span class=\"b02-iss-title\">Body text fails WCAG AA on yellow<\/span>\n                <span class=\"b02-sev m\">Medium<\/span>\n              <\/div>\n              <p>Instructional paragraph on the yellow background estimated at ~2.8:1 contrast ratio \u2014 below the 4.5:1 WCAG AA minimum. Critical information about email delivery is effectively unreadable.<\/p>\n              <span class=\"b02-heu\">Visibility of system status<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- S2: Homepage -->\n    <div class=\"b02-sc\">\n      <div class=\"b02-sc-head\">\n        <span class=\"b02-sc-num\">S2<\/span>\n        <span class=\"b02-sc-title\">Homepage \u2014 Main Navigation Hub<\/span>\n        <span class=\"b02-sc-sub\">Beer cap icon navigation<\/span>\n      <\/div>\n      <div class=\"b02-sc-body\">\n        <div class=\"b02-img-side\">\n          <div class=\"b02-img-wrap\">\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-21-at-12.49.48.png\" alt=\"Old homepage beer cap navigation\">\n            <span class=\"b02-dot\" style=\"top:7%;left:38%;\">1<\/span>\n            <span class=\"b02-dot\" style=\"top:58%;left:22%;\">2<\/span>\n            <span class=\"b02-dot\" style=\"top:58%;left:40%;\">3<\/span>\n            <span class=\"b02-dot\" style=\"bottom:8%;left:8%;\">4<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"b02-iss-side\">\n          <div class=\"b02-iss-list\">\n            <div class=\"b02-iss\">\n              <div class=\"b02-iss-top\">\n                <span class=\"b02-iss-n\">1<\/span>\n                <span class=\"b02-iss-title\">Non-standard navigation metaphor<\/span>\n                <span class=\"b02-sev c\">Critical<\/span>\n              <\/div>\n              <p>Beer cap icons as primary navigation have no standard affordance signaling \"click me.\" New users must discover functionality through trial and error \u2014 violating learnability at the entry point.<\/p>\n              <span class=\"b02-heu\">Recognition over recall<\/span>\n            <\/div>\n            <div class=\"b02-iss\">\n              <div class=\"b02-iss-top\">\n                <span class=\"b02-iss-n\">2<\/span>\n                <span class=\"b02-iss-title\">Inconsistent active\/hover states<\/span>\n                <span class=\"b02-sev c\">Critical<\/span>\n              <\/div>\n              <p>Only 2 of 4 caps show a green glow effect \u2014 with no logic determining which. Users cannot tell if this is an active state, a notification indicator, or purely decorative animation.<\/p>\n              <span class=\"b02-heu\">Consistency &amp; standards<\/span>\n            <\/div>\n            <div class=\"b02-iss hi\">\n              <div class=\"b02-iss-top\">\n                <span class=\"b02-iss-n\">3<\/span>\n                <span class=\"b02-iss-title\">Inverted information hierarchy<\/span>\n                <span class=\"b02-sev h\">High<\/span>\n              <\/div>\n              <p>Label text (the only way to understand each section) is visually crushed by oversized cap images above it. The least important element dominates the screen; the most important is a footnote.<\/p>\n              <span class=\"b02-heu\">Aesthetic &amp; minimalist design<\/span>\n            <\/div>\n            <div class=\"b02-iss hi\">\n              <div class=\"b02-iss-top\">\n                <span class=\"b02-iss-n\">4<\/span>\n                <span class=\"b02-iss-title\">No persistent navigation \u2014 full exits on every switch<\/span>\n                <span class=\"b02-sev h\">High<\/span>\n              <\/div>\n              <p>After navigating to any feature, returning requires a full homepage reload. Users rebuild mental context from scratch every time they switch tasks. This was the single most mentioned frustration in stakeholder interviews.<\/p>\n              <span class=\"b02-heu\">Visibility of system status<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- S3: e-ThankYou Form -->\n    <div class=\"b02-sc\">\n      <div class=\"b02-sc-head\">\n        <span class=\"b02-sc-num\">S3<\/span>\n        <span class=\"b02-sc-title\">e-ThankYou \u2014 Core Recognition Form<\/span>\n        <span class=\"b02-sc-sub\">Point granting interface \u00b7 Manager-only<\/span>\n      <\/div>\n      <div class=\"b02-sc-body\">\n        <div class=\"b02-img-side\">\n          <div class=\"b02-img-wrap\">\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-21-at-12.50.54.png\" alt=\"Old e-ThankYou recognition form\">\n            <span class=\"b02-dot\" style=\"top:4%;left:18%;\">1<\/span>\n            <span class=\"b02-dot\" style=\"top:4%;right:10%;\">2<\/span>\n            <span class=\"b02-dot\" style=\"top:28%;left:35%;\">3<\/span>\n            <span class=\"b02-dot\" style=\"top:50%;left:35%;\">4<\/span>\n            <span class=\"b02-dot\" style=\"bottom:3%;right:12%;\">5<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"b02-iss-side\">\n          <div class=\"b02-iss-list\">\n            <div class=\"b02-iss\">\n              <div class=\"b02-iss-top\">\n                <span class=\"b02-iss-n\">1<\/span>\n                <span class=\"b02-iss-title\">4 stat cards, 4 unrelated colors<\/span>\n                <span class=\"b02-sev c\">Critical<\/span>\n              <\/div>\n              <p>Pink, orange, teal, green \u2014 each card uses a completely different hue with no shared design token. The rainbow palette makes the dashboard look like 4 separate products, not 4 states of one data model.<\/p>\n              <span class=\"b02-heu\">Consistency &amp; standards<\/span>\n            <\/div>\n            <div class=\"b02-iss\">\n              <div class=\"b02-iss-top\">\n                <span class=\"b02-iss-n\">2<\/span>\n                <span class=\"b02-iss-title\">Red dashed borders look like debug artifacts<\/span>\n                <span class=\"b02-sev c\">Critical<\/span>\n              <\/div>\n              <p>Form sections outlined with red dashed CSS borders \u2014 identical to the debug style developers use during layout testing. Users associate red dashes with errors or broken states, not structured form sections.<\/p>\n              <span class=\"b02-heu\">Match between system &amp; real world<\/span>\n            <\/div>\n            <div class=\"b02-iss hi\">\n              <div class=\"b02-iss-top\">\n                <span class=\"b02-iss-n\">3<\/span>\n                <span class=\"b02-iss-title\">Name-only search causes wrong-recipient errors<\/span>\n                <span class=\"b02-sev h\">High<\/span>\n              <\/div>\n              <p>For common Vietnamese surnames (Nguyen, Tran, Le), a name search returns 20+ results. Managers must visually scan by email and location \u2014 leading to wrong-recipient selections that require the cancellation function to undo.<\/p>\n              <span class=\"b02-heu\">Recognition over recall<\/span>\n            <\/div>\n            <div class=\"b02-iss hi\">\n              <div class=\"b02-iss-top\">\n                <span class=\"b02-iss-n\">4<\/span>\n                <span class=\"b02-iss-title\">Triple A dropdown with no contextual guidance<\/span>\n                <span class=\"b02-sev h\">High<\/span>\n              <\/div>\n              <p>The \"Behavior\" dropdown lists Triple A codes with zero explanation. Managers must already know what each code represents. No tooltip, no popover, no inline help \u2014 the most important field in the form is the least explained.<\/p>\n              <span class=\"b02-heu\">Recognition over recall<\/span>\n            <\/div>\n            <div class=\"b02-iss me\">\n              <div class=\"b02-iss-top\">\n                <span class=\"b02-iss-n\">5<\/span>\n                <span class=\"b02-iss-title\">Copyright text occupies sidebar navigation space<\/span>\n                <span class=\"b02-sev m\">Medium<\/span>\n              <\/div>\n              <p>\"Copyright \u00a9 2020 e-Recognition\" placed inside the primary navigation sidebar \u2014 occupying real estate that belongs to wayfinding. Legal boilerplate should never compete with nav items for vertical space.<\/p>\n              <span class=\"b02-heu\">Aesthetic &amp; minimalist design<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div><!-- end screens -->\n\n  <!-- DIVIDER -->\n  <div class=\"b02-div\"><\/div>\n\n  <!-- ROOT CAUSES -->\n  <div class=\"b02-sublbl\">Root cause analysis<\/div>\n  <h3 class=\"b02-h3\">These weren't random issues \u2014 they pointed to one root problem<\/h3>\n  <p class=\"b02-sublead\">The audit revealed a system built without a design system, without user testing, and without adherence to Carlsberg brand guidelines. Every screen was designed in isolation, producing a fragmented experience at every touchpoint.<\/p>\n\n  <div class=\"b02-cols\">\n    <div class=\"b02-pains\">\n      <div class=\"b02-pitem\">\n        <div class=\"b02-pico\">\ud83e\udded<\/div>\n        <div class=\"b02-ptxt\">\n          <h4>No persistent navigation<\/h4>\n          <p>Every module switch forced a full homepage exit. Users rebuilt mental context from scratch on every task \u2014 confirmed by the journey map \"Find\" stage drop-off.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"b02-pitem\">\n        <div class=\"b02-pico\">\ud83c\udfa8<\/div>\n        <div class=\"b02-ptxt\">\n          <h4>No design system or token structure<\/h4>\n          <p>Colors, typography, and components were all ad-hoc. The same \"error red\" used for decoration (login border, dashed form boxes) eroded user trust at core interaction moments.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"b02-pitem\">\n        <div class=\"b02-pico\">\ud83d\udd0d<\/div>\n        <div class=\"b02-ptxt\">\n          <h4>Search limited to name-only lookup<\/h4>\n          <p>With no email or department filter, common Vietnamese names returned 20+ results \u2014 the direct cause of wrong-recipient errors and the most requested improvement from stakeholders.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"b02-pitem\">\n        <div class=\"b02-pico\">\ud83d\udc8c<\/div>\n        <div class=\"b02-ptxt\">\n          <h4>Recognition locked behind budget points<\/h4>\n          <p>Non-managers had zero way to express recognition \u2014 a structural gap leaving 70% of the organization unable to participate in the culture program the e-Card feature was designed to close.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"b02-gbox\">\n      <h3>Recognition Principles the system failed to surface<\/h3>\n      <p class=\"sub\">The system was built around Carlsberg's \"Triple A\" behaviors. The redesign needed to surface these at the moment of recognition \u2014 not bury them in unlabeled dropdowns.<\/p>\n      <ul class=\"b02-clist\">\n        <li>Brings breakthrough contribution to the organization<\/li>\n        <li>Work result exceeds expected outcomes<\/li>\n        <li>Supports colleagues beyond their own job scope<\/li>\n        <li>Overcomes difficulties with strong effort<\/li>\n        <li>Proposes creative and practical improvement ideas<\/li>\n        <li>Properly applies Triple A principles in daily work<\/li>\n      <\/ul>\n      <div class=\"b02-mgrid\">\n        <div class=\"b02-mitem\"><span class=\"b02-mnum\">3<\/span><span class=\"b02-mlab\">Good<\/span><\/div>\n        <div class=\"b02-mitem\"><span class=\"b02-mnum\">5<\/span><span class=\"b02-mlab\">Very Good<\/span><\/div>\n        <div class=\"b02-mitem\"><span class=\"b02-mnum\">8<\/span><span class=\"b02-mlab\">Excellent<\/span><\/div>\n        <div class=\"b02-mitem\"><span class=\"b02-mnum\">10<\/span><span class=\"b02-mlab\">Outstanding<\/span><\/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<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\">\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<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\n\n.b03 { all: initial; display: block; }\n.b03 * {\n  all: unset;\n  box-sizing: border-box !important;\n  word-spacing: normal !important;\n  letter-spacing: normal !important;\n  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;\n}\n\n.b03 { display: block !important; width: 100% !important; background: #f3f5f4 !important; }\n.b03-in { display: block !important; max-width: 1160px !important; margin: 0 auto !important; padding: 88px 60px !important; }\n\n.b03-lbl {\n  display: flex !important; align-items: center !important; gap: 10px !important;\n  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em !important;\n  text-transform: uppercase !important; color: #006939 !important; margin-bottom: 14px !important;\n}\n.b03-lbl::before { content: '' !important; width: 24px !important; height: 2px !important; background: #006939 !important; display: block !important; flex-shrink: 0 !important; }\n.b03-h2 { display: block !important; font-size: clamp(28px,3vw,44px) !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -.02em !important; color: #0d1f17 !important; margin-bottom: 16px !important; }\n.b03-lead { display: block !important; font-size: 16px !important; font-weight: 400 !important; color: #5a6872 !important; line-height: 1.75 !important; max-width: 620px !important; margin-bottom: 48px !important; }\n\n.b03-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; }\n\n.b03-card { display: block !important; background: #ffffff !important; border: 1px solid #dde8e1 !important; border-radius: 16px !important; overflow: hidden !important; }\n.b03-head { display: flex !important; gap: 16px !important; align-items: center !important; padding: 24px 28px 20px !important; border-bottom: 1px solid #f0f4f2 !important; }\n.b03-av {\n  display: flex !important; align-items: center !important; justify-content: center !important;\n  width: 52px !important; height: 52px !important; border-radius: 50% !important;\n  font-size: 20px !important; font-weight: 800 !important; flex-shrink: 0 !important;\n}\n.b03-av.m { background: #e8f4ee !important; color: #006939 !important; }\n.b03-av.e { background: #f5e9d0 !important; color: #8a6520 !important; }\n.b03-name { display: block !important; font-size: 16px !important; font-weight: 800 !important; color: #0d1f17 !important; margin-bottom: 3px !important; line-height: 1.3 !important; }\n.b03-role { display: block !important; font-size: 12px !important; font-weight: 500 !important; color: #5a6872 !important; line-height: 1.4 !important; }\n\n.b03-body { display: block !important; padding: 20px 28px !important; }\n.b03-quote { display: block !important; font-size: 13px !important; font-weight: 400 !important; color: #5a6872 !important; line-height: 1.65 !important; margin-bottom: 18px !important; font-style: italic !important; }\n\n.b03-kvs { display: flex !important; flex-direction: column !important; gap: 9px !important; }\n.b03-kv { display: flex !important; gap: 10px !important; align-items: flex-start !important; }\n.b03-kt {\n  display: inline-block !important; font-size: 9px !important; font-weight: 700 !important;\n  letter-spacing: .08em !important; text-transform: uppercase !important;\n  padding: 3px 8px !important; border-radius: 4px !important;\n  flex-shrink: 0 !important; margin-top: 2px !important; white-space: nowrap !important;\n}\n.b03-kt.g { background: #e8f4ee !important; color: #006939 !important; }\n.b03-kt.p { background: #fff0f0 !important; color: #c0392b !important; }\n.b03-kt.n { background: #f5e9d0 !important; color: #8a6520 !important; }\n.b03-kv span:last-child { display: block !important; font-size: 12px !important; font-weight: 400 !important; color: #0d1f17 !important; line-height: 1.55 !important; }\n\n@media (max-width: 700px) {\n  .b03-grid { grid-template-columns: 1fr !important; }\n  .b03-in { padding: 64px 24px !important; }\n}\n<\/style>\n\n<div class=\"b03\">\n  <div class=\"b03-in\">\n    <div class=\"b03-lbl\">Persona<\/div>\n    <h2 class=\"b03-h2\">Two distinct users, one shared goal<\/h2>\n    <p class=\"b03-lead\">The platform serves two very different mental models. Designing for both meant balancing control and simplicity at every touchpoint.<\/p>\n\n    <div class=\"b03-grid\">\n      <div class=\"b03-card\">\n        <div class=\"b03-head\">\n          <div class=\"b03-av m\">M<\/div>\n          <div>\n            <span class=\"b03-name\">Minh \u2014 The Manager<\/span>\n            <span class=\"b03-role\">Senior Manager \u00b7 Band 9 \u00b7 Sales Dept<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"b03-body\">\n          <p class=\"b03-quote\">\"I want to recognize my team quickly and meaningfully \u2014 but the system makes it harder than it should be.\"<\/p>\n          <div class=\"b03-kvs\">\n            <div class=\"b03-kv\"><span class=\"b03-kt g\">Goal<\/span><span>Motivate team, track recognition budget, reward quickly after good performance<\/span><\/div>\n            <div class=\"b03-kv\"><span class=\"b03-kt p\">Pain<\/span><span>Navigating between features requires returning to homepage every time<\/span><\/div>\n            <div class=\"b03-kv\"><span class=\"b03-kt p\">Pain<\/span><span>Accidentally recognized wrong employee \u2014 had to cancel awkwardly<\/span><\/div>\n            <div class=\"b03-kv\"><span class=\"b03-kt n\">Need<\/span><span>Unified dashboard + smart search + group recognition for team events<\/span><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"b03-card\">\n        <div class=\"b03-head\">\n          <div class=\"b03-av e\">L<\/div>\n          <div>\n            <span class=\"b03-name\">Linh \u2014 The Employee<\/span>\n            <span class=\"b03-role\">Executive \u00b7 Band 6 \u00b7 HR Dept<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"b03-body\">\n          <p class=\"b03-quote\">\"I receive points sometimes but I never know how to use them \u2014 and I have no way to thank my own colleagues.\"<\/p>\n          <div class=\"b03-kvs\">\n            <div class=\"b03-kv\"><span class=\"b03-kt g\">Goal<\/span><span>View recognition history, redeem points easily, express thanks to peers<\/span><\/div>\n            <div class=\"b03-kv\"><span class=\"b03-kt p\">Pain<\/span><span>UTOP is the only redemption option \u2014 no flexibility for her preferences<\/span><\/div>\n            <div class=\"b03-kv\"><span class=\"b03-kt p\">Pain<\/span><span>Can't send a thank-you without budget points \u2014 feels excluded from culture<\/span><\/div>\n            <div class=\"b03-kv\"><span class=\"b03-kt n\">Need<\/span><span>e-Card feature for peer recognition + multiple redemption partners<\/span><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\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-ea71564 e-con-full e-flex e-con e-parent\" data-id=\"ea71564\" data-element_type=\"container\" data-e-type=\"container\">\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<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\n\n.b04 { all: initial; display: block; }\n.b04 * {\n  all: unset;\n  box-sizing: border-box !important;\n  word-spacing: normal !important;\n  letter-spacing: normal !important;\n  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;\n}\n\n.b04 { display: block !important; width: 100% !important; background: #ffffff !important; }\n.b04-in { display: block !important; max-width: 1160px !important; margin: 0 auto !important; padding: 88px 60px !important; }\n\n.b04-lbl { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #006939 !important; margin-bottom: 14px !important; }\n.b04-lbl::before { content: '' !important; width: 24px !important; height: 2px !important; background: #006939 !important; display: block !important; flex-shrink: 0 !important; }\n.b04-h2 { display: block !important; font-size: clamp(28px,3vw,44px) !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -.02em !important; color: #0d1f17 !important; margin-bottom: 16px !important; }\n.b04-lead { display: block !important; font-size: 16px !important; font-weight: 400 !important; color: #5a6872 !important; line-height: 1.75 !important; max-width: 620px !important; margin-bottom: 44px !important; }\n\n\/* table wrapper *\/\n.b04-tbl { display: block !important; background: #ffffff !important; border: 1px solid #dde8e1 !important; border-radius: 16px !important; overflow: hidden !important; overflow-x: auto !important; margin-bottom: 24px !important; }\n.b04-inner { display: block !important; min-width: 720px !important; }\n\n\/* header *\/\n.b04-head { display: grid !important; grid-template-columns: 108px repeat(5,1fr) !important; background: #f3f5f4 !important; border-bottom: 2px solid #dde8e1 !important; }\n.b04-hc { display: block !important; padding: 0 0 14px !important; text-align: center !important; }\n.b04-hc:first-child { text-align: left !important; padding-left: 16px !important; }\n.b04-bar { display: block !important; height: 4px !important; margin-bottom: 10px !important; }\n.b4b1 { background: linear-gradient(90deg,#c084fc,#8b5cf6) !important; }\n.b4b2 { background: linear-gradient(90deg,#8b5cf6,#6366f1) !important; }\n.b4b3 { background: linear-gradient(90deg,#6366f1,#06b6d4) !important; }\n.b4b4 { background: linear-gradient(90deg,#06b6d4,#0ea5e9) !important; }\n.b4b5 { background: linear-gradient(90deg,#0ea5e9,#6366f1) !important; }\n.b04-hn { display: block !important; font-size: 12px !important; font-weight: 700 !important; color: #0d1f17 !important; }\n\n\/* emotion row *\/\n.b04-emo { display: grid !important; grid-template-columns: 108px repeat(5,1fr) !important; border-bottom: 1px solid #f0f0f0 !important; padding: 18px 0 !important; position: relative !important; }\n.b04-elbl { display: flex !important; align-items: center !important; padding: 0 16px !important; font-size: 11px !important; font-weight: 700 !important; color: #5a6872 !important; }\n.b04-ec { display: flex !important; justify-content: center !important; align-items: center !important; }\n.b04-emoji { display: flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; font-size: 17px !important; border: 2.5px solid !important; background: #ffffff !important; position: relative !important; z-index: 1 !important; }\n.b04-emoji.h { border-color: #006939 !important; }\n.b04-emoji.m { border-color: #e67e22 !important; }\n.b04-svg { position: absolute !important; top: 0 !important; left: 108px !important; width: calc(100% - 108px) !important; height: 100% !important; pointer-events: none !important; }\n\n\/* data rows *\/\n.b04-row { display: grid !important; grid-template-columns: 108px repeat(5,1fr) !important; border-bottom: 1px solid #f5f5f5 !important; }\n.b04-row:last-child { border-bottom: none !important; }\n.b04-rl { display: flex !important; align-items: flex-start !important; padding: 16px !important; font-size: 11px !important; font-weight: 700 !important; color: #5a6872 !important; border-right: 1px solid #f0f0f0 !important; }\n.b04-c { display: block !important; padding: 13px 14px !important; border-right: 1px solid #f5f5f5 !important; }\n.b04-c:last-child { border-right: none !important; }\n.b04-c ul { display: flex !important; flex-direction: column !important; gap: 5px !important; }\n.b04-c ul li { display: flex !important; align-items: flex-start !important; gap: 6px !important; font-size: 11px !important; font-weight: 400 !important; color: #0d1f17 !important; line-height: 1.45 !important; }\n.b04-c ul li::before { content: '\u2022' !important; color: #006939 !important; font-weight: 800 !important; font-size: 13px !important; line-height: 1.2 !important; flex-shrink: 0 !important; }\n.b04-c.pain ul li::before { color: #e74c3c !important; }\n\n\/* insight *\/\n.b04-insight { display: flex !important; gap: 14px !important; align-items: flex-start !important; background: linear-gradient(135deg,#fff8ee,#fffbf5) !important; border: 1px solid #f0ddb8 !important; border-radius: 14px !important; padding: 22px 26px !important; }\n.b04-itag { display: block !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: #8a6520 !important; margin-bottom: 5px !important; }\n.b04-insight p { display: block !important; font-size: 13px !important; font-weight: 400 !important; color: #0d1f17 !important; line-height: 1.65 !important; }\n.b04-ico { display: block !important; font-size: 22px !important; flex-shrink: 0 !important; }\n\n@media (max-width: 768px) { .b04-in { padding: 64px 24px !important; } }\n<\/style>\n\n<div class=\"b04\">\n  <div class=\"b04-in\">\n    <div class=\"b04-lbl\">Journey Map<\/div>\n    <h2 class=\"b04-h2\">Where the experience broke down<\/h2>\n    <p class=\"b04-lead\">Mapping Minh's journey across 5 stages revealed a sharp emotional dip at \"Find\" \u2014 the moment he realized functions were scattered across separate pages with no unified view.<\/p>\n\n    <div class=\"b04-tbl\">\n      <div class=\"b04-inner\">\n        <!-- Header -->\n        <div class=\"b04-head\">\n          <div class=\"b04-hc\"><\/div>\n          <div class=\"b04-hc\"><span class=\"b04-bar b4b1\"><\/span><span class=\"b04-hn\">Need<\/span><\/div>\n          <div class=\"b04-hc\"><span class=\"b04-bar b4b2\"><\/span><span class=\"b04-hn\">Search<\/span><\/div>\n          <div class=\"b04-hc\"><span class=\"b04-bar b4b3\"><\/span><span class=\"b04-hn\">Find<\/span><\/div>\n          <div class=\"b04-hc\"><span class=\"b04-bar b4b4\"><\/span><span class=\"b04-hn\">Concern<\/span><\/div>\n          <div class=\"b04-hc\"><span class=\"b04-bar b4b5\"><\/span><span class=\"b04-hn\">Work<\/span><\/div>\n        <\/div>\n        <!-- Emotion -->\n        <div class=\"b04-emo\">\n          <div class=\"b04-elbl\">Emotion<\/div>\n          <svg class=\"b04-svg\" viewBox=\"0 0 500 64\" preserveAspectRatio=\"none\" fill=\"none\">\n            <path d=\"M 50,18 L 150,18 L 250,52 L 350,38 L 450,16\" stroke=\"#006939\" stroke-width=\"1.6\" stroke-dasharray=\"4 3\"\/>\n          <\/svg>\n          <div class=\"b04-ec\"><div class=\"b04-emoji h\">\ud83d\ude0a<\/div><\/div>\n          <div class=\"b04-ec\"><div class=\"b04-emoji h\">\ud83d\ude0a<\/div><\/div>\n          <div class=\"b04-ec\"><div class=\"b04-emoji m\">\ud83d\ude10<\/div><\/div>\n          <div class=\"b04-ec\"><div class=\"b04-emoji m\">\ud83d\ude10<\/div><\/div>\n          <div class=\"b04-ec\"><div class=\"b04-emoji h\">\ud83d\ude0a<\/div><\/div>\n        <\/div>\n        <!-- Experience -->\n        <div class=\"b04-row\">\n          <div class=\"b04-rl\">Experience<\/div>\n          <div class=\"b04-c\"><ul><li>Track recognition budget<\/li><li>Motivate team<\/li><li>View performance stats<\/li><\/ul><\/div>\n          <div class=\"b04-c\"><ul><li>Access via internal web link<\/li><\/ul><\/div>\n          <div class=\"b04-c pain\"><ul><li>Features not on one dashboard<\/li><li>Must exit to homepage to switch<\/li><li>Inconsistent UI causes confusion<\/li><\/ul><\/div>\n          <div class=\"b04-c pain\"><ul><li>Still no unified view<\/li><li>Full reload between tabs<\/li><li>UI inconsistency persists<\/li><\/ul><\/div>\n          <div class=\"b04-c\"><ul><li>Preview before submitting<\/li><li>View recognition history<\/li><\/ul><\/div>\n        <\/div>\n        <!-- Expectations -->\n        <div class=\"b04-row\">\n          <div class=\"b04-rl\">Expectations<\/div>\n          <div class=\"b04-c\"><ul><li>Simple management UI<\/li><li>Easy to navigate<\/li><\/ul><\/div>\n          <div class=\"b04-c\"><ul><li>Direct internal link<\/li><\/ul><\/div>\n          <div class=\"b04-c\"><ul><li>Simple, clear flows<\/li><li>Friendly interface<\/li><li>Effective staff management<\/li><li>Easy points tracking<\/li><\/ul><\/div>\n          <div class=\"b04-c\"><ul><li>Simple flows<\/li><li>Friendly interface<\/li><li>Manage team efficiently<\/li><\/ul><\/div>\n          <div class=\"b04-c\"><ul><li>Trust in the program<\/li><\/ul><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"b04-insight\">\n      <span class=\"b04-ico\">\ud83d\udca1<\/span>\n      <div>\n        <span class=\"b04-itag\">Key Insight<\/span>\n        <p>The \"Find\" stage was the critical drop-off point. Users lost confidence when they couldn't locate features on one dashboard. The fix: a persistent sidebar that keeps every module one click away \u2014 no full-page exits.<\/p>\n      <\/div>\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-e8b5eb6 e-con-full e-flex e-con e-parent\" data-id=\"e8b5eb6\" data-element_type=\"container\" data-e-type=\"container\">\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<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\n\n.b06 { all: initial; display: block; }\n.b06 * {\n  all: unset;\n  box-sizing: border-box !important;\n  word-spacing: normal !important;\n  letter-spacing: normal !important;\n  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;\n}\n.b06 { display: block !important; width: 100% !important; background: #ffffff !important; }\n.b06-in { display: block !important; max-width: 1160px !important; margin: 0 auto !important; padding: 88px 60px !important; }\n\n\/* \u2500\u2500 LABELS \/ HEADINGS \u2500\u2500 *\/\n.b06-lbl { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #006939 !important; margin-bottom: 14px !important; }\n.b06-lbl::before { content: '' !important; width: 24px !important; height: 2px !important; background: #006939 !important; display: block !important; flex-shrink: 0 !important; }\n.b06-h2 { display: block !important; font-size: clamp(28px,3vw,44px) !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -.02em !important; color: #0d1f17 !important; margin-bottom: 16px !important; }\n.b06-lead { display: block !important; font-size: 16px !important; font-weight: 400 !important; color: #5a6872 !important; line-height: 1.75 !important; max-width: 620px !important; margin-bottom: 52px !important; }\n\n.b06-sublbl { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #5a6872 !important; margin-bottom: 16px !important; }\n.b06-sublbl::before { content: '' !important; width: 24px !important; height: 2px !important; background: #5a6872 !important; display: block !important; flex-shrink: 0 !important; }\n.b06-h3 { display: block !important; font-size: clamp(22px,2.5vw,34px) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -.02em !important; color: #0d1f17 !important; margin-bottom: 14px !important; }\n.b06-sublead { display: block !important; font-size: 15px !important; font-weight: 400 !important; color: #5a6872 !important; line-height: 1.72 !important; max-width: 600px !important; margin-bottom: 44px !important; }\n\n\/* \u2500\u2500 DIVIDER \u2500\u2500 *\/\n.b06-div { display: block !important; height: 1px !important; background: linear-gradient(90deg,transparent,#d8e6df,transparent) !important; margin: 72px 0 !important; }\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   DESKTOP SCREEN CARDS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.b06-r1 { display: grid !important; grid-template-columns: 1.35fr 1fr !important; gap: 20px !important; margin-bottom: 20px !important; }\n.b06-r2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; margin-bottom: 20px !important; }\n\n.b06-card { display: block !important; background: #ffffff !important; border: 1px solid #dde8e1 !important; border-radius: 16px !important; overflow: hidden !important; transition: transform .25s, box-shadow .25s !important; }\n.b06-card:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 52px rgba(0,105,57,.11) !important; }\n\n.b06-top { display: flex !important; align-items: center !important; gap: 9px !important; padding: 12px 16px !important; background: #f3f5f4 !important; border-bottom: 1px solid #dde8e1 !important; }\n.b06-dot { display: block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #006939 !important; flex-shrink: 0 !important; }\n.b06-name { display: block !important; font-size: 12px !important; font-weight: 700 !important; color: #0d1f17 !important; }\n.b06-badge { display: block !important; margin-left: auto !important; font-size: 10px !important; font-weight: 700 !important; color: #006939 !important; background: #e8f4ee !important; padding: 3px 10px !important; border-radius: 100px !important; white-space: nowrap !important; }\n.b06-badge.new { color: #8a6520 !important; background: #f5e9d0 !important; }\n\n.b06-img { display: block !important; width: 100% !important; height: auto !important; }\n.b06-ph { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: #f8faf9 !important; padding: 40px 20px !important; min-height: 200px !important; }\n.b06-ph-i { display: block !important; font-size: 30px !important; }\n.b06-ph-t { display: block !important; font-size: 11px !important; font-weight: 600 !important; color: #aaaaaa !important; text-align: center !important; line-height: 1.5 !important; }\n.b06-ph-u { display: block !important; font-size: 10px !important; color: #006939 !important; background: #e8f4ee !important; padding: 4px 10px !important; border-radius: 6px !important; margin-top: 4px !important; }\n\n.b06-cap { display: block !important; padding: 13px 16px !important; border-top: 1px solid #f0f4f2 !important; font-size: 12px !important; font-weight: 400 !important; color: #5a6872 !important; line-height: 1.55 !important; }\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   MOBILE SECTION \u2014 dark background strip\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.b06-mobile-strip {\n  display: block !important;\n  background: #0d1f17 !important;\n  border-radius: 20px !important;\n  padding: 52px !important;\n  margin-top: 0 !important;\n}\n\n.b06-mob-head { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 40px !important; align-items: center !important; margin-bottom: 52px !important; }\n\n.b06-mob-lbl { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #6ecf9a !important; margin-bottom: 14px !important; }\n.b06-mob-lbl::before { content: '' !important; width: 24px !important; height: 2px !important; background: #6ecf9a !important; display: block !important; flex-shrink: 0 !important; }\n.b06-mob-h3 { display: block !important; font-size: clamp(22px,2.5vw,34px) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -.02em !important; color: #ffffff !important; margin-bottom: 14px !important; }\n.b06-mob-sub { display: block !important; font-size: 15px !important; font-weight: 400 !important; color: rgba(255,255,255,.55) !important; line-height: 1.72 !important; }\n\n\/* responsive principles list *\/\n.b06-resp-list { display: flex !important; flex-direction: column !important; gap: 12px !important; }\n.b06-resp-item { display: flex !important; gap: 12px !important; align-items: flex-start !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 10px !important; padding: 14px 16px !important; }\n.b06-resp-ico { display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 8px !important; background: rgba(0,105,57,.4) !important; font-size: 15px !important; flex-shrink: 0 !important; }\n.b06-resp-item h4 { display: block !important; font-size: 13px !important; font-weight: 700 !important; color: #ffffff !important; margin-bottom: 3px !important; line-height: 1.3 !important; }\n.b06-resp-item p { display: block !important; font-size: 12px !important; font-weight: 400 !important; color: rgba(255,255,255,.5) !important; line-height: 1.55 !important; }\n\n\/* \u2500\u2500 PHONE FRAMES GRID \u2500\u2500 *\/\n.b06-phones { display: grid !important; grid-template-columns: repeat(5,1fr) !important; gap: 20px !important; align-items: end !important; }\n\n.b06-phone-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 14px !important; }\n\n\/* phone frame *\/\n.b06-phone {\n  display: block !important;\n  position: relative !important;\n  width: 100% !important;\n  max-width: 160px !important;\n  background: #1a2e24 !important;\n  border-radius: 28px !important;\n  border: 2px solid rgba(255,255,255,.18) !important;\n  padding: 12px 8px !important;\n  box-shadow:\n    0 0 0 1px rgba(0,0,0,.5),\n    0 20px 60px rgba(0,0,0,.6),\n    inset 0 1px 0 rgba(255,255,255,.08) !important;\n}\n\n\/* top notch *\/\n.b06-phone::before {\n  content: '' !important;\n  display: block !important;\n  width: 48px !important; height: 8px !important;\n  background: #0d1f17 !important;\n  border-radius: 0 0 8px 8px !important;\n  margin: 0 auto 8px !important;\n}\n\n\/* side buttons *\/\n.b06-phone::after {\n  content: '' !important;\n  position: absolute !important;\n  right: -4px !important; top: 72px !important;\n  width: 3px !important; height: 52px !important;\n  background: rgba(255,255,255,.15) !important;\n  border-radius: 2px !important;\n}\n\n.b06-phone-screen {\n  display: block !important;\n  width: 100% !important;\n  border-radius: 16px !important;\n  overflow: hidden !important;\n  background: #f3f5f4 !important;\n  aspect-ratio: 9\/16 !important;\n}\n\n.b06-phone-screen img {\n  display: block !important;\n  width: 100% !important;\n  height: 100% !important;\n  object-fit: cover !important;\n  object-position: top !important;\n}\n\n\/* placeholder inside phone *\/\n.b06-phone-ph {\n  display: flex !important;\n  flex-direction: column !important;\n  align-items: center !important;\n  justify-content: center !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 180px !important;\n  gap: 6px !important;\n  background: #f3f5f4 !important;\n  border-radius: 16px !important;\n}\n.b06-phone-ph-i { display: block !important; font-size: 22px !important; }\n.b06-phone-ph-t { display: block !important; font-size: 9px !important; font-weight: 600 !important; color: #aaaaaa !important; text-align: center !important; line-height: 1.4 !important; padding: 0 8px !important; }\n\n\/* home indicator *\/\n.b06-home { display: block !important; width: 40px !important; height: 4px !important; background: rgba(255,255,255,.2) !important; border-radius: 2px !important; margin: 8px auto 0 !important; }\n\n\/* label below phone *\/\n.b06-phone-label { display: block !important; font-size: 11px !important; font-weight: 700 !important; color: rgba(255,255,255,.7) !important; text-align: center !important; line-height: 1.4 !important; }\n.b06-phone-tag { display: inline-flex !important; align-items: center !important; font-size: 9px !important; font-weight: 700 !important; color: #6ecf9a !important; background: rgba(0,105,57,.3) !important; padding: 2px 8px !important; border-radius: 100px !important; margin-top: 4px !important; }\n\n\/* \u2500\u2500 BOTTOM FEATURE ROW \u2500\u2500 *\/\n.b06-mob-features { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 14px !important; margin-top: 44px !important; }\n.b06-mob-feat { display: block !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 12px !important; padding: 18px !important; }\n.b06-mob-feat-ico { display: block !important; font-size: 20px !important; margin-bottom: 10px !important; }\n.b06-mob-feat h4 { display: block !important; font-size: 12px !important; font-weight: 700 !important; color: #ffffff !important; margin-bottom: 5px !important; line-height: 1.3 !important; }\n.b06-mob-feat p { display: block !important; font-size: 11px !important; font-weight: 400 !important; color: rgba(255,255,255,.45) !important; line-height: 1.55 !important; }\n\n@media (max-width: 960px) {\n  .b06-r1, .b06-r2 { grid-template-columns: 1fr !important; }\n  .b06-mob-head { grid-template-columns: 1fr !important; gap: 28px !important; }\n  .b06-phones { grid-template-columns: repeat(3,1fr) !important; }\n  .b06-mob-features { grid-template-columns: 1fr 1fr !important; }\n  .b06-mobile-strip { padding: 36px 28px !important; }\n  .b06-in { padding: 64px 24px !important; }\n}\n@media (max-width: 600px) {\n  .b06-phones { grid-template-columns: repeat(2,1fr) !important; }\n  .b06-mob-features { grid-template-columns: 1fr !important; }\n}\n<\/style>\n\n<div class=\"b06\">\n<div class=\"b06-in\">\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       DESKTOP SCREENS\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"b06-lbl\">Solution \u2014 Designed Screens<\/div>\n  <h2 class=\"b06-h2\">From concept to high-fidelity<\/h2>\n  <p class=\"b06-lead\">7 screens across the admin portal \u2014 a unified, data-rich workspace with new tools built directly from user needs uncovered in the audit and research phase.<\/p>\n\n  <!-- Row 1: Dashboard + List -->\n  <div class=\"b06-r1\">\n    <div class=\"b06-card\">\n      <div class=\"b06-top\">\n        <span class=\"b06-dot\"><\/span>\n        <span class=\"b06-name\">Overview Dashboard<\/span>\n        <span class=\"b06-badge\">Admin<\/span>\n      <\/div>\n      <!-- \u2605 Xo\u00e1 div.b06-ph, thay b\u1eb1ng: <img decoding=\"async\" class=\"b06-img\" src=\"URL\" alt=\"Dashboard\"> -->\n      <div class=\"b06-ph\" style=\"min-height:260px;\">\n        <img decoding=\"async\" class=\"b06-img\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Admin-scaled.png\" alt=\"Dashboard\">\n      <\/div>\n      <span class=\"b06-cap\">Real-time recognition messages by department, manager adoption rate (pie), points usage (donut), history feed, and motivational quote \u2014 all on one scrollable dashboard.<\/span>\n    <\/div>\n    <div class=\"b06-card\">\n      <div class=\"b06-top\">\n        <span class=\"b06-dot\"><\/span>\n        <span class=\"b06-name\">e-Thank You List<\/span>\n        <span class=\"b06-badge\">Admin<\/span>\n      <\/div>\n      <div class=\"b06-ph\" style=\"min-height:260px;\">\n        <img decoding=\"async\" class=\"b06-img\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Admin-1.png\" alt=\"Dashboard\">\n      <\/div>\n      <span class=\"b06-cap\">Paginated recognition log with sender\/recipient avatars, timestamps, search by phone\/email, and advanced filters by location, department, and role.<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- Row 2: Card builder states -->\n  <div class=\"b06-r2\">\n    <div class=\"b06-card\">\n      <div class=\"b06-top\">\n        <span class=\"b06-dot\"><\/span>\n        <span class=\"b06-name\">Create e-Card<\/span>\n        <span class=\"b06-badge\">Admin<\/span>\n      <\/div>\n      <div class=\"b06-ph\">\n        <img decoding=\"async\" class=\"b06-img\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Admin-2.png\" alt=\"Dashboard\">\n      <\/div>\n      <span class=\"b06-cap\">Card builder with brand image selector, color picker, and thumbnail upload. Canvas-first approach with Carlsberg imagery pre-loaded.<\/span>\n    <\/div>\n    <div class=\"b06-card\">\n      <div class=\"b06-top\">\n        <span class=\"b06-dot\"><\/span>\n        <span class=\"b06-name\">Create e-Card \u2014 Preview<\/span>\n        <span class=\"b06-badge\">Admin<\/span>\n      <\/div>\n      <div class=\"b06-ph\">\n        <img decoding=\"async\" class=\"b06-img\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/preview.png\" alt=\"Dashboard\">\n      <\/div>\n      <span class=\"b06-cap\">Preview renders the filled card with dynamic content (recipient name, milestone, Triple A behavior) on a Carlsberg-green background with brand logo and login CTA.<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- Row 3: New features -->\n  <div class=\"b06-r2\">\n    <div class=\"b06-card\">\n      <div class=\"b06-top\">\n        <span class=\"b06-dot\"><\/span>\n        <span class=\"b06-name\">Create e-ThankYou Card<\/span>\n        <span class=\"b06-badge new\">New Feature<\/span>\n      <\/div>\n      <div class=\"b06-ph\">\n        <img decoding=\"async\" class=\"b06-img\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Admin-1.png\" alt=\"Dashboard\">\n      <\/div>\n      <span class=\"b06-cap\">Rich-text editor with bold, italic, lists, alignment, image upload \u2014 enabling all employees to create personalized recognition cards without budget points.<\/span>\n    <\/div>\n    <div class=\"b06-card\">\n      <div class=\"b06-top\">\n        <span class=\"b06-dot\"><\/span>\n        <span class=\"b06-name\">E-Group Recognition<\/span>\n        <span class=\"b06-badge new\">New Feature<\/span>\n      <\/div>\n      <div class=\"b06-ph\">\n        <img decoding=\"async\" class=\"b06-img\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Recoginition.png\" alt=\"Dashboard\">\n      <\/div>\n      <span class=\"b06-cap\">Directors grant bulk team points with location, dept, position filters. Grant Point CTA with full history log showing granter, recipient, and point value.<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- DIVIDER -->\n  <div class=\"b06-div\"><\/div>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       MOBILE SECTION\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"b06-mobile-strip\">\n\n    <!-- Header -->\n    <div class=\"b06-mob-head\">\n      <div>\n        <div class=\"b06-mob-lbl\">Responsive Design \u00b7 Mobile<\/div>\n        <h3 class=\"b06-mob-h3\">Designed for every device \u2014 recognition on the go<\/h3>\n        <p class=\"b06-mob-sub\">The platform was designed mobile-first for frontline employees and sales teams who primarily access the system via smartphone. All core flows \u2014 recognizing, receiving, and redeeming points \u2014 work fully on mobile.<\/p>\n      <\/div>\n      <div class=\"b06-resp-list\">\n        <div class=\"b06-resp-item\">\n          <div class=\"b06-resp-ico\">\ud83d\udcd0<\/div>\n          <div>\n            <h4>Single-column stacked layout<\/h4>\n            <p>All multi-column grids collapse to a single scrollable column on screens below 768px \u2014 no horizontal overflow, no clipped content.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"b06-resp-item\">\n          <div class=\"b06-resp-ico\">\ud83d\udc46<\/div>\n          <div>\n            <h4>Touch-optimized tap targets<\/h4>\n            <p>All interactive elements meet the 44\u00d744px minimum touch target size. Navigation sidebar collapses to a bottom tab bar on mobile for one-thumb reachability.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"b06-resp-item\">\n          <div class=\"b06-resp-ico\">\ud83d\udd04<\/div>\n          <div>\n            <h4>UTOP redemption \u2014 mobile only<\/h4>\n            <p>Point spending via the UTOP partner app is intentionally mobile-exclusive \u2014 the redemption flow deep-links directly into the UTOP app on iOS and Android.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- PHONE FRAMES -->\n    <div class=\"b06-phones\">\n\n      <!-- Phone 1 -->\n      <div class=\"b06-phone-wrap\">\n        <div class=\"b06-phone\">\n          <div class=\"b06-phone-screen\">\n            <!-- \u2605 Thay div.b06-phone-ph b\u1eb1ng: <img decoding=\"async\" src=\"URL_MOB_1\" alt=\"Mobile login\"> -->\n            <div class=\"b06-phone-ph\">\n              <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Login.png\" alt=\"Mobile login\">\n            <\/div>\n          <\/div>\n          <span class=\"b06-home\"><\/span>\n        <\/div>\n        <span class=\"b06-phone-label\">Login<\/span>\n        <span class=\"b06-phone-tag\">Employee<\/span>\n      <\/div>\n\n      <!-- Phone 2 -->\n      <div class=\"b06-phone-wrap\">\n        <div class=\"b06-phone\">\n          <div class=\"b06-phone-screen\">\n            <div class=\"b06-phone-ph\">\n              <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Overview.png\" alt=\"Mobile login\">\n            <\/div>\n          <\/div>\n          <span class=\"b06-home\"><\/span>\n        <\/div>\n        <span class=\"b06-phone-label\">Homepage<\/span>\n        <span class=\"b06-phone-tag\">Employee<\/span>\n      <\/div>\n\n      <!-- Phone 3 -->\n      <div class=\"b06-phone-wrap\">\n        <div class=\"b06-phone\">\n          <div class=\"b06-phone-screen\">\n            <div class=\"b06-phone-ph\">\n              <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/E-Thank-you.png\" alt=\"Mobile login\">\n            <\/div>\n          <\/div>\n          <span class=\"b06-home\"><\/span>\n        <\/div>\n        <span class=\"b06-phone-label\">e-ThankYou<\/span>\n        <span class=\"b06-phone-tag\">Manager<\/span>\n      <\/div>\n\n      <!-- Phone 4 -->\n      <div class=\"b06-phone-wrap\">\n        <div class=\"b06-phone\">\n          <div class=\"b06-phone-screen\">\n            <div class=\"b06-phone-ph\">\n              <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/adad-1.png\" alt=\"Mobile login\">\n            <\/div>\n          <\/div>\n          <span class=\"b06-home\"><\/span>\n        <\/div>\n        <span class=\"b06-phone-label\">e-Card<\/span>\n        <span class=\"b06-phone-tag\">New Feature<\/span>\n      <\/div>\n\n      <!-- Phone 5 -->\n      <div class=\"b06-phone-wrap\">\n        <div class=\"b06-phone\">\n          <div class=\"b06-phone-screen\">\n            <div class=\"b06-phone-ph\">\n              <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/03\/Exchange-Point.png\" alt=\"Mobile login\">\n            <\/div>\n          <\/div>\n          <span class=\"b06-home\"><\/span>\n        <\/div>\n        <span class=\"b06-phone-label\">UTOP Redeem<\/span>\n        <span class=\"b06-phone-tag\">Mobile only<\/span>\n      <\/div>\n\n    <\/div><!-- end phones -->\n\n    <!-- Bottom feature chips -->\n    <div class=\"b06-mob-features\">\n      <div class=\"b06-mob-feat\">\n        <span class=\"b06-mob-feat-ico\">\ud83d\udcf1<\/span>\n        <h4>iOS &amp; Android<\/h4>\n        <p>Full feature parity across both platforms via responsive web app \u2014 no separate native app required.<\/p>\n      <\/div>\n      <div class=\"b06-mob-feat\">\n        <span class=\"b06-mob-feat-ico\">\u26a1<\/span>\n        <h4>UTOP mobile-exclusive<\/h4>\n        <p>Point redemption and spending is intentionally restricted to mobile \u2014 incentivising app adoption across the workforce.<\/p>\n      <\/div>\n      <div class=\"b06-mob-feat\">\n        <span class=\"b06-mob-feat-ico\">\ud83e\udded<\/span>\n        <h4>Bottom tab navigation<\/h4>\n        <p>Persistent sidebar collapses to a bottom tab bar on mobile \u2014 all 4 modules reachable with one thumb, no scroll required.<\/p>\n      <\/div>\n    <\/div>\n\n  <\/div><!-- end mobile strip -->\n\n<\/div>\n<\/div>\n\n<!--\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \u2605 H\u01af\u1edaNG D\u1eaaN THAY \u1ea2NH:\n\n  DESKTOP SCREENS (7 \u1ea3nh):\n  \u2014 Xo\u00e1 th\u1ebb <div class=\"b06-ph\"...><\/div>\n  \u2014 Thay b\u1eb1ng: <img decoding=\"async\" class=\"b06-img\" src=\"URL_T\u1eea_WP_MEDIA\" alt=\"T\u00ean m\u00e0n h\u00ecnh\">\n\n  MOBILE SCREENS (5 \u1ea3nh):\n  \u2014 Xo\u00e1 th\u1ebb <div class=\"b06-phone-ph\"...><\/div>\n  \u2014 Thay b\u1eb1ng: <img decoding=\"async\" src=\"URL_T\u1eea_WP_MEDIA\" alt=\"T\u00ean m\u00e0n h\u00ecnh\">\n    (kh\u00f4ng c\u1ea7n class, \u0111\u00e3 inherit t\u1eeb .b06-phone-screen img)\n\n  \u1ea2nh mobile n\u00ean crop t\u1ef7 l\u1ec7 9:16 (portrait) tr\u01b0\u1edbc khi upload.\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n-->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-feab41f e-con-full e-flex e-con e-parent\" data-id=\"feab41f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e3607d elementor-widget elementor-widget-html\" data-id=\"6e3607d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\n\n.b07 { all: initial; display: block; }\n.b07 * {\n  all: unset;\n  box-sizing: border-box !important;\n  word-spacing: normal !important;\n  letter-spacing: normal !important;\n  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;\n}\n\n.b07 { display: block !important; width: 100% !important; background: #0d1f17 !important; }\n.b07-in { display: block !important; max-width: 1160px !important; margin: 0 auto !important; padding: 88px 60px !important; }\n\n.b07-lbl { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #6ecf9a !important; margin-bottom: 14px !important; }\n.b07-lbl::before { content: '' !important; width: 24px !important; height: 2px !important; background: #6ecf9a !important; display: block !important; flex-shrink: 0 !important; }\n.b07-h2 { display: block !important; font-size: clamp(28px,3vw,44px) !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -.02em !important; color: #ffffff !important; margin-bottom: 16px !important; }\n.b07-lead { display: block !important; font-size: 16px !important; font-weight: 400 !important; color: rgba(255,255,255,.55) !important; line-height: 1.75 !important; max-width: 620px !important; margin-bottom: 48px !important; }\n\n.b07-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px !important; }\n.b07-card { display: block !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 16px !important; padding: 28px !important; transition: all .25s !important; }\n.b07-card:hover { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.2) !important; transform: translateY(-3px) !important; }\n.b07-ico { display: block !important; font-size: 26px !important; margin-bottom: 13px !important; }\n.b07-card h3 { display: block !important; font-size: 15px !important; font-weight: 700 !important; color: #ffffff !important; margin-bottom: 9px !important; line-height: 1.3 !important; }\n.b07-card p { display: block !important; font-size: 13px !important; font-weight: 400 !important; color: rgba(255,255,255,.52) !important; line-height: 1.65 !important; }\n\n@media (max-width: 700px) { .b07-grid { grid-template-columns: 1fr !important; } .b07-in { padding: 64px 24px !important; } }\n<\/style>\n\n<div class=\"b07\">\n  <div class=\"b07-in\">\n    <div class=\"b07-lbl\">New Features<\/div>\n    <h2 class=\"b07-h2\">Four additions that changed the experience<\/h2>\n    <p class=\"b07-lead\">Each feature came directly from the gap analysis \u2014 not from assumptions. Every addition closes a specific hole found in research.<\/p>\n    <div class=\"b07-grid\">\n      <div class=\"b07-card\">\n        <span class=\"b07-ico\">\ud83d\udcca<\/span>\n        <h3>Unified Admin Dashboard<\/h3>\n        <p>All key metrics on one page \u2014 recognition volume by dept (area chart), manager adoption rate (pie), points usage (donut), real-time history feed, and a motivational quote that reminds managers why they are here.<\/p>\n      <\/div>\n      <div class=\"b07-card\">\n        <span class=\"b07-ico\">\ud83d\udc8c<\/span>\n        <h3>e-Card Builder and Peer Recognition<\/h3>\n        <p>A new module separate from point-based awards. Any employee can compose a personalized digital thank-you card using a rich-text editor, Carlsberg brand imagery, and background customization \u2014 no budget needed.<\/p>\n      <\/div>\n      <div class=\"b07-card\">\n        <span class=\"b07-ico\">\ud83d\udc65<\/span>\n        <h3>E-Group Recognition<\/h3>\n        <p>Directors can now grant recognition to entire teams in bulk (2x per year, 2M VND\/voucher). Full filter by location, department, position with Grant Point action and complete history log.<\/p>\n      <\/div>\n      <div class=\"b07-card\">\n        <span class=\"b07-ico\">\ud83d\udd0e<\/span>\n        <h3>Smart Search and Filters<\/h3>\n        <p>Upgraded from name-only to phone\/email matching with advanced filter overlays (location, dept, position). Dramatically reduces wrong-recipient errors and speeds up admin workflows.<\/p>\n      <\/div>\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-ce2706b e-con-full e-flex e-con e-parent\" data-id=\"ce2706b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dfba400 elementor-widget elementor-widget-html\" data-id=\"dfba400\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\n\n.b08 { all: initial; display: block; }\n.b08 * {\n  all: unset;\n  box-sizing: border-box !important;\n  word-spacing: normal !important;\n  letter-spacing: normal !important;\n  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;\n}\n\n.b08 { display: block !important; width: 100% !important; background: #f3f5f4 !important; }\n.b08-in { display: block !important; max-width: 1160px !important; margin: 0 auto !important; padding: 88px 60px !important; }\n\n.b08-lbl { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #006939 !important; margin-bottom: 14px !important; }\n.b08-lbl::before { content: '' !important; width: 24px !important; height: 2px !important; background: #006939 !important; display: block !important; flex-shrink: 0 !important; }\n.b08-h2 { display: block !important; font-size: clamp(28px,3vw,44px) !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -.02em !important; color: #0d1f17 !important; margin-bottom: 16px !important; }\n.b08-lead { display: block !important; font-size: 16px !important; font-weight: 400 !important; color: #5a6872 !important; line-height: 1.75 !important; max-width: 620px !important; margin-bottom: 48px !important; }\n\n.b08-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; }\n.b08-card { display: block !important; border-radius: 16px !important; overflow: hidden !important; }\n\n.b08-head { display: flex !important; align-items: center !important; gap: 10px !important; padding: 16px 22px !important; font-size: 13px !important; font-weight: 700 !important; }\n.b08-card.bef .b08-head { background: #fff5f5 !important; color: #c0392b !important; border: 1px solid #fdddd9 !important; border-bottom: none !important; }\n.b08-card.aft .b08-head { background: #e8f4ee !important; color: #006939 !important; border: 1px solid #d0eadb !important; border-bottom: none !important; }\n.b08-hico { display: flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; border-radius: 6px !important; font-size: 13px !important; flex-shrink: 0 !important; }\n.b08-card.bef .b08-hico { background: #fdddd9 !important; }\n.b08-card.aft .b08-hico { background: #d0eadb !important; }\n\n.b08-body { display: block !important; padding: 18px 22px !important; border: 1px solid !important; border-top: none !important; border-radius: 0 0 16px 16px !important; background: #ffffff !important; }\n.b08-card.bef .b08-body { border-color: #fdddd9 !important; }\n.b08-card.aft .b08-body { border-color: #d0eadb !important; }\n\n.b08-row { display: flex !important; gap: 9px !important; align-items: flex-start !important; padding: 9px 0 !important; border-bottom: 1px solid #f5f5f5 !important; }\n.b08-row:last-child { border-bottom: none !important; }\n.b08-dot { display: block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; flex-shrink: 0 !important; margin-top: 5px !important; }\n.b08-card.bef .b08-dot { background: #e74c3c !important; }\n.b08-card.aft .b08-dot { background: #006939 !important; }\n.b08-row span { display: block !important; font-size: 13px !important; font-weight: 400 !important; color: #0d1f17 !important; line-height: 1.55 !important; }\n\n@media (max-width: 700px) { .b08-grid { grid-template-columns: 1fr !important; } .b08-in { padding: 64px 24px !important; } }\n<\/style>\n\n<div class=\"b08\">\n  <div class=\"b08-in\">\n    <div class=\"b08-lbl\">Before vs. After<\/div>\n    <h2 class=\"b08-h2\">Every change, clearly justified<\/h2>\n    <p class=\"b08-lead\">No cosmetic changes \u2014 every decision was rooted in a pain point from the user journey map or the stakeholder improvement brief.<\/p>\n\n    <div class=\"b08-grid\">\n      <div class=\"b08-card bef\">\n        <div class=\"b08-head\"><span class=\"b08-hico\">\u274c<\/span>Before \u2014 Original System<\/div>\n        <div class=\"b08-body\">\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>Beer cap icons stacked vertically on right \u2014 no standard navigation pattern<\/span><\/div>\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>4 stat tabs each a different color \u2014 noisy, no visual hierarchy<\/span><\/div>\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>Static hop flower background \u2014 dated, low-energy feel<\/span><\/div>\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>News: single column scroll, no search, no categories<\/span><\/div>\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>Points redeemable only via UTOP \u2014 no flexibility<\/span><\/div>\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>No peer-to-peer recognition \u2014 only point-based awards<\/span><\/div>\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>No group recognition \u2014 only individual grants<\/span><\/div>\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>Switching features required full homepage exit every time<\/span><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"b08-card aft\">\n        <div class=\"b08-head\"><span class=\"b08-hico\">\u2705<\/span>After \u2014 Redesigned System<\/div>\n        <div class=\"b08-body\">\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>Persistent sidebar navigation \u2014 all modules one click away, always<\/span><\/div>\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>Single color scheme, hover-to-highlight for the active metric tab<\/span><\/div>\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>Animated brand GIF blended into background \u2014 celebratory atmosphere<\/span><\/div>\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>News: magazine grid with category tabs and admin category tagging<\/span><\/div>\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>Multi-app redemption with admin on\/off toggle per partner<\/span><\/div>\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>New e-Card module \u2014 all employees can send themed thank-you cards<\/span><\/div>\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>E-Group Recognition \u2014 directors grant team points in bulk, 2x per year<\/span><\/div>\n          <div class=\"b08-row\"><span class=\"b08-dot\"><\/span><span>Zero full-page reloads between modules \u2014 persistent sidebar<\/span><\/div>\n        <\/div>\n      <\/div>\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-4e4eebb e-con-full e-flex e-con e-parent\" data-id=\"4e4eebb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ee86c96 elementor-widget elementor-widget-html\" data-id=\"ee86c96\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\n\n.b09 { all: initial; display: block; }\n.b09 * {\n  all: unset;\n  box-sizing: border-box !important;\n  word-spacing: normal !important;\n  letter-spacing: normal !important;\n  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;\n}\n\n.b09 { display: block !important; width: 100% !important; background: #ffffff !important; }\n.b09-in { display: block !important; max-width: 1160px !important; margin: 0 auto !important; padding: 88px 60px !important; }\n\n.b09-box { display: grid !important; grid-template-columns: 1fr 2fr !important; gap: 56px !important; align-items: start !important; background: #e8f4ee !important; border-radius: 20px !important; padding: 56px !important; }\n\n.b09-lbl { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: #006939 !important; margin-bottom: 14px !important; }\n.b09-lbl::before { content: '' !important; width: 24px !important; height: 2px !important; background: #006939 !important; display: block !important; flex-shrink: 0 !important; }\n.b09-quote { display: block !important; font-size: clamp(18px,2.2vw,26px) !important; font-weight: 800 !important; color: #0d1f17 !important; line-height: 1.38 !important; letter-spacing: -.01em !important; }\n\n.b09-items { display: flex !important; flex-direction: column !important; gap: 20px !important; }\n.b09-item { display: flex !important; gap: 13px !important; align-items: flex-start !important; }\n.b09-num { display: flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; border-radius: 8px !important; background: #006939 !important; color: #ffffff !important; font-size: 12px !important; font-weight: 800 !important; flex-shrink: 0 !important; }\n.b09-item h4 { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: #0d1f17 !important; margin-bottom: 4px !important; line-height: 1.3 !important; }\n.b09-item p { display: block !important; font-size: 13px !important; font-weight: 400 !important; color: #5a6872 !important; line-height: 1.6 !important; }\n\n@media (max-width: 860px) { .b09-box { grid-template-columns: 1fr !important; gap: 36px !important; padding: 36px 28px !important; } .b09-in { padding: 64px 24px !important; } }\n<\/style>\n\n<div class=\"b09\">\n  <div class=\"b09-in\">\n    <div class=\"b09-box\">\n      <div>\n        <div class=\"b09-lbl\">Key Learnings<\/div>\n        <span class=\"b09-quote\">\"Recognition tools need to feel as good as the gesture itself.\"<\/span>\n      <\/div>\n      <div class=\"b09-items\">\n        <div class=\"b09-item\">\n          <div class=\"b09-num\">1<\/div>\n          <div>\n            <h4>Brand tone drives behavior<\/h4>\n            <p>A celebratory, brand-aligned UI encourages more frequent use. When a tool feels joyful, recognition becomes a habit rather than a task.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"b09-item\">\n          <div class=\"b09-num\">2<\/div>\n          <div>\n            <h4>Navigation is a trust signal<\/h4>\n            <p>Forcing users back to the homepage to switch features eroded confidence. A persistent sidebar eliminated that friction entirely \u2014 and the journey map made this undeniable to stakeholders.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"b09-item\">\n          <div class=\"b09-num\">3<\/div>\n          <div>\n            <h4>Democratize recognition<\/h4>\n            <p>Limiting recognition to managers with budget points was a structural bottleneck. The e-Card module unlocked peer-to-peer culture across all levels and seniorities.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"b09-item\">\n          <div class=\"b09-num\">4<\/div>\n          <div>\n            <h4>Data should inspire, not just inform<\/h4>\n            <p>Adding the motivational quote panel to the admin dashboard was not decoration \u2014 it reinforced why the program exists, right at the moment of action.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\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-13c348d e-flex e-con-boxed e-con e-parent\" data-id=\"13c348d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1add74b elementor-widget elementor-widget-home2_footer\" data-id=\"1add74b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"home2_footer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t          \n             <footer class=\"tf-footer style-2 section-has-dot\">\n                    \n        \n        <div class=\"line-page\"><\/div>\n        \n            <span><\/span>\n            <div class=\"tf-container\">\n                <div class=\"row\">\n                    <div class=\"offset-xl-2 col-xl-8 offset-lg-2 col-lg-8\">\n                        <div class=\"wrap-section\">\n                                                        <div class=\"text-body-2 dot-before subtitle style-center\">Get in touch<\/div>\n                                                        <div class=\"avatar text-center\">\n                                                                <h6 class=\"name fw-medium\">Do Minh Tung Lam<\/h6>\n                                <div class=\"meta text-body-2\">Sr. UI\/UX Designer<\/div>\n                            <\/div>\n                                                                                    <ul class=\"social-links justify-content-center\">\n                                                                    <li>\n                                        <a href=\"https:\/\/www.instagram.com\/richardmaz_\/\">\n                                            <i class=\"icon icon-instagram\"><\/i>\n                                        <\/a>\n                                    <\/li>\n                                                                    <li>\n                                        <a href=\"https:\/\/www.facebook.com\/ominhtunglam\/\">\n                                            <i class=\"icon icon-facebook-f\"><\/i>\n                                        <\/a>\n                                    <\/li>\n                                                                    <li>\n                                        <a href=\"https:\/\/www.linkedin.com\/in\/%C4%91%E1%BB%97-minh-t%C3%B9ng-l%C3%A2m-21a466197\/\">\n                                            <i class=\"icon-linkedin-in\"><\/i>\n                                        <\/a>\n                                    <\/li>\n                                                            <\/ul>\n                                                                                    <div class=\"coppyright\">\n                                <i class=\"icon icon-global\"><\/i>\n                                <div class=\"text-body-3 font-poppins\">2026 All Rights Reserved <span class=\"text-white\">Do Minh Tung Lam<\/span><\/div>\n                            <\/div>\n                                                    <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/themes\/jayden\/images\/section\/img-bg-2.png\" alt=\"\" class=\"map\">\n            <div class=\"box-gradient2\"><\/div>\n        <\/footer>\n        \n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Case Study \u00b7 UX\/UI Design Internal Product \u00b7 Carlsberg Vietnam \u00b7 2021 E-RecognitionPlatformRedesign Turning a functional but fragmented recognition portal into a cohesive, brand-aligned experience \u2014 where celebrating great work feels as good as the gesture itself. ClientCarlsberg Vietnam RoleLead UX Designer PlatformWeb \u00b7 Admin \u00b7 Mobile Year2021 e-recognition.carlsberg.vn \ud83c\udf7a &nbsp;A Greater Us Is Brewing [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"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-1956","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/1956","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=1956"}],"version-history":[{"count":23,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/1956\/revisions"}],"predecessor-version":[{"id":2115,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/1956\/revisions\/2115"}],"up":[{"embeddable":true,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/10"}],"wp:attachment":[{"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}