{"id":2231,"date":"2026-07-10T04:47:11","date_gmt":"2026-07-10T04:47:11","guid":{"rendered":"https:\/\/dominhtunglam.com\/?page_id=2231"},"modified":"2026-07-10T07:02:39","modified_gmt":"2026-07-10T07:02:39","slug":"vietnamairlines-showcase-clone","status":"publish","type":"page","link":"https:\/\/dominhtunglam.com\/?page_id=2231","title":{"rendered":"Talora Showcase"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2231\" class=\"elementor elementor-2231\">\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 { 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; }\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; }\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    <svg class=\"tlcs-logo\" viewBox=\"0 0 260 77\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"Talora\">\n      <path d=\"M203.389 35.0736L194.163 40.7893L209.069 51.1148L260 0L213.398 41.7233L203.389 35.0736Z\" fill=\"#63C2C2\"\/>\n      <path d=\"M203.388 35.0736L213.398 41.7233L260 0L203.388 35.0736Z\" fill=\"#B4DEE3\"\/>\n      <path d=\"M260 0L190.727 26.6591L203.389 35.0736L260 0Z\" fill=\"#338291\"\/>\n      <path d=\"M212.891 29.1874L217.726 32.333L260 0L212.891 29.1863V29.1874Z\" fill=\"white\"\/>\n      <path d=\"M260 0L187.289 12.5289L202.212 22.2384L260 0Z\" fill=\"#915CB9\"\/>\n      <path d=\"M202.212 22.2384L212.89 29.1874L260 0L202.212 22.2372V22.2384Z\" fill=\"#D1B3E7\"\/>\n      <path d=\"M158.267 49.7224C163.096 49.7224 166.22 53.8427 166.22 60.3067C166.22 66.7708 163.167 70.891 158.267 70.891C153.368 70.891 150.315 66.7708 150.315 60.2359C150.315 53.7011 153.51 49.7236 158.267 49.7236M173.888 44.3955H166.007V48.2315C163.025 44.6798 160.824 43.6146 156.776 43.6146C147.687 43.6146 141.865 50.1494 141.865 60.3787C141.865 65.4933 143.214 69.5416 145.913 72.5259C148.469 75.3675 152.232 77.0012 156.066 77.0012C160.185 77.0012 163.167 75.6517 166.007 72.5966V76.2191H173.888V44.3967V44.3955ZM120.138 44.3955V76.218H128.019V60.591C128.019 55.1921 131.214 50.718 135.049 50.718C136.966 50.718 138.031 51.2158 139.735 52.9202L142.716 45.8876C140.303 44.1112 138.953 43.6146 136.823 43.6146C133.273 43.6146 130.788 45.1775 127.876 49.2258V44.3955H120.137H120.138ZM98.8364 49.7224C103.665 49.7224 106.789 53.8427 106.789 60.3067C106.789 66.7708 103.665 70.891 98.8364 70.891C94.008 70.891 90.8835 66.7708 90.8835 60.1652C90.8835 53.5596 94.008 49.7236 98.8364 49.7236M98.8364 43.6135C88.5406 43.6135 82.4341 49.7932 82.4341 60.164C82.4341 71.1033 88.1857 76.9988 98.7657 76.9988C104.304 76.9988 108.28 75.5067 111.12 72.3101C113.818 69.3269 115.239 65.2067 115.239 60.1628C115.239 49.5786 109.346 43.6123 98.8364 43.6123M77.3946 26.4943H69.5135V76.218H77.3946V26.4943ZM47.0754 49.7224C51.9037 49.7224 55.0283 53.8427 55.0283 60.3067C55.0283 66.7708 51.9757 70.891 47.0754 70.891C42.1751 70.891 39.1224 66.7708 39.1224 60.2359C39.1224 53.7011 42.3177 49.7236 47.0754 49.7236M62.6972 44.3955H54.8161V48.2315C51.8341 44.6798 49.6328 43.6146 45.585 43.6146C36.4965 43.6146 30.6741 50.1494 30.6741 60.3787C30.6741 65.4933 32.023 69.5416 34.722 72.5259C37.2782 75.3675 41.0407 77.0012 44.8751 77.0012C48.9937 77.0012 51.9757 75.6517 54.8161 72.5966V76.2191H62.6972V44.3967V44.3955ZM21.7979 35.4449H35.2184V28.8382H0V35.4449H13.2778V76.218H21.7979V35.4449Z\" fill=\"white\"\/>\n    <\/svg>\n    <div class=\"tlcs-hero-tag\">Case Study \u00b7 UI\/UX Design<\/div>\n    <h1>Talora <span class=\"tlcs-accent\">Web Admin<\/span><\/h1>\n    <p class=\"tlcs-sub\">A multi-tenant administration portal for the Talora Electronic Flight Bag platform \u2014 giving airlines one place to manage users, devices, documents, and navigation charts across 7+ operational modules.<\/p>\n    <div class=\"tlcs-hero-meta\">\n      <span>Multi-tenant SaaS<\/span>\n      <span>Aviation \u00b7 EFB<\/span>\n      <span>Desktop \u00b7 1440px<\/span>\n      <span>6 months<\/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-tenant SaaS<\/dd><\/div>\n      <div><dt>Platform<\/dt><dd>Desktop, 1440px<\/dd><\/div>\n      <div><dt>Industry<\/dt><dd>Aviation \u2014 EFB<\/dd><\/div>\n      <div><dt>Team<\/dt><dd>1 UI\/UX Lead, 2 UI\/UX Designers<\/dd><\/div>\n      <div><dt>Duration<\/dt><dd>6 months<\/dd><\/div>\n      <div><dt>My role<\/dt><dd>UI\/UX Designer<\/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 admin portal, two levels of control, seven modules<\/h2>\n    <p class=\"tlcs-lede\">Talora Web Admin is the administration backbone of the Talora EFB platform. It spans 7+ core modules \u2014 Talora Admin (multi-tenant), User &amp; Device Management, EDocs, EForms, EPlates, System Integration, and the Admin Integration Control Center \u2014 serving two very different kinds of administrators.<\/p>\n\n    <div class=\"tlcs-tiers\">\n      <div class=\"tlcs-tier tlcs-central\">\n        <span class=\"tlcs-chip\">Internal<\/span>\n        <h3>Central Admin Portal<\/h3>\n        <ul>\n          <li>Platform &amp; tenant management<\/li>\n          <li>License &amp; feature toggle control<\/li>\n          <li>Billing oversight across airlines<\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"tlcs-tier tlcs-customer\">\n        <span class=\"tlcs-chip\">Airline-facing<\/span>\n        <h3>Customer Admin Portal<\/h3>\n        <ul>\n          <li>User, role &amp; permission management<\/li>\n          <li>EFB device registration &amp; assignment<\/li>\n          <li>Document &amp; chart distribution for their tenant<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n\n    <div class=\"tlcs-modules-strip\">\n      <span>Talora Admin<\/span>\n      <span>User &amp; Device Management<\/span>\n      <span>EDocs<\/span>\n      <span>EForms<\/span>\n      <span>EPlates<\/span>\n      <span>System Integration<\/span>\n      <span>Integration Control Center<\/span>\n    <\/div>\n\n    <figure class=\"tlcs-shot\">\n      <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/talora-dashboard.png\" alt=\"Talora Web Admin dashboard \u2014 active users, module status, AIRAC compliance and ePlate sync at a glance\" loading=\"lazy\">\n      <figcaption>Tenant dashboard \u2014 compliance &amp; fleet status at a glance<\/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 \u2014 Market<\/div>\n    <h2>An industry pivoting to AI-augmented decision support<\/h2>\n    <p class=\"tlcs-lede\">The EFB\/EFF market is dominated by two ecosystems \u2014 Boeing\/Jeppesen and Airbus\/NAVBLUE \u2014 with deep integration moats. The market's direction of travel is AI-augmented, advisory decision support, not autonomous operation. Talora positions itself as a phased-AI, advisory-first platform focused on regional and mid-sized airlines that the incumbents price out.<\/p>\n\n    <div class=\"tlcs-insight\">\n      \"Regional and mid-sized airlines are underserved by incumbents whose solutions are expensive to license and complex to deploy \u2014 that gap is Talora's entry point.\"\n      <span class=\"tlcs-who\">Key market insight<\/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\">Research \u2014 Competitors<\/div>\n    <h2>Seven incumbents, one open flank<\/h2>\n    <p class=\"tlcs-lede\">We mapped the full-platform EFB vendors on product scope and AI maturity, then compared each Talora module against its direct rivals to locate where differentiation is realistic \u2014 and where integration beats building.<\/p>\n\n    <div class=\"tlcs-table-scroll\">\n      <table>\n        <thead>\n          <tr><th>Vendor<\/th><th>Product<\/th><th>Strength<\/th><th>AI status<\/th><\/tr>\n        <\/thead>\n        <tbody>\n          <tr><td>Boeing \/ Jeppesen<\/td><td>FliteDeck Pro, Fleet Insight<\/td><td>Largest ecosystem; production AI assistant (\"Elrey\", 2025); tail-specific fuel advisories<\/td><td><span class=\"tlcs-ai-badge tlcs-live\">AI in production<\/span><\/td><\/tr>\n          <tr><td>Airbus \/ NAVBLUE<\/td><td>Mission+ Flight Assistant<\/td><td>End-to-end integration: charts, weather, performance, checklists, docs<\/td><td><span class=\"tlcs-ai-badge tlcs-no\">No AI claim<\/span><\/td><\/tr>\n          <tr><td>Lufthansa Systems<\/td><td>Lido mPilot, aiOCC<\/td><td>Strong OCC side (aiOCC assistant); data-rich, integrated EFB<\/td><td><span class=\"tlcs-ai-badge tlcs-partial\">AI in OCC<\/span><\/td><\/tr>\n          <tr><td>Thales \/ AvioBook<\/td><td>AvioBook EFB Suite<\/td><td>Connected suite: flight deck, cabin, OCC, maintenance<\/td><td><span class=\"tlcs-ai-badge tlcs-no\">No AI claim<\/span><\/td><\/tr>\n          <tr><td>Collins Aerospace<\/td><td>FlightHub EFB\/EFF<\/td><td>Real-time data; ML-based ETAs via FlightAware Foresight<\/td><td><span class=\"tlcs-ai-badge tlcs-partial\">ML in data layer<\/span><\/td><\/tr>\n          <tr><td>SITA<\/td><td>eWAS Pilot, OptiClimb<\/td><td>ML climb optimization; weather &amp; turbulence awareness<\/td><td><span class=\"tlcs-ai-badge tlcs-partial\">ML fuel optimization<\/span><\/td><\/tr>\n          <tr><td>Bytron Skybook<\/td><td>Skybook EFB<\/td><td>Document modules, briefing integration<\/td><td><span class=\"tlcs-ai-badge tlcs-no\">No AI claim<\/span><\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n\n    <h3 style=\"margin-top:56px;\">Capability matrix \u2014 where Talora wins<\/h3>\n    <div class=\"tlcs-table-scroll tlcs-matrix\">\n      <table>\n        <thead>\n          <tr>\n            <th>Criteria<\/th><th>Jeppesen<\/th><th>NAVBLUE<\/th><th>LH Systems<\/th><th>Thales<\/th><th>Collins<\/th><th>SITA<\/th><th>Bytron<\/th><th class=\"tlcs-talora\">Talora<\/th>\n          <\/tr>\n        <\/thead>\n        <tbody>\n          <tr><td>Multi-tenant SaaS<\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><td class=\"tlcs-talora\"><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><\/tr>\n          <tr><td>AI \/ ML features<\/td><td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td class=\"tlcs-talora\"><span class=\"tlcs-dot tlcs-half\"><\/span><\/td><\/tr>\n          <tr><td>E-Plates (charts)<\/td><td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td class=\"tlcs-talora\"><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><\/tr>\n          <tr><td>E-Docs management<\/td><td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><td class=\"tlcs-talora\"><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><\/tr>\n          <tr><td>E-Forms builder<\/td><td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td class=\"tlcs-talora\"><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><\/tr>\n          <tr><td>Configurable workflows<\/td><td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td class=\"tlcs-talora\"><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><\/tr>\n          <tr><td>Regional airline focus<\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><td class=\"tlcs-talora\"><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><\/tr>\n          <tr><td>Cost flexibility<\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-none\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-half\"><\/span><\/td><td><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><td class=\"tlcs-talora\"><span class=\"tlcs-dot tlcs-full\"><\/span><\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n    <div class=\"tlcs-legend\">\n      <span><span class=\"tlcs-dot tlcs-full\"><\/span> Strong<\/span>\n      <span><span class=\"tlcs-dot tlcs-half\"><\/span> Partial \/ limited<\/span>\n      <span><span class=\"tlcs-dot tlcs-none\"><\/span> Weak \/ none<\/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-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\">Key findings<\/div>\n    <h2>Four openings that shaped the design brief<\/h2>\n    <div class=\"tlcs-grid-2\">\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Finding 01 \u2014 Segment gap<\/span>\n        <h3>Regional airlines are priced out<\/h3>\n        <p>Incumbent platforms are expensive and complex to deploy. Regional and mid-sized carriers need mainstream capability without enterprise overhead \u2014 the admin portal must feel approachable, not avionics-grade intimidating.<\/p>\n      <\/div>\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Finding 02 \u2014 Architecture edge<\/span>\n        <h3>Multi-tenant is the cost story<\/h3>\n        <p>A shared, multi-tenant SaaS architecture is Talora's clearest structural advantage. The design consequence: strict tenant isolation made visible, so airline admins always trust whose data they're touching.<\/p>\n      <\/div>\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Finding 03 \u2014 Feature gap<\/span>\n        <h3>E-Forms &amp; configurable workflows are open space<\/h3>\n        <p>No incumbent offers a strong forms builder or truly configurable workflows. This became a differentiating module \u2014 airlines customize processes without custom development.<\/p>\n      <\/div>\n      <div class=\"tlcs-card\">\n        <span class=\"tlcs-k\">Finding 04 \u2014 Build vs. integrate<\/span>\n        <h3>Charts come from Keyvan, not from scratch<\/h3>\n        <p>Partnering with Keyvan Aviation for chart content cuts licensing cost versus Jeppesen. The admin's job shifts from content management to distribution control \u2014 assignment, sync monitoring, and audit.<\/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-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\">Positioning<\/div>\n    <h2>What sets Talora apart<\/h2>\n    <div class=\"tlcs-usp-list\">\n      <div class=\"tlcs-usp\"><span class=\"tlcs-tick\">\u2713<\/span><div><h3>Highly configurable SaaS<\/h3><p>Airlines tailor workflows without custom development.<\/p><\/div><\/div>\n      <div class=\"tlcs-usp\"><span class=\"tlcs-tick\">\u2713<\/span><div><h3>Multi-tenant architecture<\/h3><p>Lower cost, scalable across many airlines on one platform.<\/p><\/div><\/div>\n      <div class=\"tlcs-usp\"><span class=\"tlcs-tick\">\u2713<\/span><div><h3>Phased AI approach<\/h3><p>Advisory-first; no over-promising autonomous features.<\/p><\/div><\/div>\n      <div class=\"tlcs-usp\"><span class=\"tlcs-tick\">\u2713<\/span><div><h3>Legacy format support<\/h3><p>PDF\/HTML briefings for smaller airlines mid-digital-transition.<\/p><\/div><\/div>\n      <div class=\"tlcs-usp\"><span class=\"tlcs-tick\">\u2713<\/span><div><h3>Cloud real-time integration<\/h3><p>Live weather, navigation, and flight planning data.<\/p><\/div><\/div>\n      <div class=\"tlcs-usp\"><span class=\"tlcs-tick\">\u2713<\/span><div><h3>AI-enhanced SSDLC<\/h3><p>AI tooling embedded across the development lifecycle.<\/p><\/div><\/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\">Research \u2014 Personas<\/div>\n    <h2>Two administrators, two mental models<\/h2>\n    <p class=\"tlcs-lede\">The two-tier architecture demanded two personas with different risk profiles: one manages the platform across airlines; the other manages one airline's operation under regulatory scrutiny.<\/p>\n\n    <div class=\"tlcs-grid-2\">\n      <div class=\"tlcs-persona\">\n        <header>\n          <span class=\"tlcs-role\">Persona A \u2014 Central Admin Portal<\/span>\n          <h3>The Platform Operator<\/h3>\n        <\/header>\n        <div class=\"tlcs-body\">\n          <h4>Context<\/h4>\n          <p>Internal Talora operations staff managing tenants, licenses, and feature rollouts across every airline customer.<\/p>\n          <h4>Goals<\/h4>\n          <ul>\n            <li>Onboard new airline tenants quickly and safely<\/li>\n            <li>Control feature toggles &amp; licensing per tenant<\/li>\n            <li>Keep billing and platform health visible at a glance<\/li>\n          <\/ul>\n          <h4>Pain points<\/h4>\n          <ul>\n            <li>One wrong toggle affects a live airline operation<\/li>\n            <li>Cross-tenant context switching invites mistakes<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n      <div class=\"tlcs-persona\">\n        <header>\n          <span class=\"tlcs-role\">Persona B \u2014 Customer Admin Portal<\/span>\n          <h3>The Airline Admin<\/h3>\n        <\/header>\n        <div class=\"tlcs-body\">\n          <h4>Context<\/h4>\n          <p>Flight-ops administrator or document controller at a regional airline, accountable to EASA\/FAA compliance audits.<\/p>\n          <h4>Goals<\/h4>\n          <ul>\n            <li>Keep crew accounts, roles, and EFB devices current<\/li>\n            <li>Distribute the right document version to the right fleet<\/li>\n            <li>Prove compliance with exportable audit trails<\/li>\n          <\/ul>\n          <h4>Pain points<\/h4>\n          <ul>\n            <li>An outdated manual on a pilot's tablet is a safety finding<\/li>\n            <li>Manual distribution tracking eats hours every AIRAC cycle<\/li>\n          <\/ul>\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-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\">Design process<\/div>\n    <h2>From market map to design concept<\/h2>\n    <div class=\"tlcs-process\">\n      <div class=\"tlcs-step\">\n        <h3>Market Research<\/h3>\n        <p>Scoped the EFB\/EFF landscape, its shift toward advisory AI, and where regional airlines are left behind.<\/p>\n      <\/div>\n      <div class=\"tlcs-step\">\n        <h3>Competitor Analysis<\/h3>\n        <p>Benchmarked 7 full-platform vendors plus module-level rivals; built the capability matrix.<\/p>\n      <\/div>\n      <div class=\"tlcs-step\">\n        <h3>Define Personas<\/h3>\n        <p>Modeled the platform operator and the airline admin \u2014 two risk profiles, two portals.<\/p>\n      <\/div>\n      <div class=\"tlcs-step\">\n        <h3>Design Concept<\/h3>\n        <p>Translated findings into a two-tier admin concept and a token-based design system.<\/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-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\">Design solutions<\/div>\n    <h2>Module by module<\/h2>\n\n    <div class=\"tlcs-solution\">\n      <span class=\"tlcs-n\">Module 01<\/span>\n      <h3>User &amp; Device Management<\/h3>\n      <p class=\"tlcs-goal\">A portal for airline admins to manage user accounts, roles, permissions, and EFB devices \u2014 the front door of every tenant's operation.<\/p>\n      <div class=\"tlcs-features\">\n        <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">A<\/span><div><b>User lifecycle<\/b>Create, update, deactivate accounts; assign roles; search &amp; filter across the crew roster.<\/div><\/div>\n        <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">B<\/span><div><b>Device registration<\/b>Register, assign, and revoke tablets\/EFB devices tied to individual users.<\/div><\/div>\n        <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">C<\/span><div><b>Audit &amp; compliance<\/b>Every action logged; compliance reports generated on demand.<\/div><\/div>\n      <\/div>\n      \n      <figure class=\"tlcs-shot\">\n        <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/talora-user-management.png\" alt=\"User Management screen \u2014 crew roster with roles, status and device assignment\" loading=\"lazy\">\n        <figcaption>User Management \u2014 roster, roles &amp; device assignment<\/figcaption>\n      <\/figure>\n    <\/div>\n\n    <div class=\"tlcs-solution\">\n      <span class=\"tlcs-n\">Module 02<\/span>\n      <h3>EDocs \u2014 Electronic Documents<\/h3>\n      <p class=\"tlcs-goal\">Document libraries for EFB users: upload, versioning, distribution, and compliance \u2014 where an outdated manual is a safety finding, not an inconvenience.<\/p>\n      <div class=\"tlcs-features\">\n        <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">A<\/span><div><b>Upload, versioning &amp; metadata<\/b>PDF\/Office upload with auto-increment versions, effective &amp; expiry dates.<\/div><\/div>\n        <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">B<\/span><div><b>Folder structure &amp; access control<\/b>Nested folders; documents assigned by fleet, role, or user.<\/div><\/div>\n        <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">C<\/span><div><b>Distribution &amp; notification<\/b>Scheduled publication, staged rollouts, email &amp; push notifications.<\/div><\/div>\n        <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">D<\/span><div><b>Audit trail &amp; reporting<\/b>Complete audit log with exportable compliance reports.<\/div><\/div>\n      <\/div>\n      <figure class=\"tlcs-shot\">\n        <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/talora-edocs.png\" alt=\"EDocs screen \u2014 document library with versioning and distribution controls\" loading=\"lazy\">\n        <figcaption>EDocs \u2014 library, versioning &amp; distribution<\/figcaption>\n      <\/figure>\n    <\/div>\n\n    <div class=\"tlcs-solution\">\n      <span class=\"tlcs-n\">Module 03<\/span>\n      <h3>EPlates \u2014 Navigation Charts<\/h3>\n      <p class=\"tlcs-goal\">Chart content and metadata are fully managed by Keyvan Aviation \u2014 so the admin experience focuses purely on distribution and access, not content authoring.<\/p>\n      <div class=\"tlcs-features\">\n        <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">A<\/span><div><b>Chart package assignment<\/b>Assign Keyvan chart packages to fleets and roles; monitor distribution status.<\/div><\/div>\n        <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">B<\/span><div><b>AIRAC sync monitoring<\/b>View sync status and manage AIRAC expiry \u2014 updated automatically from Keyvan.<\/div><\/div>\n        <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">C<\/span><div><b>Overlay &amp; layer visibility<\/b>Configure NOTAM, airspace, and weather overlay visibility per user group.<\/div><\/div>\n        <div class=\"tlcs-feature\"><span class=\"tlcs-fkey\">D<\/span><div><b>Audit &amp; compliance<\/b>Audit logs, AIRAC expiry reports, and a distribution dashboard.<\/div><\/div>\n      <\/div>\n      <div class=\"tlcs-note\">Design decision: because content is Keyvan-managed, the UI removes every authoring affordance \u2014 admins see status, coverage, and expiry, never editable chart data.<\/div>\n      <figure class=\"tlcs-shot\">\n        <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/talora-eplates.png\" alt=\"EPlates screen \u2014 Keyvan chart package assignment and AIRAC sync monitoring\" loading=\"lazy\">\n        <figcaption>EPlates \u2014 chart packages &amp; AIRAC sync<\/figcaption>\n      <\/figure>\n    <\/div>\n\n    <div class=\"tlcs-solution\">\n      <span class=\"tlcs-n\">Across the system<\/span>\n      <h3>Compliance Dashboard &amp; Electronic Flight Folder<\/h3>\n      <p class=\"tlcs-goal\">Compliance visibility and flight-folder workflows round out the admin experience \u2014 surfacing AIRAC status, device compliance, and briefing packages in one consistent design language.<\/p>\n      <div class=\"tlcs-grid-2\">\n        <figure class=\"tlcs-shot\">\n          <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/talora-compliance-dashboard.png\" alt=\"Compliance Dashboard \u2014 AIRAC compliance and device status overview\" loading=\"lazy\">\n          <figcaption>Compliance Dashboard<\/figcaption>\n        <\/figure>\n        <figure class=\"tlcs-shot\">\n          <img decoding=\"async\" src=\"https:\/\/dominhtunglam.com\/wp-content\/uploads\/2026\/07\/talora-eff.png\" alt=\"EFF \u2014 Electronic Flight Folder management screen\" loading=\"lazy\">\n          <figcaption>EFF \u2014 Electronic Flight Folder<\/figcaption>\n        <\/figure>\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-02435ac e-flex e-con-boxed e-con e-parent\" data-id=\"02435ac\" 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-fffee48 elementor-widget elementor-widget-html\" data-id=\"fffee48\" 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>A design system built for scale<\/h2>\n    <p class=\"tlcs-lede\">The Talora Web Admin Design System underpins every module \u2014 a token-based foundation in SF Pro, tuned for dense enterprise screens at desktop 1440px.<\/p>\n\n    <div class=\"tlcs-stat-row\">\n      <div class=\"tlcs-stat\"><b class=\"tlcs-num\">7+<\/b><span>Core modules designed<\/span><\/div>\n      <div class=\"tlcs-stat\"><b class=\"tlcs-num\">2<\/b><span>Admin portals (Central + Customer)<\/span><\/div>\n      <div class=\"tlcs-stat\"><b class=\"tlcs-num\">300+<\/b><span>Semantic color tokens<\/span><\/div>\n      <div class=\"tlcs-stat\"><b class=\"tlcs-num\">6<\/b><span>Interaction states per token set<\/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-fef5ddf e-flex e-con-boxed e-con e-parent\" data-id=\"fef5ddf\" 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-71f3492 elementor-widget elementor-widget-html\" data-id=\"71f3492\" 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 this project taught me<\/h2>\n    <div class=\"tlcs-grid-3\">\n      <div class=\"tlcs-reflection\">\n        <span class=\"tlcs-k\">01 \u2014 Compliance is the backbone<\/span>\n        <p>In aviation, audit trails aren't a feature \u2014 they're the product. Designing traceability into every module from day one shaped cleaner information architecture than retrofitting ever could.<\/p>\n      <\/div>\n      <div class=\"tlcs-reflection\">\n        <span class=\"tlcs-k\">02 \u2014 Multi-tenant changes every screen<\/span>\n        <p>One design serves many airlines' configurations. Every layout had to survive different feature toggles, role sets, and data volumes without breaking.<\/p>\n      <\/div>\n      <div class=\"tlcs-reflection\">\n        <span class=\"tlcs-k\">03 \u2014 Differentiate, don't imitate<\/span>\n        <p>Competing with Jeppesen and NAVBLUE on feature parity is a losing game. The design bets on configurability and clarity \u2014 the things incumbents structurally can't offer.<\/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 UI\/UX Design Talora Web Admin A multi-tenant administration portal for the Talora Electronic Flight Bag platform \u2014 giving airlines one place to manage users, devices, documents, and navigation charts across 7+ operational modules. Multi-tenant SaaS Aviation \u00b7 EFB Desktop \u00b7 1440px 6 months Project snapshot Type Multi-tenant SaaS Platform Desktop, 1440px Industry [&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-2231","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/2231","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=2231"}],"version-history":[{"count":13,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/2231\/revisions"}],"predecessor-version":[{"id":2264,"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=\/wp\/v2\/pages\/2231\/revisions\/2264"}],"wp:attachment":[{"href":"https:\/\/dominhtunglam.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}