项目背景

Red Pulse 手机程序是一款向用户提供Red Pulse平台内容的移动应用程序。 我们设计并与开发供应商一起发布了该应用程序。该应用允许用户查看平台上所有类型的内容。 与网站平台相比，手机应用的功能会稍微有所不同，因此我们重新组织了信息结构并专注于手机上的用户体验。

信息架构

设计迭代

我们手机应用的第一个版本是在2018年7月发布的，只显示了insights下的文章。 在2019年5月，我们设计了新的手机应用并包括了上面列出的所有功能。

同时 我们还根据反馈将界面改为更加符合专业用户使用习惯的样式。

我最开始会在纸上画出大概的设计，以便快速地从其他人那里获得即时反馈。 接下来我用Sketch建立线框图并导入了真实的数据。 草图加线框图的设计会重复好几轮直到和需求方达成一致后才会得到最终确认完成设计。

设计考虑

设计关注列表时也遇到了很多的挑战，其中一个挑战是由于包含许多操作，例如创建，模板，编辑标签，搜索标签等，同时手机界面的可操作区域有限，因此容易造成信息混乱、层级太深。我做的第一件事是将关注列表从Insights中拆出来单独放在下方的底部导航中。接下来，就像我经常做的那样，先确定功能的重要性，确保主要流程对用户来说直观清晰并隐藏次要选项。 我为用户设计了自然的引导，以帮助发现其他可能的选择，例如空状态的提示、新手引导、tooltip提示、动画、图标等。

为了提供沉浸式的阅读体验并确保读者给出有意义的评分，打分栏只在用户滑动屏幕到内容主体的底部时才会出现，然后将保持在屏幕的最底部。 因为打分会涉及到作者的收入计算，同时考虑到用户可能的误操作，我们将评分设计为允许用户在5分钟内更改，之后用户将无法再做任何改变。

筛选功能是另一个挑战。在网站上，可以在一屏以内轻松地展开子项、在各层级间切换和选择。但是在移动设备上，由于屏幕尺寸的原因，这些项目是层层级联的。 首先要考虑的是选择的形式。例如，文章类型很重要，同时只有4个选项，因此我们选择直接显示它的选项。对于行业而言，我们只展示顶层选择，而其他子选项则是在级联内。主题是随机并且经常变换的，因此我们允许用户水平滚动以查看主题的标签。一旦用户进入主题页面，他们将看到按文章数量排序标签的完整列表。对于实体，我按字母顺序对内容进行分类，使其更易于导航。 最后，所选中的标签将显示在底栏中，用户可以展开后滚动查看所有已选的标签，避免来回在不同页面中查找。

设计文档

由于我们只负责设计部分，开发外包给供应商，我必须为供应商准备一份详尽的交互说明文档。因为我们内部使用Atlassian的Confluence系统，我通常直接在系统中写好文档然后导出交给供应商。

完成产品

因为应用程序将由供应商开发，与使用敏捷开发的网页端平台不同，我们采用瀑布流程来开发手机应用程序。尽管这样，在设计应用时我们还是带有部分敏捷开发的原则。例如创建线框图和原型，并经常根据反馈修改我的设计，迭代设计内容。 我相信越早得到反馈，我们就会越少犯错误。 直到最终确认之后，便再开始视觉设计，撰写规范文档，然后交给供应商并与他们一起工作完成应用的开发。

项目背景

Red Pulse 行研平台是我在Red Pulse负责的主要产品。这是一个提供有关中国市场事件最新分析的封闭平台。当我加入公司的时候，这个平台只有Insights部分的内容，而现在平台已经发展成为一个包括8个主要功能以及其他一些小功能的完善平台。该平台包含两种类型的内容，作者生成的内容和抓取的内容，它们显示在不同的栏目中。对于作者生成的内容，我们设计了一个处理文章发布的工作间，用户可以在其中写作，审阅，翻译，批准/拒绝文章。平台贡献者将会在平台的钱包中收到代币作为回报，他们也可以使用代币进行各种操作。

理解产品

为了在设计人员、开发者和管理层之间建立一致的产品共识，我们一起制作了产品蓝图。

用户旅程

Red Pulse 平台的用户有着不同的角色，其中包括 1）管理员; 2）内容生产者，包括3种不同类型的作者、主管、编辑和翻译; 3）读者，包括基本帐户读者和高级付费帐户读者。

照顾到每种类型的用户始终是一项挑战。 特别对于Red Pulse来说，这是一个封闭的平台，并且涉及到特殊用户的认证过程以及代币的支付，这使得平台上的加入流程和整个体验更加复杂，用户可能会在平台上遇到各种体验上的潜在问题。 我根据不同类型的用户创建了用户旅程地图，以便更好地了解每种类型用户的完整用户体验旅程以及我们需要考虑和改进的关键点。

产品迭代

Red Pulse产品迭代快速且频繁。 我通常勾勒出一个布局和管理层沟通，然后填充上真实数据再次确认线框图并最终完成视觉设计。

产品的迭代由最初的开发计划、用户反馈和设计师审核来推进。

设计细节

结语

在一家初创公司工作意味着快节奏、敏捷开发以及同时负责多个任务等。我也经常无法直接开始考虑设计，因为一般接到任务时还有许多事情尚不清楚。 例如，我需要自己弄清楚新功能是否存在潜在的法律问题，我需要自己跑去咨询我们的律师。 还有很多案例我需要快速描绘出来，将想法变成图案并帮助延伸这个想法。 很多时候，我收到的只是一个想法，我必须自己做研究、联系正确的人、咨询开发人员将想法变成清晰的需求。我认为这正是设计师的工作，将其他人的想法拓展成真正的产品，我很享受这种工作。

关于Red Pulse平台的其他案例 Red Pulse 工作间 and Red Pulse 手机客户端

相关文章：从设计师的角度看如何在网站上实现2FA（双因素认证）

项目背景

工作区间Red Pulse 平台的核心功能之一。 Red Pulse招募了许多作者在平台上进行写作。这是一个针对行业专家、从业者和专业人士的专业平台，因此我们会审查作者的每一条内容。 工作间是完成内容编辑流程并链接所有内容编辑相关角色的地方。

用户模型

首先我需要做的是确定有多少角色会参与到内容制作的流程中来。

1. 管理员 - 拥有全部的权限并能够查看其他人的所有操作。

2. 作者 - 作者包括3个等级。 不同等级作者的工作流程将有所不同。

   • 签约作家

   • 认证作家

   • 贡献者

3. 主管 - 负责审批文章发布并能够指派作家和编辑。

4. 编辑 - 编辑提交的文章。

5. 翻译 - 翻译文章。

接下来我为各个角色创建了用户模型。

用户流程及权限设计

由于用户角色的数量和流程的复杂性，用户的使用流程设计是项目中最具挑战性的方面。 通过采访研究团队的分析师帮助建立用户流程。

设计细节

在理清用户流程后，接下来便可以专注设计细节，确保用户在复杂的流程中获得最佳的用户体验。

项目背景

英孚手机教室为学生提供了另一种私人和小组对话课程的上课方式。 目前，有24％的私人课程和23％的小组课程是学生在手机或平板电脑上完成的。由于手机教室是很早之前设计的，学生的反馈和定期的用户测试结果都表明目前的交互不够直观方便，感觉用户界面的设计已经过时。 

这个项目主要是由设计驱动的，我希望能够获得管理层的批准，设计开发新版本的移动应用程序解决目前的问题。为此我打算说明重新设计的原因（以前的测试结果已经表明优化的必要性，我只需要总结和再次验证）以及通过概念设计展示如何解决问题并改善用户体验。

可用性测试

在英孚教育，我们会定期进行用户测试。 所以我已经有了很多用户使用在线教室的信息，但我想再次针对重新设计的目的进行一次可用性测试了解最新的信息。

结果表明当前应用程序的主要体验问题集中在信息架构，内容的可发现性，状态的感知，任务的处理和用户流程的复杂性上面。

设计原则

在和设计团队一起进行了脑暴寻找解决问题的方向后。我们建立了以下的设计原则。

将原则融入设计

在课堂上，学生麦克风和相机的状态可能会被老师改变。以前由于状态隐藏在侧边栏内，学生无法注意到状态的变化。现在，状态栏直接被展示给学生，在任何时候都能被发现，同时对课堂的干扰变得最小。

聊天区域也有同样的问题。由于之前的聊天窗口是隐藏的，用户必须在聊天面板和幻灯片之间切换。这种情况在小组课上会变得更加麻烦，因为老师可能会与其他人交谈，学生在打开聊天窗口之前并不知道聊天内容是否与自己有关，因而不得不去查看每一次记录，导致他们的学习体验被打断。在新的概念设计里，聊天区域被放在了左下角。只有在有消息时才会显示。学生可以随时了解正在发生的聊天，同时保持对幻灯片的关注。

新的设计也延续了之前版本的核心交互，通过点击屏幕来调用更多的操作。状态栏被显著地放大，并可以通过点击图标来改变状态。在底部，用户可以输入并发送聊天消息，还可以看到其他学生的状态。在右侧，用户可以调出笔记面板。不同于之前的设计，新的设计利用了空间来同时显示幻灯片和笔记。

平板电脑的版本会略有不同，但遵循相同的原则。由于屏幕尺寸要大得多，许多动作可以直接放在屏幕上，并且可以直接在幻灯片上展示笔记。而由于屏幕比例的原因，在平板上的笔记展示采用了侧边栏推入的设计。

结语

新的设计提供了一个沉浸式的学习环境，同时用户可以直观地了解各种状态，并能够注意到状态的改变。 我将幻灯片作为用户关注的核心进行设计，但同时也允许用户同时执行多项任务。在设计之前定义设计原则或方向很重要，通过这种方式我们能够知道要解决的问题以及设计中的注意事项。 

这份概念设计已经展示给了管理层，并收到了很好的反馈。遗憾的是，我在展示设计后不久就离开了英孚，但是这个项目在我离开之后仍在继续。

项目背景

英孚希望能够让学生在手机应用上更有计划地学习从而增加用户粘性，避免学生的流失。需求方并没有明确的方案如何为学生设计学习计划以及学习计划是否能成功，但是要求我们能够尽快先上线这个功能进行验证。由于项目的急迫性，我提议分阶段进行开发，优先满足业务需求，在第二阶段进行深入的用户调研及设计验证后，再对产品进行优化。

设计过程

项目一开始分为了两个阶段完成。以在有限时间内快速满足业务需求为目的的第一阶段和经过用户研究及设计验证后更完善的第二阶段。在这之后，产品还会不断进行迭代。

第一阶段 - 满足需求

用户研究

在最初和业务方沟通时，我们便发现表面上业务方的需求是增加“学习计划”功能从而帮助学生自主建立学习计划，而实际真正的需求却是如何激励学生更积极地学习。

因此在第一阶段的设计正在开发的过程中，我们前往了线下的学生中心，邀请了不同等级和不同入学时间的学生参与研究，尝试了解三个主要问题：

• 学生目前如何创建并完成学习计划？（验证第一阶段设计）

• 干扰他们完成计划的主要问题是什么？（用户痛点）

• 什么能帮助学生更积极地参与到学习中？（用户动机）

为此我们一对一对学生进行了采访。为了更好地了解学生自己的想法和经历，我们尝试通过预先设定的问题来引导他们，然后更多地去挖掘他们的回答。接着我们请他们用第一阶段设计的原型完成任务流程，以验证我们的设计是否解决了他们的问题或者部分帮助到了他们。我们还采访了几位学生顾问，通常是他们帮助学生制定学习计划并跟踪他们的进度。通过采访学生顾问，我们能够利用他们的经验来优化我们的设计，并考虑到应用程序能够潜在地减少学生顾问的工作量，他们的意见也很重要。

第二阶段 - 完善产品

总结了用户研究的结果，我们把重点放在以下几个方面：

• 与他人互动，几乎所有的学生都表示，他们更愿意到中心学习而不是在家自习是因为他们喜欢和别人一起学习的感觉。虽然Smart English被设计为自学为主的应用，但我们希望让学生在应用上学习时也能够感受到与其他学生的互动。

• 人是懒惰的，需要外力的推动。 “从人性来讲，人都是懒惰的，只会在迫不得已的情况下工作”。从学生到学生顾问，我们都了解到大部分学生在学习上都有惰性。无论如何，我们需要帮助他们克服这个困难。

• 鼓励而不是惩罚。通过惩罚，我们可以迫使学生去学习，但效率肯定会降低，不愉快的学习体验最终也会导致失败。因此，我们花了更多时间头脑风暴如何鼓励和奖励学生学习。

• 分解目标。我们发现的一个问题是学生的学习目标是以学生整个学习课程长度而决定的。随着时间的推移，离目标并没有显著的接近会导致学生失去完成目标的热情。我们希望帮助学生将目标分解为以月甚至以周为单位去达成。

结语

设计师经常会遇到必须在短时间内完成的项目，导致无法做任何类型的用户研究或分析，这很常见。但是晚一些做总比不做要好。很多项目都是敏捷流程的，所以有机会去迭代设计。我们最终会找到时间进行研究和测试，而设计师总是能从中得到很多帮助。 此外，对次要用户花费一些时间做研究往往是一个不错的选择。在这个项目中，学生顾问从另一个角度提供了许多有价值的信息和新的想法，帮助到我们更好地解决问题。

项目背景

英孚在线教室是英孚学习计划中的主要学习工具。学生可以在各个浏览器和iOS以及Android的移动端上上课。在进入教室之前，老是和学生需要进行技术检测，以确保他们的网络、视频和麦克风等设备工作正常。

客服团队一直以来都有报告用户在技术检测时遇到的问题。虽然大部分的根本原因是主要的技术问题，并且开发团队也有试图以他们的方式解决问题，但我同时发现许多用户体验问题使得技术问题更加明显。于是我推动了该项目的成立并获得了管理层的批准，最终得以实施上线解决方案。

设计过程

在我第一次使用技术检测后我便意识到有很多地方可以改进。 我联系了客服团队并收集了有关技术检测的用户反馈，发现许多用户的抱怨可以通过用户体验的改进来解决或减少。我还与设计师及开发一起对当前的技术检测流程进行了评估。接下来我能够知道什么地方需要改善。

下一步我制作了线框图并提交给了管理层。在看到解决问题的方案后业务方同意将此项目添加到开发计划中。一旦确定可以开发，我便开始邀请用户进行可用性测试，以了解用户行为并验证设计。根据用户的反馈，我再次优化了设计并交付视觉与开发。

最初的技术检测

在收集反馈并完成评估后，以下几点被确定为我们需要解决的主要问题：

技术检测再设计

我们决定重新设计的方向之一是为用户提供一个干净整洁的界面，并优先提供重要信息，让用户每次都能够只专注于一项任务。

结语

新的技术检测设计在提案2个月后便上线了。后来我们还为不同的场景添加了一些其他的内容，但我试图让一切都在同样的原则之下，以避免再次出现过多的信息（比如使用弹出窗口而不是直接添加到页面中，利用格式塔原则进行信息分内）。接着查看用户报告发现技术检测的通过率有了大幅提高，学生的投诉也下降了不少。

项目背景

在2015年太平洋保险（太保）希望推出自己的电子商务网站，更好地服务其客户。与许多我接触过的甲方公司一样，太保希望完全复制市场上领先的电商网站，因此设计在这个项目里更多体现的是细节而不是创造力。尽管如此，这个项目还是有一个非常特殊的方面。网站大多数的目标用户是从太保购买保险后收到促销的代金券或兑换码被吸引到网站的客户。因此，我将设计重点放在礼品兑换的流程上。

竞品分析

我们分析了主要的电子商务网站，以了解每个流程应包含哪些信息以及原因

亮点

• 各式各样的产品展示

• 横幅广告通常会在视觉上吸引眼球

• 颜色使用鲜艳

• 为用户目的而设计

人物模型及基于场景设计

需求 V.S 期望

从客户的角度来看，他们希望用户在兑换礼物之前注册，从而获得用户的个人信息。

但是用户只是想兑换礼物，为什么不得不注册？

客户设想的兑换流程

客户一开始对兑换礼物有着自己的想法：

这样的想法对于客户来说是可以理解的。他们提供了礼品兑换的入口，并告诉用户先注册/登录，用户应当会按照客户期望的顺序操作。但是，对于用户而言，注册并不是他们的必要步骤。当要求用户注册时，他们会认为正在做与礼品兑换无关的事情，因此容易导致不满然后放弃兑换。

解决方案 - “显而易见”

玩一个小把戏

重新设计后的页面让用户在第一个页面就参与进礼品兑换的流程，从用户输入手机号的时候开始，用户就已经在流程当中，在这个流程里发生的任何事都会被用户认为是兑换流程的一部分。

线框图

最终效果图

项目管理

在这个项目里我同时还负责项目管理。项目还有另外2名UX设计师和3名UI设计师参与。我会负责管理项目进度、分配资源、日常工作内容、质量保证并向部门经理和客户报告。

我同时还写过一篇关于该项目的文章，有兴趣可以看看： 洞悉用户心理，设计中的“诱导”和“欺骗”把戏

项目背景

汽车行业正在拥抱新的科技，不仅仅是越来越先进的汽车中控系统（HMI），还包括物联网等科技。上汽集团打算在泰国推出一款新车，配备全新的移动应用程序，可与车辆进行互动并接收车辆信息。我们当时正在与上汽讨论一个HMI项目，但却注意到了他们手机应用的设计并指出了一些潜在的问题，客户立刻对我们的解决方案感到了兴趣。我用了一天时间做好项目方案，在看过后客户决定邀请我们帮助他们改善移动应用的体验。

这个项目的目标是：

• 评估手机应用的可用性

• 确定问题或可以优化的细节

• 根据研究结果提供改进建议

• 所有的行为都需要考虑到准备投放的泰国市场

流程和交付成果

一开始我们建议在泰国进行用户调研。由于时间和预算的限制，我们同意在中国进行用户研究，但必须招募泰国人作为研究对象。另一方面，由于客户有着自己的设计团队，我们只负责可用性测试并提供设计建议。

用户研究对象

整理信息架构

测试准备

测试

主要发现

1. 导航 - 注册流程太长，需要输入重复信息。主按钮的位置没有突出，尺寸太小，颜色混合在背景中难以发现。在可以使用图标的地方使用了太多的文字。

2. 描述 - 没有提供足够的信息，用户在许多地方感到困惑，特别是使用了太多的专业术语。

3. 本地化 - 设计是基于中国用户的背景设计的。对于泰国观众而言，许多元素的解释都不同，例如：地图，图标，结构甚至颜色。

4. 一致性 - 设计在许多地方都不一致，包括名称、颜色、语言，按钮位置和操作。

5. 设计和简洁化 - 文案应当与设计相匹配，并且只包含必要的措辞。我们发现很多地方文字太长而且不适合它所处的环境。此外，用文本的地方换为图标或图片可能更加合适。

6. 用户控制和自由度 - 在整个设计中用户有相对的自由。但是，用户必须在注册过程中提供太多信息，这需要过多的时间并且信息来源难以定位。

分析和文档

我们在文档中指出了研究中发现的主要问题，并提供了支持我们研究结果的数据，并针对问题分别提供了优化建议。

这份报告被提交给客户的设计团队，他们进行了相应的设计改动。然后我们进行了第二轮可用性测试，以验证优化后的设计。

项目背景

现在，移动应用程序已经是银行服务的主要入口之一。杭州银行也非常依赖他们的移动银行手机应用，我们被邀请重新设计他们的移动应用提高用户体验。

银行服务是最复杂的服务之一，而且使用了大量的术语。我在最开始花了很多时间来了解他们提供的各种服务并发现了一些主要的问题：

1. 由于之前的设计限制，所有元素都是平铺显示的，没有分类和层次结构。

2. 完成一项任务的冗余步骤太多。

3. 用户界面已过时且缺乏系统反馈。

因此，重新设计的主要目标包括统一样式、颜色和语言系统，改进的信息架构、内容可发现性，简化用户流程并同时考虑到后期的扩展性。

竞品分析

我试用了很多银行类应用和金融类应用程序，尝试分析哪些有着最佳的体验，不同体验的原因，以及我可以从中学到什么。

信息架构

信息架构是该项目最重要的部分，这是当前应用的主要问题，并且极大地影响内容的可发现性。我分析了当前的信息架构并设计了新的结构。新的功能分类方式能够让用户清楚各个功能的位置以及如何导航进入。

线框图

由于和客户建立了紧密的联系，我每天都能获得反馈，并且与客户进行了4轮的设计评审。 最终，我们一共设计了100多个线框页面并制作成可点击的交互式线框供用户测试。

首页优化

进入我的账户

Transfer

其他设计

杭州银行手机银行应用获得了中国金融认证中心颁发的区域性商业银行最佳手机银行用户体验奖。

项目背景

柯尼卡美能达的打印机通常被大量购买并使用在各个场所，包括公司、学校、图书馆、政府和便利店。客户收到了很多关于其打印机产品的抱怨，于是邀请我们帮忙改进他们的打印机管理系统用户体验。与嵌入在打印机上的面板相反，打印机管理系统只能通过打印机的IP地址访问，就像路由器一样。与面板相比，管理系统具有更多更复杂的功能，这对于柯尼卡美能达来说尤其重要，因为他们的客户主要是需要管理打印机、处理更复杂打印任务的商业客户而仅仅是打印的个人用户。

设计过程和交付物

当我们被要求进行前期概念设计时，我使用了以用户为中心的设计过程：创建人物角色、进行专家评估、基于发现进行思维发散、设计原型、走廊测试以及高保真视觉效果图向客户做了展示。

该项目分为两个阶段。第一阶段包括创建任务角色、进行专家评估和确定视觉方向。我创建了5个用户角色，评估了100多个当前系统的页面，建立了一个新的信息架构图，同时还写了一份32页的报告，概述了该过程并总结了我们所有的发现和建议。在第一阶段之后，客户评估了我们的报告并同意进行第二阶段去完成整个线框图设计和视觉设计。

人物角色

专家评估

优化方向

布局分析

优化后的设计

结语

这个项目是一个很好的例子展示如何在无法进行用户研究的时候依旧以用户为中心进行设计。在接到项目的时候我很惊讶还有很多用户需要使用打印机的网络管理系统。但是在深入研究这个项目之后，我意识到有许多场景我们可能不会经常看到，但是对于自己不知道的人群来说存在这样的需求。

我很高兴我们进入到了最后的阶段，因此我们可以向客户展示我们的完整设计。而这只有在客户认可我们第一阶段的输出后才能做到。与客户保持密切联系非常重要，特别是当他们和我们不在同一地点的时候，更多的沟通有助于我们了解客户的想法并得到肯定。