用阿里巴巴的实战案例,教你建立设计思维!

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

一、业务概况

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

用阿里巴巴的实战案例,教你建立设计思维!

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

用阿里巴巴的实战案例,教你建立设计思维!

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

二、破的意识

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

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

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

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

用阿里巴巴的实战案例,教你建立设计思维!

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

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

用阿里巴巴的实战案例,教你建立设计思维!

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

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

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

局面将很「泥潭」,设计师如何来破?

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

4. 盘点卡片内容层级

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

用阿里巴巴的实战案例,教你建立设计思维!

5. 重理信息框架

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

用阿里巴巴的实战案例,教你建立设计思维!

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

  • 内容来源区:在商家信息基础上+内容发布时间+买卖家关系描述字段;
  • 内容描述区:将活动描述和商家文案融合,简化活动类型及时间描述,使之适配于所有内容卡片;
  • 内容区:内容区图片展示从4种收口为2种。

用阿里巴巴的实战案例,教你建立设计思维!

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

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

用阿里巴巴的实战案例,教你建立设计思维!

「需求尽管来,都可以用新的信息框架组装。」

「假设有组不出来的特殊需求呢?」

「…新增框架」

用阿里巴巴的实战案例,教你建立设计思维!

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

先搞定上游,和产品经理及运营重点讲「三重泥潭」的第一重和第二重,同时把以上思考及方案作推销,产品经理及运营听完很认同,收下方案。

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

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

三、如何立?

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

用阿里巴巴的实战案例,教你建立设计思维!

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

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

1. 以日历立「商机尽在掌握」的B类特色

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

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

用阿里巴巴的实战案例,教你建立设计思维!

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

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

用阿里巴巴的实战案例,教你建立设计思维!

3. 私密商品增强表达

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

用阿里巴巴的实战案例,教你建立设计思维!

4. 改版结果

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

结语

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

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

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

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

欢迎关注「阿里巴巴UED」的微信公众号:

用阿里巴巴的实战案例,教你建立设计思维!

「优秀团队的改版设计案例」

收藏 50
点赞 4

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。