商业设计如何赋能？沟通工具升级实战案例！

前言

爱番番沟通工具是一款智能客服产品，产品初建时复用了百度十年的老牌产品-百度商桥的功能，但随着互联网的发展，越来越多的人习惯线上完成沟通和营销，长时间使用对舒适度、操作效率、易用性有了更高的要求，一场低成本的产品革新悄然拉开了帷幕。

一、什么促成了变革？

1、爱番番沟通工具是什么？

爱番番沟通工具是连接访客和商家客服的在线咨询工具，是一款智能客服产品，为企业提供“从流量到成交”全链路解决方案。客户只需在网站增加一行代码，就拥有了访客从“进站、浏览、沟通、成单、分析、建议”一站式的智能营销解决方案。目前客服侧有Windows端、Mac端、Web端、APP端。

2、如何找准变革时机？

从社会层面上来说，服务线上化越来越成熟，随着AI、5G等新兴技术的普及，以及新冠疫情的爆发，线上咨询渐多，智能客服潜力逐渐显现，越来越多的企业顺应消费新需求，加速布局智能客服赛道，提高企业数智化水平；
从行业趋势上来说，据《2021年中国智能客服行业研究报告》显示，2020年中国智能客服行业市场达到30.1亿元，同比增长88.1%，预计2025年中国智能客服服务行业的市场规模将超过百亿，市场规模呈现快速增长趋势；
从业务层面上来说，互联网高速发展带动了客户需求的快速拉升，积极关注客户需求，及时与时代共振才是业务长效经营的抓手。

数据来源：《2021年中国智能客服行业研究报告》

3、如何抓住核心痛点?

通过深入了解客服工作环境、操作行为习惯、协作流程，结合线上全流程体验问题分析及客户满意度调研，定位了旧版核心问题，主要表现为：

易用性差：信息获取使用门槛较高，在信息查找、操作便捷等方向不能满足需求；
效率低：重复性咨询多，沟通任务重，在提高沟通效率方面有强诉求；客服角色流动大、难以24小时值守，易错失商机。

同时客服角色日常工作强度大、压力大，易出现情绪不稳定，探索全场景的贴心陪伴将成为产品设计情感化的切入口。

围绕以上核心问题，通过降门槛、提效率、探索情感化等设计策略，最终提升产品满意度，打造智能高效的流量转化工具。

二、重构设计策略

1、降门槛 · 框架重构简化信息复杂度

01. 会话场景重构

如何让信息有条理地组织、清晰易读，是本次体验升级优先要考虑的因素。我们首先针对核心会话场景进行了信息重构。

列表区，旧版融合了客服多种角色、访客多种状态，理解成本较高；按照客服角色将信息拆解为会话、访客与他人接待(质检)三个导航模块，会话模块保留与当前会话强相关的会话、排队、最近沟通三种，为核心会话场景降噪；

会话区，将访客关键信息区、操作区进行整合，凸显当前访客的地域、关键词、搜索词等关键信息，强化高频转接操作，收敛结束沟通/屏蔽访客/修改名片等低频操作，信息更加聚焦；

辅助区，将高频-常用语区域放大、整合访客轨迹/名片/历史记录至访客信息、强化线索信息，同时最右侧增加辅助拓展功能区，拓展更多空间。

综上，从而形成了新版的会话场景结构。

02. 导航结构重组

清晰的信息展示可有效降低操作难度及决策成本，旧版产品的导航结构交叠复杂，将整体导航功能的一级、二级目录，按照功能分类拆解重组，删减冗余功能，同时结合客服场景的强诉求增加客服管理、服务模块，从而形成新端结构；

我们采用侧边导航栏形式，将上下布局改为左右布局，拥有更好的拓展性，为二级内容提供更好的展示空间，同时导航、标题和内容的对应关系也更加明确。

03. 升级统一的视觉感知

色彩升级：新版色彩应用HSB色彩系统，主色继承爱番番品牌红色，辅助色H色相以225°为起点，以2°递增或递减，S饱和度以5°为阶梯，生成更多色阶，同时确保视力障碍人士友好度，系统中的色彩使用需符合WCAG（Web 内容可访问性指南），同时结合典型界面、多种设备、不同角色投票等方式验证下，得出辅助功能色蓝色。

同时运用色环建立辅助色彩，以15°递增或递减，选取类似色和邻近色作为家族色彩主体，调和互补色与对比色，校正辅助色的HSB，达到色彩感官上一致。

图标升级：主功能和次要功能增加图标加强示意，主要功能采用面型图标，次要功能采用线型图标，文件类型采用彩色图标，层级更加清晰明确，风格统一，中性简洁，同时规范化图标的设计规则，赋予界面更好的视觉体验。

形状：页面采用模块化、卡片化的设计方式，更加包容，信息查找效率更加高效。

字号：通过拉大对比字号，扩大信息层级，凸显关键决策信息；灰阶的字色也在保证清晰度对比度的情况下加入了轻微蓝色色相，让整体的信息看起来更加清爽，舒适度更高。

通过升级统一的视觉感知，将整体界面进行了焕新。

04. 构建灵活统一的布局

爱番番沟通工具是一款跨多端的智能客服产品，我们需要打通一个适用多设备、认知统一的设计框架，帮助用户在多设备多环境中无缝衔接。采用响应式布局，应用4倍原则分别适配PC多端，让信息呈现更具秩序感，更好的保证跨设备、多屏幕尺寸下的显示效果；只需要开发一套代码，小成本维护不同设备站点，保证跨终端设备下的体验一致性，降低操作门槛。