The Speech
An interactive learning experience for speech & presentation skills — one speaker, four decisions, many voices.
面向演讲与表达能力的互动学习体验——一位演讲者，四个决定，众多声音。
At a glance
项目概览
Independent project — designed, developed, deployed and published by Yilin Wu / Yiklam Studio.
独立项目 — 由 Yilin Wu / Yiklam Studio 独立设计、开发、部署并上线。
Speech is hard to practise safely
演讲很难安全地练习
Traditional speech teaching often gives learners scripts to memorise, but little room to experiment. When a speaker tries a weak opening or a flat ending in front of a real audience, the cost is public and immediate.
传统演讲教学常让学习者背稿，却很少给他们试错空间。当一名演讲者在真实听众面前尝试一个乏味的开场或平淡的结尾时，代价是公开且即时的。
The Speech was built to create a low-stakes, high-feedback environment: learners make real choices inside a cinematic scenario, see the consequences, and learn why one choice works better than another.
The Speech 旨在创造一个低风险、高反馈的环境：学习者在电影感场景中做出真实选择，看到后果，并理解为什么一种选择优于另一种。
Understand → Plan → Practise → Receive Feedback → Improve
理解 → 规划 → 练习 → 接收反馈 → 改进
The experience is structured as four decision points inside one continuous scenario. Each stage isolates a different speaking skill, gives the learner a choice, then reveals the consequence.
整个体验被设计为一个连续场景中的四个决策点。每一阶段聚焦不同演讲技能，让学习者做出选择，然后揭示后果。
CARE · Make them care
在意 · 让他们在意
The opening must earn attention. Learners choose between a polite greeting, a topic announcement, or a high-stakes hook.
开场必须赢得注意。学习者在礼貌问候、主题宣告与高利害钩子之间选择。
FOLLOW · Make them follow
跟得上 · 让他们跟得上
Once the audience is listening, the speaker must signpost the path: First → Then → Finally.
一旦听众开始倾听，演讲者必须用路标引导路径：首先 → 然后 → 最后。
CHOOSE · Make them choose
说服 · 让他们选择
Learners order four sentences to build a persuasive argument: Claim → Reason → Evidence → Resolution.
学习者将四句排序以构建说服论证：主张 → 理由 → 证据 → 落点。
REMEMBER · Make them remember
记得 · 让他们记得
The closing must leave a seed. Learners decide between a simple END, a conventional CLOSE, or an OPEN ending that starts something.
结尾必须留下种子。学习者在简单“结束”、常规“收尾”与能开启新事的“开启”之间选择。
The learner journey, screen by screen
学习者旅程，逐屏呈现
One continuous scenario moves the learner from a cinematic arrival, through a mission map, and into four decision stages. Swipe through the real screens below.
一个连续场景引导学习者从电影感抵达、经过任务地图，进入四个决策阶段。滑动浏览下方真实画面。
One experience, multiple roles
一个体验，多重角色
The same activity generates different value for different people. The learner practises, the teacher coaches, the programme owner tracks — all from one experience.
同一活动为不同的人创造不同价值：学习者练习、教师指导、项目负责人追踪——都来自同一个体验。
Practice & experience
练习与体验
- Completes activities and makes real choices inside the scenario.
- 在场景中完成活动、做出真实选择。
- Receives immediate, consequence-based feedback.
- 获得即时、基于后果的反馈。
- Develops a speaking strategy to transfer to real situations.
- 形成可迁移到真实场景的表达策略。
Feedback & progress
反馈与进度
- Sees how the class performs at each stage.
- 看到班级在每个阶段的表现。
- Identifies weaknesses and which stage needs scaffolding.
- 识别薄弱点与需要支架的阶段。
- Gives targeted feedback where it matters.
- 在关键处提供针对性反馈。
Data & insights
数据与洞察
- Sees cohort-level data, not just individuals.
- 看到群体级数据，而非个体。
- Monitors completion and identifies learning patterns.
- 监控完成率、识别学习模式。
- Uses signals to inform curriculum and product decisions.
- 用信号指导课程与产品决策。
Product concept / SaaS architecture only. Backend analytics are mocked for portfolio demonstration.
产品概念 / SaaS 架构示意。后台分析为作品展示模拟数据。
Learner → Activity → Performance → Insight → Intervention
学习者 → 活动 → 表现 → 洞察 → 干预
The analytics layer turns raw activity into teaching action. This is a product analytics concept — the data is simulated for portfolio demonstration, but the flow is the real design thinking behind a learning platform.
分析层将原始活动转化为教学行动。这是一个产品分析概念——数据为作品展示模拟，但这一流程正是学习平台背后的真实设计思路。
Learner
学习者
Every choice inside the scenario is a signal.
场景中的每个选择都是一个信号。
Activity
活动
Taps, ordering, attempts, time on stage.
点击、排序、尝试次数、阶段时长。
Performance
表现
Score, completion, failure triggers.
分数、完成率、失败触发点。
Insight
洞察
Where learners struggle, and why.
学习者在哪里卡住、为什么。
Intervention
干预
Feedback, scaffolding, curriculum decisions.
反馈、支架、课程决策。
What the data reveals
数据揭示了什么
- Scaffolding matters: Stage 03 (CHOOSE) is the highest-friction stage — 32% failure, 1.9 avg attempts.支架很重要：第三阶段（说服）摩擦最大——32% 失败率，平均 1.9 次尝试。
- Once they start, they finish: 78.4% of learners who reach Stage 01 complete the full experience.开始就会完成：78.4% 到达第一阶段的学习者会完成整个体验。
- The framework travels: Learners connect the experience to IELTS, presentations, interviews, and team communication.框架可以迁移：学习者将体验与雅思、演讲、面试和团队沟通联系起来。
⌀ Simulated / illustrative data — portfolio demo only.
⌀ 模拟 / 示意数据 — 仅用于作品展示。
From single activity to learning system
从单一活动到学习系统
The architecture separates the learner-facing experience from the data and feedback layers. This separation is what lets the same activity serve students, teachers, and platform managers.
架构将面向学习者的体验与数据、反馈层分离。正是这种分离让同一活动能同时服务学生、教师与平台管理者。
Learning Experience — cinematic scenario, four stages, choices
学习体验 — 电影感场景、四个阶段、选择
Interaction — taps, ordering, replay attempts, time on stage
交互 — 点击、排序、重玩尝试、阶段停留时长
Data — scores, funnel, failure triggers, replay signals
数据 — 分数、漏斗、失败触发点、重玩信号
Feedback — immediate to learner; aggregated to teacher
反馈 — 即时反馈给学习者；聚合后给教师
Learner / Teacher / Platform Value — practice, insight, decision
学习者 / 教师 / 平台价值 — 练习、洞察、决策
One experience, every screen
一个体验，适配每个屏幕
The experience is designed for the device in front of it — not a scaled-down desktop. Desktop offers cinematic breadth; mobile reflows the same content into a touch-first, thumb-reachable layout.
体验为其面前的设备而设计——而非桌面版的缩小。桌面端呈现电影感的全景；移动端将同样内容重排为触控优先、单手可达的布局。
- Responsive layout: fluid grids and breakpoints, not a fixed desktop canvas.响应式布局：流式网格与断点，而非固定桌面画布。
- Mobile-friendly: readable type and stacked decisions, no horizontal scroll.移动友好：可读字号、堆叠决策、无横向滚动。
- Touch-friendly: large tap targets for the core choices.触控友好：核心选择使用大点击目标。
- Content hierarchy: the decision stays prominent on every screen size.内容层级：决策在每种屏幕尺寸下都保持突出。
Experience design + technical build
体验设计 + 技术开发
Experience Design
体验设计
- Learning flow: four stages mapped to attention, comprehension, persuasion, closing
- 学习流程：四阶段对应注意力、理解力、说服力、结尾
- Interaction: one decision per screen, consequence-first feedback, replay loop
- 交互：每屏一个决策、后果优先的反馈、重玩循环
- Information architecture: mission map, stage lock/unlock, decision log
- 信息架构：任务地图、阶段解锁、决策记录
- Visual design: cinematic dark UI with layered audio/video, grain, vignette
- 视觉设计：电影感暗色界面，分层音视频、颗粒、暗角
Development
开发
- Frontend: vanilla HTML/CSS/JavaScript, no framework dependency
- 前端：原生 HTML/CSS/JavaScript，无框架依赖
- Media layers: background videos, ambient audio, SFX, all controlled in JS
- 媒体层：背景视频、氛围音、音效，全部 JS 控制
- Responsive: first-class mobile re-layout, not just scaled-down desktop
- 响应式：优先移动端重排，不只是桌面缩小版
- Deployment: static files served from any static host
- 部署：静态文件，可部署到任意静态托管
Deliverables
交付物
- Immersive branching-narrative experience with 4 decision stages (CARE / FOLLOW / CHOOSE / REMEMBER)包含 4 个决策阶段的沉浸式分支叙事体验（在意 / 跟得上 / 说服 / 记得）
- Learner-facing feedback and “See Why” explanations for every outcome面向学习者的反馈与每种结果的“看看为什么”解释
- Transfer section mapping the framework to IELTS, public speaking, graduation, university, and corporate training迁移部分，将框架映射到雅思、公开演讲、毕业演讲、大学教育与企培
- Insights / analytics concept pages for teacher and platform views面向教师与平台视角的洞察 / 分析概念页
- Technical proof-of-concept and standalone Stage 01 demo技术概念验证与独立第一阶段 Demo
What this project demonstrates
这个项目体现了什么
Learning Experience Design
学习体验设计
A full learning arc from attention to transfer, supported by immediate feedback.
从注意力到迁移的完整学习弧线，由即时反馈支撑。
Interaction Design
交互设计
Choices have consequences; failure is recoverable and instructive.
选择有后果；失败可恢复且具有教学意义。
Product Thinking
产品思维
Same activity serves learner, teacher, and institution through data separation.
同一活动通过数据分离服务学习者、教师与机构。
Data-informed Learning
数据驱动学习
Simulated dashboards show how learning data can become teaching action.
模拟仪表盘展示学习数据如何转化为教学行动。
Multi-role System Thinking
多角色系统思维
Designed for learners, teachers, and platform managers from the start.
从一开始就为学习者、教师与平台管理者设计。
eLearning Development
在线学习开发
Custom frontend, layered media, responsive layout, and deployment.
自定义前端、分层媒体、响应式布局与部署。
Experience The Speech
体验 The Speech
Enter the story, make the four decisions, and see how the speech changes.
进入故事，做出四个决定，看看演讲如何变化。