Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>AI Acceleration: Unlocking Deeper Customer Insights</title> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/npm/reveal.js@5.0.5/dist/reset.css" | |
| /> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/npm/reveal.js@5.0.5/dist/reveal.css" | |
| /> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/npm/reveal.js@5.0.5/dist/theme/black.css" | |
| id="theme" | |
| /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap"); | |
| :root { | |
| --r-background-color: #000000; | |
| --r-main-font: "Inter", sans-serif; | |
| --r-heading-font: "Inter", sans-serif; | |
| --r-main-color: #ffffff; | |
| --r-heading-color: #ffcc00; | |
| --r-heading1-size: 4rem; | |
| --r-heading2-size: 2.5rem; | |
| --r-heading3-size: 2rem; | |
| --r-main-font-size: 1.5rem; | |
| } | |
| .reveal .slides { | |
| text-align: center; | |
| } | |
| .reveal h1, | |
| .reveal h2, | |
| .reveal h3 { | |
| text-transform: none; | |
| text-shadow: none; | |
| } | |
| .reveal .slide-header { | |
| position: absolute; | |
| top: 2rem; | |
| left: 2rem; | |
| right: 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.6em; | |
| color: #bbbbbb; | |
| z-index: 10; | |
| } | |
| .reveal .slide-header .title { | |
| color: #ffcc00; | |
| font-weight: bold; | |
| } | |
| .reveal p, | |
| .reveal li { | |
| font-size: 0.9em; | |
| line-height: 1.6; | |
| color: var(--r-main-color); | |
| } | |
| .reveal li { | |
| margin-bottom: 0.5em; | |
| } | |
| .text-cba-yellow { | |
| color: #ffcc00; | |
| } | |
| .bg-cba-yellow { | |
| background-color: #ffcc00; | |
| } | |
| .bg-cba-black { | |
| background-color: #000000; | |
| } | |
| .bg-cba-dark-grey { | |
| background-color: #333333; | |
| } | |
| .border-cba-yellow { | |
| border-color: #ffcc00; | |
| } | |
| .text-cba-light-grey { | |
| color: #bbbbbb; | |
| } | |
| .infographic-box { | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| height: 100%; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); | |
| } | |
| .infographic-box-small { | |
| width: 15.625em; | |
| height: 9.375em; | |
| } /* 300px / 180px */ | |
| .infographic-box-medium { | |
| width: 19.79em; | |
| height: 11.45em; | |
| } /* 380px / 220px */ | |
| .infographic-box-large { | |
| width: 23.4375em; | |
| height: 13.02em; | |
| } /* 450px / 250px */ | |
| .arrow-right { | |
| width: 2.6em; /* 50px */ | |
| height: 0.1em; /* 2px */ | |
| background-color: #ffcc00; | |
| margin: 0 1em; | |
| position: relative; | |
| } | |
| .arrow-right::after { | |
| content: ""; | |
| position: absolute; | |
| right: 0; | |
| top: -0.25em; /* -5px */ | |
| border-top: 0.3em solid transparent; /* 6px */ | |
| border-bottom: 0.3em solid transparent; /* 6px */ | |
| border-left: 0.5em solid #ffcc00; /* 10px */ | |
| } | |
| .chart-bar { | |
| height: 1em; | |
| border-radius: 9999px; | |
| margin-bottom: 0.25em; | |
| } | |
| .chart-label { | |
| font-size: 0.8em; | |
| font-weight: 400; | |
| color: #ffffff; | |
| text-align: left; | |
| width: 7.8em; | |
| flex-shrink: 0; | |
| } | |
| .nps-value { | |
| font-size: 1.3em; | |
| font-weight: 700; | |
| color: #ffcc00; | |
| } | |
| .nps-change { | |
| font-size: 0.8em; | |
| font-weight: 600; | |
| } | |
| .nps-chart-segment { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin: 0 0.8em; | |
| } | |
| .nps-chart-bar-stack { | |
| height: 5.2em; | |
| width: 3.1em; | |
| display: flex; | |
| flex-direction: column-reverse; | |
| border-radius: 0.25em; | |
| overflow: hidden; | |
| margin-top: 0.5em; | |
| } | |
| .nps-promoter { | |
| background-color: #ffcc00; | |
| } | |
| .nps-passive { | |
| background-color: #888888; | |
| } | |
| .nps-detractor { | |
| background-color: #333333; | |
| } | |
| .nps-legend { | |
| font-size: 0.7em; | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 0.25em; | |
| } | |
| .nps-legend-color { | |
| width: 0.8em; | |
| height: 0.8em; | |
| border-radius: 0.1em; | |
| margin-right: 0.25em; | |
| } | |
| .line-chart-container { | |
| width: 41.6em; /* 800px */ | |
| max-width: 46.875em; /* 900px */ | |
| height: 15.625em; /* 300px */ | |
| background-color: #1a1a1a; | |
| border-radius: 0.5em; | |
| padding: 0.8em; | |
| position: relative; | |
| margin-top: 1em; | |
| } | |
| .line-chart-line { | |
| height: 0.2em; | |
| position: absolute; | |
| background-color: #ffcc00; | |
| width: 100%; | |
| left: 0; | |
| bottom: 3.5em; | |
| border-radius: 0.1em; | |
| } | |
| .line-chart-point { | |
| width: 0.6em; | |
| height: 0.6em; | |
| background-color: #ffcc00; | |
| border-radius: 50%; | |
| position: absolute; | |
| transform: translate(-50%, -50%); | |
| } | |
| .line-chart-axis-label { | |
| position: absolute; | |
| font-size: 0.6em; | |
| color: #ffffff; | |
| } | |
| .line-chart-nps-label { | |
| position: absolute; | |
| top: 0.5em; | |
| left: 0.5em; | |
| font-size: 0.8em; | |
| font-weight: 600; | |
| color: #ffcc00; | |
| } | |
| .line-chart-date-label { | |
| position: absolute; | |
| bottom: 0.2em; | |
| font-size: 0.6em; | |
| color: #ffffff; | |
| } | |
| .metric-card { | |
| background-color: #1a1a1a; | |
| border-radius: 0.5em; | |
| padding: 0.8em; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 13em; /* 250px */ | |
| height: 7.8em; /* 150px */ | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); | |
| } | |
| .metric-value { | |
| font-size: 2em; | |
| font-weight: 700; | |
| line-height: 1; | |
| margin-bottom: 0.2em; | |
| } | |
| .metric-label { | |
| font-size: 0.7em; | |
| font-weight: 400; | |
| color: #bbbbbb; | |
| } | |
| .metric-change { | |
| font-size: 0.7em; | |
| font-weight: 600; | |
| margin-top: 0.2em; | |
| } | |
| .nps-driver-table { | |
| width: 90%; | |
| background-color: #1a1a1a; | |
| border-radius: 0.5em; | |
| padding: 0.8em; | |
| text-align: left; | |
| margin-top: 1em; | |
| font-size: 0.8em; | |
| } | |
| .nps-driver-table th { | |
| font-size: 1em; | |
| font-weight: 600; | |
| color: #ffcc00; | |
| padding-bottom: 0.5em; | |
| border-bottom: 0.05em solid #333333; | |
| } | |
| .nps-driver-table td { | |
| font-size: 0.9em; | |
| padding: 0.4em 0; | |
| border-bottom: 0.05em solid #222222; | |
| color: #ffffff; | |
| } | |
| .nps-driver-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .table-value-positive { | |
| color: #5cb85c; | |
| } | |
| .table-value-negative { | |
| color: #d9534f; | |
| } | |
| .table-value-neutral { | |
| color: #ffffff; | |
| } | |
| .two-column-layout { | |
| display: flex; | |
| gap: 1.5em; /* 3rem */ | |
| align-items: flex-start; | |
| text-align: left; | |
| width: 100%; | |
| } | |
| .column-left { | |
| flex: 1; | |
| } | |
| .column-right { | |
| flex: 1; | |
| } | |
| .quote-box { | |
| background-color: #1a1a1a; | |
| border-left: 0.25em solid #ffcc00; | |
| padding: 0.8em; | |
| margin-bottom: 0.8em; | |
| border-radius: 0.25em; | |
| font-size: 0.9em; | |
| font-style: italic; | |
| color: #ffffff; | |
| } | |
| .quote-speaker { | |
| font-size: 0.7em; | |
| font-style: normal; | |
| font-weight: 600; | |
| color: #ffcc00; | |
| margin-top: 0.25em; | |
| } | |
| .llm-architecture { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 1em; | |
| margin-top: 1.5em; | |
| width: 90%; | |
| } | |
| .llm-step { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| background-color: #1a1a1a; | |
| padding: 0.8em; | |
| border-radius: 0.5em; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); | |
| min-width: 13em; | |
| max-width: 15.625em; | |
| height: 10.4em; | |
| } | |
| .llm-icon { | |
| font-size: 1.8em; | |
| margin-bottom: 0.5em; | |
| color: #ffcc00; | |
| } | |
| .llm-step-title { | |
| font-size: 1em; | |
| font-weight: 600; | |
| color: #ffcc00; | |
| margin-bottom: 0.2em; | |
| } | |
| .llm-step-description { | |
| font-size: 0.7em; | |
| color: #ffffff; | |
| text-align: center; | |
| } | |
| .llm-arrow { | |
| font-size: 1.5em; | |
| color: #ffcc00; | |
| } | |
| .shift-diagram { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin-top: 1.5em; | |
| width: 90%; | |
| } | |
| .shift-phase { | |
| width: 80%; | |
| padding: 0.8em; | |
| border-radius: 0.5em; | |
| margin-bottom: 0.8em; | |
| text-align: left; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); | |
| } | |
| .shift-phase-title { | |
| font-size: 1.3em; | |
| font-weight: 700; | |
| margin-bottom: 0.4em; | |
| } | |
| .shift-phase-description { | |
| font-size: 0.8em; | |
| color: #bbbbbb; | |
| } | |
| .shift-arrow-down { | |
| font-size: 1.5em; | |
| color: #ffcc00; | |
| margin: 0.25em 0; | |
| } | |
| .use-case-card { | |
| background-color: #1a1a1a; | |
| border-radius: 0.5em; | |
| padding: 1em; | |
| text-align: left; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5em; | |
| } | |
| .use-case-title { | |
| font-size: 1.2em; | |
| font-weight: 700; | |
| color: #ffcc00; | |
| margin-bottom: 0.5em; | |
| } | |
| .use-case-icon { | |
| font-size: 2em; | |
| color: #ffcc00; | |
| margin-bottom: 0.5em; | |
| } | |
| .use-case-point { | |
| font-size: 0.9em; | |
| color: #ffffff; | |
| margin-bottom: 0.25em; | |
| } | |
| .use-case-impact { | |
| font-size: 0.8em; | |
| color: #bbbbbb; | |
| margin-top: 0.4em; | |
| font-weight: 600; | |
| } | |
| .impact-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1em; | |
| margin-top: 1em; | |
| width: 100%; | |
| } | |
| .key-message-box { | |
| background-color: #1a1a1a; | |
| border-radius: 0.5em; | |
| padding: 1em; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); | |
| text-align: center; | |
| margin-top: 1.5em; | |
| } | |
| .key-message-box h3 { | |
| color: #ffcc00; | |
| font-size: 1.3em; | |
| margin-bottom: 0.5em; | |
| } | |
| .key-message-box p { | |
| font-size: 1em; | |
| line-height: 1.5; | |
| color: #ffffff; | |
| } | |
| .roadmap-container-slide { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: flex-start; | |
| justify-content: center; | |
| gap: 1.5em; | |
| margin-top: 1.5em; | |
| width: 90%; | |
| text-align: left; | |
| } | |
| .roadmap-step-slide { | |
| flex: 1; | |
| background-color: #1a1a1a; | |
| border-radius: 0.5em; | |
| padding: 1em; | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); | |
| } | |
| .roadmap-step-slide h4 { | |
| font-size: 1.1em; | |
| font-weight: 600; | |
| color: #ffcc00; | |
| margin-bottom: 0.5em; | |
| } | |
| .roadmap-step-slide p { | |
| font-size: 0.8em; | |
| color: #ffffff; | |
| line-height: 1.4; | |
| } | |
| .roadmap-arrow-slide { | |
| font-size: 2em; | |
| color: #ffcc00; | |
| align-self: center; | |
| } | |
| .slide-text { | |
| font-size: 0.9em; | |
| color: #bbbbbb; | |
| margin-top: 0.5em; | |
| } | |
| .nav-buttons { | |
| position: fixed; | |
| bottom: 1.5rem; | |
| right: 1.5rem; | |
| display: flex; | |
| gap: 0.5rem; | |
| z-index: 1001; | |
| } | |
| .nav-button { | |
| background-color: #2b2a29; | |
| color: #ffcc00; | |
| border: 2px solid #ffcc00; | |
| border-radius: 50%; | |
| width: 3rem; | |
| height: 3rem; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .nav-button:hover { | |
| background-color: #ffcc00; | |
| color: #000000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="reveal"> | |
| <div class="slides"> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">1 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full" | |
| > | |
| <h1>AI Acceleration</h1> | |
| <h2 class="text-cba-yellow"> | |
| Unlocking Deeper Customer Insights | |
| </h2> | |
| <p>Leveraging Multimodal LLMs for a Proactive Future</p> | |
| <div | |
| class="absolute bottom-10 right-10 text-xl font-bold" | |
| > | |
| <span class="text-cba-yellow" | |
| >Commonwealth Bank</span | |
| > | |
| <span class="text-white">of Australia</span> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">2 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full text-left" | |
| > | |
| <h2 class="text-white">Executive Summary</h2> | |
| <h3 class="text-cba-yellow"> | |
| Transforming Customer Understanding Through Technology | |
| </h3> | |
| <div class="grid grid-cols-2 gap-8 mt-8"> | |
| <div class="flex flex-col items-start"> | |
| <p | |
| class="text-cba-yellow text-2xl mb-2" | |
| style="font-size: 1.2em" | |
| > | |
| The Technical Challenge: | |
| </p> | |
| <ul | |
| class="list-disc list-inside text-white text-xl space-y-2" | |
| style="font-size: 0.8em" | |
| > | |
| <li class="fragment"> | |
| Traditional NLP limitations: missing non-verbal cues. | |
| </li> | |
| <li class="fragment"> | |
| Lagging feedback loops: reactive, not proactive insights. | |
| </li> | |
| <li class="fragment"> | |
| Data silos hindering holistic customer view. | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="flex flex-col items-start"> | |
| <p | |
| class="text-cba-yellow text-2xl mb-2" | |
| style="font-size: 1.2em" | |
| > | |
| Our Technical Solution: | |
| </p> | |
| <ul | |
| class="list-disc list-inside text-white text-xl space-y-2" | |
| style="font-size: 0.8em" | |
| > | |
| <li class="fragment"> | |
| Multimodal LLMs for deep speech/audio understanding. | |
| </li> | |
| <li class="fragment"> | |
| Unlocking tone, emotion, and implicit intent programmatically. | |
| </li> | |
| <li class="fragment"> | |
| Enabling proactive, data-driven system interventions. | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="key-message-box mt-8 fragment"> | |
| <h3 style="font-size: 1.3em">Technical Vision:</h3> | |
| <p class="text-white-700" style="font-size: 1em"> | |
| From Reactive Problem-Solving to Proactive System Intelligence. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Reframed: The Technical Insight Gap --> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">3 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full" | |
| > | |
| <h2 class="text-white">The Technical Insight Gap</h2> | |
| <h3 class="text-cba-yellow"> | |
| Limitations of Current Data Collection Systems | |
| </h3> | |
| <div | |
| class="flex justify-center items-center space-x-12 mt-12" | |
| > | |
| <div class="metric-card fragment"> | |
| <span class="metric-value text-cba-yellow" | |
| >~70%</span | |
| > | |
| <span class="metric-label" | |
| >Unstructured Data</span | |
| > | |
| <span class="metric-change text-white" | |
| >Audio, Text, Interactions</span | |
| > | |
| <span | |
| class="text-cba-light-grey" | |
| style="font-size: 0.5em" | |
| >Challenge in automated processing</span | |
| > | |
| </div> | |
| <div class="metric-card fragment"> | |
| <span class="metric-value text-white">Lagging</span> | |
| <span class="metric-label" | |
| >Feedback Cycle</span | |
| > | |
| <span class="metric-change text-red-500" | |
| >Weeks to months for insights</span | |
| > | |
| <span | |
| class="text-cba-light-grey" | |
| style="font-size: 0.5em" | |
| >Post-mortem analysis only</span | |
| > | |
| </div> | |
| <div class="metric-card fragment"> | |
| <span class="metric-value text-white" | |
| >Limited</span | |
| > | |
| <span class="metric-label" | |
| >Context Capture</span | |
| > | |
| <span class="metric-change text-red-500" | |
| >Misses tone, implicit intent</span | |
| > | |
| <span | |
| class="text-cba-light-grey" | |
| style="font-size: 0.5em" | |
| >Relies on explicit statements</span | |
| > | |
| </div> | |
| </div> | |
| <p | |
| class="text-cba-light-grey mt-8" | |
| style="font-size: 0.7em" | |
| > | |
| Current systems provide retrospective quantitative metrics, but lack real-time qualitative depth. | |
| </p> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">4 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full" | |
| > | |
| <h2 class="text-white">Understanding Nuance: The Technical Challenge</h2> | |
| <h3 class="text-cba-yellow"> | |
| Why Traditional Systems Fall Short | |
| </h3> | |
| <div | |
| class="flex justify-center items-center space-x-8 mt-12 w-full" | |
| > | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">🚫🗣️</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Limited Audio Understanding | |
| </h4> | |
| <p style="font-size: 0.7em" class="opacity-80"> | |
| ASR captures words, but misses paralinguistic cues (pitch, tone, prosody). | |
| </p> | |
| </div> | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">📝➡️😐</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Shallow Text Analysis | |
| </h4> | |
| <p style="font-size: 0.7em" class="opacity-80"> | |
| Traditional NLP struggles with sarcasm, implicit meaning, and complex emotional states from text alone. | |
| </p> | |
| </div> | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">🔄⏰</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Delayed Processing | |
| </h4> | |
| <p style="font-size: 0.7em" class="opacity-80"> | |
| Batch processing of feedback prevents real-time system adjustments or interventions. | |
| </p> | |
| </div> | |
| </div> | |
| <p | |
| class="text-cba-light-grey mt-8" | |
| style="font-size: 0.7em" | |
| > | |
| Overcoming these limitations requires advanced AI capabilities beyond simple keyword spotting or sentiment lexicons. | |
| </p> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">5 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full" | |
| > | |
| <h2 class="text-white">Voice of the Customer: Capturing Unstructured Signals</h2> | |
| <h3 class="text-cba-yellow"> | |
| The Technical Challenge of Contextual Understanding | |
| </h3> | |
| <div class="two-column-layout mt-12 w-full max-w-4xl"> | |
| <div | |
| class="column-left flex flex-col justify-center items-center fragment" | |
| > | |
| <div class="quote-box bg-cba-dark-grey w-full"> | |
| "Never contact me. Never suggest better | |
| banking options for my situation. Only send | |
| generic emails etc, not tailored to my | |
| needs. No contact from a human." | |
| <span class="quote-speaker" | |
| >- Customer Desiring | |
| Personalization</span | |
| > | |
| </div> | |
| <p class="text-cba-light-grey mt-4" style="font-size: 0.7em;"> | |
| This verbatim highlights the need for AI to infer implicit needs and personalization cues from conversation, moving beyond explicit requests. | |
| </p> | |
| </div> | |
| <div | |
| class="column-right flex flex-col justify-center items-center fragment" | |
| > | |
| <div | |
| class="infographic-box bg-cba-dark-grey text-white infographic-box-medium" | |
| > | |
| <div class="text-5xl mb-3">impersonal</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Technical Need: Advanced Contextual AI | |
| </h4> | |
| <p | |
| style="font-size: 0.7em" | |
| class="opacity-80" | |
| > | |
| Challenge: Automating the detection of implicit signals for "recognising customer loyalty", "proactively keeping you informed", and "staff having your interests at heart" without explicit verbal cues. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <p | |
| class="text-cba-light-grey mt-8" | |
| style="font-size: 0.7em" | |
| > | |
| Source: CBA MFI Customer Verbatim, April 2025 (Page 4) - illustrating raw data. | |
| </p> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">6 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full" | |
| > | |
| <h2 class="text-white">Voice of the Customer: Resolving Ambiguity</h2> | |
| <h3 class="text-cba-yellow"> | |
| Bridging Gaps in Staff Knowledge & Service Consistency with AI | |
| </h3> | |
| <div class="two-column-layout mt-12 w-full max-w-4xl"> | |
| <div | |
| class="column-left flex flex-col justify-center items-center fragment" | |
| > | |
| <div class="quote-box bg-cba-dark-grey w-full"> | |
| "Staff are not knowledgeable. They do not | |
| know how to raise a credit card dispute. | |
| Rates on loans and savings are bad." | |
| <span class="quote-speaker" | |
| >- Dissatisfied with Staff | |
| Knowledge</span | |
| > | |
| </div> | |
| <p class="text-cba-light-grey mt-4" style="font-size: 0.7em;"> | |
| This feedback points to systemic technical challenges in knowledge dissemination and real-time information access for staff. | |
| </p> | |
| </div> | |
| <div | |
| class="column-right flex flex-col justify-center items-center fragment" | |
| > | |
| <div | |
| class="infographic-box bg-cba-dark-grey text-white infographic-box-medium" | |
| > | |
| <div class="text-5xl mb-3">confused</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Technical Need: Dynamic Knowledge Systems | |
| </h4> | |
| <p | |
| style="font-size: 0.7em" | |
| class="opacity-80" | |
| > | |
| Challenge: Ensuring staff provide accurate, real-time information by dynamically surfacing relevant data and solutions based on nuanced customer queries. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <p | |
| class="text-cba-light-grey mt-8" | |
| style="font-size: 0.7em" | |
| > | |
| Source: CBA MFI Customer Verbatim, April 2025 (Page | |
| 13) - illustrating raw data. | |
| </p> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">7 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full" | |
| > | |
| <h2 class="text-white">The Data Blind Spot</h2> | |
| <h3 class="text-cba-yellow"> | |
| Why Current Methods Fall Short for Technical Teams | |
| </h3> | |
| <div | |
| class="grid grid-cols-3 gap-6 mt-12 w-full max-w-5xl" | |
| > | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-6xl mb-4">📝</div> | |
| <h4 | |
| class="text-2xl font-bold text-cba-yellow mb-2" | |
| style="font-size: 1.2em" | |
| > | |
| Traditional NLP | |
| </h4> | |
| <p | |
| style="font-size: 0.8em" | |
| class="text-cba-light-grey" | |
| > | |
| Text-Only: Misses tone, emotion, unspoken | |
| intent. Provides lagging insights based on | |
| transcriptions. | |
| </p> | |
| </div> | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-6xl mb-4">surveys</div> | |
| <h4 | |
| class="text-2xl font-bold text-cba-yellow mb-2" | |
| style="font-size: 1.2em" | |
| > | |
| Retrospective Surveys | |
| </h4> | |
| <p | |
| style="font-size: 0.8em" | |
| class="text-cba-light-grey" | |
| > | |
| After-the-Fact: Limited by questions, recall | |
| bias. No real-time alerts or spontaneous | |
| feedback. | |
| </p> | |
| </div> | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-6xl mb-4">📊</div> | |
| <h4 | |
| class="text-2xl font-bold text-cba-yellow mb-2" | |
| style="font-size: 1.2em" | |
| > | |
| Lagging Analytics | |
| </h4> | |
| <p | |
| style="font-size: 0.8em" | |
| class="text-cba-light-grey" | |
| > | |
| Historical Data: Shows *what* happened | |
| (e.g., NPS decline), not *why* it's | |
| happening at the moment of interaction. | |
| </p> | |
| </div> | |
| </div> | |
| <p class="text-white-700 mt-8" style="font-size: 0.9em"> | |
| We are reacting to problems, not proactively | |
| preventing them. Our tech stack needs to enable foresight over hindsight. | |
| </p> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">8 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full" | |
| > | |
| <h2 class="text-white">The Cost of a Reactive Technical Approach</h2> | |
| <h3 class="text-cba-yellow"> | |
| Impacts on System Efficiency & Technical Debt | |
| </h3> | |
| <div | |
| class="grid grid-cols-2 gap-8 mt-12 w-full max-w-4xl" | |
| > | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">💔</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Inefficient Customer Journey Orchestration | |
| </h4> | |
| <p style="font-size: 0.7em" class="opacity-80"> | |
| Delayed insights prevent timely, automated system responses, leading to manual interventions. | |
| </p> | |
| </div> | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">💸</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Increased Manual Operational Overhead | |
| </h4> | |
| <p style="font-size: 0.7em" class="opacity-80"> | |
| Higher AHT for escalated issues due to lack of real-time AI guidance. | |
| </p> | |
| </div> | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">🐌</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Slowed Feature Development & Iteration | |
| </h4> | |
| <p style="font-size: 0.7em" class="opacity-80"> | |
| Lagging feedback cycles impede agile product development and rapid adaptation to user needs. | |
| </p> | |
| </div> | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">📉</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Suboptimal Data Utilization | |
| </h4> | |
| <p style="font-size: 0.7em" class="opacity-80"> | |
| Vast amounts of unstructured data remain unanalyzed, representing untapped technical potential. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">9 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full" | |
| > | |
| <h2 class="text-white">The Paradigm Shift</h2> | |
| <h3 class="text-cba-yellow"> | |
| Introducing Multimodal Large Language Models | |
| </h3> | |
| <div | |
| class="flex items-center justify-center space-x-8 mt-12" | |
| > | |
| <div | |
| class="infographic-box infographic-box-large bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-6xl mb-4">📝</div> | |
| <h4 | |
| class="text-2xl font-bold text-cba-yellow mb-2" | |
| style="font-size: 1.2em" | |
| > | |
| Text Modality | |
| </h4> | |
| <p | |
| class="text-lg text-cba-light-grey" | |
| style="font-size: 0.8em" | |
| > | |
| Transcribed Words | |
| </p> | |
| <p | |
| class="text-sm opacity-80 mt-2" | |
| style="font-size: 0.6em" | |
| > | |
| What is said | |
| </p> | |
| </div> | |
| <div class="text-6xl text-cba-yellow">+</div> | |
| <div | |
| class="infographic-box infographic-box-large bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-6xl mb-4">🗣️</div> | |
| <h4 | |
| class="text-2xl font-bold text-cba-yellow mb-2" | |
| style="font-size: 1.2em" | |
| > | |
| Speech Modality | |
| </h4> | |
| <p | |
| class="text-lg text-cba-light-grey" | |
| style="font-size: 0.8em" | |
| > | |
| Tone, Pitch, Volume, Cadence | |
| </p> | |
| <p | |
| class="text-sm opacity-80 mt-2" | |
| style="font-size: 0.6em" | |
| > | |
| How it is said | |
| </p> | |
| </div> | |
| <div class="arrow-right"></div> | |
| <div | |
| class="infographic-box infographic-box-large bg-cba-yellow text-cba-black fragment" | |
| > | |
| <div class="text-6xl mb-4">🧠</div> | |
| <h4 | |
| class="text-2xl font-bold" | |
| style="font-size: 1.2em" | |
| > | |
| Multimodal LLM | |
| </h4> | |
| <p class="text-lg" style="font-size: 0.8em"> | |
| Deep Contextual Understanding | |
| </p> | |
| <p | |
| class="text-sm opacity-80 mt-2" | |
| style="font-size: 0.6em" | |
| > | |
| True Intent & Emotion | |
| </p> | |
| </div> | |
| </div> | |
| <p class="text-white-700 mt-8" style="font-size: 0.9em"> | |
| Unlocking insights that were previously | |
| imperceptible. | |
| </p> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">10 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full" | |
| > | |
| <h2 class="text-white">How Multimodal LLMs Work</h2> | |
| <h3 class="text-cba-yellow"> | |
| Capturing Nuance: Tone, Emotion, Intent | |
| </h3> | |
| <div | |
| class="grid grid-cols-3 gap-6 mt-12 w-full max-w-5xl" | |
| > | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">🗣️</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Voice Tone & Pitch | |
| </h4> | |
| <p style="font-size: 0.7em" class="opacity-80"> | |
| Detects anger, calm, urgency, satisfaction. | |
| </p> | |
| </div> | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">😟</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Emotional State | |
| </h4> | |
| <p style="font-size: 0.7em" class="opacity-80"> | |
| Identifies frustration, confusion, delight, | |
| anxiety. | |
| </p> | |
| </div> | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">🤔</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Implicit Intent | |
| </h4> | |
| <p style="font-size: 0.7em" class="opacity-80"> | |
| Understands unstated needs or hidden | |
| dissatisfaction. | |
| </p> | |
| </div> | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">🤐</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Speech Patterns | |
| </h4> | |
| <p style="font-size: 0.7em" class="opacity-80"> | |
| Analyzes pauses, interruptions, speaking | |
| rate. | |
| </p> | |
| </div> | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">💬</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Contextual Language | |
| </h4> | |
| <p style="font-size: 0.7em" class="opacity-80"> | |
| Understands nuanced phrases and sarcasm. | |
| </p> | |
| </div> | |
| <div | |
| class="infographic-box infographic-box-medium bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">🔥</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Urgency & Intensity | |
| </h4> | |
| <p style="font-size: 0.7em" class="opacity-80"> | |
| Flags high-priority customer situations. | |
| </p> | |
| </div> | |
| </div> | |
| <p class="text-white-700 mt-8" style="font-size: 0.9em"> | |
| Moving from 'what was said' to 'what was truly | |
| meant' programmatically. | |
| </p> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">11 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full" | |
| > | |
| <h2 class="text-white">High-Level Architecture</h2> | |
| <h3 class="text-cba-yellow"> | |
| From Raw Data to Actionable Technical Insights | |
| </h3> | |
| <div | |
| class="mermaid" | |
| style="transform: scale(1.1); margin-top: 1rem" | |
| > | |
| <pre> | |
| %%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#2B2A29', 'primaryTextColor': '#ffffff', 'primaryBorderColor': '#ffcc00', 'lineColor': '#ffcc00', 'textColor': '#ffffff', 'fontFamily': 'Inter'}}}%% | |
| flowchart TD | |
| A[Raw Audio Data] --> B(Multimodal LLM); | |
| B --> C(Deep Understanding); | |
| C --> D(Actionable Insights); | |
| style A fill:#333,stroke:#ffcc00,stroke-width:2px; | |
| style B fill:#333,stroke:#ffffff,color:#ffffff; | |
| style C fill:#333,stroke:#ffcc00,stroke-width:2px; | |
| style D fill:#ffcc00,stroke:#000,color:#000,font-weight:bold; | |
| </pre> | |
| </div> | |
| <p class="text-white-700 mt-8" style="font-size: 0.9em"> | |
| A continuous feedback loop for intelligent | |
| decision-making, enabling automated system responses. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Flywheel of Insight - kept as is, per request --> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">12 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full" | |
| > | |
| <h2 class="text-white">The Flywheel of Insight</h2> | |
| <h3 class="text-cba-yellow"> | |
| Driving Continuous Technical Capability Improvement | |
| </h3> | |
| <div | |
| class="mermaid" | |
| style="transform: scale(1.1); margin-top: 2rem; width: 90%;" | |
| > | |
| <pre> | |
| %%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#2B2A29', 'primaryTextColor': '#ffffff', 'primaryBorderColor': '#ffcc00', 'lineColor': '#ffcc00', 'textColor': '#ffffff', 'fontFamily': 'Inter'}}}%% | |
| flowchart LR | |
| A[Capture Raw Data] -- Interpret --> B(Generate Insights); | |
| B -- Apply --> C(Actionable Intervention); | |
| C -- Measure --> D(Refine Strategy); | |
| D -- Feed Back --> A; | |
| style A fill:#333,stroke:#ffcc00,stroke-width:2px; | |
| style B fill:#333,stroke:#ffffff,color:#ffffff; | |
| style C fill:#ffcc00,stroke:#000,color:#000,font-weight:bold; | |
| style D fill:#333,stroke:#ffcc00,stroke-width:2px; | |
| </pre> | |
| </div> | |
| <p class="text-white-700 mt-8" style="font-size: 0.9em"> | |
| A continuous cycle where each stage amplifies the next, creating compounding technical value. | |
| </p> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">13 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full text-left" | |
| > | |
| <h2 class="text-white"> | |
| New Data Points, New Analytics | |
| </h2> | |
| <h3 class="text-cba-yellow"> | |
| Unlocking Previously Hidden Customer Insights for System Optimization | |
| </h3> | |
| <div | |
| class="grid grid-cols-2 gap-8 mt-12 w-full max-w-5xl" | |
| > | |
| <div class="flex items-start gap-4"> | |
| <span class="text-5xl text-cba-yellow">📈</span> | |
| <div> | |
| <h4 | |
| class="text-2xl font-bold text-white mb-1" | |
| style="font-size: 1.2em" | |
| > | |
| Emotional Intensity Scores | |
| </h4> | |
| <p | |
| class="text-lg text-cba-light-grey" | |
| style="font-size: 0.8em" | |
| > | |
| Quantify frustration, urgency, delight | |
| during interactions. *Technical impact: Identify triggers for automated system re-routing or enhanced agent support.* | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-4"> | |
| <span class="text-5xl text-cba-yellow">❓</span> | |
| <div> | |
| <h4 | |
| class="text-2xl font-bold text-white mb-1" | |
| style="font-size: 1.2em" | |
| > | |
| Unstated Needs & Pain Points | |
| </h4> | |
| <p | |
| class="text-lg text-cba-light-grey" | |
| style="font-size: 0.8em" | |
| > | |
| Identify subtle problems customers don't | |
| explicitly articulate. *Technical impact: Fine-tune product feature roadmaps and enhance proactive digital nudges based on implicit signals.* | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-4"> | |
| <span class="text-5xl text-cba-yellow">⚠️</span> | |
| <div> | |
| <h4 | |
| class="text-2xl font-bold text-white mb-1" | |
| style="font-size: 1.2em" | |
| > | |
| Proactive Churn Signals | |
| </h4> | |
| <p | |
| class="text-lg text-cba-light-grey" | |
| style="font-size: 0.8em" | |
| > | |
| Detect early indicators of | |
| dissatisfaction or intent to leave. *Technical impact: Trigger automated retention workflows or prioritize agent follow-ups in CRM systems.* | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-4"> | |
| <span class="text-5xl text-cba-yellow">🤝</span> | |
| <div> | |
| <h4 | |
| class="text-2xl font-bold text-white mb-1" | |
| style="font-size: 1.2em" | |
| > | |
| Agent Empathy & Effectiveness | |
| </h4> | |
| <p | |
| class="text-lg text-cba-light-grey" | |
| style="font-size: 0.8em" | |
| > | |
| Measure soft skills and actual problem | |
| resolution impact. *Technical impact: Develop adaptive training modules and refine conversational AI agent responses based on real-world interactions.* | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">14 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full" | |
| > | |
| <h2 class="text-white">A Fundamental Technical Shift</h2> | |
| <h3 class="text-cba-yellow"> | |
| From Reactive Problem-Solving to Proactive System Intelligence | |
| </h3> | |
| <div class="shift-diagram mt-12"> | |
| <div | |
| class="shift-phase bg-cba-dark-grey text-white fragment" | |
| > | |
| <h4 class="shift-phase-title text-cba-yellow"> | |
| Yesterday: Reactive Systems | |
| </h4> | |
| <p class="shift-phase-description"> | |
| Issue occurs → Manual logging → Batch processing → Delayed reporting → Manual solution implementation. | |
| </p> | |
| <ul | |
| class="list-disc list-inside text-cba-light-grey" | |
| style="font-size: 0.8em; margin-top: 0.5em" | |
| > | |
| <li> | |
| Lagging indicators: Problem identified after impact. | |
| </li> | |
| <li> | |
| Generic responses: One-size-fits-all system logic. | |
| </li> | |
| <li> | |
| Missed opportunities: Technical debt accumulates from unaddressed system inefficiencies. | |
| </li> | |
| </ul> | |
| </div> | |
| <span class="shift-arrow-down">↓</span> | |
| <div | |
| class="shift-phase bg-cba-yellow text-cba-black fragment" | |
| > | |
| <h4 class="shift-phase-title"> | |
| Tomorrow: Proactive Systems | |
| </h4> | |
| <p class="shift-phase-description"> | |
| Real-time signal detection → Automated insight generation → Targeted system intervention → Problem mitigated / Feature enhanced. | |
| </p> | |
| <ul | |
| class="list-disc list-inside text-cba-black" | |
| style="font-size: 0.8em; margin-top: 0.5em" | |
| > | |
| <li> | |
| Leading indicators: Detect anomalies as they happen. | |
| </li> | |
| <li> | |
| Personalized interactions: Dynamically adapted system workflows. | |
| </li> | |
| <li> | |
| Anticipated needs: Address unspoken system requirements through predictive analytics. | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <p class="text-white-700 mt-8" style="font-size: 0.9em"> | |
| Foresight over hindsight: engineering a new era of proactive system management. | |
| </p> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">15 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full text-left" | |
| > | |
| <h2 class="text-white"> | |
| Unlocking Proactive Intelligence | |
| </h2> | |
| <h3 class="text-cba-yellow"> | |
| Use Case 1: Real-time Agent System Enhancements | |
| </h3> | |
| <div | |
| class="use-case-card w-full max-w-4xl mt-12 fragment" | |
| > | |
| <span class="use-case-icon">📞✨</span> | |
| <h4 class="use-case-title"> | |
| Real-time Agent Coaching & Systemic Support | |
| </h4> | |
| <ul | |
| style="font-size: 0.9em" | |
| class="list-disc list-inside" | |
| > | |
| <li class="fragment"> | |
| Detects escalating customer frustration or | |
| confusion during calls via multimodal analysis. | |
| </li> | |
| <li class="fragment"> | |
| Prompts agents with empathetic language or | |
| de-escalation techniques directly in their console, leveraging real-time data streams. | |
| </li> | |
| <li class="fragment"> | |
| Provides instant access to relevant | |
| knowledge base articles tailored to the | |
| real-time conversation context, reducing manual search time. | |
| </li> | |
| <li class="fragment"> | |
| Identifies moments of high-priority issues | |
| for immediate escalation to a supervisor, | |
| optimizing call routing and resource allocation. | |
| </li> | |
| </ul> | |
| <div class="use-case-impact fragment"> | |
| **Technical Impact:** Enables real-time, context-aware agent prompts improving resolution efficiency, reduces manual information lookup, and optimizes supervisor intervention logic. Directly addresses challenges in dynamic knowledge retrieval and adaptive system response. | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">16 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full text-left" | |
| > | |
| <h2 class="text-white"> | |
| Example: Real-time Agent Coaching | |
| </h2> | |
| <h3 class="text-cba-yellow"> | |
| Automated De-escalation & Information Retrieval | |
| </h3> | |
| <div | |
| class="flex items-center justify-center gap-8 mt-12 w-full" | |
| > | |
| <div | |
| class="infographic-box infographic-box-large bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">🗣️😡</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Customer Interaction: Loan Application Delay | |
| </h4> | |
| <p | |
| class="text-lg text-cba-light-grey" | |
| style="font-size: 0.8em" | |
| > | |
| Customer: "I've been waiting for my home | |
| loan approval for weeks! This is | |
| unacceptable, I need an answer *now*!" | |
| (Raised voice, agitated tone, rapid speech) | |
| </p> | |
| </div> | |
| <span class="llm-arrow">→</span> | |
| <div | |
| class="infographic-box infographic-box-large bg-cba-yellow text-cba-black fragment" | |
| > | |
| <div class="text-5xl mb-3">💡👩💼</div> | |
| <h4 | |
| class="text-xl font-bold" | |
| style="font-size: 1.1em" | |
| > | |
| LLM-Powered Agent Console Overlay | |
| </h4> | |
| <p class="text-lg" style="font-size: 0.8em"> | |
| **Emotion Detected:** High Frustration, | |
| Urgency. **Key Topic:** Home Loan Approval. | |
| **Agent Prompt:** "Acknowledge frustration | |
| directly. Check loan status: [Loan ID | |
| XXXXX]. Suggest: 'I understand this delay is | |
| concerning. Let me pull up your application | |
| and get you an immediate update, or escalate | |
| to a specialist if needed.'" | |
| </p> | |
| </div> | |
| </div> | |
| <p class="text-white-700 mt-8" style="font-size: 0.8em"> | |
| **Technical Impact:** Enables real-time multimodal analysis to trigger dynamic content injection into agent UIs, improving resolution and reducing churn signals. | |
| </p> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">17 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full text-left" | |
| > | |
| <h2 class="text-white"> | |
| Example: Proactive Issue Resolution | |
| </h2> | |
| <h3 class="text-cba-yellow"> | |
| Anticipating Needs & Automating Interventions: Digital Onboarding | |
| </h3> | |
| <div | |
| class="flex items-center justify-center gap-8 mt-12 w-full" | |
| > | |
| <div | |
| class="infographic-box infographic-box-large bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">💬🤔</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Customer Interaction: Digital Onboarding | |
| </h4> | |
| <p | |
| class="text-lg text-cba-light-grey" | |
| style="font-size: 0.8em" | |
| > | |
| Customer: "The online account opening | |
| process seems... pretty straightforward. | |
| Just making sure I haven't missed anything | |
| about linking my existing accounts." (Slight | |
| hesitation, unsure tone on 'anything') | |
| </p> | |
| </div> | |
| <span class="llm-arrow">→</span> | |
| <div | |
| class="infographic-box infographic-box-large bg-cba-yellow text-cba-black fragment" | |
| > | |
| <div class="text-5xl mb-3">📧✅</div> | |
| <h4 | |
| class="text-xl font-bold" | |
| style="font-size: 1.1em" | |
| > | |
| LLM-Triggered Proactive Intervention | |
| </h4> | |
| <p class="text-lg" style="font-size: 0.8em"> | |
| **LLM Detects:** Potential underlying | |
| confusion despite verbal assurance. | |
| **Action:** Triggers automated email | |
| post-call with detailed, step-by-step | |
| instructions for linking accounts and a | |
| direct link to a video tutorial, reducing | |
| potential future friction and improving | |
| 'Ease of using self-service channels'. | |
| </p> | |
| </div> | |
| </div> | |
| <p class="text-white-700 mt-8" style="font-size: 0.8em"> | |
| **Technical Impact:** Enables proactive, automated system responses based on subtle interaction cues, reducing future support load and enhancing user self-service adoption. | |
| </p> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">18 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full text-left" | |
| > | |
| <h2 class="text-white">Business Banking: Technical Enablers</h2> | |
| <h3 class="text-cba-yellow"> | |
| Direct System Augmentation & Enhanced CRM Capabilities | |
| </h3> | |
| <div | |
| class="use-case-card w-full max-w-4xl mt-12 fragment" | |
| > | |
| <span class="use-case-icon">🤝💰</span> | |
| <h4 class="use-case-title"> | |
| Proactive Relationship Management Augmentation | |
| </h4> | |
| <ul | |
| style="font-size: 0.9em" | |
| class="list-disc list-inside" | |
| > | |
| <li class="fragment"> | |
| Identifies specific business challenges and | |
| growth opportunities from verbal cues in RM | |
| conversations for CRM enrichment. | |
| </li> | |
| <li class="fragment"> | |
| Flags subtle signs of financial stress or | |
| industry-specific concerns, triggering early | |
| warning system alerts. | |
| </li> | |
| <li class="fragment"> | |
| Enables Relationship Managers with AI-curated insights to proactively | |
| offer tailored solutions and advice (e.g., | |
| flexible financing, cash flow management | |
| tools) via integrated platforms. | |
| </li> | |
| <li class="fragment"> | |
| Provides RMs with deeper context on customer | |
| needs before scheduled engagements through enriched customer profiles. | |
| </li> | |
| </ul> | |
| <div class="use-case-impact fragment"> | |
| **Technical Impact:** Integrates multimodal AI into CRM systems for enhanced customer data, enabling predictive analytics for churn and growth, and providing actionable insights for Relationship Managers. | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">19 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full text-left" | |
| > | |
| <h2 class="text-white">Example: Business Banking</h2> | |
| <h3 class="text-cba-yellow"> | |
| AI-Driven Growth Opportunity Identification | |
| </h3> | |
| <div | |
| class="flex items-center justify-center gap-8 mt-12 w-full" | |
| > | |
| <div | |
| class="infographic-box infographic-box-large bg-cba-dark-grey text-white fragment" | |
| > | |
| <div class="text-5xl mb-3">🏢📈</div> | |
| <h4 | |
| class="text-xl font-bold text-cba-yellow" | |
| style="font-size: 1.1em" | |
| > | |
| Business Owner Conversation | |
| </h4> | |
| <p | |
| class="text-lg text-cba-light-grey" | |
| style="font-size: 0.8em" | |
| > | |
| "Yes, just handling this payment. Things are | |
| busy – we just secured a new contract, | |
| looking to expand our operations soon." | |
| (Enthusiastic tone, slight underlying | |
| pressure) | |
| </p> | |
| </div> | |
| <span class="llm-arrow">→</span> | |
| <div | |
| class="infographic-box infographic-box-large bg-cba-yellow text-cba-black fragment" | |
| > | |
| <div class="text-5xl mb-3">💼💡</div> | |
| <h4 | |
| class="text-xl font-bold" | |
| style="font-size: 1.1em" | |
| > | |
| LLM-Driven RM Action Trigger | |
| </h4> | |
| <p class="text-lg" style="font-size: 0.8em"> | |
| **LLM Flags:** 'Expansion intent', 'Growth | |
| phase' keywords combined with positive sentiment. **Action:** Triggers automated notification to RM with tailored info on business expansion | |
| loans, cash flow solutions, or invites to | |
| business growth workshops, enhancing proactive client engagement capabilities. | |
| </p> | |
| </div> | |
| </div> | |
| <p class="text-white-700 mt-8" style="font-size: 0.8em"> | |
| **Technical Impact:** Develops a proactive AI trigger system to identify business growth opportunities and automate targeted RM engagement, improving data-driven outreach. | |
| </p> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">20 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full text-left" | |
| > | |
| <h2 class="text-white">Talent & Culture: Technical Training Solutions</h2> | |
| <h3 class="text-cba-yellow"> | |
| Empowering Our People Through Data-Driven Development | |
| </h3> | |
| <div | |
| class="use-case-card w-full max-w-4xl mt-12 fragment" | |
| > | |
| <span class="use-case-icon">👩🏫🧠</span> | |
| <h4 class="use-case-title"> | |
| Personalized Training & Performance Enhancement Systems | |
| </h4> | |
| <ul | |
| style="font-size: 0.9em" | |
| class="list-disc list-inside" | |
| > | |
| <li class="fragment"> | |
| Identifies specific knowledge gaps or | |
| communication weaknesses in agent | |
| interactions (e.g., frequent "ums" or | |
| pauses, incorrect product information | |
| provided) through audio analytics. | |
| </li> | |
| <li class="fragment"> | |
| Measures agent empathy and de-escalation | |
| effectiveness through multimodal cues, | |
| correlating agent tone shifts with customer | |
| emotional responses to inform training modules. | |
| </li> | |
| <li class="fragment"> | |
| Pinpoints best practices from | |
| high-performing agents, creating shareable | |
| learning modules based on successful | |
| interactions that lead to high customer | |
| satisfaction, for automated content generation. | |
| </li> | |
| <li class="fragment"> | |
| Generates personalized training | |
| recommendations and coaching points for | |
| individual agents, moving away from generic, | |
| broad training. Example: "Focus on X product | |
| features," or "Practice de-escalation | |
| techniques for frustrated callers." | |
| </li> | |
| </ul> | |
| <div class="use-case-impact fragment"> | |
| **Technical Impact:** Automates identification of agent skill gaps based on interaction analytics, enabling data-driven, personalized training module generation and a more adaptive learning system for continuous performance improvement. | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">21 / 22</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center justify-center h-full" | |
| > | |
| <h2 class="text-white">Strategic Imperative: Technical Leadership</h2> | |
| <h1 class="text-cba-yellow">Invest in Advanced AI Infrastructure.</h1> | |
| <h1 class="text-cba-yellow">Lead with Data-Driven Capabilities.</h1> | |
| <p class="mt-8" style="font-size: 1em"> | |
| Drive Proactive System Decisions, AI-Powered Product Innovation, and | |
| Personalized Service Automation. | |
| </p> | |
| <p style="font-size: 1em"> | |
| Elevating Technical Capabilities for Enhanced Customer Experience. | |
| </p> | |
| <div | |
| class="absolute bottom-10 right-10 text-xl font-bold" | |
| > | |
| <span class="text-cba-yellow" | |
| >Commonwealth Bank</span | |
| > | |
| <span class="text-white">of Australia</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gradio App Embed Slide --> | |
| <section> | |
| <div class="slide-header"> | |
| <span class="title">CBA AI Acceleration</span> | |
| <span class="page-number">22 / 22</span> | |
| </div> | |
| <div class="flex flex-col items-center justify-center h-full"> | |
| <h2 class="text-white">Live Demo: Customer Insight Engine</h2> | |
| <h3 class="text-cba-yellow"> | |
| Interact with the Multimodal Analysis Pipeline | |
| </h3> | |
| <p class="text-white-700 mt-4 mb-8" style="font-size: 0.9em;"> | |
| (Requires your Gradio application to be running and accessible) | |
| </p> | |
| <iframe | |
| src="http://127.0.0.1:7860" <!-- REPLACE with the actual URL of your running Gradio app --> | |
| style="width: 100%; height: 80vh; border: none; background-color: #1a1a1a; border-radius: 0.5em;" | |
| title="Gradio Customer Insight Engine" | |
| allow="microphone" | |
| ></iframe> | |
| <p class="text-cba-light-grey mt-4" style="font-size: 0.7em;"> | |
| To run this demo, ensure your Gradio application is launched (e.g., using `app.launch()`) and accessible via the specified URL. | |
| </p> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <div class="nav-buttons"> | |
| <button id="prevBtn" class="nav-button">‹</button> | |
| <button id="nextBtn" class="nav-button">›</button> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.0.5/dist/reveal.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.0.5/plugin/notes/notes.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/reveal.js-mermaid-plugin@11.6.0/plugin/mermaid/mermaid.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/loadcontent/plugin.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/animate/plugin.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js"></script> | |
| <script> | |
| // Manually define slidesData for consistent page numbering and content | |
| const slidesData = Array.from( | |
| document.querySelectorAll(".slides section"), | |
| ).map((section, index) => { | |
| return { | |
| title: section.querySelector(".slide-header .title") | |
| ? section.querySelector(".slide-header .title") | |
| .textContent | |
| : "CBA AI Acceleration", | |
| content: "", | |
| pageNumber: index + 1, | |
| }; | |
| }); | |
| Reveal.initialize({ | |
| history: false, | |
| controls: false, | |
| progress: true, | |
| center: true, | |
| width: 1920, | |
| height: 1080, | |
| transition: "slide", | |
| backgroundTransition: "fade", | |
| plugins: [ | |
| RevealNotes, | |
| RevealMermaid, | |
| RevealLoadContent, | |
| RevealAnimate, | |
| ], | |
| mermaid: {}, | |
| animate: { | |
| autoplay: true, | |
| }, | |
| }); | |
| // Update page numbers after Reveal.js initializes and potentially reorders slides | |
| Reveal.on("slidechanged", (event) => { | |
| const totalSlides = Reveal.getSlides().length; | |
| const currentSlideIndex = Reveal.getIndices().h; | |
| const pageNumberSpan = document.querySelector( | |
| ".slide-header .page-number", | |
| ); | |
| if (pageNumberSpan) { | |
| pageNumberSpan.textContent = `${currentSlideIndex + 1} / ${totalSlides}`; | |
| } | |
| }); | |
| // Set initial page number and attach navigation button listeners | |
| document.addEventListener("DOMContentLoaded", () => { | |
| const totalSlides = Reveal.getSlides().length; | |
| const pageNumberSpan = document.querySelector( | |
| ".slide-header .page-number", | |
| ); | |
| if (pageNumberSpan) { | |
| pageNumberSpan.textContent = `1 / ${totalSlides}`; | |
| } | |
| const nextBtn = document.getElementById("nextBtn"); | |
| const prevBtn = document.getElementById("prevBtn"); | |
| if (nextBtn && prevBtn) { | |
| nextBtn.addEventListener("click", () => Reveal.next()); | |
| prevBtn.addEventListener("click", () => Reveal.prev()); | |
| } | |
| // Add touch/swipe gestures for mobile navigation | |
| let touchStartX = 0; | |
| let touchEndX = 0; | |
| document.addEventListener("touchstart", (e) => { | |
| touchStartX = e.changedTouches[0].screenX; | |
| }); | |
| document.addEventListener("touchend", (e) => { | |
| touchEndX = e.changedTouches[0].screenX; | |
| handleGesture(); | |
| }); | |
| function handleGesture() { | |
| if (touchEndX < touchStartX - 50) { | |
| // Swiped left | |
| if ( | |
| Reveal.getIndices().h < | |
| Reveal.getSlides().length - 1 | |
| ) { | |
| Reveal.next(); | |
| } | |
| } else if (touchEndX > touchStartX + 50) { | |
| // Swiped right | |
| if (Reveal.getIndices().h > 0) { | |
| Reveal.prev(); | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |