AlertGo：IT运维系统重设计
AlertGo是一个IT团队使用的系统警报监控和记录系统，用于确保交易系统正常运作。在AlertGo上线的同时，提高运维体验以实现更高的效率被提上日程。
在这个项目中，我经过用户研究提炼了 2 个改进目标，并根据 IT 运维的使用习惯重新设计了 UI/UX。此外，我通过学习和使用 JavaScript (Vue) 和 CSS 属性，架起了设计与实施之间的桥梁。
公司
汇丰银行
年份
2024
时长
5个月
项目交付
启发式评估
用户访谈
竞品分析
高保真原型
前端开发
*出于保密目的，姓名、数据和特定功能已被修改或匿名处理。核心过程和结果仍然准确反映我的贡献和学习。
启发式评估
用户体验潜在问题挖掘
通过启发式分析，我在实际操作系统中检查可能影响用户体验的因素。经过亲自测试可用性和利用设计核心原则进行评估，我发现了初次使用者可能遭遇的问题：
启发式评估
用户体验潜在问题挖掘
通过启发式分析，我在实际操作系统中检查可能影响用户体验的因素。经过亲自测试可用性和利用设计核心原则进行评估，我发现了初次使用者可能遭遇的问题：
启发式评估
用户体验潜在问题挖掘
通过启发式分析，我在实际操作系统中检查可能影响用户体验的因素。经过亲自测试可用性和利用设计核心原则进行评估，我发现了初次使用者可能遭遇的问题：
视觉效果杂乱，缺乏可读性
部分按钮和不同背景色的数据行意义不明确
弹窗尺寸固定，缺乏响应式设计
弹窗尺寸固定，缺乏响应式设计
用户访谈
IT 运维如何处理系统警报？
在用户访谈环节，我联系了 6 名 IT 运维，了解了IT警报从发生到工单被关闭的完整流程。访谈中，我就启发式评估中发现的问题和AlertGo平台用户进行确认，并且询问了 IT 运维的日常工作方式，他们如何与系统互动，以及他们AlertGo以及运维流程改进的期望。
用户访谈
IT 运维如何处理系统警报？
在用户访谈环节，我联系了 6 名 IT 运维，了解了IT警报从发生到工单被关闭的完整流程。访谈中，我就启发式评估中发现的问题和AlertGo平台用户进行确认，并且询问了 IT 运维的日常工作方式，他们如何与系统互动，以及他们AlertGo以及运维流程改进的期望。
用户访谈
IT 运维如何处理系统警报？
在用户访谈环节，我联系了 6 名 IT 运维，了解了IT警报从发生到工单被关闭的完整流程。访谈中，我就启发式评估中发现的问题和AlertGo平台用户进行确认，并且询问了 IT 运维的日常工作方式，他们如何与系统互动，以及他们AlertGo以及运维流程改进的期望。
洞察
运维中不同的角色
为了平衡日常开发工作和处理警报，IT团队成员在运维过程中分化出不同的角色。
洞察
运维中不同的角色
为了平衡日常开发工作和处理警报，IT团队成员在运维过程中分化出不同的角色。
洞察
运维中不同的角色
为了平衡日常开发工作和处理警报，IT团队成员在运维过程中分化出不同的角色。
“蝙蝠侠”
主要用户
响应警报、调查问题并在 AlertGo 上记录警报的严重性。
支援者
次要用户
识别未处理的警报，并及时通知对应的“蝙蝠侠”处理警报。
开发组
相关用户
提醒“蝙蝠侠”关注警报；在“蝙蝠侠”无法处理警报的情况下寻找替补人员。
痛点与机会
顺着用户提取页面信息的思路，我总结了痛点和机会。
痛点与机会
顺着用户提取页面信息的思路，我总结了痛点和机会。
痛点与机会
顺着用户提取页面信息的思路，我总结了痛点和机会。
运维系统的服务蓝图
通过询问作为“蝙蝠侠”、支援者或团队成员在一天之中如何开展运维工作，我梳理出服务蓝图以及对整个流程的观察总结。
运维系统的服务蓝图
通过询问作为“蝙蝠侠”、支援者或团队成员在一天之中如何开展运维工作，我梳理出服务蓝图以及对整个流程的观察总结。
运维系统的服务蓝图
通过询问作为“蝙蝠侠”、支援者或团队成员在一天之中如何开展运维工作，我梳理出服务蓝图以及对整个流程的观察总结。
运维拼图
观察 #1
AlertGo 集成了内部渠道、机器人和 Xmatters，背后是多个平台共同支持运维工作的运行。
立即触达
观察 #2
用户希望访问警报和执行操作越简单越好。
速战速决
观察 #3
高效处理alert是运维工作的关键。
目标
我们该如何…
确保"蝙蝠侠"或他们的替补及时响应警报？
加速警报识别的过程，以便更快地解决问题？
目标
我们该如何…
确保"蝙蝠侠"或他们的替补及时响应警报？
加速警报识别的过程，以便更快地解决问题？
目标
我们该如何…
确保"蝙蝠侠"或他们的替补及时响应警报？
加速警报识别的过程，以便更快地解决问题？
竞品分析
向同类产品学习
为了平衡浏览和阅读体验，我研究了市场上各种IT运维平台，并总结出了三种信息呈现思路。在画出快速原型并收集了用户反馈后，我向团队提出了设计方向的构想。
竞品分析
向同类产品学习
为了平衡浏览和阅读体验，我研究了市场上各种IT运维平台，并总结出了三种信息呈现思路。在画出快速原型并收集了用户反馈后，我向团队提出了设计方向的构想。
竞品分析
向同类产品学习
为了平衡浏览和阅读体验，我研究了市场上各种IT运维平台，并总结出了三种信息呈现思路。在画出快速原型并收集了用户反馈后，我向团队提出了设计方向的构想。
卡片式
未采用
简明扼要，包含关键信息。
不同元素之间易于区分。
允许快速采取行动。
卡片设计降低了扫读效率，并缺乏扩展性
列表+详情页
未采用
符合用户心智模型。
更容易关注细节。
丰富的信息和功能空间。
易于扩展。
信息结构无法满足用户对即插即用的期望。
可展开式列表
采用
为用户提供丰富的细节和良好的扫描/阅读体验。
让用户只需点击一下即可采取行动。
为用户提供丰富的细节和良好的扫描/阅读体验。
满足用户执行操作仅需一次点击的期望。
设计与迭代
学习、实践、迭代
项目开发资源有限，作为其中的产品设计师（兼部分前端开发），我要确保设计是易于实现的。为此，我为自己装备了更多的技能，并逐渐迭代设计。
设计与迭代
学习、实践、迭代
项目开发资源有限，作为其中的产品设计师（兼部分前端开发），我要确保设计是易于实现的。为此，我为自己装备了更多的技能，并逐渐迭代设计。
设计与迭代
学习、实践、迭代
项目开发资源有限，作为其中的产品设计师（兼部分前端开发），我要确保设计是易于实现的。为此，我为自己装备了更多的技能，并逐渐迭代设计。
方案·问题一
我们该如何确保"蝙蝠侠"或他们的替补及时响应警报？
我们发现了导致响应系统警报不及时的三个关键原因，并逐一提出解决方案。
方案·问题一
我们该如何确保"蝙蝠侠"或他们的替补及时响应警报？
我们发现了导致响应系统警报不及时的三个关键原因，并逐一提出解决方案。
#1 新警报被归入旧警报组而缺乏有效提示
解决的问题
为了解决这个问题，我提议将警报组在有新警报归入时在主页显示最新警报的信息，以便按时间先后排序时被重新置顶。此外，警报时间从原本的时间戳修改为“几分钟前”的显示方式，紧急程度更易掌握。
#2 页面加载时间可能会很慢，这会影响及时访问。
待解决的问题
在与经验丰富的工程师讨论根本原因后，我提议添加分页功能，以减少一次性的数据加载。
#3 蝙蝠侠可能在接手警报后离开岗位
待解决的问题
不在线的“蝙蝠侠”接手的警报会被高亮显示，以便团队能够及时更换人员处理。
#1 新警报被归入旧警报组而缺乏有效提示
解决的问题
为了解决这个问题，我提议将警报组在有新警报归入时在主页显示最新警报的信息，以便按时间先后排序时被重新置顶。此外，警报时间从原本的时间戳修改为“几分钟前”的显示方式，紧急程度更易掌握。
#2 页面加载时间可能会很慢，这会影响及时访问。
待解决的问题
在与经验丰富的工程师讨论根本原因后，我提议添加分页功能，以减少一次性的数据加载。
#3 蝙蝠侠可能在接手警报后离开岗位
待解决的问题
不在线的“蝙蝠侠”接手的警报会被高亮显示，以便团队能够及时更换人员处理。
#1 新警报被归入旧警报组而缺乏有效提示
解决的问题
为了解决这个问题，我提议将警报组在有新警报归入时在主页显示最新警报的信息，以便按时间先后排序时被重新置顶。此外，警报时间从原本的时间戳修改为“几分钟前”的显示方式，紧急程度更易掌握。
#2 页面加载时间可能会很慢，这会影响及时访问。
待解决的问题
在与经验丰富的工程师讨论根本原因后，我提议添加分页功能，以减少一次性的数据加载。
#3 蝙蝠侠可能在接手警报后离开岗位
待解决的问题
不在线的“蝙蝠侠”接手的警报会被高亮显示，以便团队能够及时更换人员处理。
#1 新警报被归入旧警报组而缺乏有效提示
解决的问题
为了解决这个问题，我提议将警报组在有新警报归入时在主页显示最新警报的信息，以便按时间先后排序时被重新置顶。此外，警报时间从原本的时间戳修改为“几分钟前”的显示方式，紧急程度更易掌握。
#2 页面加载时间可能会很慢，这会影响及时访问。
待解决的问题
在与经验丰富的工程师讨论根本原因后，我提议添加分页功能，以减少一次性的数据加载。
#3 蝙蝠侠可能在接手警报后离开岗位
待解决的问题
不在线的“蝙蝠侠”接手的警报会被高亮显示，以便团队能够及时更换人员处理。
#1 新警报被归入旧警报组而缺乏有效提示
待解决的问题
为了解决这个问题，我提议将警报组在有新警报归入时在主页显示最新警报的信息，以便按时间先后排序时被重新置顶。此外，警报时间从原本的时间戳修改为“几分钟前”的显示方式，紧急程度更易掌握。
#2 页面加载时间可能较慢，导致访问受阻。
待解决的问题
在与经验丰富的工程师讨论根本原因后，我建议添加分页功能，以减少一次的数据负载。
#3 蝙蝠侠可能在接手警报后离开岗位
待解决的问题
不在线的“蝙蝠侠”接手的警报会被高亮显示，以便团队能够及时更换人员处理。
#1 新警报被归入旧警报组而缺乏有效提示
待解决的问题
为了解决这个问题，我提议将警报组在有新警报归入时在主页显示最新警报的信息，以便按时间先后排序时被重新置顶。此外，警报时间从原本的时间戳修改为“几分钟前”的显示方式，紧急程度更易掌握。
#2 页面加载时间可能较慢，导致访问受阻。
待解决的问题
在与经验丰富的工程师讨论根本原因后，我建议添加分页功能，以减少一次的数据负载。
#3 蝙蝠侠可能在接手警报后离开岗位
待解决的问题
不在线的“蝙蝠侠”接手的警报会被高亮显示，以便团队能够及时更换人员处理。
#1 新警报被归入旧警报组而缺乏有效提示
待解决的问题
为了解决这个问题，我提议将警报组在有新警报归入时在主页显示最新警报的信息，以便按时间先后排序时被重新置顶。此外，警报时间从原本的时间戳修改为“几分钟前”的显示方式，紧急程度更易掌握。
#2 页面加载时间可能较慢，导致访问受阻。
待解决的问题
在与经验丰富的工程师讨论根本原因后，我建议添加分页功能，以减少一次的数据负载。
#3 蝙蝠侠可能在接手警报后离开岗位
待解决的问题
不在线的“蝙蝠侠”接手的警报会被高亮显示，以便团队能够及时更换人员处理。
#1 新警报被归入旧警报组而缺乏有效提示
待解决的问题
为了解决这个问题，我提议将警报组在有新警报归入时在主页显示最新警报的信息，以便按时间先后排序时被重新置顶。此外，警报时间从原本的时间戳修改为“几分钟前”的显示方式，紧急程度更易掌握。
#2 页面加载时间可能较慢，导致访问受阻。
待解决的问题
在与经验丰富的工程师讨论根本原因后，我建议添加分页功能，以减少一次的数据负载。
#3 蝙蝠侠可能在接手警报后离开岗位
待解决的问题
不在线的“蝙蝠侠”接手的警报会被高亮显示，以便团队能够及时更换人员处理。
#1 新警报被归入旧警报组而缺乏有效提示
待解决的问题
为了解决这个问题，我提议将警报组在有新警报归入时在主页显示最新警报的信息，以便按时间先后排序时被重新置顶。此外，警报时间从原本的时间戳修改为“几分钟前”的显示方式，紧急程度更易掌握。
#2 页面加载时间可能较慢，导致访问受阻。
待解决的问题
在与经验丰富的工程师讨论根本原因后，我建议添加分页功能，以减少一次的数据负载。
#3 蝙蝠侠可能在接手警报后离开岗位
待解决的问题
不在线的“蝙蝠侠”接手的警报会被高亮显示，以便团队能够及时更换人员处理。
#1 新警报被归入旧警报组而缺乏有效提示
待解决的问题
为了解决这个问题，我提议将警报组在有新警报归入时在主页显示最新警报的信息，以便按时间先后排序时被重新置顶。此外，警报时间从原本的时间戳修改为“几分钟前”的显示方式，紧急程度更易掌握。
#2 页面加载时间可能较慢，导致访问受阻。
待解决的问题
在与经验丰富的工程师讨论根本原因后，我建议添加分页功能，以减少一次的数据负载。
#3 蝙蝠侠可能在接手警报后离开岗位
待解决的问题
不在线的“蝙蝠侠”接手的警报会被高亮显示，以便团队能够及时更换人员处理。
#1 新警报被归入旧警报组而缺乏有效提示
待解决的问题
为了解决这个问题，我提议将警报组在有新警报归入时在主页显示最新警报的信息，以便按时间先后排序时被重新置顶。此外，警报时间从原本的时间戳修改为“几分钟前”的显示方式，紧急程度更易掌握。
#2 页面加载时间可能较慢，导致访问受阻。
待解决的问题
在与经验丰富的工程师讨论根本原因后，我建议添加分页功能，以减少一次的数据负载。
#3 蝙蝠侠可能在接手警报后离开岗位
待解决的问题
不在线的“蝙蝠侠”接手的警报会被高亮显示，以便团队能够及时更换人员处理。
#1 新警报被归入旧警报组而缺乏有效提示
待解决的问题
为了解决这个问题，我提议将警报组在有新警报归入时在主页显示最新警报的信息，以便按时间先后排序时被重新置顶。此外，警报时间从原本的时间戳修改为“几分钟前”的显示方式，紧急程度更易掌握。
#2 页面加载时间可能较慢，导致访问受阻。
待解决的问题
在与经验丰富的工程师讨论根本原因后，我建议添加分页功能，以减少一次的数据负载。
#3 蝙蝠侠可能在接手警报后离开岗位
待解决的问题
不在线的“蝙蝠侠”接手的警报会被高亮显示，以便团队能够及时更换人员处理。
此外，我注意到缺失的响应式设计使部分按钮在笔记本电脑显示屏上超出屏幕。因此，我调整了响应式设计，并为每个临界点下的字段和布局进行规划。
此外，我注意到缺失的响应式设计使部分按钮在笔记本电脑显示屏上超出屏幕。因此，我调整了响应式设计，并为每个临界点下的字段和布局进行规划。
此外，我注意到缺失的响应式设计使部分按钮在笔记本电脑显示屏上超出屏幕。因此，我调整了响应式设计，并为每个临界点下的字段和布局进行规划。
方案·问题二
我们该如何加速警报识别的过程，以便更快地解决问题？
通过之前的用户访谈，我们确定了两种用户，每种用户都遵循两个步骤来识别警报——扫描和阅读。基于这一洞察，我重新审视了设计，以提高效率。
方案·问题二
我们该如何加速警报识别的过程，以便更快地解决问题？
通过之前的用户访谈，我们确定了两种用户，每种用户都遵循两个步骤来识别警报——扫描和阅读。基于这一洞察，我重新审视了设计，以提高效率。
方案·问题二
我们该如何加速警报识别的过程，以便更快地解决问题？
通过之前的用户访谈，我们确定了两种用户，每种用户都遵循两个步骤来识别警报——扫描和阅读。基于这一洞察，我重新审视了设计，以提高效率。
提高警报扫描效率
为“蝙蝠侠”和支援者的不同扫描模式量身定制的快速筛选。
重构数据以适应F形阅读模式，帮助用户更快地识别警报。
更好的警报阅读体验
根据用户场景重新组织数据，以最大限度提高阅读效率。
警报详情根据用户的实际场景和需求进行了调整。
字体大小和间距经过精心考虑，以提供直观的阅读体验。
只有在鼠标悬停在警告上时才显示按钮，以减轻认知负担。
提高警报扫描效率
为“蝙蝠侠”和支援者的不同扫描模式量身定制的快速筛选。
重构数据以适应F形阅读模式，帮助用户更快地识别警报。
更好的警报阅读体验
根据用户场景重新组织数据，以最大限度提高阅读效率。
警报详情根据用户的实际场景和需求进行了调整。
字体大小和间距经过精心考虑，以提供直观的阅读体验。
只有在鼠标悬停在警告上时才显示按钮，以减轻认知负担。
提高警报扫描效率
为“蝙蝠侠”和支援者的不同扫描模式量身定制的快速筛选。
重构数据以适应F形阅读模式，帮助用户更快地识别警报。
更好的警报阅读体验
根据用户场景重新组织数据，以最大限度提高阅读效率。
警报详情根据用户的实际场景和需求进行了调整。
字体大小和间距经过精心考虑，以提供直观的阅读体验。
只有在鼠标悬停在警告上时才显示按钮，以减轻认知负担。
提高警报扫描效率
为“蝙蝠侠”和支援者的不同扫描模式量身定制的快速筛选。
重构数据以适应F形阅读模式，帮助用户更快地识别警报。
更好的警报阅读体验
根据用户场景重新组织数据，以最大限度提高阅读效率。
警报详情根据用户的实际场景和需求进行了调整。
字体大小和间距经过精心考虑，以提供直观的阅读体验。
只有在鼠标悬停在警告上时才显示按钮，以减轻认知负担。
提高警报扫描效率
为“蝙蝠侠”和支援者的不同扫描模式量身定制的快速筛选。
重构数据以适应F形阅读模式，帮助用户更快地识别警报。
更好的警报阅读体验
根据用户场景重新组织数据，以最大限度提高阅读效率。
警报详情根据用户的实际场景和需求进行了调整。
字体大小和间距经过精心考虑，以提供直观的阅读体验。
只有在鼠标悬停在警告上时才显示按钮，以减轻认知负担。
提高警报扫描效率
为“蝙蝠侠”和支援者的不同扫描模式量身定制的快速筛选。
重构数据以适应F形阅读模式，帮助用户更快地识别警报。
更好的警报阅读体验
根据用户场景重新组织数据，以最大限度提高阅读效率。
警报详情根据用户的实际场景和需求进行了调整。
字体大小和间距经过精心考虑，以提供直观的阅读体验。
只有在鼠标悬停在警告上时才显示按钮，以减轻认知负担。
提高警报扫描效率
为“蝙蝠侠”和支援者的不同扫描模式量身定制的快速筛选。
重构数据以适应F形阅读模式，帮助用户更快地识别警报。
更好的警报阅读体验
根据用户场景重新组织数据，以最大限度提高阅读效率。
警报详情根据用户的实际场景和需求进行了调整。
字体大小和间距经过精心考虑，以提供直观的阅读体验。
只有在鼠标悬停在警告上时才显示按钮，以减轻认知负担。
提高警报扫描效率
为“蝙蝠侠”和支援者的不同扫描模式量身定制的快速筛选。
重构数据以适应F形阅读模式，帮助用户更快地识别警报。
更好的警报阅读体验
根据用户场景重新组织数据，以最大限度提高阅读效率。
警报详情根据用户的实际场景和需求进行了调整。
字体大小和间距经过精心考虑，以提供直观的阅读体验。
只有在鼠标悬停在警告上时才显示按钮，以减轻认知负担。
