Sun Minzhi - UX UI Portfolio

Page 1

TKE维保助手升级 2.0

电梯检验维保人员专家求助、学习交流平台

项目 概述

Product introduce 01. 产品现状 requirement analysis 02. 业务拆解

2021年,蒂升电梯大力拓展维保业务,目标之一打造一支高素质技术技能人才队 伍,通过将电梯专业的理论和电梯故障维护实操相结合,包括维保知识科普,一 对一专家咨询帮助,规范指引维保人员作业,激励他们主动学习,积累经验,增 长见识,树立主人翁精神,增强责任意识;

为什么要改版?

诉求拆解 业务目标

Target disassembly

03. 设计目标和拆解

用户在使用产品顾虑

设计目标

帮助 及时 工具 齐全

顾虑因素

操作 便捷 使用 体验 品牌 信任度

Business appeals 0 4. 设计目标和策略 设计目标

过程指标

目标1 提高操作效率和核心任务的 易用性

目标2

减少认知负荷

设计策略

策略1

构建符合用户心理预期的信息 获取方式,缩短用户操作路径

策略2 增强用户引导,构建贴合角色 链路场景的交互

结果指标

提升产品易用性

验证指标:用户满意度

提高用户关键任务流程效率

验证指标:用户单个任务操作时间、操作出错率、任务完成率

提升品牌市场竞争能力

验证指标:维保服务合同签约率 /购买率

User interface designer 2022-2023 TKE项目 设计 Overview

user analysis

用户 分析

User analysis

01. 目标用户分类

主要用户:

目标用户类型展开:

维保基层技术人员

对现场作业作出判断,使用工具包维保 遇到问题,独立解决 时间紧,需要帮助,采取专家帮助

任务类型 产品需求

维保现场分析 维保工具包

解决难点 案例查询、专家帮助

关注点

工具包全面 设备资料全面 响应时间 知识库案例分布

User analysis

02. 总结用户诉求

问卷调查/用户访谈: 为了更好的发掘出真正适用于TKE维保助手的功能需求,我们发放了

1000份问卷(共回收48份有效问卷)、1对1访谈用户5名;

用户痛点

通过此次调研我们发现,用户对 维保作业时配置工具是否齐 全”、“碰到阻碍是否提供帮助”的需求较为强烈,“使用体验 品牌信任度”当然也比较

User analysis

03 用户场景洞察一

辅助用户:

维保专家

在线解答技术人员问题 归纳总结,通过论坛分享经验 关注行业前沿动向,进行思考分享

任务类型 产品需求

User analysis

知识分享 论坛答疑 专家帮助 关注点 在线解答 问题难易程度 沟通效率 消息提醒
在意。 设备配置操作过多 维保工具不齐全 论坛学习活跃度不高 专家/顾问有时候信息回复不及时,关键时间找不到人 视觉上不一致地方太多 知识库内容贫瘠 27% 48% 52% 68% 39%
0 4 用户场景洞察二

Design direction

确定 方向

提升

提升 品牌感知度

清晰感知结构,快速定位模块

优化交互流程,简化繁琐操作

减少冗余信息,降低视觉复杂度

保持设计一致性,提供熟悉的样式

增强用户引导

梳理用户在使用时的关注点

增强品牌氛围感

情感化等维度升级品牌

、 、 打造 产品易用 操作效率高 品牌感知强 的维保工具 提升维保业务市场占有率
产品易用性
01
减少 认知负荷
02
03

Home Page

连接状态

主功能入口 banner

工具助手

专家信息 Tab bar

塑造品牌感 提升信息获取效率

BRAND SENSE & CLICKS RATIO 实现设计目标:

如何“塑造品牌感”

顶部区域采用品牌色LOGO,加强用户的。 品牌认知

重绘入口icon,利用品牌色/辅助色提升主功能的识别度。

总结、添加品牌特色的露出,,根据业务需要 随时更新、强化业务感知; 增强品牌信任感

如何“提升页面获取效率”

HOW TO “CLICKS RATIO”

产品首页应向用⼾传达整体的产品范围 ,并突出最核心功能,让用⼾高效找到常用功 能,提升对产品的认知,且加强用⼾的正向期待。 老版首页布局,更像工具堆叠, 功能单一 。改版后,首页布局围绕“常用工具、专家帮助、论坛互动”模块分区,让用户高效找到所需功能 。

Design
01.
tactics
设计目标及策略
01提升产品易用性和目标03建立品牌感知、提升信任感,新版本的首页在供运营推广活动和通往各个功能模块的入口,让用户高效找到所需功能 ,触达更 灵活
首页模块 Attract decision 蓝牙连接是技术员 操作第 步 视觉 不明显外,需要点 击二次跳转操作。 产品问题 任务中断不是必须 操作功能,根据情 景下才操作 可以 省略 视觉问题 为了强化品牌感知 力,增强技术员对 企业的认同感 视觉问题 高频功能置顶 增加运营曝光 触达更灵活 工具tab导向 TBA 栏 Old New New
首页 展示

缩短 操作路径 IMPROVE SIGNUP RATES

少不必要返回

Design tactics 01. 设计目标及策略 明确
明确使用路径
减少 下沉层级 多采用轻量交互
文案 简单易读 优化文案 多采用易懂通用词汇 开始 选择帮助入口 添加专家 添加文件 上传事件 故障描述 完成 选择帮助入口 选择帮助入口 选择帮助入口 选择帮助入口 开始 描述故障 选择帮助入口 发送照片/视频 添加文件 匹配专家 完成 旧版本 优化后 Design tactics 01. 缩短操作步骤 通过数据埋点和技术人员反馈发现新建帮助流程效率低,追溯原因发现是操作步骤复杂、文案专业词汇过多,导致用户学习和操作成本高,让用户“想逃离” 操作步骤:9步优化至6步 页面跳转:6页优化至4页 操作时间从6min32s降低到了5min26s 任务中断率降低14% 优化结果 “专家帮助”情景操作步骤在同一页面内堆叠 ,单 流程结束后再返回,操作繁琐 将流程帮助方式归拢到顶部 更清晰可见 根据专 家帮助
信息,体验升级。 Ne Design tactics 01. 设计目标及策略 仅操作当前流程
使用路径
减少用户操作步骤
减少跳转
的步骤仅展示当前方式的流程,减少不必要
步骤 减
改版后 专家
专家帮助模块 Attract decision Attract decision 降低被动阻力 专家帮助 不能满足需求 是用户对场景建立认知的核心方式 当现场作业难度极大 在线帮助用户无法决策下一步行动 存在放弃软件的可能性 专家帮助 在线帮助 碰到困难 短时间无法解决 确定是个难题 场景化专家帮助引导 作业时遇到问题 预约帮助 预估下次作业会遇到的问题 项目总结复盘碰到的问题 专家难约需要提前预约 提高咨询帮助效率 提前预约帮助 在线帮助 线下专家预约 线下专家帮助 o r
帮助

Update Configuration

更新配置

Product details

更新 配置

Design tactics

01. 设计目标及策略

认知负荷

IMPROVE SIGNUP RATES

统一的页面布局和结构,能减少用户学习和理解成本,减少用户负荷 减少

New

不同的工具配置页面使用不同布局,用户学习成本 高 Old 不同的工具配置页面使用相同布局,提升用户学习 效率,同时考虑到后续接入新配置,能继续保持设 计的一致性和拓展性。

信息冗余 合理删除

旧版存在问题:

此页中的“设置蓝牙通讯模块”中冗余信 息, 此模块中的信息在此后流程中不会 用到 ,且暂时无法修改的 ,只做展示 用。

新版优化: 对无用信息和不需用户操作的模块进行 合理删除,减少呈现的信息总量 ,减少 复杂度。

Main Pages

论坛 主页

Design tactics

01. 设计目标及策略

Details display 发布帖子

首页功能区 非标准内容归类
论坛模块 Forum module

knowledge base

知识库模块

Main Pages

知识库 首页

Design tactics

01. 设计目标及策略

专家科普 1 2
首页功能区
案例详情

design code

Brand Gene

Product content

设计 规范 品牌基因
产品信息

Other pages

缺省 设计

缺省页也是一个产品情感化设计很重要的一部分,能够更加触动用户微妙的情绪,提升 亲和力与愉快的感觉、减少用户焦虑;使错误的页面状态得到缓解,同时也可以展现品 牌价值和提升品质感。

设备连接失败

请检查蓝牙连接哦

缺省页设计风格采用了TKE品牌整体未来感的 感觉,采用宇宙太空星空等元素,展现品牌的 同时做情感化的处理。

文件找不到了

要不要回去检查看看

网络连接失败

啊?好像断网了

设备连接失败

请检查蓝牙连接哦

没有消息

再等等哦

文件找不到了

要不再回去看看

Data verification

数据

验证

通过强化信息分层和优化视觉样式

用户任务操作效率提高,维保服务合同签约率提高

用户各任务操作时间

维保配置:4min15s/before、3min48s/after

新建帮助:6min32s/before、5min26s/after

经验分享:4min07s/before 、 3min53s/after

用户各任务出错率

维保配置:8%/before、 4%/after

新建帮助:23%/before、11%/after

经验分享:14%/before、8%/after

用户各任务完成率

维保配置:84%/before、92%/after

新建帮助:45%/before、77%/after

经验分享:18%/before、14%/after

维保服务合同续约率

78.9 % 84.2 %

其他 页面

system interface

后台 页面

Project summary

项目 总结

Design value

01. 价值

对用户-体验升级,设计拔高 原版本中信息层级之间无主次,干扰主信息表达、视觉老旧,在此基础上进行了界面的布局改版。

对产品-完成更高的业务转化

找到业务目标与用户需求的平衡点,解决用户需求的同时将业务点进行视觉加强,从而更好地促进业务目标的达成。

02. 成果

打造品牌感知度

从图形、色彩、情感化等维度升级品牌;通过一系列设计手段增强品牌氛围感。 上线后用户口碑、团队认可度都有较大提升。

提升业务转化率

提升用户在核心场景中的使用时长;增强运营活动感知氛围,提升转化。

建立设计规范库

Achievement Programme

Other pages
建立C端视觉规范、运营设计视觉规范、统 B端&C端视觉规范,并持续迭代、维护;规范部门间协作、需求对接流程。 03. 规划 更加规范化、体系化 将C端视觉风格规范统 (包括App、小程序、公众号、B端系统等),完成品牌背书,增强信任感的同时扩大品牌影响力; 将各业务做体系化的梳理,做好分类、标签,采用一系列设计手段将其展现形式在一定规范化的表达下具有各自的特点(例 如:统 公号发文模板规范,发文内容更加设计化、规范化,对运营同学进行设计培训加强他们对设计规范的重视)。 提升设计师影响力 以设计组为出发点,做好公司内部各设计资料的建立、整理、迭代(如PPT模板、线上线下物料等),组织进行设计分享

Design disp

Description

业务目标和拆解

Description

设计目标和策略

背景:数据显示,2016年我国数字经济规模为22.6万亿元,其中产业数字化占数字经济的比 例已上升至80.2%。在2016至2019年间,中国企业数量从2596万户增长至3858万户,快速 扩充了潜在用户池,使得协同办公市场用户的增长成为可能。

现状:它是企业办公软件,针对企业中层以上管理者拜访到其他公司参加培训等活动的轨 迹,并收录其出访计划结束后的资料库材料。

Description

用户分析之场景洞察

Description

用户调研之确定功能优先级

Description

明确设计方向

在交互细节提升用户的操作效率,提升产品的体验感.构建信息寻找动线,让用户清晰感知结构就近反馈结果,降低反

复确认频率 01. 日程中新增计划 02. 计划调整修改 03. 差旅报销功能 04. 工作台设置 05 上传到知识库 B.解读翻译用户语言 上传组件 传组件 表单组件 日历组件 文本组件 文本组件 文本组件 搜索组件 表单组件 添加 修改、删除信息组件 C.调研验证功能优先级 我需要可以对计划进行修改 我还想了解下报销差旅的功能 我要知道知识库的功能如何” “最近的日程里都有哪些计划 “系统的主要功能能否一目了然” A.整合用户洞察信息 针对公司 需求 ,为公司管理层 人员 提 供 拜访计划 工具 ,提升他 们 办公效率。 业务 诉求 1.满足预测用户的核心使用场景的需求:制定计划; 2.把复杂的操作流程简化,提高他们操作效率,降低用户的学习成本; 诉求 拆解 用户主要特征为 企业基础工作人员、业务经理 项目经理 企业高 管 总裁等为主要人群 用户 类型 业务分析
it 01. 向前计划 企业出访计划app
User Portra
lay 用户考虑因素 设定设计目标 制定设计策略 衡量设计指标 内容信息清晰易懂 梳理信息层级,快速定位 缩短用户操作路径 执行状态清晰,进度可视化 符合用户习惯的页面布局 文案表达精炼 传递精准 信息分类准确突出特点 内容展示维度全面 它的服务能力 是否能快速找到我想要的功能并查看信息 增强信息透传 提高核心功能的易用性 提高操作效率 它的服务难易度 如何操作这个的系统,操作困难吗? 它的服务深度 能否快速完成工作任务 01. 02. 03. 01 增强信息透传 02 提高核心功能易用性 03 提高操作效率 forward planning Efficiency app. Design display

PART3

PARTIII 我的工作台,加强 信息透传

以进行布局组织 内容层级划分

通过控制台页面可清晰了解系统目前的功能,常用功 能对应不同颜色更好区分

PART4 数据查看效率,提高 任务完成率

功能分类 搜索导航

以“”纬度进行布局重新组织 信息紧急程度 将功能重新排序,让界面更简洁,操作更方便 日程详情 优化布局,将关注的功能合理呈现 信息布局 参与 人员 日程 历史 流程管理 日程操作 PART1 添加日程布局,增强功能易用性
紧急 办公概览
根据业务重要紧急程度进行排布
降低感知负担,提升操作体验 报销单据多,更用户带来极大的感知操作体验 找不到我想要操作功能?
活动结束后-差旅报销降低操作焦虑 了解需求给报销分类,二级细分对应不同功能进行区分 批量操作 把全局操作置于表上方 方案一: 批量操作 勾选激活后操作 方案二: Description 组件库
可视化 日程 记录 ,加强 信息透传 报销 外派出差差旅费 接待 尚能集团接待 10:00 12:30 拜访 新能源集团拜访 12:00 14:30 借助 颜色 区 分日 程种类, 清晰 直观 拖拽和双击, 让日 程 更 智能
添加到知识库,提高功能易用性 简化卡片信息 提高屏幕效率 提升美观性 活动结束后-外派活动文件上传 可上传文书,方便参与人员提交查看等 知识库 流畅 的 阅读使 用 体验 分层组织 对功能/信息类别进行整合分组处理 分层删除 确定功能级别,砍掉非必要,精简视觉/文本 巧妙转移 降低干扰处理,降低操作成本 文书 文书编号:(沪宿开)应急现决[ ]5号 制作时间: 重新生成 浏览 盖公章 身份核验 上传签字文书 编辑 删除 活动解决方案决策书 文书编号:(沪宿开)应急现决[ ]5号 制作时间: 盖章状态:待提交 待提交 重新生成 浏览 盖公章 身份核验 上传签字文书 编辑 删除 活动解决方案决策书 编号:(沪宿开)应急现决[ ]5号 时间: 状态: 待提交 盖公章 身份核验 上传签字文书 编辑 重新生成
追溯原因 功能不是我想要的?
PART2

Design details and description

APP端详情展示说明

设计目的是为了保证业务功能可用性的前提下贯穿“高效、简洁”的设计思路, 使用户在使用产品时能感受到产品视觉、业务功能的一致性。

Design Style

视觉风格定义

根据业务方向及目标人群提炼出此次App的风格将以品牌化、轻量化为设计方向,利用清晰、统一的视觉层 次和信息结构,完成较优质的用户体验。

Home page

and order confirm

首页展示以及设计说明

设计目标:信息获取、氛围感知、品牌感塑造

活动banner采用轮播方式,内容展示使用tab区分,重点突出 拜访,内容部分采用标题+图片瀑布流,以垂直视线浏览后面 的内容,形成F型模式,突出易取和简约原则。

Auction page

and order confirm

首页展示以及设计说明

设计目标:信息分层,减少用户新建信息焦虑

新建计划,将出访人和随访人一起填写;信息降噪,更简洁;

Electronic business card

电子名片,企业赋予每个人的智能商务工具,通过微信开 放能力和导入能力将企业名片系统结合,将企业产品输出 和服务能力标准化赋能每个成员,传递到每个顾客。 个人中心&电子名片

Guide page design

Default page design

启动轮播页
其他界面

Final Summary

最后的总结:从0到1

与改版项目不同,

PC端优化,app从0到1,需要做好产品设计规划、明确产品目标用户、细化产品核心价值;需 要对市场规模现状和发展前景进行深度剖析,从而了解我们所在的市场所做项目的问题以及机会,缩小目标用户 群体的范围,把基础功能完善后,再去寻找特色功能,使产品具有差异化 竞品分析、用户分析、设计落地;要用最小的成本快速完成产品搭建,做到好钢用在刀刃上

“方向弄错了,再努力也没什么用”,我想这是对这次的项目的总结~

挑战 机遇

learning base

青聚地

Activities and Points

background

为了让企业的入党成员员工感受到企业对自身的关怀,开展党史学习教育, 形成主动学习的良好氛围进一步丰富企业职工文化学习生活。开发了一款让 企业员工积极参与活动的app。

员工通过参与公司活动、做任务、每日签到获取积分,所得积分可兑换商城 中的物品。

项目背景 target

设计目标

设计目标

通过设计需要解决什么问题?

视觉年轻化

针对企业员工大部分年轻阶段24-35岁阶段, 整体视觉观感年轻化。

情感上获得身份认知

调动用户参与活动积极性,不仅仅是物质奖励,更

多需要情感上身份认知。

用户体验化繁为简

调整优化模块间的信息层级,将清新简洁的信息 内容呈现给用户。

提高用户活跃度

营造视觉氛围,提高用户参与度,调动参与积极性

challenge 首页策略 首页 提升效率 体验升级 主题形象 流程 用户 建立认知 优化层级 精简布局 Design 功能入口 首页设计 Wallet 票夹详情 视觉设计上模仿票夹实物化的参考,给用户带入场景化,颜色上的高饱 和度使产品更具有活力和辨识度。 二维码增加了温馨提示的功能,让用户提前知晓,增加了 后续参与活动的便捷; challenge 积分板块 activity 预定活动 integral 热门兑换 更多好礼 使用不同tab直观让用户选择其感兴趣礼物,精减路 径简化。 热门兑换的功能主要是调动用户兑换的积极性 满 足设计目标,增加用户的参与度。 积分中心 integral 积分排名 荣誉勋章 直观看到在团队或支部的排名 在个人中心的荣誉勋章 除了给用户物质的 激励 身份荣誉感的精神激励也同样重要。 积分中心&个人中心 精简路径简化体验成本 强化用户停留动机 低成本,高活跃度 设计目标 业务价值 用户价值 体验价值 会员体系 积分体系 身份与荣誉体系

other

其他界面

工业互联网官网 webdesign website design Equipment system Monitoring platform 设备物联监控系统 finance 财务合同系统 personnel 人事管理系统 Contract and Personnel System Large screen design management system 设备管理系统 System design 大屏设计

replay

复盘过去,坚持积微成著

team building

团队 建设

基于知识库的团队建设体系

设计提案

团队分享

Accumulate
collection Thank you TINA Design UI/UX Designer 185-0015-6917 250624350@qq.com wechat

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.