榜样父母课堂后台
面向运营、销售、教务与管理人员的统一工作平台，通过门户连接 CRM、教务、交易、营销与平台管理，并按角色组织入口和权限。
UI / 交互设计案例 · 多端服务平台
让复杂系统
变成可接续的服务体验
围绕后台、企业微信侧边栏与家庭成长小程序，梳理信息与流程，统一设计规则，完成关键界面、交互方案与设计交付。
- 产品定位
- 家庭教育多端服务平台
- 使用对象
- 运营、销售、教务、管理人员、老师与用户
- 项目状态
- 后台相关模块、企微已上线；小程序设计完成，未进入开发
读取客户档案
回写跟进记录
回写跟进记录
企业微信侧边栏
连接企微会话与 CRM 客户档案，方便老师在沟通时查看客户信息、记录跟进。
家庭成长小程序
UI 交互原型：围绕家庭体验、课程学习、日常行动与记录回顾组织用户端功能。
01整体服务流程
同一业务体系 不同使用现场
公司希望逐步整合各事业部散落在表格和不同平台的客户与业务信息。后台、企微和用户端，分别在不同阶段承担不同任务。
SERVICE TOUCHPOINTS不同产品分别出现在哪些服务场景
横向呈现用户可能经历的服务场景，纵向说明各端的职责。
用户经历从了解服务到持续成长
- 01内容触达内容 / 活动
- 02建立联系添加企业微信
- 03识别客户关联平台档案
- 04持续服务沟通 / 跟进 / 教学
- 05自主成长学习与日常行动
- 06回看与复盘保存记录并重新理解当前关注
后台系统基础系统门户组织 · 人员 · 角色 · 数据权限
让不同岗位进入自己的工作系统，并保持清晰的操作边界。
统一客户身份
通过手机号将企微好友与 CRM 客户档案建立对应。
延续服务记录
沟通前可查看历史记录，本次结果继续同步到客户档案。
后期用户侧方向
在新增小程序方案中，将服务延展为学习、行动与复盘。
INTERNAL PLATFORM内部运营与管理现场
02榜样父母课堂
重新组织复杂后台的使用秩序
后台经历了两次调整。第一阶段，我在保留既有功能的前提下重组信息结构；第二阶段，基于产品与技术确定的新架构，统一入口、操作与反馈规则，并完成关键页面设计。
- 第一阶段 · 信息结构
13 个一级菜单，归为 4 个业务领域
保留既有业务功能，按使用逻辑重组信息归属，减少功能并列与多级嵌套带来的查找负担。
- 第二阶段 · 规范与实现
关键页面直接设计，常规页面按规范实现
建立后台组件与设计规范，直接完成系统门户、平台管理与 CRM 等关键页面；课程平台的常规页面由研发依据规范实现，我负责设计审核、特殊页面补充与质量确认。
- 设计推进 · 评审与核验
从方案评审，跟进到开发走查与验收
与产品经理核对角色、流程和操作边界，评审团队方案与开发实现；走查界面及操作反馈，提交问题并跟进修改与复验。后台与企微覆盖开发核验，小程序交付 UI 交互原型。
旧后台功能多、层级深；进入多系统结构后，使用者很难快速找到功能。
第一阶段｜后台结构优化
产品 / 技术架构调整后
第二阶段｜新架构下的体系化设计
架构调整 / 多系统协作
架构调整后，统一各系统的使用体验
产品与技术团队调整为多个业务系统，由统一门户连接。我在这一结构下，继续完成共用设计规范与关键任务界面。
CASE 01多系统入口与当前位置
门户依据角色呈现可进入的系统；进入子系统后保留“榜样父母课堂”并追加当前系统名称，让用户在独立系统之间切换时仍能确认产品归属与当前位置。
- 01门户完成角色分流
- 02品牌名称保持整体归属
- 03子系统名称确认当前位置
榜样父母课堂平台管理系统
角色可用系统入口统一产品归属
CASE 02人员、角色与权限
从人员获得角色，到角色控制权限。
部门与人员信息直接通过企业微信接口同步，无需在平台重复维护。我将平台内的授权操作分为两步：先为人员分配角色，再按系统配置角色可用的菜单与数据范围。
企业微信同步组织与人员人员分配角色角色配置权限
01
人员配置角色在人员列表中完成当前人员的角色分配
02
角色配置权限按系统、菜单与数据权限分层配置
本案例界面与原型使用示例数据。
CASE 03学员服务任务与操作边界
从班级找到学员，再继续一次服务。
任务组织：以班级为入口、以学员档案为中心、以跟进记录形成闭环。
操作边界：CRM 保留服务视角，异动处理仍落在教务。
01定位服务对象
从班级进入学员
按班级查找学员，列表呈现学员状态、最近跟进与后续服务入口。
02了解历史服务
查看已有跟进记录
身份、处理老师、沟通内容与附件集中呈现，让本次沟通延续已有记录。
03记录本次沟通
添加新的跟进记录
集中填写跟进类型、沟通内容、下次联系时间与附件，保存后供下一次沟通查看参考。
同一案例 / 操作边界
状态清晰可见，操作边界保持明确。
- 接收异动申请
- 执行转班、延期或停课
- 完成处理并更新状态
- 显示异动类型与状态
- 保留提交人与处理说明
- 操作列仅提供查看
同步呈现异动类型与处理状态操作列仅提供“查看”，不在CRM发起处理
TEACHER WORKSPACE老师的客户沟通现场
03企微侧边栏
延伸到企微：在会话中接续服务
侧边栏聚焦会话所需的客户信息、历史记录与高频操作。我在产品经理提供的主要流程上，补足信息读取、状态确认和操作反馈，在长页面中保持身份与操作入口可见。
先建立企微好友与 CRM 客户档案的正确对应。
长页面浏览时，始终知道正在服务哪位客户。
四项服务操作距底部保留 40px，浏览中无需回到页面末端。
2026.07 · 已上线流程演示
01 / 匹配平台客户
用手机号校验客户身份
通过手机号查找 CRM 客户，将当前企业微信好友与平台档案建立对应关系。
当前步骤需要的信息
- 企业微信好友
- 客户手机号
- CRM 客户档案
交互处理
通过手机号建立好友与客户档案的身份对应，再进入确认环节，降低关联错误。
交互闭环：匹配身份 → 核对关联 → 读取档案 → 查看历史 → 新增跟进；保存后返回更新后的历史记录，并同步写入 CRM 客户档案。
企业微信好友手机号验证CRM 客户档案跟进记录同步下一次服务参考
CUSTOMER EXPERIENCE基于需求的用户端设计方案
04家庭成长小程序
延伸到用户端：把需求框架组织成可用页面
小程序是后期新增的设计任务。我将产品经理提出的“测、教、学、练、评”框架转化为页面组织与关键交互。在设计协作中，我划定 AI 的参与范围并给出设计思路，与 AI 共同完成新版方案。以下展示设计方案与交互原型。
设计起点：原有小程序活动入口 → 课程商品 → 订单交易
原有小程序主要围绕活动、课程购买和订单展开。新需求希望增加家庭服务与 AI 支持，因此需要重新考虑用户购课之外还能在这里做什么。
我的方案：把使用延伸到购课之后让用户知道：今天可以学什么、试什么、记下什么。
我保留课程与订单，把主要页面用于呈现学习安排、家庭行动和记录；AI 顾问提供可选建议，帮助用户从一个具体问题开始尝试。
弱化促销 · 价格 · 订单强化任务 · 陪伴 · 档案
方案目标：形成持续使用的路径了解问题 → 学习与尝试 → 记录与回顾
用户可以从家庭体验或课程学习进入，尝试一次家庭行动，保存记录，之后再回看。这是方案希望支持的使用过程，尚未经过实际使用验证。
PRODUCT EXPERIENCE MAP
把五项需求，组织成用户能使用的页面
“测、教、学、练、评”是需求框架，不直接作为五个菜单。我将相关功能放入首页、成长、任务、我的四个入口，再补充 AI 咨询和记录回看。
01四个主要入口按日常使用任务组织导航
首页查看今日内容与推荐成长查看安排、接续学习任务完成安排、尝试练习我的查看档案与个人设置
02需求如何落到功能五个环节各自解决什么问题
- 01 · 测家庭体验选择家庭情境，了解当前问题
- 02 · 教教师课程用课程提供方法与讲解
- 03 · 学继续学习继续学习已加入的课程
- 04 · 练家庭行动尝试家庭行动，写下过程
- 05 · 评阶段回顾回看记录，整理阶段感受
03三类支持如何分工让用户分清建议、安排与记录
AI成长顾问回答问题，提供可跳过的建议老师服务提供服务安排；沟通仍在企微成长档案保存家庭记录，便于之后回看
INTERACTIVE PROTOTYPE
从三个使用场景，了解主要功能
设计方案 · 未进入开发使用场景 1 / 3
01 / 学习与服务安排
把分散的安排放进同一个日历
在“成长”页按日期查看课程学习、家庭练习、回访和活动，再进入对应内容。完成练习后可以记录过程，之后从成长档案回看。
可以使用的功能
- 课程学习
- 家庭练习
- 回访与活动
- 记录回看
为什么这样组织
课程、练习、回访和活动都需要安排时间，因此集中在日历中查看；进入具体内容后，再分别完成学习、行动或服务操作。
点击左侧切换场景，在中间原型中继续浏览。
继续查看完整交互演示
打开完整演示 还可浏览课程学习、活动、服务通知、邀请与设置等页面；可从默认状态重新开始。
原型在项目设计基础上补充了演示细节，人物、安排与记录均为示例。
05设计推进与实现
后台、企微与小程序的推进节点
后台、企微与小程序在不同阶段推进，以下保留关键节点。
AI COLLABORATION IN PRACTICE
AI 协作中的判断与交付
我确定协作范围与设计思路
将需求框架组织成页面与关键交互，划定 AI 参与范围，与 AI 共同完成设计方案。小程序尚未进入开发。
直接交付可运行的网站
除三端设计外，使用 Claude Code CLI 协作完成公司官网，直接交付可运行网站并上线，减少前端开发时间。
2025.11入职，接手旧后台优化→2025.12—2026.05推进后台结构与 UI 优化→2026.06架构调整，继续规范与关键页面设计→2026.07新增企微需求，设计走查后上线→2026.07—2026.08小程序完成设计方案，未开发