从定位现存设计问题、完成设计到对接开发的全过程 | Rlink IoT 物联网平台

2022年

项目背景:
Rlink - 物联网平台,作为公司智慧园区战略的重要产品之一,计划在2022年完成市场化目标。目前该平台已经在集团下各园区运营,仅在深圳锦绣科学园区一个园区,Rlink 就已经链接11000+ 设备,为智慧园区打下了设备物联基础。同时 Rlink 还拥有设备规则设定、告警设置、运维管理和租户管理等功能。

一、定位现存问题

由于 Rlink 平台开发之初,没有设计人员参与,仅在功能上满足了使用需求。随着产品市场化的计划推进,急需UX/UI设计师的介入,定位平台中现存 UX 和 UI的问题并完成优化设计。在我开始这个优化项目时,我首先和产品经理确定了这次的优化范围,我在此范围内进行了详细的界面设计和用户体验走查。在此项目之前我并未深度使用过该平台,所以我也将自己带入成一名新用户,使用每一个功能和页面,记下我完成每一个任务时遇到的困难点。我把每一个页面都进行了截屏,放到了白板软件 Miro 中,然后用红色的便签贴出我认为是需要优化的地方、用蓝色便签纸贴出我当下思考出的解决方法和建议,并用黄色和绿色便签纸写下我认为 Rlink 平台和竞品比较后,缺少的关键功能,即机会点。

rlink redesign example
【示例】产品页 - 现存UX&UI 问题定位
截屏2022-09-13 00.00.00
【机会点】缺少:帮助中心、步骤指引、控状态;其他建议优化:导航栏样式、租户权限

在这一阶段的问题梳理完成后,我和产品负责人汇报了梳理结果。同时,我把我在用户体验走查时遇到的困难点意义列出,并请教产品负责人相关的正确操作流程。 在这一阶段汇报完成后,我们明确了具体优化的组件和页面、新增的功能和页面。为下一步【完成设计】做好了铺垫。

二、完成设计

在第一阶段的问题定位工作和与产品相关负责人的确认工作做好后,第二阶段的具体页面和功能设计工作得以顺利的进行。以【设备 - 设备影子】页面为例,展示从第一阶段的设计问题定位到设计后的结果。

设备影子问题定位
【设备影子 - 问题定位】

优化后的影子设备界面: 应用了新的导航栏设计、添加了返回键和当前设备名、新增了表单内编辑期望值的功能、原来图标式的操作改成了更一目了然的文字、增加了表单内容筛选按钮。

用同样的优化方式,我完成优化范围内的 30+页面。然后,我根据第一阶段确定的“机会点”,设计了操作指引和帮助中心页面:

截屏2022-09-13 01.02.35
用户首次登录后在首页面板看到的操作指引
rlink next steps
用户在成功添加产品后弹出的操作推荐
10.1 帮助中心 导航栏二级分类 + hover
帮助中心

三、与开发对接和任务拆分

在完成第一阶段的设计范围确认工作后,我在协作软件钉钉上建立了一个共享文档,与负责Rlink前端开发工作的同事共享。我在文档中用表格的形式列出了这一期总共我们需要优化的地方。哪些是我需要出设计稿的,并列出计划完成时间。为了保证该 Rlink 优化项目的进度,我同时在下方列出哪些优化项是不需要出设计稿的、开发可以直接修改的。在和前端工程师确认了该表格中各自任务无误后,我们将这份文档作为项目进度跟踪的一个重要依据。(由于涉及为商用产品,表单中的具体项目和内容已被修改去敏,仅做工作方法的展示。)

我相信上述项目能够展示我作为一名 UX/UI 设计师在一个设计优化项目中的梳理和定位问题、确定优化范围、设计落地、任务规划和对接开发的能力。

微信号 fungfun

Bingo!

您大概用了多少秒在电脑面前用鼠标从这 36 个选项中找到了“粤”呢?

想象一下用户在一个狭小和较暗的车内空间里使用手机来操作,再加上外部繁杂的交通引发的情绪影响,找到这个“粤”,需要更久的时间。

根据在现场的观察,用户选择车牌省份的平均时长是 5 秒。个别用户还会出现误点到其他选项,再重新选择的情况。