🚧 全局搜索功能开发中,敬请期待
The First Knight — Case Study
Product Case Study

The First Knight

一款以「王国的首席骑士」世界观情感驱动的游戏化短期任务管理系统,帮助用户以"骑士冒险"的叙事框架管理日常目标与进度,将枯燥的任务执行转化为有仪式感的成长旅程。

Background

User Pain Point

传统任务管理工具缺乏情感连接,用户易感到自律焦虑,难以维持长期使用动力。

Core Goal

通过游戏化世界观叙事和简易功能体验降低执行阻力,提升用户任务完成率与产品粘性。

Timeline

2025.06 — 2025.08
约 8 周

Role

独立完成用户调研、交互设计、AI协作前端开发、BaaS 部署、跨端打包、官网设计与文档撰写。

Key Results

10

项目阶段

8

从 0 到 1 交付

1

独立全链路

Tech Stack

文档 & 规划 &调研

X-mind 飞书 问卷星

设计 & 开发

Notion AI协助HTML / CSS / JS Tailwind CSS

后端 & 部署

Supabase Capacitor Android Studio GitHub Pages Cloudflare

Workflow

Process

从需求萌芽到产品落地的完整工作流,每个阶段都有明确的产出与决策依据。

Phase 01

痛点产生 & 需求发现

基于Notion存在交互薄弱、切换操作繁琐等痛点,萌生将Notion内的任务管理文档转化为可独立运行、同时带有原来游戏化叙事的网页。

产出物

Notion原始版本页面 · 初步功能需求清单 · MVP边界定义(P0/P1/P2)

Phase 02

项目规划 & 管理

使用 X-mind 进行项目阶段拆解与任务规划,产生一套项目管理计划表。

产出物

项目管理mind-map

Xmind 项目拆解图
查看 Xmind 完整图

Phase 03

搭建项目文档框架

搭建该产品项目需求文档的基本框架,明确用户体验分析范围。

产出物

项目文档框架

查看 项目需求文档

Phase 04

用户画像&竞品分析

基于自我真实痛点向外推导假设用户画像:面向18-25岁习惯自我规划、厌烦传统工具功能繁琐和带来自律焦虑特点,期待游戏化日程安排工具的群体,并通过竞品分析获得行业缺口洞察。

产出物

用户假设画像表格 · 竞品分析表 · 产品设计原则文档

以下为假设用户画像图

竞品分析可视化

Phase 05

信息架构 & 交互设计

围绕"愿景灵感 → 当日任务 → 周任务拆解 → 月度复盘"四大tab搭建用户交互体验系统。

产出物

信息架构图 · 导航结构图 · 用户旅程地图 · 世界观词汇规范

用户旅程地图

以上为产品信息架构图

用户旅程地图

以上为用户旅程地图

Phase 06

代码撰写 & 功能迭代

我负责交互逻辑和功能需求描述、prompt撰写、功能漏洞检查;AI负责撰写网页代码和提出建议。

AI负责撰写网页代码和提出建议。每轮迭代遵循:发现问题→撰写提示词→实现优化→更新迭代记录。

产出物

提示词 · 网页代码 · 项目迭代记录

查看 项目需求文档

Phase 07

登录数据库 & 网页部署 & APK打包

登录数据库部署:AI指导下对比LocalStorage、Firebase、Leancloud,最终选用Supabase部署用户账户登录的数据库,实现邮箱注册登录、云端JSON数据存储等。

网页部署:并用Github和Cloudflare部署为独立网页;

移动端打包:使用Capacitor将网页封装、Andriod Studio构建APK安装包,并用github获取下载URL。

产出物

拥有登录系统的独立网页Demo · APK安装包 · APK下载直链

查看 The First Knight 网页

Phase 08

设计产品宣传网页

设计产品宣传网页样式和内容并撰写prompt,AI协助代码落地并进行多轮迭代。

产出物

宣传网页

宣传网页
查看 宣传官网

Phase 09

用户研究问卷设计 & 可用性测试规划

设计潜在需求调研问卷和产品用户体验反馈问卷,并设计用户跳转填写问卷的逻辑链路。

并设计后续可用性测试内容和迭代优先级。

产出物

两份问卷 · 可用性测试提纲 · 带用户问卷的宣传网页和产品

宣传网页
宣传网页
查看 潜在规划者需求调研问卷 查看 产品用户体验反馈问卷

Phase 10

完善项目文档 & 项目复盘与反思

完整走完该产品项目从痛点挖掘与需求落地、用户画像假设、用户体验设计、AI协作代码落地到更新迭代、技术部署、产品宣传包装全链路,检查和完善项目文档,并进行项目复盘与反思总结。

产出物

项目文档

查看 项目需求文档

Self Review

Sessions

🎙️ 项目开发过程中的阶段性自我评审、复盘和安排的模拟会议,经 AI 提炼整理核心要点。

以下内容由模拟会议时的录音转写文本经 AI 智能总结生成,并提炼了项目迭代思考、技术决策与阶段性复盘过程的要点记录进该项目展示网页。

📌 项目管理规划

项目日志框架搭建→功能需求梳理(含数据库/登录系统)→网页部署→用户反馈收集→品牌宣传页制作→作品集整合。

⚠️ 任务优先级调整

原定深大一体化服务平台项目延后,当前聚焦需要更大板块时间的The First Night项目,后续可能同步推进Career OS项目原型图。

🔀 团队协作规范

日志框架搭建:需同步完成用户操作流程图与信息架构图设计,边开发边完善文档,每次迭代的提示词都要记录进文档迭代日志中。

🔎 工作经验复盘总结

1、提示词整合原则:同个功能所有需求需整合为完整提示词后统一提交AI,避免碎片化修改导致token浪费及记忆混乱。

2、任务拆分执行:禁止整体网页修改,采用每日聚焦单个功能模块迭代方式。

📌 项目日志文档收尾工作

今日下午需完成项目日志文档收尾工作,重点完成信息架构图、全局导航图、用户操作流程图、用户旅程图4个图的绘制,并搭建文档框架(预计耗时2小时以上,含AI辅助)。

当日任务要求

网页新增功能:开发团队需同步完成新增功能研究,包括任务设置、数据迁移、版本检查、隐私政策等模块,需形成第二版提示词文档并提交审核(截止时间:今日24:00前)。

🎯 下阶段工作安排

1、部署计划:HTML通过验收后需部署为独立页面,并启动离线APP打包工作。

2、宣传准备:需同步推进广告宣传网页制作、用户反馈调查问卷设计及可用性测试方案制定。

⚠️ 里程碑节点&最终交付物

今日工作为项目关键节点,需完成文档框架搭建、新增功能确认、提示词文档提交三项核心任务,直接影响后续HTML开发质量。

交付物:1、今日0点前:UX设计图完整的项目日志文档、包含完整设置功能的HTML文件;2、明日15:00前:开启部署独立网页工作准备。

📌 昨日项目工作总结

1、项目日志框架搭建:已完成项目日志中UX图框架的初步搭建,部分迭代日志等内容需后续自动填充。

2、功能迭代进展:HTML版本已迭代至第三版。

🎯 当日工作优先级&要求

1、HTML功能迭代收尾:核心功能优先:当日必须完成全部核心功能迭代,禁止新增非必要功能。计划于当日完成全部功能迭代,得到HTML最终版。

2、HTML增加开场动画设计原则:开场动画需控制在2-3秒内,仅新用户可见;禁止设计冗长新手教程。

3、成就系统搁置:因开发周期紧张,原定的成就勋章系统延期至后续版本。

🎯 下阶段工作安排

1、登录系统部署:计划完成HTML最终版本迭代后,次日搭建数据库与登录系统,该节点为项目里程碑,预计耗时较长。

2、调研问卷分工:由UX组负责设计,用户反馈问卷URL将嵌入APP,而需求调研问卷UR嵌入宣传网页,所以反馈问卷嵌入后再部署apk版本。

Retrospective

Review

复盘与反思,记录成长轨迹与下一步方向。

项目收获与能力提升

  • 用户体验研究和设计 — 提升了用户画像推导和假设能力,从用户痛点出发进行信息架构设计
  • 用户调研落地 — 设计并回收两份结构化问卷,将数据驱动决策融入开发流程
  • 视觉系统统一搭建 — 完成产品 + 官网两套视觉体系的设计与一致性维护
  • 完整闭环产品迭代思维 — 从调研到上线全链路独立交付,建立版本管理意识
  • BaaS 后端部署 — 首次独立完成 Supabase 认证体系与数据库 schema 设计
  • WebView 跨端打包 — 掌握 Capacitor + Android Studio 完整 APK 打包流程

项目现存局限与不足

  • 最开始未先进行用户调研再进行用户体验设计,仅从假设用户画像出发设计该产品
  • 真实用户样本量有限,调研结论需更大规模验证
  • AI生成网页代码时仅提供提示词,未先用figma进行原型图设计
  • WebView 方案存在部分原生能力缺失(如系统级推送通知、后台常驻)
  • 账号安全机制尚不完善,缺少双因素认证与异常登录检测
  • My Kingdom 母系统尚未开发,当前 TFK 作为独立子系统运行

后续迭代优化规划

  • 使用小红书、即刻进行产品宣传
  • 启动可用性测试并扩大用户调研规模,收集真实使用反馈驱动 v3.0 功能迭代
  • 启动 My Kingdom 母系统开发,TFK 作为子系统嵌入统一世界观

Designer

About

关于这个项目与设计者。

avatar

琳琳

Product Designer & Developer

深圳大学 网络与新媒体专业在读,专注于用户体验设计与产品管理方向。热爱将创意落地为可交互的数字产品,相信好的设计源于对用户的真实理解。

About This Project

The First Knight 是我独立完成的第一个从 0 到 1 的完整产品项目。它不仅是一个任务管理工具,更是我探索"叙事化产品体验"的起点——如何让功能性产品拥有情感温度,让用户在完成任务的同时感受到成长的仪式感。

这个项目帮助我建立了完整的产品思维框架:从发现痛点、定义需求、设计方案、技术选型、开发迭代到上线运营,每一个环节都让我对"做一个产品"这件事有了更深的理解。