{"id":2269,"date":"2026-07-22T03:23:30","date_gmt":"2026-07-22T03:23:30","guid":{"rendered":"https:\/\/dominhtunglam.com\/?page_id=2269"},"modified":"2026-07-22T03:28:06","modified_gmt":"2026-07-22T03:28:06","slug":"talora-showcase-clone","status":"publish","type":"page","link":"https:\/\/dominhtunglam.com\/?page_id=2269","title":{"rendered":"ONE Showcase"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2269\" class=\"elementor elementor-2269\">\n\t\t\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<!-- Talora Case Study \u2014 GLOBAL STYLES. Paste v\u00e0o 1 HTML widget DUY NH\u1ea4T \u1edf \u0111\u1ea7u trang. -->\n<style>\n  \/* ============ TALORA WEB ADMIN TOKENS (synced from Figma DS) ============ *\/\n  .tlcs {\n    \/* ground \u2014 light (content area c\u1ee7a site l\u00e0 n\u1ec1n tr\u1eafng) *\/\n    --bg: #ffffff;              \/* background\/primary\/default *\/\n    --surface: #f8fafc;         \/* background\/secondary \u2014 gray blue\/50 *\/\n    --surface-2: #f1f5f9;       \/* gray blue\/100 *\/\n    --tint: #f2fbfa;            \/* background\/brand-subtle \u2014 turquoise blue\/50 *\/\n    --tint-2: #d3f4f2;          \/* turquoise blue\/100 *\/\n    --ink: #09090b;             \/* text\/primary *\/\n    --ink-2: #64748b;           \/* text\/secondary *\/\n    --ink-3: #94a3b8;           \/* muted \u2014 gray blue\/400 *\/\n    --line: #e2e8f0;            \/* border\/secondary \u2014 gray blue\/200 *\/\n    --line-strong: #cbd5e1;     \/* border\/primary \u2014 gray blue\/300 *\/\n\n    \/* brand \u2014 turquoise blue *\/\n    --brand-300: #74d3d4;\n    --brand-500: #2e989e;\n    --brand: #22797f;           \/* background\/brand\/default \u2014 turquoise blue\/600 *\/\n    --brand-700: #1f6066;\n    --brand-800: #1d4d52;\n\n    \/* status (Web Admin DS) *\/\n    --ok: #417d0e;      --ok-subtle: #f5fee7;\n    --warn: #fc6c00;    --warn-subtle: #fff9ec;\n    --danger: #dc2626;  --danger-subtle: #fef2f2;\n    --info: #0687ff;    --info-subtle: #edf9ff;\n\n    \/* brand cover world (hero\/footer) \u2014 from Figma cover *\/\n    --cover-bg: #1a1a1a;\n    --cover-ink: #ffffff;\n    --cover-ink-2: #a1a1aa;\n    --logo-teal: #63c2c2;\n    --logo-teal-deep: #338291;\n    --logo-cyan: #b4dee3;\n    --logo-purple: #915cb9;\n    --logo-purple-light: #d1b3e7;\n\n    --radius: 8px;              \/* radius m *\/\n    --radius-sm: 6px;           \/* radius s *\/\n\n    --font: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"SF Pro Text\", \"Segoe UI\", system-ui, sans-serif;\n    --mono: \"SF Mono\", ui-monospace, \"Cascadia Code\", Menlo, Consolas, monospace;\n  }\n\n\n  \/* ============ BASE ============ *\/\n  .tlcs {\n    font-family: var(--font);\n    background: transparent;\n    color: var(--ink);\n    line-height: 1.6;\n    font-size: 16px;\n    -webkit-font-smoothing: antialiased;\n  }\n  .tlcs a { color: var(--brand); text-decoration: none; }\n  .tlcs a:hover { color: var(--brand-700); text-decoration: underline; }\n  .tlcs a:focus-visible, .tlcs button:focus-visible {\n    outline: 2px solid var(--brand);\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n  .tlcs ::selection { background: #d3f4f2; color: #1d4d52; }\n\n  .tlcs-wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }\n  @media (max-width: 640px) { .tlcs-wrap { padding: 0 20px; } }\n\n\n  .tlcs-eyebrow {\n    font-family: var(--mono);\n    font-size: 12px;\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n    color: var(--brand);\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 20px;\n  }\n  .tlcs-eyebrow::after { content: \"\"; flex: 1; height: 1px; background: var(--line); }\n\n  .tlcs h2 {\n    font-size: clamp(26px, 3.4vw, 36px);\n    font-weight: 600;\n    letter-spacing: -0.02em;\n    line-height: 1.15;\n    text-wrap: balance;\n    margin: 0 0 16px;\n  }\n  .tlcs h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }\n  .tlcs-lede { font-size: 17px; color: var(--ink-2); max-width: 62ch; margin: 0 0 40px; }\n  .tlcs p { margin: 0 0 14px; }\n\n  .tlcs-num { font-variant-numeric: tabular-nums; }\n\n  \/* ============ HERO \u2014 brand cover world ============ *\/\n  .tlcs-hero {\n    background: var(--cover-bg);\n    color: var(--cover-ink);\n    padding: 72px 0 80px;\n    position: relative;\n    overflow: hidden;\n  }\n  .tlcs-hero::before {\n    \/* faint chart-grid, a nod to nav charts *\/\n    content: \"\";\n    position: absolute; inset: 0;\n    background-image:\n      linear-gradient(rgba(99,194,194,.06) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(99,194,194,.06) 1px, transparent 1px);\n    background-size: 48px 48px;\n    pointer-events: none;\n  }\n  .tlcs-hero::after {\n    \/* gradient rule from the logo facets *\/\n    content: \"\";\n    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;\n    background: linear-gradient(90deg, var(--logo-purple), var(--logo-teal) 45%, var(--logo-cyan));\n  }\n  .tlcs-hero .tlcs-wrap { position: relative; }\n  .tlcs-hero .tlcs-logo { width: 170px; height: auto; display: block; margin-bottom: 64px; }\n  .tlcs-hero-tag {\n    font-family: var(--mono);\n    font-size: 12px;\n    letter-spacing: 0.16em;\n    text-transform: uppercase;\n    color: var(--logo-teal);\n    margin-bottom: 24px;\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n  }\n  .tlcs-hero-tag::before { content: \"\"; width: 28px; height: 1px; background: var(--logo-teal); }\n  .tlcs-hero h1 {\n    font-size: clamp(40px, 6.5vw, 72px);\n    font-weight: 600;\n    letter-spacing: -0.03em;\n    line-height: 1.02;\n    margin: 0 0 20px;\n    text-wrap: balance;\n    color: #fff;\n  }\n  .tlcs-hero h1 .tlcs-accent { color: var(--logo-teal); }\n  .tlcs-hero .tlcs-sub {\n    font-size: clamp(17px, 2vw, 20px);\n    color: var(--cover-ink-2);\n    max-width: 58ch;\n    margin: 0 0 40px;\n  }\n  .tlcs-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; }\n  .tlcs-hero-meta span {\n    font-family: var(--mono);\n    font-size: 12.5px;\n    letter-spacing: 0.04em;\n    padding: 7px 14px;\n    border: 1px solid rgba(99,194,194,.35);\n    border-radius: 999px;\n    color: var(--logo-cyan);\n  }\n\n  \/* ============ SNAPSHOT ============ *\/\n  .tlcs-snapshot {\n    border: 1px solid var(--line);\n    border-radius: var(--radius);\n    overflow: hidden;\n    display: grid;\n    grid-template-columns: repeat(6, 1fr);\n    background: var(--line);\n    gap: 1px;\n    margin: 0;\n  }\n  .tlcs-snapshot > div { background: var(--bg); padding: 22px 20px; }\n  .tlcs-snapshot dt {\n    font-family: var(--mono);\n    font-size: 11px;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    color: var(--ink-3);\n    margin-bottom: 8px;\n  }\n  .tlcs-snapshot dd { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; }\n  @media (max-width: 900px) { .tlcs-snapshot { grid-template-columns: repeat(3, 1fr); } }\n  @media (max-width: 560px) { .tlcs-snapshot { grid-template-columns: repeat(2, 1fr); } }\n\n  \/* ============ SCREENSHOTS ============ *\/\n  .tlcs-shot {\n    margin: 36px 0 0;\n    border: 1px solid var(--line);\n    border-radius: var(--radius);\n    overflow: hidden;\n    background: var(--surface);\n    box-shadow: 0 1px 3px rgba(9,9,11,.06);\n  }\n  .tlcs-shot img { display: block; width: 100%; height: auto; }\n  .tlcs-shot figcaption {\n    font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;\n    color: var(--ink-3); padding: 12px 16px; border-top: 1px solid var(--line);\n  }\n\n  \/* ============ TWO-TIER DIAGRAM ============ *\/\n  .tlcs-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }\n  @media (max-width: 720px) { .tlcs-tiers { grid-template-columns: 1fr; } }\n  .tlcs-tier {\n    border: 1px solid var(--line);\n    border-radius: var(--radius);\n    padding: 26px 24px;\n    background: var(--bg);\n  }\n  .tlcs-tier.tlcs-central { background: var(--tint); border-color: var(--brand-300); }\n  .tlcs-tier .tlcs-chip {\n    font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;\n    display: inline-block; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px;\n  }\n  .tlcs-tier.tlcs-central .tlcs-chip { background: var(--brand); color: #fff; }\n  .tlcs-tier.tlcs-customer .tlcs-chip { background: var(--tint-2); color: var(--brand-800); }\n  .tlcs-tier ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14.5px; }\n  .tlcs-tier li { margin-bottom: 5px; }\n  .tlcs-tier li::marker { color: var(--brand); }\n\n  .tlcs-modules-strip { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }\n  .tlcs-modules-strip span {\n    font-family: var(--mono); font-size: 12.5px;\n    padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);\n    background: var(--surface); color: var(--ink-2);\n  }\n\n  \/* ============ INSIGHT CALLOUT ============ *\/\n  .tlcs-insight {\n    border-left: 3px solid var(--brand);\n    background: var(--tint);\n    border-radius: 0 var(--radius) var(--radius) 0;\n    padding: 22px 26px;\n    margin: 32px 0 0;\n    font-size: 17px;\n    font-weight: 500;\n    max-width: 70ch;\n  }\n  .tlcs-insight .tlcs-who {\n    display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 400;\n    letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-top: 12px;\n  }\n\n  \/* ============ TABLES ============ *\/\n  .tlcs-table-scroll { overflow-x: auto; margin-top: 36px; border: 1px solid var(--line); border-radius: var(--radius); }\n  .tlcs table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 14px; }\n  .tlcs thead th {\n    font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;\n    text-align: left; color: var(--ink-3); font-weight: 500;\n    padding: 14px 16px; border-bottom: 1px solid var(--line-strong);\n    background: var(--surface);\n    white-space: nowrap;\n  }\n  .tlcs tbody td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }\n  .tlcs tbody tr:last-child td { border-bottom: none; }\n  .tlcs tbody td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }\n  .tlcs tbody tr:hover td { background: var(--surface); }\n\n  .tlcs-matrix td, .tlcs-matrix th { text-align: center; }\n  .tlcs-matrix td:first-child, .tlcs-matrix th:first-child { text-align: left; }\n  .tlcs-matrix th.tlcs-talora, .tlcs-matrix td.tlcs-talora { background: var(--tint); }\n  .tlcs-matrix thead th.tlcs-talora { color: var(--brand-800); font-weight: 700; }\n\n  .tlcs-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; }\n  .tlcs-dot.tlcs-full { background: var(--brand); }\n  .tlcs-dot.tlcs-half { background: transparent; border: 2px solid var(--warn); }\n  .tlcs-dot.tlcs-none { background: transparent; border: 2px solid var(--line-strong); }\n  .tlcs-legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--ink-3); align-items: center; }\n  .tlcs-legend span { display: inline-flex; align-items: center; gap: 7px; }\n\n  .tlcs-ai-badge {\n    font-family: var(--mono); font-size: 11px; letter-spacing: .06em;\n    padding: 3px 9px; border-radius: 999px; white-space: nowrap;\n  }\n  .tlcs-ai-badge.tlcs-live { background: var(--ok-subtle); color: var(--ok); border: 1px solid var(--ok); }\n  .tlcs-ai-badge.tlcs-partial { background: var(--warn-subtle); color: var(--warn); border: 1px solid var(--warn); }\n  .tlcs-ai-badge.tlcs-no { background: transparent; color: var(--ink-3); border: 1px solid var(--line-strong); }\n\n  \/* ============ CARD GRIDS ============ *\/\n  .tlcs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }\n  .tlcs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }\n  @media (max-width: 860px) { .tlcs-grid-3 { grid-template-columns: 1fr; } .tlcs-grid-2 { grid-template-columns: 1fr; } }\n\n  .tlcs-card {\n    border: 1px solid var(--line);\n    border-radius: var(--radius);\n    padding: 26px 24px;\n    background: var(--bg);\n  }\n  .tlcs-card .tlcs-k {\n    font-family: var(--mono); font-size: 12px; letter-spacing: .1em;\n    color: var(--brand); text-transform: uppercase; display: block; margin-bottom: 12px;\n  }\n  .tlcs-card p { color: var(--ink-2); font-size: 14.5px; margin: 0; }\n\n  .tlcs-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }\n  @media (max-width: 860px) { .tlcs-stat-row { grid-template-columns: repeat(2, 1fr); } }\n  .tlcs-stat {\n    border-top: 3px solid var(--brand);\n    background: var(--surface);\n    border-radius: 0 0 var(--radius) var(--radius);\n    padding: 22px 20px 20px;\n  }\n  .tlcs-stat b {\n    display: block; font-size: clamp(30px, 4vw, 40px); font-weight: 600;\n    letter-spacing: -0.02em; line-height: 1; color: var(--brand-800);\n    font-variant-numeric: tabular-nums;\n    margin-bottom: 8px;\n  }\n  .tlcs-stat span { font-size: 13.5px; color: var(--ink-2); }\n\n  \/* ============ USP LIST ============ *\/\n  .tlcs-usp-list { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }\n  @media (max-width: 720px) { .tlcs-usp-list { grid-template-columns: 1fr; } }\n  .tlcs-usp {\n    display: grid; grid-template-columns: 20px 1fr; gap: 14px;\n    padding: 20px 0; border-bottom: 1px solid var(--line);\n  }\n  .tlcs-usp .tlcs-tick { color: var(--brand); font-weight: 700; line-height: 1.5; }\n  .tlcs-usp h3 { font-size: 15.5px; margin-bottom: 4px; }\n  .tlcs-usp p { font-size: 14px; color: var(--ink-2); margin: 0; }\n\n  \/* ============ PERSONAS ============ *\/\n  .tlcs-persona {\n    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg);\n  }\n  .tlcs-persona header { background: #1d4d52; color: #fff; padding: 20px 24px; }\n  .tlcs-persona header .tlcs-role { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #74d3d4; display: block; margin-bottom: 6px; }\n  .tlcs-persona header h3 { color: #fff; margin: 0; font-size: 18px; }\n  .tlcs-persona .tlcs-body { padding: 22px 24px; }\n  .tlcs-persona .tlcs-body h4 {\n    font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;\n    color: var(--ink-3); margin: 16px 0 6px; font-weight: 500;\n  }\n  .tlcs-persona .tlcs-body h4:first-child { margin-top: 0; }\n  .tlcs-persona .tlcs-body p, .tlcs-persona .tlcs-body li { font-size: 14px; color: var(--ink-2); }\n  .tlcs-persona .tlcs-body ul { margin: 0; padding-left: 18px; }\n  .tlcs-persona .tlcs-body li { margin-bottom: 4px; }\n  .tlcs-persona .tlcs-body li::marker { color: var(--brand); }\n\n  \/* ============ PROCESS ============ *\/\n  .tlcs-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; counter-reset: step; }\n  @media (max-width: 860px) { .tlcs-process { grid-template-columns: 1fr 1fr; } }\n  @media (max-width: 560px) { .tlcs-process { grid-template-columns: 1fr; } }\n  .tlcs-step {\n    counter-increment: step;\n    border: 1px solid var(--line); border-radius: var(--radius);\n    padding: 24px 20px; background: var(--bg);\n  }\n  .tlcs-step::before {\n    content: \"0\" counter(step);\n    font-family: var(--mono); font-size: 13px; color: var(--brand);\n    display: block; margin-bottom: 14px; letter-spacing: .08em;\n  }\n  .tlcs-step h3 { font-size: 16px; }\n  .tlcs-step p { font-size: 13.5px; color: var(--ink-2); margin: 0; }\n\n  \/* ============ SOLUTIONS ============ *\/\n  .tlcs-solution { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--line); }\n  .tlcs-solution:first-of-type { margin-top: 36px; padding-top: 0; border-top: none; }\n  .tlcs-solution .tlcs-n {\n    font-family: var(--mono); font-size: 13px; color: var(--brand); letter-spacing: .08em;\n    display: block; margin-bottom: 10px;\n  }\n  .tlcs-solution h3 { font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.015em; }\n  .tlcs-solution .tlcs-goal { color: var(--ink-2); max-width: 66ch; }\n  .tlcs-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }\n  @media (max-width: 720px) { .tlcs-features { grid-template-columns: 1fr; } }\n  .tlcs-feature {\n    background: var(--surface); border-radius: var(--radius-sm);\n    padding: 16px 18px; font-size: 14px; color: var(--ink-2);\n    display: grid; grid-template-columns: 22px 1fr; gap: 10px;\n  }\n  .tlcs-feature .tlcs-fkey {\n    font-family: var(--mono); font-size: 12px; color: var(--brand-700); font-weight: 700; padding-top: 1px;\n  }\n  .tlcs-feature b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; }\n  .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }\n  .tags span {\n    font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;\n    padding: 5px 11px; border-radius: 999px;\n    background: var(--tint); color: var(--brand-800);\n  }\n\n  .tlcs-note {\n    display: flex; gap: 10px; margin-top: 18px;\n    font-size: 13.5px; color: var(--ink-2);\n    background: var(--info-subtle); border: 1px solid var(--info);\n    border-radius: var(--radius-sm); padding: 12px 16px; max-width: 72ch;\n  }\n  .tlcs-note::before { content: \"\u24d8\"; color: var(--info); }\n\n  \/* ============ REFLECTIONS ============ *\/\n  .tlcs-reflection { border-top: 2px solid var(--brand); padding-top: 20px; }\n  .tlcs-reflection .tlcs-k { font-family: var(--mono); font-size: 12px; color: var(--brand); letter-spacing: .08em; display: block; margin-bottom: 10px; }\n\n  \/* ============ ELEMENTOR HELPERS ============ *\/\n  .tlcs-section { padding: 44px 0; }   \/* ch\u1ec9nh spacing gi\u1eefa c\u00e1c section t\u1ea1i \u0111\u00e2y, ho\u1eb7c d\u00f9ng margin c\u1ee7a Elementor widget *\/\n\n  \/* ============ THEME OVERRIDE GUARDS (theme jayden set heading\/text m\u00e0u tr\u1eafng) ============ *\/\n  .tlcs h2, .tlcs h3, .tlcs h4 { word-spacing: normal !important; }\n  .tlcs h2 { color: var(--ink) !important; font-size: clamp(26px, 3.4vw, 36px) !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }\n  .tlcs h3 { color: var(--ink) !important; font-size: 19px !important; line-height: 1.4 !important; letter-spacing: -0.01em !important; }\n  .tlcs-hero h1 { color: #fff !important; font-size: clamp(40px, 6.5vw, 72px) !important; line-height: 1.02 !important; letter-spacing: -0.03em !important; word-spacing: normal !important; }\n  .tlcs-hero h1 .tlcs-accent { color: var(--logo-teal) !important; }\n  .tlcs-solution h3 { font-size: clamp(20px, 2.6vw, 26px) !important; }\n  .tlcs-persona header h3 { color: #fff !important; font-size: 18px !important; }\n  .tlcs-step h3 { font-size: 16px !important; }\n  .tlcs-usp h3 { font-size: 15.5px !important; }\n  .tlcs-persona .tlcs-body h4 { color: var(--ink-3) !important; font-size: 11px !important; line-height: 1.5 !important; letter-spacing: .1em !important; word-spacing: .1em !important; }\n  .tlcs tbody td:first-child { color: var(--ink) !important; }\n  .tlcs-snapshot dd { color: var(--ink) !important; }\n  .tlcs-stat b { color: var(--brand-800) !important; }\n  .tlcs-feature b { color: var(--ink) !important; }\n  .tlcs-insight { color: var(--ink) !important; }\n  .tlcs-usp .tlcs-tick { color: var(--brand) !important; }\n\n  \/* ---- TABLES: ch\u1ed1ng theme \u0111\u00e8 layout \/ border \/ c\u0103n gi\u1eefa ---- *\/\n  .tlcs table {\n    table-layout: auto !important;\n    border-collapse: collapse !important;\n    border: none !important;\n    margin: 0 !important;\n    width: 100% !important;\n  }\n  .tlcs thead th {\n    text-align: left !important;\n    background: var(--surface) !important;\n    color: var(--ink-3) !important;\n    border: none !important;\n    border-bottom: 1px solid var(--line-strong) !important;\n    padding: 14px 16px !important;\n  }\n  .tlcs tbody td {\n    text-align: left !important;\n    vertical-align: top !important;\n    border: none !important;\n    border-bottom: 1px solid var(--line) !important;\n    padding: 14px 16px !important;\n  }\n  .tlcs tbody tr:last-child td { border-bottom: none !important; }\n  .tlcs tbody td:first-child { white-space: nowrap !important; }\n  \/* matrix: c\u0103n gi\u1eefa dots, c\u1ed9t \u0111\u1ea7u c\u0103n tr\u00e1i *\/\n  .tlcs-matrix thead th, .tlcs-matrix tbody td { text-align: center !important; vertical-align: middle !important; }\n  .tlcs-matrix thead th:first-child, .tlcs-matrix tbody td:first-child { text-align: left !important; }\n  .tlcs-matrix thead th.tlcs-talora { color: var(--brand-800) !important; }\n  .tlcs-matrix th.tlcs-talora, .tlcs-matrix td.tlcs-talora { background: var(--tint) !important; }\n<\/style>\n\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<div class=\"tlcs\">\n<div class=\"tlcs-hero\">\n  <div class=\"tlcs-wrap\">\n    <div class=\"tlcs-hero-tag\">Case Study \u00b7 Design Lead<\/div>\n    <h1>ONE <span class=\"tlcs-accent\">Storefront Builder<\/span><\/h1>\n    <p class=\"tlcs-sub\">A multi-industry platform that lets sellers spin up e-commerce, logistics, and manufacturing storefronts from ready-made templates, customize them without a developer, run the business from one CMS, and hand shopping off to an AI assistant &mdash; end to end, the way Shopify does for one vertical, built here for many.<\/p>\n    <div class=\"tlcs-hero-meta\">\n      <span>Multi-vertical SaaS<\/span>\n      <span>E-commerce \u00b7 Logistics \u00b7 Manufacturing<\/span>\n      <span>Desktop \u00b7 1440px<\/span>\n      <span>2 years<\/span>\n    <\/div>\n  <\/div>\n<\/div>\n<\/div>\n\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<div class=\"tlcs\">\n<div class=\"tlcs-section\">\n<div class=\"tlcs-wrap\">\n    <div class=\"tlcs-eyebrow\">Project snapshot<\/div>\n    <dl class=\"tlcs-snapshot\">\n      <div><dt>Type<\/dt><dd>Multi-industry storefront builder<\/dd><\/div>\n      <div><dt>Platform<\/dt><dd>Desktop, 1440px<\/dd><\/div>\n      <div><dt>Industry<\/dt><dd>E-commerce \u00b7 Logistics \u00b7 Manufacturing<\/dd><\/div>\n      <div><dt>Team<\/dt><dd>4 designers (1 Design Lead + 3 UI\/UX Designers)<\/dd><\/div>\n      <div><dt>Duration<\/dt><dd>2 years, 4 phases<\/dd><\/div>\n      <div><dt>My role<\/dt><dd>Design Lead<\/dd><\/div>\n    <\/dl>\n  <\/div>\n<\/div>\n<\/div>\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<div class=\"tlcs\">\n<div class=\"tlcs-section\">\n<div class=\"tlcs-wrap\">\n    <div class=\"tlcs-eyebrow\">Background<\/div>\n    <h2>One builder, four phases, every industry a seller sells in<\/h2>\n    <p class=\"tlcs-lede\">ONE lets a seller describe their business, pick an industry &mdash; e-commerce, logistics, or manufacturing &mdash; and walk away with a fully working online store: homepage, product listing, product detail, cart, checkout, and order tracking, styled to their brand, with an admin dashboard to run it and an AI assistant to sell for them. Think Shopify's theme-and-launch model, rebuilt to span industries that don't shop the same way.<\/p>\n\n    <div class=\"tlcs-tiers\">\n      <div class=\"tlcs-tier tlcs-central\">\n        <span class=\"tlcs-chip\">Seller-facing<\/span>\n        <h3>Setup &amp; Operations<\/h3>\n        <ul>\n          <li>Guided setup wizard &mdash; needs, template, features, plan<\/li>\n          <li>CMS: dashboard, catalog, inventory, orders, team &amp; roles<\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"tlcs-tier tlcs-customer\">\n        <span class=\"tlcs-chip\">Buyer-facing<\/span>\n        <h3>Storefront<\/h3>\n        <ul>\n          <li>Industry templates &mdash; full home-to-order-tracking flow<\/li>\n          <li>AI shopping assistant embedded on every template<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n\n    <div class=\"tlcs-modules-strip\">\n      <span>Phase 1 &middot; ONE Product<\/span>\n      <span>Phase 2 &middot; Template Library<\/span>\n      <span>Phase 3 &middot; CMS<\/span>\n      <span>Phase 4 &middot; AI Assistant<\/span>\n    <\/div>\n\n    <figure class=\"tlcs-shot\">\n      <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-ai-setup.png\" alt=\"ONE setup flow \u2014 seller choosing a business category: E-commerce, Manufacturing, or Logistic\" loading=\"lazy\">\n      <figcaption>Setup entry point &mdash; pick an industry, or browse templates directly<\/figcaption>\n    <\/figure>\n  <\/div>\n<\/div>\n<\/div>\n\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<div class=\"tlcs\">\n<div class=\"tlcs-section\">\n<div class=\"tlcs-wrap\">\n    <div class=\"tlcs-eyebrow\">Research &middot; Pain points<\/div>\n    <h2>ONE is built for sellers, but every screen answers to two audiences<\/h2>\n    <p class=\"tlcs-lede\">Our primary user is the seller setting up and running the store. But a storefront only works if the seller's own customers &mdash; the buyers &mdash; can shop it without friction. Research surfaced six recurring pain clusters, felt differently on each side of the same transaction.<\/p>\n\n    <div class=\"tlcs-eyebrow\" style=\"margin-top:8px\">Sellers &middot; primary user of ONE<\/div>\n    <div class=\"tlcs-grid-3\">\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Real-time information<\/span>\n        <h3>Client comms scattered across systems<\/h3>\n        <p>Difficulty maintaining timely, effective communication with clients because information lives across different, disconnected tools.<\/p>\n      <\/div>\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Price negotiations<\/span>\n        <h3>Quotations built and tracked by hand<\/h3>\n        <p>Generating and managing quotations manually delays the sales process and slows responsiveness to customer inquiries.<\/p>\n      <\/div>\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Ordering process<\/span>\n        <h3>Orders, customers, and follow-ups: all manual<\/h3>\n        <p>Handling orders, customer information, and follow-ups by hand is time-consuming and prone to errors.<\/p>\n      <\/div>\n    <\/div>\n    <div class=\"tlcs-grid-3\" style=\"margin-top:20px\">\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Order tracking<\/span>\n        <h3>No real-time status to hand the buyer<\/h3>\n        <p>Difficulty providing real-time order status and tracking information back to customers.<\/p>\n      <\/div>\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Support &amp; communication<\/span>\n        <h3>Pending issues pile up unmanaged<\/h3>\n        <p>Hard to manage every pending buyer issue that needs support &mdash; communication gets delayed or missed entirely.<\/p>\n      <\/div>\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Customer insights<\/span>\n        <h3>No data to sell smarter<\/h3>\n        <p>Lack of comprehensive data on customer behavior, preferences, and purchase history blocks personalized sales strategies.<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"tlcs-eyebrow\" style=\"margin-top:44px\">Buyers &middot; the seller's own customers<\/div>\n    <div class=\"tlcs-grid-3\">\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Real-time information<\/span>\n        <h3>Stale product &amp; stock data<\/h3>\n        <p>Difficulty accessing up-to-date product information, pricing, inventory levels, and order or return status.<\/p>\n      <\/div>\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Price negotiations<\/span>\n        <h3>Bulk pricing means waiting on someone<\/h3>\n        <p>Time-consuming negotiations and approvals for bulk orders and custom pricing.<\/p>\n      <\/div>\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Ordering process<\/span>\n        <h3>Placing an order still means a phone call<\/h3>\n        <p>Manual order placement through phone, email, or an online workspace is time-consuming and error-prone.<\/p>\n      <\/div>\n    <\/div>\n    <div class=\"tlcs-grid-3\" style=\"margin-top:20px\">\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Order tracking<\/span>\n        <h3>No visibility once the order is placed<\/h3>\n        <p>Lack of visibility into order status and shipment tracking leads to uncertainty and delay.<\/p>\n      <\/div>\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Support &amp; communication<\/span>\n        <h3>Support is slow and scattered<\/h3>\n        <p>Delays in communication and support caused by manual processes and disparate communication channels.<\/p>\n      <\/div>\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Customer insights<\/span>\n        <h3>Not surfaced on the buyer side<\/h3>\n        <p>No buyer-side pain was mapped here &mdash; a gap in the research itself, and a reminder this cluster is a seller problem to solve quietly.<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"tlcs-insight\">\n      Every seller-side workflow we designed &mdash; live inventory, order status, quotation tracking &mdash; exists because it removes a pain the buyer feels on the other end of the same order.\n      <span class=\"tlcs-who\">Design principle carried through all 4 phases<\/span>\n    <\/div>\n  <\/div>\n<\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-83a3791 e-con-full e-flex e-con e-parent\" data-id=\"83a3791\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e31a03 elementor-widget elementor-widget-html\" data-id=\"7e31a03\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"tlcs\">\n<div class=\"tlcs-section\">\n<div class=\"tlcs-wrap\">\n    <div class=\"tlcs-eyebrow\">Design process<\/div>\n    <h2>How a 4-person team kept four phases in sync<\/h2>\n    <p class=\"tlcs-lede\">Every task started from two inputs &mdash; a wireframe and a requirement doc linked in Notion &mdash; and went through the same review chain before it shipped, whether it was a Phase&nbsp;1 setup screen or a Phase&nbsp;4 AI prompt.<\/p>\n\n    <div class=\"tlcs-process\">\n      <div class=\"tlcs-step\">\n        <h3>Design<\/h3>\n        <p>Build the screen against the design system. Second collab checkpoint with BA mid-flight, before it goes to review.<\/p>\n      <\/div>\n      <div class=\"tlcs-step\">\n        <h3>PIC Review<\/h3>\n        <p>The module's person-in-charge designer reviews for consistency with the rest of that phase.<\/p>\n      <\/div>\n      <div class=\"tlcs-step\">\n        <h3>BA Review<\/h3>\n        <p>Business analyst checks the design against the original requirement before adjustment.<\/p>\n      <\/div>\n     \n      <div class=\"tlcs-step\">\n        <h3>Final review<\/h3>\n        <p>Sign-off; the screen is ready for handoff to engineering.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-13cca37 e-con-full e-flex e-con e-parent\" data-id=\"13cca37\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-33b8d77 elementor-widget elementor-widget-html\" data-id=\"33b8d77\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"tlcs\">\n<div class=\"tlcs-section\">\n<div class=\"tlcs-wrap\">\n    <div class=\"tlcs-eyebrow\">Phase 1<\/div>\n    <h2>ONE Product &mdash; from a blank need to a priced, submittable plan<\/h2>\n    <p class=\"tlcs-lede\">The setup wizard is the first thing a seller touches, and the moment ONE has to earn trust: turn a vague need into a concrete, priced store plan in one sitting, with an AI assistant standing in for the sales conversation a seller would otherwise have to book.<\/p>\n\n    <style>\n      .tlcs-card-design { background: var(--tint); border-color: var(--brand-300); }\n      .tlcs-card-design .tlcs-k { color: var(--brand-800); }\n    <\/style>\n\n    <div class=\"tlcs-eyebrow\" style=\"margin-top:8px\">Persona<\/div>\n    <div class=\"tlcs-persona\" style=\"max-width:560px\">\n      <header>\n        <span class=\"tlcs-role\">Phase 1 &middot; primary user<\/span>\n        <h3>The First-Time Seller<\/h3>\n      <\/header>\n      <div class=\"tlcs-body\">\n        <h4>Context<\/h4>\n        <p>An independent seller or small team launching their first online store &mdash; e-commerce, logistics, or manufacturing &mdash; with no in-house developer, no design team, and no prior experience scoping a website build.<\/p>\n        <h4>Goals<\/h4>\n        <ul>\n          <li>Get a working, on-brand store live without hiring an agency or developer<\/li>\n          <li>Know the exact cost and timeline before committing any budget<\/li>\n          <li>Move at their own pace &mdash; explore options first, or move straight to building if they already know what they want<\/li>\n        <\/ul>\n        <h4>Pain points<\/h4>\n        <ul>\n          <li>Doesn't know what &ldquo;features&rdquo; a store like theirs actually needs, or what they're called<\/li>\n          <li>Can't judge a feature list or a generic mockup &mdash; needs to see it on a real page to know if it's right<\/li>\n          <li>A template that looks like everyone else's doesn't feel like their brand<\/li>\n          <li>A verbal quote from a salesperson is slow, vague, and easy to walk away from mid-conversation<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n\n    <div class=\"tlcs-eyebrow\" style=\"margin-top:44px\">The solution<\/div>\n    <div class=\"tlcs-insight\">\n      Show, don't ask. Every step trades a form field for something the seller can see and react to &mdash; a live prototype instead of a feature list, a real number instead of a verbal quote &mdash; so committing to a plan never means committing blind.\n      <span class=\"tlcs-who\">Design principle carried through all 6 flows below<\/span>\n    <\/div>\n\n    <div class=\"tlcs-eyebrow\" style=\"margin-top:44px\">User flow<\/div>\n    <p class=\"tlcs-lede\" style=\"margin-bottom:0\">Two entry paths, one merge point, then a straight line to a submitted plan.<\/p>\n\n    <style>\n      .one-flow-scroll { overflow-x: auto; margin-top: 28px; }\n      .one-flowchart { position: relative; width: 1000px; height: 320px; }\n      .one-flowchart svg { position: absolute; inset: 0; width: 100%; height: 100%; }\n      .one-flow-box {\n        position: absolute; width: 240px; min-height: 120px; box-sizing: border-box;\n        display: flex; flex-direction: column; justify-content: center;\n        border: 1px solid var(--line); border-radius: var(--radius);\n        background: var(--bg); padding: 14px 18px; box-shadow: 0 1px 3px rgba(9,9,11,.06);\n      }\n      .one-flow-box.one-flow-fork { background: var(--surface); }\n      .one-flow-box.one-flow-end { background: var(--tint); border-color: var(--brand-300); }\n      .one-flow-box .one-flow-step {\n        font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;\n        color: var(--brand); display: block; margin-bottom: 6px;\n      }\n      .one-flow-box h4 { font-size: 14.5px; font-weight: 600; margin: 0 0 6px; color: var(--ink); line-height: 1.25; }\n      .one-flow-box p { font-size: 12.5px; color: var(--ink-2); margin: 0; line-height: 1.4; }\n    <\/style>\n\n    <div class=\"one-flow-scroll\">\n      <div class=\"one-flowchart\">\n        <svg viewBox=\"0 0 1000 320\" fill=\"none\" aria-hidden=\"true\">\n          <defs>\n            <marker id=\"one-arrow\" markerWidth=\"8\" markerHeight=\"8\" refX=\"6\" refY=\"3\" orient=\"auto\">\n              <path d=\"M0,0 L6,3 L0,6 Z\" style=\"fill: var(--ink-3)\" \/>\n            <\/marker>\n          <\/defs>\n          <path d=\"M260,80 H320 V160 H372\" style=\"stroke: var(--line-strong)\" stroke-width=\"1.5\" marker-end=\"url(#one-arrow)\" \/>\n          <path d=\"M260,240 H320 V160 H372\" style=\"stroke: var(--line-strong)\" stroke-width=\"1.5\" marker-end=\"url(#one-arrow)\" \/>\n          <path d=\"M620,160 H732\" style=\"stroke: var(--line-strong)\" stroke-width=\"1.5\" marker-end=\"url(#one-arrow)\" \/>\n        <\/svg>\n\n        <div class=\"one-flow-box one-flow-fork\" style=\"left:20px; top:20px;\">\n          <span class=\"one-flow-step\">Guided path<\/span>\n          <h4>Provide your needs<\/h4>\n          <p>Pick a category, get a recommended template.<\/p>\n        <\/div>\n\n        <div class=\"one-flow-box one-flow-fork\" style=\"left:20px; top:180px;\">\n          <span class=\"one-flow-step\">Self-serve path<\/span>\n          <h4>Browse templates<\/h4>\n          <p>Browse 50+ templates by category, cost &amp; schedule.<\/p>\n        <\/div>\n\n        <div class=\"one-flow-box\" style=\"left:380px; top:100px;\">\n          <span class=\"one-flow-step\">Merge point<\/span>\n          <h4>Select your features<\/h4>\n          <p>Toggle by hand, ask the AI, or restyle live.<\/p>\n        <\/div>\n\n        <div class=\"one-flow-box one-flow-end\" style=\"left:740px; top:100px;\">\n          <span class=\"one-flow-step\">Submit<\/span>\n          <h4>View your plan<\/h4>\n          <p>Cost &amp; schedule estimate, submitted to Sales.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"tlcs-eyebrow\" style=\"margin-top:44px\">Flow by flow<\/div>\n    <p class=\"tlcs-lede\">Six flows carry that journey &mdash; each one below pairs the requirement with the solution that answered it.<\/p>\n\n    <div class=\"tlcs-solution\">\n      <span class=\"tlcs-n\">Flow 01<\/span>\n      <h3>Provide your needs<\/h3>\n      <div class=\"tlcs-grid-2\">\n        <div class=\"tlcs-card\">\n          <span class=\"tlcs-k\">Requirement<\/span>\n          <p>A first-time seller doesn't have a spec, only a business &mdash; asking for full requirements up front causes drop-off.<\/p>\n        <\/div>\n        <div class=\"tlcs-card tlcs-card-design\">\n          <span class=\"tlcs-k\">Solution<\/span>\n          <p>One required choice, a business category, plus an optional site name. Everything else comes later.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"tlcs-grid-2\">\n        <figure class=\"tlcs-shot\">\n          <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-onboarding-category.jpg\" alt=\"ONE setup \u2014 choosing a business category: E-commerce, Manufacturing, or Logistic\" loading=\"lazy\">\n          <figcaption>Pick a category, or browse templates instead<\/figcaption>\n        <\/figure>\n        <figure class=\"tlcs-shot\">\n          <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-onboarding-name.jpg\" alt=\"ONE setup \u2014 naming the website before building, with a single Build call to action\" loading=\"lazy\">\n          <figcaption>Name the site, then Build &mdash; nothing else required<\/figcaption>\n        <\/figure>\n      <\/div>\n    <\/div>\n\n    <div class=\"tlcs-solution\">\n      <span class=\"tlcs-n\">Flow 02<\/span>\n      <h3>Two paths to a template<\/h3>\n      <div class=\"tlcs-grid-2\">\n        <div class=\"tlcs-card\">\n          <span class=\"tlcs-k\">Requirement<\/span>\n          <p>Some sellers know exactly what they want; others want to browse first. One funnel loses whichever group it wasn't built for.<\/p>\n        <\/div>\n        <div class=\"tlcs-card tlcs-card-design\">\n          <span class=\"tlcs-k\">Solution<\/span>\n          <p>Two equal entry points &mdash; guided category pick, or browse 50+ templates &mdash; both merging into the same feature builder.<\/p>\n        <\/div>\n      <\/div>\n      <figure class=\"tlcs-shot\">\n        <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-template-gallery.png\" alt=\"ONE template marketplace \u2014 50+ templates filterable by category, platform, cost, and schedule\" loading=\"lazy\">\n        <figcaption>The self-serve path &mdash; browse and filter 50+ templates directly<\/figcaption>\n      <\/figure>\n      <div class=\"tlcs-note\">Both entry points land on the same feature builder in Flow&nbsp;03 &mdash; the fork exists for how a seller wants to arrive, not for what they end up configuring.<\/div>\n    <\/div>\n\n    <div class=\"tlcs-solution\">\n      <span class=\"tlcs-n\">Flow 03<\/span>\n      <h3>Feature builder with a live prototype<\/h3>\n      <div class=\"tlcs-grid-2\">\n        <div class=\"tlcs-card\">\n          <span class=\"tlcs-k\">Requirement<\/span>\n          <p>A feature checklist means nothing to a seller who isn't a developer &mdash; they need to see it on a real page.<\/p>\n        <\/div>\n        <div class=\"tlcs-card tlcs-card-design\">\n          <span class=\"tlcs-k\">Solution<\/span>\n          <p>Every toggle updates a live prototype and its price in real time, split by Website\/Mobile.<\/p>\n        <\/div>\n      <\/div>\n      <figure class=\"tlcs-shot\">\n        <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-feature-builder.jpg\" alt=\"ONE feature builder \u2014 selecting features for a template with a live prototype preview and running cost\/schedule estimate\" loading=\"lazy\">\n        <figcaption>Toggling a feature updates price, schedule, and the prototype together<\/figcaption>\n      <\/figure>\n    <\/div>\n\n    <div class=\"tlcs-solution\">\n      <span class=\"tlcs-n\">Flow 04<\/span>\n      <h3>Theming &mdash; change styles live<\/h3>\n      <div class=\"tlcs-grid-2\">\n        <div class=\"tlcs-card\">\n          <span class=\"tlcs-k\">Requirement<\/span>\n          <p>A generic-looking template doesn't feel like the seller's own brand.<\/p>\n        <\/div>\n        <div class=\"tlcs-card tlcs-card-design\">\n          <span class=\"tlcs-k\">Solution<\/span>\n          <p>Color, font, and button style restyle live, directly on the prototype &mdash; zero code, no designer needed.<\/p>\n        <\/div>\n      <\/div>\n      <figure class=\"tlcs-shot\">\n        <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-theme-builder.png\" alt=\"ONE setup flow \u2014 Change styles panel layered on the live prototype, with color theme, font, and button style controls\" loading=\"lazy\">\n        <figcaption>Brand controls sit on top of the real prototype, not a settings page<\/figcaption>\n      <\/figure>\n    <\/div>\n\n    <div class=\"tlcs-solution\">\n      <span class=\"tlcs-n\">Flow 05<\/span>\n      <h3>AI assistant as a feature co-pilot<\/h3>\n      <div class=\"tlcs-grid-2\">\n        <div class=\"tlcs-card\">\n          <span class=\"tlcs-k\">Requirement<\/span>\n          <p>The manual feature list stalls a seller who doesn't know what they actually need.<\/p>\n        <\/div>\n        <div class=\"tlcs-card tlcs-card-design\">\n          <span class=\"tlcs-k\">Solution<\/span>\n          <p>An AI tab asks a few plain questions and proposes a feature set the seller can still edit by hand.<\/p>\n        <\/div>\n      <\/div>\n      <figure class=\"tlcs-shot\">\n        <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-ai-setup.png\" alt=\"ONE setup flow \u2014 AI assistant tab asking about marketplace and target audience to refine feature suggestions\" loading=\"lazy\">\n        <figcaption>The AI tab sits beside the manual list, not instead of it<\/figcaption>\n      <\/figure>\n    <\/div>\n\n    <div class=\"tlcs-solution\">\n      <span class=\"tlcs-n\">Flow 06<\/span>\n      <h3>Plan &amp; handoff<\/h3>\n      <div class=\"tlcs-grid-2\">\n        <div class=\"tlcs-card\">\n          <span class=\"tlcs-k\">Requirement<\/span>\n          <p>A seller commits budget, not features &mdash; a verbal quote is slow and easy to walk away from.<\/p>\n        <\/div>\n        <div class=\"tlcs-card tlcs-card-design\">\n          <span class=\"tlcs-k\">Solution<\/span>\n          <p>One auto-generated document with cost and schedule &mdash; saved, exported, or submitted straight into Sale management.<\/p>\n        <\/div>\n      <\/div>\n      <figure class=\"tlcs-shot\">\n        <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-plan-summary.jpg\" alt=\"ONE plan summary \u2014 general information, feature list, and cost\/schedule estimation, submitted for Sale management\" loading=\"lazy\">\n        <figcaption>One document, one number, one submit &mdash; into Sale management<\/figcaption>\n      <\/figure>\n    <\/div>\n  <\/div>\n<\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a24752f e-con-full e-flex e-con e-parent\" data-id=\"a24752f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c186f6d elementor-widget elementor-widget-html\" data-id=\"c186f6d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"tlcs\">\n<div class=\"tlcs-section\">\n<div class=\"tlcs-wrap\">\n    <div class=\"tlcs-eyebrow\">Phase 2<\/div>\n    <h2>Template library &mdash; one commerce flow, every vertical<\/h2>\n    <p class=\"tlcs-lede\">Every template in the library ships the same six-page flow &mdash; homepage, product listing, product detail, cart, checkout, and order tracking &mdash; because a seller shouldn't have to redesign the buying journey, only restyle and re-merchandise it for their category.<\/p>\n\n    <div class=\"tlcs-features\">\n      <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">A<\/span><div><b>Full flow, pre-wired<\/b>Home &rarr; listing &rarr; PDP &rarr; cart &rarr; checkout &rarr; order status ships complete on every template, not built page by page.<\/div><\/div>\n      <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">B<\/span><div><b>Cross-industry coverage<\/b>Beauty, digital goods, grocery, and healthcare\/pharmacy shown below &mdash; plus electronics and B2B manufacturing &amp; logistics catalogs on the same system.<\/div><\/div>\n      <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">C<\/span><div><b>Theming without a developer<\/b>Color palette, font pairing, and button style are swapped live from the Phase&nbsp;1 builder &mdash; no template forking.<\/div><\/div>\n      <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">D<\/span><div><b>Mobile-first where it matters<\/b>High-frequency, small-basket categories like grocery ship mobile-optimized by default.<\/div><\/div>\n    <\/div>\n\n    <style>\n      \/* these are full-scroll page captures (some 4000-9000px tall) \u2014 crop every thumbnail to a consistent top preview so no column drags the row out *\/\n      .one-tpl-gallery .tlcs-shot { margin-top: 0; }\n      .one-tpl-gallery .tlcs-shot img { height: 420px; object-fit: cover; object-position: top center; }\n\n      \/* CSS-only tabs \u2014 no JS, safe inside an Elementor HTML widget *\/\n      .one-tpl-tabs input[type=\"radio\"] { position: absolute; opacity: 0; pointer-events: none; }\n      .one-tpl-tab-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 32px; }\n      .one-tpl-tab-bar label {\n        font-family: var(--mono); font-size: 13px; letter-spacing: .03em;\n        padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);\n        background: var(--bg); color: var(--ink-2); cursor: pointer; user-select: none;\n      }\n      .one-tpl-panel { display: none; margin-top: 20px; }\n      #one-tab-cosmetic:checked ~ #one-panel-cosmetic,\n      #one-tab-digitalbook:checked ~ #one-panel-digitalbook,\n      #one-tab-grocery:checked ~ #one-panel-grocery,\n      #one-tab-healthcare:checked ~ #one-panel-healthcare { display: block; }\n      #one-tab-cosmetic:checked ~ .one-tpl-tab-bar label[for=\"one-tab-cosmetic\"],\n      #one-tab-digitalbook:checked ~ .one-tpl-tab-bar label[for=\"one-tab-digitalbook\"],\n      #one-tab-grocery:checked ~ .one-tpl-tab-bar label[for=\"one-tab-grocery\"],\n      #one-tab-healthcare:checked ~ .one-tpl-tab-bar label[for=\"one-tab-healthcare\"] {\n        background: var(--brand); color: #fff; border-color: var(--brand);\n      }\n    <\/style>\n\n    <div class=\"one-tpl-tabs\">\n      <input type=\"radio\" name=\"one-tpl-tab\" id=\"one-tab-cosmetic\" checked>\n      <input type=\"radio\" name=\"one-tpl-tab\" id=\"one-tab-digitalbook\">\n      <input type=\"radio\" name=\"one-tpl-tab\" id=\"one-tab-grocery\">\n      <input type=\"radio\" name=\"one-tpl-tab\" id=\"one-tab-healthcare\">\n\n      <div class=\"one-tpl-tab-bar\">\n        <label for=\"one-tab-cosmetic\">Cosmetics<\/label>\n        <label for=\"one-tab-digitalbook\">Digital Book<\/label>\n        <label for=\"one-tab-grocery\">Grocery<\/label>\n        <label for=\"one-tab-healthcare\">Healthcare<\/label>\n      <\/div>\n\n      <div class=\"one-tpl-panel\" id=\"one-panel-cosmetic\">\n        <div class=\"tlcs-grid-3 one-tpl-gallery\">\n          <figure class=\"tlcs-shot\">\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-template-cosmetic-home-scaled.png\" alt=\"Cosmetic template homepage \u2014 beauty and personal care storefront with new arrivals and influencer picks\" loading=\"lazy\">\n            <figcaption>Homepage<\/figcaption>\n          <\/figure>\n          <figure class=\"tlcs-shot\">\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-template-cosmetic-listing-scaled.png\" alt=\"Cosmetic template product listing \u2014 skincare category with filters and an AI-suggested pick\" loading=\"lazy\">\n            <figcaption>Product listing<\/figcaption>\n          <\/figure>\n          <figure class=\"tlcs-shot\">\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-template-cosmetic-pdp-scaled.png\" alt=\"Cosmetic template product detail \u2014 cleanser PDP with bundle deal, video review, and ratings\" loading=\"lazy\">\n            <figcaption>Product detail<\/figcaption>\n          <\/figure>\n        <\/div>\n      <\/div>\n\n      <div class=\"one-tpl-panel\" id=\"one-panel-digitalbook\">\n        <div class=\"tlcs-grid-3 one-tpl-gallery\">\n          <figure class=\"tlcs-shot\">\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-template-digitalbook-home-scaled.png\" alt=\"Digital book template homepage \u2014 bookstore with bestsellers, trending, and award-winner rails\" loading=\"lazy\">\n            <figcaption>Homepage<\/figcaption>\n          <\/figure>\n          <figure class=\"tlcs-shot\">\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-template-digitalbook-listing-scaled.png\" alt=\"Digital book template product listing \u2014 category grid with subgenre and rating filters\" loading=\"lazy\">\n            <figcaption>Product listing<\/figcaption>\n          <\/figure>\n          <figure class=\"tlcs-shot\">\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-template-digitalbook-pdp-scaled.png\" alt=\"Digital book template product detail \u2014 book PDP with eBook\/Audiobook format toggle and bundle deal\" loading=\"lazy\">\n            <figcaption>Product detail<\/figcaption>\n          <\/figure>\n        <\/div>\n      <\/div>\n\n      <div class=\"one-tpl-panel\" id=\"one-panel-grocery\">\n        <div class=\"tlcs-grid-3 one-tpl-gallery\">\n          <figure class=\"tlcs-shot\">\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/Home-scaled.png\" alt=\"Grocery template homepage \u2014 mobile storefront with deal-of-the-day and AI-suggested picks\" loading=\"lazy\">\n            <figcaption>Homepage<\/figcaption>\n          <\/figure>\n          <figure class=\"tlcs-shot\">\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/PLP-scaled.png\" alt=\"Grocery template product listing \u2014 mobile category filter chips over a product grid\" loading=\"lazy\">\n            <figcaption>Product listing<\/figcaption>\n          <\/figure>\n          <figure class=\"tlcs-shot\">\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/PDP-scaled.png\" alt=\"Grocery template product detail \u2014 mobile PDP with bundle deal and nutrition\/allergy information\" loading=\"lazy\">\n            <figcaption>Product detail<\/figcaption>\n          <\/figure>\n        <\/div>\n      <\/div>\n\n      <div class=\"one-tpl-panel\" id=\"one-panel-healthcare\">\n        <div class=\"tlcs-grid-3 one-tpl-gallery\">\n          <figure class=\"tlcs-shot\">\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-template-healthcare-home-scaled.png\" alt=\"Healthcare template homepage \u2014 pharmacy storefront with doctor consultation and shop-by-category\" loading=\"lazy\">\n            <figcaption>Homepage<\/figcaption>\n          <\/figure>\n          <figure class=\"tlcs-shot\">\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-template-healthcare-listing-scaled.png\" alt=\"Healthcare template product listing \u2014 vitamins and nutrition listing with patient and product-form filters\" loading=\"lazy\">\n            <figcaption>Product listing<\/figcaption>\n          <\/figure>\n          <figure class=\"tlcs-shot\">\n            <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-template-healthcare-pdp-scaled.png\" alt=\"Healthcare template product detail \u2014 supplement PDP with prescription flag, bundles, and doctor consultation CTA\" loading=\"lazy\">\n            <figcaption>Product detail<\/figcaption>\n          <\/figure>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e3edded e-con-full e-flex e-con e-parent\" data-id=\"e3edded\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f1a8028 elementor-widget elementor-widget-html\" data-id=\"f1a8028\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"tlcs\">\n<div class=\"tlcs-section\">\n<div class=\"tlcs-wrap\">\n    <div class=\"tlcs-eyebrow\">Phase 3<\/div>\n    <h2>CMS &mdash; where the seller actually runs the business<\/h2>\n    <p class=\"tlcs-lede\">Once a store is live, ONE's admin dashboard is where a seller spends the rest of their time: watching performance, keeping the catalog and stock accurate, building orders manually when a buyer calls in, and &mdash; for B2B sellers with a purchasing team &mdash; controlling who can request, and who can approve.<\/p>\n\n    <div class=\"tlcs-features\">\n      <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">A<\/span><div><b>Dashboard &amp; reporting<\/b>Sales, conversion, retention, and order-processing status at a glance, with daily\/weekly\/monthly views and top-product breakdowns.<\/div><\/div>\n      <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">B<\/span><div><b>Product &amp; inventory<\/b>Product list, bundles, attributes, and multi-source stock levels, kept accurate so the storefront never sells what isn't there.<\/div><\/div>\n      <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">C<\/span><div><b>Order management<\/b>Build an order manually for a buyer &mdash; products, bundles, gifts, promotions, shipping and payment &mdash; the same flow support teams use for phone\/email orders.<\/div><\/div>\n      <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">D<\/span><div><b>Team &amp; permissions<\/b>Role-based access so a seller's own purchasing team can share one account without sharing approval authority.<\/div><\/div>\n    <\/div>\n\n    <style>\n      \/* create-order is a long scrolling form (2550px) vs. ~1100-1500px for the other two \u2014 crop to a consistent top preview so the row stays even, same fix as Phase 2 *\/\n      .one-cms-gallery .tlcs-shot { margin-top: 0; }\n      .one-cms-gallery .tlcs-shot img { height: 420px; object-fit: cover; object-position: top center; }\n    <\/style>\n    <div class=\"tlcs-grid-3 one-cms-gallery\">\n      <figure class=\"tlcs-shot\">\n        <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-cms-dashboard.png\" alt=\"ONE CMS dashboard \u2014 sales, conversion rate, retention, and order processing overview\" loading=\"lazy\">\n        <figcaption>Dashboard &mdash; overall performance<\/figcaption>\n      <\/figure>\n      <figure class=\"tlcs-shot\">\n        <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-cms-product-list.png\" alt=\"ONE CMS product list \u2014 catalog with base category, browsing category, and status\" loading=\"lazy\">\n        <figcaption>Product list &amp; catalog<\/figcaption>\n      <\/figure>\n      <figure class=\"tlcs-shot\">\n        <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-cms-create-order.png\" alt=\"ONE CMS create order \u2014 customer info, products with bundles and promotions, shipping and payment\" loading=\"lazy\">\n        <figcaption>Create order &mdash; manual order builder<\/figcaption>\n      <\/figure>\n    <\/div>\n\n    <div class=\"tlcs-solution\">\n      <span class=\"tlcs-n\">Deeper on Module D<\/span>\n      <h3>Team &amp; Permissions<\/h3>\n      <p class=\"tlcs-goal\">B2B sellers on the Manufacturing and Logistic templates run purchasing through a team, not one account &mdash; this is the split we designed for, addressing the &ldquo;Price negotiations&rdquo; and &ldquo;Ordering process&rdquo; pain points directly: whoever can <em>request<\/em> a quotation or order should not always be who can <em>approve<\/em> it.<\/p>\n\n      <div class=\"tlcs-table-scroll\">\n        <table class=\"tlcs-matrix\">\n          <thead>\n            <tr>\n              <th>Role<\/th>\n              <th>Manage staff<\/th>\n              <th>Manage admins &amp; teams<\/th>\n              <th>Manage configs<\/th>\n              <th>Create quotations<\/th>\n              <th>Create orders<\/th>\n              <th>Create complaints<\/th>\n              <th>Approve quotations<\/th>\n              <th>Approve orders<\/th>\n              <th>Approve complaints<\/th>\n              <th>Approve &amp; sign legal docs<\/th>\n              <th>View all<\/th>\n            <\/tr>\n          <\/thead>\n          <tbody>\n            <tr>\n              <td>Account Owner<\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n            <\/tr>\n            <tr>\n              <td>Operation Admin<\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n            <\/tr>\n            <tr>\n              <td>Purchase Manager<\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span>*<\/td>\n              <td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n            <\/tr>\n            <tr>\n              <td>Purchase Staff<\/td>\n              <td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td>\n              <td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td>\n            <\/tr>\n          <\/tbody>\n        <\/table>\n      <\/div>\n      <div class=\"tlcs-legend\">\n        <span><span class=\"tlcs-dot tlcs-full\"><\/span> Full access<\/span>\n        <span><span class=\"tlcs-dot tlcs-half\"><\/span> Create \/ limited only, cannot approve<\/span>\n        <span>* Purchase Manager manages staff within their own team only<\/span>\n      <\/div>\n      <div class=\"tlcs-note\">Account Owner is singular per client account and is the only role that can transfer itself to another user. Every other role can be assigned to zero or many people, which is what makes the approval split enforceable.<\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f8ec249 e-con-full e-flex e-con e-parent\" data-id=\"f8ec249\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f7bd12 elementor-widget elementor-widget-html\" data-id=\"9f7bd12\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"tlcs\">\n<div class=\"tlcs-section\">\n<div class=\"tlcs-wrap\">\n    <div class=\"tlcs-eyebrow\">Phase 4<\/div>\n    <h2>AI &mdash; a co-pilot for the seller, a concierge for the buyer<\/h2>\n    <p class=\"tlcs-lede\">Phase 4 layered one assistant into two very different jobs: inside the setup wizard it interviews the seller to configure their store faster than the manual feature tree; on the storefront it becomes the buyer's shopping assistant, embedded on every template the same way the six-page flow is.<\/p>\n\n    <div class=\"tlcs-features\">\n      <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">A<\/span><div><b>Setup-flow co-pilot<\/b>Sits next to the manual feature list in Phase&nbsp;1; asks about market and target audience, then refines the feature suggestion for the seller.<\/div><\/div>\n      <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">B<\/span><div><b>Storefront shopping assistant<\/b>A persistent chat widget on every template &mdash; greets returning buyers by name and surfaces collections, recommendations, and outfit ideas on open.<\/div><\/div>\n      <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">C<\/span><div><b>Guided comparison &amp; fit<\/b>Compares two products side by side on request, then asks the buyer's height and weight to recommend a size before they add to cart.<\/div><\/div>\n      <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">D<\/span><div><b>Assisted checkout<\/b>Adds the recommended item to cart on the buyer's behalf, confirms size and color, and surfaces the applicable promotion in the same thread.<\/div><\/div>\n    <\/div>\n\n    <div class=\"tlcs-grid-3\">\n      <figure class=\"tlcs-shot\">\n        <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-ai-storefront-welcome.png\" alt=\"AI assistant inside the ONE setup flow \u2014 asking about primary marketplace and target age range to refine feature suggestions\" loading=\"lazy\">\n        <figcaption>Setup co-pilot &mdash; refining features by conversation<\/figcaption>\n      <\/figure>\n      <figure class=\"tlcs-shot\">\n        <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/one-ai-storefront-cart.png\" alt=\"AI shopping assistant welcome widget on a storefront homepage \u2014 latest collections, recommended items, outfit ideas\" loading=\"lazy\">\n        <figcaption>Storefront assistant &mdash; welcome &amp; discovery<\/figcaption>\n      <\/figure>\n      <figure class=\"tlcs-shot\">\n        <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/pick-product.png\" alt=\"AI shopping assistant comparing two products, recommending a size from buyer measurements, and adding the item to cart\" loading=\"lazy\">\n        <figcaption>Storefront assistant &mdash; compare, fit &amp; add to cart<\/figcaption>\n      <\/figure>\n    <\/div>\n  <\/div>\n<\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-631723e e-flex e-con-boxed e-con e-parent\" data-id=\"631723e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be9de93 elementor-widget elementor-widget-html\" data-id=\"be9de93\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"tlcs\">\n<div class=\"tlcs-section\">\n<div class=\"tlcs-wrap\">\n    <div class=\"tlcs-eyebrow\">Deliverables<\/div>\n    <h2>Four phases, one system underneath<\/h2>\n    <p class=\"tlcs-lede\">Every template, CMS module, and AI surface ships from the same token-based design system &mdash; the only way a 4-person team keeps a multi-vertical library consistent over 2 years.<\/p>\n\n    <div class=\"tlcs-stat-row\">\n      <div class=\"tlcs-stat\"><b class=\"tlcs-num\">4<\/b><span>Product phases shipped<\/span><\/div>\n      <div class=\"tlcs-stat\"><b class=\"tlcs-num\">3<\/b><span>Industry verticals covered<\/span><\/div>\n      <div class=\"tlcs-stat\"><b class=\"tlcs-num\">50+<\/b><span>Ready-made templates<\/span><\/div>\n      <div class=\"tlcs-stat\"><b class=\"tlcs-num\">6<\/b><span>Core storefront pages per template<\/span><\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8a85e71 e-flex e-con-boxed e-con e-parent\" data-id=\"8a85e71\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fb82d56 elementor-widget elementor-widget-html\" data-id=\"fb82d56\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"tlcs\">\n<div class=\"tlcs-section\">\n<div class=\"tlcs-wrap\">\n    <div class=\"tlcs-eyebrow\">Reflections<\/div>\n    <h2>What two years on ONE taught me<\/h2>\n    <div class=\"tlcs-grid-3\">\n      <div class=\"tlcs-reflection\">\n        <span class=\"tlcs-k\">01 &mdash; Templates are a system, not screens<\/span>\n        <p>50+ templates across 3 verticals only stayed consistent once features, colors, fonts, and button styles were treated as swappable tokens &mdash; not one-off mockups per industry.<\/p>\n      <\/div>\n      <div class=\"tlcs-reflection\">\n        <span class=\"tlcs-k\">02 &mdash; AI turns setup into a conversation<\/span>\n        <p>The biggest win in Phase&nbsp;4 wasn't a smarter chat widget on the storefront &mdash; it was moving feature selection in Phase&nbsp;1 from a checkbox tree into a Q&amp;A the assistant runs for the seller.<\/p>\n      <\/div>\n      <div class=\"tlcs-reflection\">\n        <span class=\"tlcs-k\">03 &mdash; The review loop is the real deliverable<\/span>\n        <p>Notion-tracked requirements plus a PIC-then-BA double review before final sign-off is what let 4 designers ship 4 phases in parallel without drifting from each other's decisions.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\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 Design Lead ONE Storefront Builder A multi-industry platform that lets sellers spin up e-commerce, logistics, and manufacturing storefronts from ready-made templates, customize them without a developer, run the business from one CMS, and hand shopping off to an AI assistant &mdash; end to end, the way Shopify does for one vertical, built [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"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-2269","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/2269","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=2269"}],"version-history":[{"count":4,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/2269\/revisions"}],"predecessor-version":[{"id":2302,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/2269\/revisions\/2302"}],"wp:attachment":[{"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}