电商工作后台首页的商业价值重构与产品化设计

UI / UI设计 / 后台界面 /      

uimaker
UI设计师 / 江苏 南京

来源:zcool   作者:阿里巴巴_B2B_UED

关键词

电商网站一般分为前台导购及后台管理两方面,通常由买家及卖家两种角色组成。大部分的工作是在后台完成,涉及到各类管理系统,保障日常工作顺利运行。后台产品设计因其逻辑复杂、业务繁多、专业性强具有较大挑战性,在很多情况下设计师的发挥受到较大限制。尤其是B类后台产品的设计需要对公司业务拥有更全方位的认识,加大了其设计难度。做为设计师如何重新定义后台商业价值?如何进行产品化设计思考?下面以买卖家工作台首页设计为例,来介绍下整体设计思路。


买卖家工作台是什么?


买卖家工作台是基于1688大数据为企业提供生意决策、日常工作管理的中小企业操作管理后台。


设计之前:思考在最前方,与业务一起确定产品方向


转变思维方式:由被动接受到主动提案


做为体验设计师需要对整个产品负责,在产品改造前期提前与PD对焦思路,全链路思考主动提出对产品的整体想法,而非到某项交互功能再介入,或者是某个页面视觉表现再进行。对焦的过程中也发现项目的诸多难点:涉及B2B所有业务,风险大,影响范围广。为保证产品方向的准确性需要与业务方进行多次沟通讨论及产品汇报。 产品方向确定基本流程: 思路对焦——方案讨论——方案设计——产品汇报——确定方向。



商业价值重构三步走:


一、了解定位,转换视角


1、了解产品整体定位: 在进行商业价值重构前充分了解产品定位。以工作台为例,今年1688针对B2B市场提出了人、货、场的战略。人:帮助引流,货:提升品质,场:提升能力,做为1688用户的核心工作场景-工作台成为重要场景之一,需要结合新战略进行全新升级,加强人在后台场中的匹配效率。


2、从业务视角转变为用户视角:在设计对焦过程发现,现有版本融入了较多内部运营工作逻辑,体现各个部门的利益及立场。比如网站多了一块新业务需要向用户推广,就会在后台中增加一个介绍版块让用户区体验,缺少用户去体验功能的场景及动机。偏向一个流量分发为中心的核心阵地。业务视角展现在用户层面比较难理解。做为B类用户更多的是从做生意的角度来使用后台,需要做一层转化才能到达认知,一定程度上影响了用户的使用效率。因此需要翻译成用户能理解的产品表达。


二、统一战线,建立目标


与产品、运营统一战线,建立目标。将一个流量分发为中心的核心阵地打造成以用户服务为中心的产品。


三、明确关系,构建大图


明确商业价值的构成者,做为平台一共有三方:平台方、买方及卖方。完整的商业价值构建需要联动三方一起共进。工作台以阿里大数据为中心,网站平台小二通过行业市场来服务我们的买家,同时通过商家培育体系来服务我们的卖家帮助商家成长,商家通过自我成长提升自身运营能力来服务好买家,构建出稳固的铁三角服务生态大图。通过建立价值生态场景,帮助业务打通上下游市场,让小二更好的服务买家,促使商家自运营。


明确商业价值后,进行产品化设计


一、挖掘用户使痛点


1、定性:采用敏捷式共建用研,在有限制时间内,获得丰富有效信息


首先谈下用研方式,传统的用研从制定访谈计划、问卷设计、用户邀约、执行调研、分析数据到撰写报告,整个过程基本由用研同学独立完成,在项目时间比较紧张的情况下会受到限制。因此我们采用了敏捷式共建用研,在临时机动的情况下获取用户痛点的方式,有几个小tips可供参考:


A、项目组共建用研:打破流程限制,在与用研同学确定好调研提纲后,发动项目组的成员运营、开发、测试等共同参与调研;


B、灵活邀约客户:借助园区商家活动、会议等在中间抽取时间机动调研,在中午休息时间就访谈了近15位客户;


C、访谈结果及时产出:后项目组成员当即进行调研总结及改进建议,大大提高了访谈的输出效率,也提高了项目成员的对于用户的整体感知。用户调研不在于形式,在于是否通过有效方式得到想要的信息.优势:用户量大,意愿大,调研成本低 风险:目标用户不稳定、用户经营状态感知偏弱。

定性调研发现:


买家:主要工作行为是采购管理和销售管理,小买家不会进行进销存管理,进销存管理工具不能同步1688信息,查看物流不方便、不能看到销售数据情况,交易过的公司公司使用量低等情况。


卖家:主要使用群体为公司操作员基本每天都会进入后台操作,主要操作行为查看店铺数据、进行交易订单管理、商品管理、店铺管理、营销活动管理。核心关注曝光、访客及转化情况。调研中发现用户在后台操作的目标感模糊,例如用户反馈:刚开了店铺,后面要怎么弄,完全没方向!别人都是怎么做的,没有引导性;购买诚信通仅为了标识,无线上行为不知道要怎么做?没有把线下用户拉到线上等问题。


2、定量:通过数据分析发现用户使用都比较集中,部分模块使用率较低,有效信息少;长尾效应明显,交易链路为买卖家高频行为,抓手欠缺。


二、确定设计目标及策略


基于用户的行为差异及诉求差异,制定不同的设计目标及策略。工作台结合买卖家做了版本区分,分为买家版及卖家版


买家版设计目标:让买家拥有精细化的采销服务,提高进货效率


设计策略:

1、精简化:信息架构场景化,内容模块调整;

2、数据化、个性化:通过用户行为数据、关系数据提供个性化服务,接入第三方服务满足买家下游需求;

3、互动性:平台与买家、买家与卖家间的互动,进行服务触达,关系显性化,从而促进商业价值最大化。


卖家版设计目标:帮助商家更好的自我成长,提高自运营能力


设计策略:

1、精简化:信息架构场景化,快捷入口调整;

2、数据化自运营:分类管理,结合用研中了解的用户核心场景:管交易、管店、管货、管客及管活动进行模块分类;

3、卖家生命周期管理:建立用户成长激励体系,通过用户进阶分层明确成长目标,促使用户成长。 策略图:


三、交互阶段信息架构细化设计,建立模块产品化交互设计Guideline


信息架构核心抓手有三:


1、 导航分类场景化:以卖家版为例,在导航区域核心体现卖家四大工作场景:管交易、管店、管货、管客及管活动。

2、 内容场景数据导向化:中间内容区域以总体成长情况和场景数据情况进行导向性设计,提供数据分析及行动操作。明确用户核心关注内容及操作。


3、 模块设计产品化:建立模块交互设计Guideline 为保障后续新增模块价值传递的统一性,建立模块产品化交互设计Guideline。 对所有模块进行了功能分类,主要分为两种: 1、任务服务模块: 任务服务模块设计需要明确:模块是什么?(业务视角转为用户视角)目标&现状,怎么做及可获得什么服务。 2、消息模块:传递服务是什么?怎么做?


举例:客户管理模块

1、模块是什么?:店铺客户管理

2、目标&现状:店铺的访客、潜在客户、成交客户及流失客户情况

3、怎么做?:进行客户召回

4、可获得什么?:客户数量增加,客户管理类工具


交互设计微创新:功能地图设计


工作台中的功能入口众多,为方便用户查找及使用,对功能地图进行优化。统一工作场景分类认知与导航分类保持一致,减少界面中分类层级,用户点击功能地图后可进行自定菜单设置,将自己常用的入口钉到左侧菜单中。

优化前:


优化后:


四、视觉设计无边界,寻找核心发力点


通常一个产品进入视觉设计就开始YY各种品牌元素及表现感知方面的设计,而作为后台产品因其偏重操作,在视觉设计前,需要宏观的进行再思考,用户通过感知可以带来什么价值?在工作台视觉设计前进行了进行感知升级思考,建立感知升级闭环贯穿在整个视觉设计环节,闭环全图:


视觉设计核心发力点提取: 在对整体闭环有一定认知后,进行感知定位通过与项目组成员共建提取工作台感知云标签,提取感知关键词:简单、清晰及高效。在视觉层面主要通过风格定义、特色模块设计及情感化设计来发力。



1、风格定义:对B2B供应链管理类后台从颜色、图标、控件、模块等方面进行视觉层面竞品分析,同时了解时下主流产品设计趋势如微软、facebook,IOS11最新视觉风格。发现以下特点:


形:去装饰,以内容为中心,去掉了多余的装饰元素

色:少颜色,通过大小对比来突出主体,减少颜色

质:扁平化设计,微渐变

构:减线条,弱化线条分割,通过留白来区分空间,轻划分:巧用投影做区块划分 综合以上分析进行风格定义设计


买家版:


卖家版:


风格细节:

导航优化:为保障用户认知的统一性,沿用了老版本中买家橙色,卖家蓝色的颜色特征。导航设计中缩减了颜色在导航中的比重,通过版本字体来区分。简化老版本中当前状态的框选样式,通过TAB短线来表示当前状态。


内容再设计:老版本中代办模块信息内容密集识别困难,操作性较低,通过信息名片卡片式设计待办归类整理,突出核心内容


化繁为简:现有页面中模块很多用线条来区分,信息量比较多的情况下,页面相对复杂,因此弱化线条分割,通过留白来区分空间

图标设计:对后台产品中的图标进行了功能分类:说明性图标、权益性图标。后台图标设计需要控制其表现力度,因此在设计上通过局部细节点缀来表现。权益类图标与前台门洞类做区分,减少颜色运用,结合买卖身份做橙、蓝底色区分,使用简易面状的形式来凸显特征。



2、特色模块设计,以成长模块为例


模块设计背景:根据商家在平台的七项能力,统一分层体系,促进商家自运营,从而为买家提供优质货源和采购体验

设计方向:为帮助商家在平台更好的成长,全链路思考用户成长环节。在工作台中的透传中,使用商务跑的方式来激励用户,并给予成长引导 基于模块设计Guideline明确: 1、模块是什么?:我的成长 2、目标&现状:成长能力得分 3、怎么做?:成长任务 4、可获得什么?:成长权益 对模块进行划分:


成长感知定位,主要通过两方面,提取物像特征,提取表现形式


通过商务人物奔跑的形式来表现成长进度,为便于用户进行成长任务连贯操作设计全链路成长插件,提高成长效率。


3、情感化设计:


身份卡片设计:


使用2.5D元素来增加用户新手操作的实体感受:



五、后台动效,让工作台体验更流畅



在项目过程中非常感谢成龙、梅郁在设计思路及方法上的引导,感谢团队中顾佳、苏林给力的设计支持。


产品化设计任重道远,是一个不断优化迭代的过程,还需要联合各方力量一起合力,共同改进。在新形势下,设计师已不在是接需求的资源方,而是产品共同的缔造者。需要利用一切能够改善产品的方式,用我们的全部智慧和能力,为我们的用户服务。


作者:金莉


 收藏