🤔一句话描述需求
字节 IT 运营团队需要根据业务事件,及时更新维护 IT Service 小程序中文章、Banner、公告。但是当前的解决方案是通过和研发协作手动更新内容,无法满足时效性的需求
🎯 设计目标
1. 上线独立运营后台,IT 运营团队可自主更新文章、Banner、公告
2. 给运营提供独立的内容管理系统,提升运维效率,降低人力成本
基础信息
手动配置流程&用户痛点
手动配置流程
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/648ee8bedfa993c0af252cea_%E9%85%8D%E7%BD%AE%E6%B5%81%E7%A8%8B.jpg)
用户痛点
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/648ee9d0d19795aaf3fe2c8c_%E6%B2%9F%E9%80%9A%E6%88%90%E6%9C%AC%E9%AB%98.png)
运营同学在确定好要发布的公告或Banner时,需要通过 IM 和研发保持续沟通
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/648ee9d0464b7cc8abcffb44_%E6%97%B6%E6%95%88%E6%80%A7%E4%BD%8E.png)
发布过程需要和研发频繁飞书沟通,一般耗时 2-3 天才能完成配置,时效低
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/648ee9d0a96e5e16f4a69ae7_%E9%A2%9D%E5%A4%96%E5%B7%A5%E4%BD%9C.png)
Banner、公告的属性维护困难,随着时间推移,历史数据管理困难,维护成本高
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/648ee9d19ae84f3d532de045_%E7%81%B5%E6%B4%BB%E6%80%A7%E4%BD%8E.png)
发布 Banner 需要提前预约研发时间,对研发人力有依赖性,灵活性低
交互设计
Use Case 1: 添加用户
作为一名系统管理员, 我需要添加 IT SD 的运营同学到「运营后台」管理系统中, 这样我才能把他们设置为使用用户, 他们才拥有「运营后台」的访问使用权限。
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/6499a90004e317f96823c542_use%20case%201.png)
关键帧 1:用户列表
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/64a118e36265165d6d5f5528_%E8%BF%90%E8%90%A5%E5%90%8E%E5%8F%B0%20-%20%E7%94%A8%E6%88%B7%E7%AE%A1%E7%90%86.png)
关键帧 2:添加用户
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/649a288e02767c3ebaf5fca3_%E6%B7%BB%E5%8A%A0%E7%94%A8%E6%88%B7.png)
Use Case 2:发布文章
作为一名运营同学, 我需要发布关于 IT 业务事件的文章到「运营后台」的文章列表里,这样字节用户才能在IT service 小程序里搜到这个文章。以及未来配置公告或Banner时,需要链接这里的文章
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/6499a8ff8d7e623e50adbfa2_use%20case%202.png)
关键帧 1:文章列表
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/649a288e9aa29e92e059e134_%E8%BF%90%E8%90%A5%E5%90%8E%E5%8F%B0%20-%20%E7%94%A8%E6%88%B7%E7%AE%A1%E7%90%86%20-%20%E5%88%97%E8%A1%A8%E9%A1%B5-%20default.png)
关键帧 2:新建中英文文章
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/649a288d83b41facdbd9f644_%E5%88%9B%E5%BB%BA%E6%96%87%E7%AB%A0%20-%E4%B8%AD%E6%96%87.png)
关键帧 3:预览文章(手机)
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/649a288e0361c4af1ecda940_%E9%A2%84%E8%A7%88%EF%BC%88%E7%A7%BB%E5%8A%A8%EF%BC%89%E5%85%A8%E5%B1%8F%E5%BC%B9%E7%AA%97%E4%BA%A4%E4%BA%92.png)
关键帧 4:查看文章详情
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/649a288e8e8370638ab31631_%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8%20-%20%E5%B7%B2%E5%8F%91%E5%B8%83%E6%96%87%E7%AB%A0%20-%20%E6%9F%A5%E7%9C%8B%E8%AF%A6%E6%83%85.png)
Use Case 3:发布 Banner
作为一名运营同学, 我需要发布一个 Banner 到 IT Service 小程序里,Banner 内容为「电脑保护小贴士」,而且我还需要设置 Banner 的配图以及跳转链接, 这样我才能通知到大部分字节用户。
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/6499a8ff125570f951b8bf80_use%20case%203.png)
关键帧1:Banner 管理表格
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/649a2cd2c72d3464af8edc37_%E8%BF%90%E8%90%A5%E5%90%8E%E5%8F%B0%20-%20banner%E9%85%8D%E7%BD%AE%E8%A1%A8%E6%A0%BC.png)
关键帧2:添加 Banner 表单
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/649a2ccfb936b2ce672b5684_%E8%BF%90%E8%90%A5%E5%90%8E%E5%8F%B0%20-%20%E9%85%8D%E7%BD%AEBanner%20%20-%20%E6%B7%BB%E5%8A%A0banner.png)
Use Case 4:发布公告
作为一名运营同学, 我需要发布一个公告到 IT Service 小程序里,公告内容为「设备管理工具安装通知」, 这样我才能通知到大部分字节用户去安装这个设备管理工具。
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/6499a8ff42456c31c8970db8_use%20case%204.png)
关键帧1:公告配置表格
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/649a2f295adf3585572b02aa_%E8%BF%90%E8%90%A5%E5%90%8E%E5%8F%B0%20-%20%E5%85%AC%E5%91%8A%E9%85%8D%E7%BD%AE.png)
关键帧2:添加公告
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/649a2f29cdc8dbdaf9b680d3_%E8%BF%90%E8%90%A5%E5%90%8E%E5%8F%B0%20-%20%E6%B7%BB%E5%8A%A0%E5%85%AC%E5%91%8A.png)
可用性测试
基本信息
访谈记录截图
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/64a10fbf1a72bd5a813eaa98_%E8%AE%BF%E8%B0%88%E6%88%AA%E5%9B%BE.png)
基本信息
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/64a111da1b24bb0c6dd0193a_%E6%96%87%E6%A1%88%E8%B0%83%E6%95%B4.png)
文案调整
用户反馈:1/5 用户反馈,「启用」可以理解,但是「发布」会更容易理解
解决方案:启用状态 ➡️ 发布状态
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/64a1132e81b40a3acc0d52b6_%E6%A0%B7%E5%BC%8F%E8%B0%83%E6%95%B4.png)
样式调整
用户反馈:1/5 用户反馈,「启用」可以理解,但是「发布」会更容易理解
解决方案:启用状态 ➡️ 发布状态
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/64a1132e81b40a3acc0d52b6_%E6%A0%B7%E5%BC%8F%E8%B0%83%E6%95%B4.png)
功能调整
用户反馈:KP用户反馈,新增banner 预期在添加的时候就可以进行发布,而不是在列表里二次操作
解决方案:把「公告,文章,banner」的发布操作在添加的时候就提供给用户
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/64a1132d1b24bb0c6dd0fc11_%E4%BA%A4%E4%BA%92%E4%BC%98%E5%8C%96.png)
交互优化/迭代需求
用户反馈:4/5用户反馈,排序操作第一次不能理解,期望拖动排序
解决方案:后期迭代,观察使用数据,确定最大的上线banner以及公告数量后进行交互方案优化
项目总结
![](https://assets-global.website-files.com/63ff735ef847ff1e3a0c5a16/658c3669bf5859f359acf820_%E9%A1%B9%E7%9B%AE%E6%80%BB%E7%BB%93.png)