header_v1.7.40

设计思维的“破”与“立”——以挑货改版来谈

32天前发布

原创文章 / 多领域 / 观点
阿里巴巴_B2B_UED 原创,如需商业用途或转载请与阿里巴巴_B2B_UED联系,谢谢配合。

本文以挑货的改版,谈设计思维破局及特色价值建立的一次过程。作者:张加其

前言

在互联网公司中,设计师搞事伙伴主要有产品经理、运营、技术,常规合作流程为产品、运营输入需求,设计师以自身的美感品位创意才华巧技…输出设计方案,如果方案有一些撩拨用户的特效和细节,可能还得端上星巴克求技术哥哥帮忙实现。在这种习以为常的合作流程中,我们既难以决定需求的有无,也缺乏驱动下游技术的抓手,角色较被动。本文以挑货的改版,谈设计思维破局及特色价值建立的一次过程。


业务概况

在1688业务大盘中,老挑货是长图文为主的市场,买家通过看平台精选的长图文内容找货。随着业务的蓬勃,挑货变为基于买卖家关系的导购市场,买家通过看与其有关系的商家上新、活动、直播、爆款等动态来找货。

由于挑货业务定位和栏目内容较老版都发生了变化,故设计上对不同类型内容做差异化处理,让买家认知到各类型的商家动态都在挑货。

新挑货上线后,UV较之前翻倍,多项关键业务指标也都超预期。这为商家主动在挑货发内容提供了动力,也吸引了平台横向业务积极与挑货合作。


破的意识

如果设计师把角色定位为完成上游产品、运营需求的资源,那么在新挑货表现尚可的情况下,接下来要做的需求可以预见:基于现有卡片,改造一份增加商家文案后的卡片;根据横向业务输入的需求,基于已有的卡片样式,继续新增卡片类型。

踮起脚看,如果这会儿设计师选择被动等上游提需求,不主动make点difference,挑货将迎来三层“泥潭式”的重。


第一重,用户将负担不必要的阅读成本

目前卡片已有5种类型,卡片加入商家文案后,信息层级将更臃肿,卡片类型预计到10种。横向业务不定期的需求输入,卡片类型还将持续增加。而看线上数据,用户基于内容类型做筛选的点击占比极低,反映出内容卡片做的差异化表达,为用户带来的价值并不大,反而增加了阅读负担。

第二重,内部协作流程长,资源投入大

横向业务输入需求到挑货的产品和运营,产品经理和运营要和横向业务磨,类似于商家“镇店之宝”、“私密商品”、“优惠券”等内容是否要在挑货做。上游业务磨清楚后,召集横向业务的产品经理、运营、挑货的设计、技术开需求评审会,设计排期出方案,之后设计评审再技术排期,开发完成后上线——而这个流程,还只是新增一种内容卡片。

第三重,技术基于业务逻辑开发,卡片类型越多,性能越难保障

挑货2.0改版时,技术对五种卡片单独进行开发,后续每新增一种卡片类型,都需投资源新开发。且卡片类型越多,页面加载速度越慢。挑货帧率一度在46徘徊,用户浏览挑货时,已经感受到明显的卡顿,若继续新增卡片类型,挑货可能会卡得让用户不爱这个老关系市场。

注:帧率为帧的位图图像连续出现在显示器上的频率(速率),指一秒内的刷新频率,在线上场景中,60是较完美状态,低于50用户将感受到卡顿。


局面将很“泥潭”,设计师如何来破?

设计师开始给自己加戏,为需求方代言,给自己提需求了。


盘点卡片内容层级

由于内容类型做了差异化表达,不同内容卡片上,相同信息层级也分出多个样式,且业务即将新增商家文案及优惠券,这将使卡片多出更多信息层级及样式。卡片内容如图所示:

重理信息框架

盘点卡片信息层级及优先级,以内容来源+内容描述+内容来收口。

盘点信息后,基于内容来源+内容描述+内容的逻辑做信息的删减融合。

内容来源区:在商家信息基础上+内容发布时间+买卖家关系描述字段;

内容描述区:将活动描述和商家文案融合,简化活动类型及时间描述,使之适配于所有内容卡片;

内容区:内容区图片展示从4种收口为2种。

基于视觉框架组装卡片的设计

将收口后的信息层级抽象为视觉框架,并列出框架内的具体内容。基于此框架进行开发,可灵活组装出各类型动态,而非之前以单张卡片为单位进行设计及开发。同时,这种基于框架组装生成卡片的方式,也为承接未来的业务需求留足了扩展性。

“需求尽管来,都可以用新的信息框架组装”

“假设有组不出来的特殊需求呢?”

“…新增框架”

以上只是设计师给自己加的戏,还得游说上下游的搞事伙伴,把戏落实进用户的屏幕。

先搞定上游,和产品经理及运营重点讲“三重泥潭”的第一重和第二重,同时把以上思考及方案作推销,产品经理及运营听完很认同,眼泛微光,面色红润,收下方案。

再搞定下游(当然也可以等产品经理和运营去向技术提需求,但我没这样做),和技术哥哥们聊,重点讲了三重泥潭的第一重和第三重,同时把以上思考及方案作推销,技术哥哥听完很感动,因为主管给他的核心业务指标是,把挑货徘徊在45的帧率提上去,新的框架设计思路,利于提高挑货的性能。

技术基于新的信息框架进行开发,灵活组装成多款内容卡片,产品经理和运营也可以基于这种轻量级卡片,灵活地和横向业务合作。当然,最大的价值是为用户带来了更简洁流畅的内容呈现。


如何立?

破的事情做了。从设计师的角色里踮起脚预见问题,主动给出解决方案并推动落地了,但设计师的特色价值又立在哪里呢?比如手机淘宝的“微淘”,也是用户关注店铺,集中看内容的场景,如何立出1688挑货和微淘的区别呢?

1688和淘宝的区别是B和C的区别,具体BC间的差异,各位可移步《从买家差异看B类&C类电商体验设计创新》,本文仅拎出1688的挑货与手机淘宝的微淘间细节点的不一样(并不拎出微淘和挑货间有什么不一样)。

请聚意!设计思维要立挑货区别于微淘的B类特色了!


以日历立“商机尽在掌握”的B类特色

C类买家逛微淘主要找个人感兴趣的,而逛挑货的“买家”很可能是商人,他们是要从挑货中,挑出好货批发回去做生意赚钱。对来挑货的B类买家而言,挑货是基于老关系找商机、锁定商机的重要阵地。此外,挑货里的店铺活动、伙拼、直播等动态有时间范围,也支持买家通过“设置提醒”锁定商机。

所以在栏目的头部设计上,选择了日历的形式,承载每日上新和买家“设置提醒”锁定好的商机,内容筛选及内容卡片的“设置提醒”也都以日历icon联动表达,营造挑货栏目“我的商机尽在掌握”的场景特色。

基于B类特点的商家名称备注功能

做B类买家线下调研时,我们发现买家逛1688,很难通过商家名定位和识别“这是哪位供应商”,什么原因呢?不同于淘宝短且易记的店铺名,1688的商家/公司名常有一二十个字,买家很难记住!看了也很难认出这是哪家供应商来着?此外,买家想采购时,有时候也会习惯加微信或直接电话联系商家。挑货作为1688基于关系的市场,让买家准确定位出动态来自于哪个商家,太重要了!所以我们希望支持B类买家备注商家名称、电话、权益说明等内容,让买家通过备注商家信息及关系描述字段准确识别并定位商家,让买家对挑货这一老关系场有更强的感知。

私密商品增强表达

通常来说,C类用户在淘宝上买了好东西,会想分享给自己的亲朋好友。而B类买家在1688发现了好东西,是要批发回去赚钱的,巴不得除了他就没更多人知道,所以B类市场,有做私密的空间。在挑货这种基于老关系的市场,商家愿意为头部买家透露私密商品,为了让买家不辜负商家对他敞开的私密,我们对挑货“私密商品”进行了增强表达,加入撩拨用户的特效和细节(之前“破”助力了技术哥哥,这里的“立”不用再端上星巴克求开发哥哥)。

改版结果

通过“破”和“立”的这一系列动作,助力增强了挑货这一基于关系的市场在买家端的心智感知;技术基于新的信息框架开发,挑货的帧率从之前的45.69提升至54.36,用户浏览不再感觉到技术原因的卡顿;引导进店UV及引导进店率等关键业务指标也有一定提升。


结语

以上就是挑货改版过程中,个人设计思维“破”和“立”的运用,希望对大家有益处。最后想起一位哲人曾说的 “世上没有白走的路,每一步都算数”,想分享自己初入职时遇到过两个小事:

1、运营提需求,要在一个并不贴合用户预期的场景里“加个吸人眼球的banner”,当时求助主管,他莞尔一笑“这里流量大,运营只是想有做运营的空间,不一定是banner,有很多开凿运营空间的方式啊”!我醍醐灌顶,输出了更利于做运营的其他方案,运营同学看到方案后惊叹“你你你,你太懂用户了,设计得真好!”

2、另一次评审,技术挑战设计的某处细节,评审后我沮丧我懊恼,主管又莞尔一笑,“设计可以的,不用太在意他说的,他不是觉得这里设计得不好,而是因为开发起来成本比较大”。

写这篇总结前,并没有认为这两个事对自己有什么影响,写到这里才忽然意识到,也许第一个事情告诉我,设计思维可以破局,第二个事情告诉我,设计思维可以立稳价值。感谢各位阅读,希望读本文不是“白走的路”,未来能“算数”。


·感谢大卓、郭楠、舒舟、晶晶等伙伴在挑货的设计上给的指导和帮助;

·感谢舒舟、学桢、徐珊、大卓、辰七等伙伴在行文上给的建议。


63
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功