App设计 - IBM zServiceAdvisor

项目时间

2016/12 - 2017/4

团队职责

项目团队共计10人，我负责所有的设计类工作，包括可用性评估、信息架构与流程设计、交互原型设计与高保真界面设计，并跟进前端工程师的开发工作。

目前该项目已经上线了第一个版本，我根据产品需求，设计了一个新功能——系统健康状况诊断，并且对第一个版本的设计进行可用性评估，提出后续优化的迭代方案。

工具与方法

1. IBM设计思维 (IBM Design Thinking)

2. Sketch

3. Flinto

4. Adobe XD

5. Zeplin

项目简介

IBM zServiceAdvisor是一款针对于IBM z系统的移动应用，可以帮助系统管理员轻松访问该系统提供的服务信息，监测客户系统的健康状况，让客户在移动端上也能进行系统维护，降低系统中断的风险性。

人物画像设定

工作状态

1. 刚上手系统维护工作，对于IBM的某些产品还比较陌生

2. 能采用最基础的方式来维护系统，但有时还是会错过一些新发布的补丁

3. 遇到突发的系统中断问题时，需要花很多时间来排查系统问题

痛点

1. 大型机软件的维护需要花费大量时间精力，才能达到一个理想状态

2. 缺乏足够的经验来分辨每个APAR（问题描述文件）的紧急程度

3. 需要大量的手动操作来维护大型机软件，而且缺乏可视化的操作方式

理想体验

1. 能够及时收到关于APAR（问题描述文件）的推送消息

2. 能够自主诊断系统健康状况，并进行维护操作

产品使用情境与流程

用户（z系统管理员）的日常工作环境通常是在大型机旁边，通过命令行的方式来进行系统维护。如果想进行系统诊断，客户一般需要将日志文件手动提交给IBM，才能得到相应的技术咨询与诊断反馈，整个流程的成本大，效率低。

其次，这种上传文件的操作大多是在网页端执行的，在移动端上操作起来较为麻烦，而且目前只能由IBM内部员工才能访问。如何将网页端的这一功能移植到移动端上，并让客户能进行自助式操作，是该项目的难点所在。

现有操作流程分析

系统健康状况诊断，这个功能目前处于内测阶段，即只能通过IBM员工的账号才能进行PC端的操作。移动端的设计，是为了方便客户能按需使用这一功能，不需要频繁请求IBM提供的技术支持。

Hill

A system administrator can check system health on mobile devices without manually requesting technical help from IBM.

该功能需要被整合在移动端上，项目组最初放弃了通过手机端上传文件的方式，因为客户的MEPL文件原本就储存在PC端上。问题的关键点在于，如何让MEPL文件能够准确匹配到客户系统。我整理了这个功能在PC端上的操作流程及使用情境，并与技术人员一同讨论了一些可行的替代方案，最初有三种方案：

1. 通过发送邮件的方式来上传MEPL文件

2. 发送MEPL文件到指定的FTP服务器，并生成二维码用于移动端的后续操作

3. 通过PMR编码来匹配客户系统，再让客户从文件列表中选出MEPL文件

因为项目组没有独立的文件上传工具，所以只能借助一些常用的文件上传方式，比如FTP服务器，二维码的方案也因此不能施行。最终，优先考虑了第三种方式，通过输入PMR编码的方式来实现与客户系统的匹配，把操作简化为编码输入和挑选MEPL文件，而不需要上传文件。在可行方案的基础上，我对流程进行了优化设计，考虑到客户可能会遇到忘记或没有PMR编码的情况，我也保留了手动上传MEPL文件的方式。最终，大部分流程可以通过移动客户端来执行，如下图所示：

未来操作流程优化（解决方案1）

未来操作流程优化（解决方案2）

低保真原型设计

B端产品的内容通常较为复杂，表现在信息层级多，信息量大，操作流程严谨。根据之前分析的交互流程，我从以下几个方面来考虑如何进行UI/UX设计：

1. 合理引导用户进行每一步的操作，要适时提供充分的文字说明

2. 区分主次信息，根据可读性对长列表进行纵向布局

3. 给用户提供量化的数据进行参考，而不只是呈现原始数据

4. 允许用户犯错，并提供相应的解决方案，不强制用户执行每项操作

5. 给用户提供及时的反馈，让用户能方便查看到系统状态

线框图迭代设计

UI视觉设计

视觉设计部分最大的难点在于，如何平衡各个平台的设计规范，设计出一款符合IBM Design Language的移动端产品。众所周知，移动端的开发一般都会始于iOS平台，因为安卓机型众多，屏幕分辨率“碎片化”，所以从iOS版着手开发会相对高效、易执行。我在设计初期，就开始考虑如何进行跨平台的设计。我的处理方式是：