从0到1设计购物车功能

企鹅博客
19277
文章
0
评论
2019年7月13日20:44:05 评论 1K views 2225字阅读7分25秒

之前写过一篇《实例分析:不同平台购物车设计》,分析了主流平台的购物车功能利弊。这次,我基于自己公司的产品定位,写了对购物车各子功能原型设计思路并画了原型图。下面,和大家一起来开启从0到1设计购物车之路。

一、编辑功能

编辑功能是最基础的购物车功能之一,主要包含5个子功能,分别如下。

购物车可编辑商品的规格(图标注1);编辑商品的数量(图标注2);当商品缺货或者下架会自动状态变更,可一件清空失效商品(图标注3);当一件商品同时参加多个优惠活动时,可更换参加的活动(图标注4);批量编辑(红色框区域)将商品移入收藏或删除(图标注6)。

另外还有长按弹窗删除(也可移入收藏),左滑删除的快捷键。

二、批量结算功能

购物车最基本功能,帮助用户计算选中商品的总价、运费、优惠金额,批量支付。

在这里,我遇到了一个难点:当多个店铺的商品一起结算,运费如何算?

我们平台类似于京东,有自营也有入驻店铺。

我才去的做法如下:

进行拆解,以店铺来拆,一个店铺一个订单,分别计算价格。

计算单个店铺的总价(商品价格和运费),运费是个难点,不同的商品可能会有不同的运费模板,例如商品A是1kg以内5元,每增加1kg运费加3元;商品B是1kg以内6元,每增加1kg运费加2元。

假设两件商品都是2kg,那A和B两件商品一起结算,运费应该是多少?

我的做法是取首重最小值和续重最小值,即首重5元,续重2元,运费就是5+2*3=11元。

再考虑极端情况,有些商品还可能运费模板是按件数计费的,当重量和件数两种不同单位的商品一起计算,那运费是?(商家可设定多个店铺模板,每个店铺模板有两种单位让商家选择)

例如:出现一个商品C是1件4元,没加1件增加2元,A和B和C一起结算,我的做法是拆开,分别计算重量及体积的商品的运费(同上),最后把两部分运费取和,A和B是11元,C是4元,运费就是15元。

最后把不同店铺的总价再取和,得出订单的总价。

此外,我们平台还有礼品卡和优惠券的功能,在设计这一块的时候非常纠结如何放优惠券及礼品卡的位置。最后没我的设计师,优惠券放在每个店铺里面判断的(见上图),优惠金额不抵扣运费。

店铺费用合并再判断是否可用礼品卡,一次性抵扣。

三、优惠券领取

以店铺为单位,若购物车的商品有能使用的店铺券,则店铺旁出现“领券”按钮(没有则不显示),点击后出现右侧弹窗,提示用户哪些优惠券可领取,可使用的商品有哪些,还能去凑单(跳转所有可用该优惠券的商品列表)。

领到的用户会考虑在优惠券过期前,尽快使用,促进转化;凑单的用户花了更多的时间成本在挑选商品上边,转化的可能性也会提升。

四、活动凑单

1. 折扣凑单

平台运营往往会不定期得举办活动,购物车是很好的活动支撑,告诉用户哪些商品能参加,是否满足参加条件。若不满足条件时,在购物车引导用户进行凑单。

我们平台目前可能上线的是满减、满折的活动。上图告知用户可参加满150-20的满减优惠,用户可用过凑单超链接(标注1),链接到左侧参加活动的所有列表,进一步筛选商品来凑足优惠。

这里要注意筛选(标注2),凑单最核心的是价格,所以我在筛选弹窗中做了个价格的区间搜索。当用户凑满后,购物车会提示用户已凑满(标注1变化),结束引导。

2. 优惠券凑单

除了满减满折等折扣凑单,我把优惠券的凑单功能也做到了购物车页面(受苏宁易购启发),判断选中的商品是否有已领取的可用的优惠券,有则显示凑单状态。

上图第一个是没凑满的状态,会出现标签1的提示,告诉还差10元能使用优惠券,用户可点击出现弹窗查看可用商品,并跳转到凑单商品列表去凑满10元,使用22元的优惠券;展开的弹窗会展示所有用户可以使用的优惠券,若选中的商品不能使用某张优惠券,可以通过点击“查看可用商品”去凑单使用该优惠券。

当凑满后,见第二个图,购物车显示已凑满,点击展开后任然可以展示所有优惠券的列表,已经凑满的优惠券会醒目的出现在用户视野。

很多平台凑满后,就会关闭凑单列表入口,作为一个经常购物的人,我觉得会有凑单产生纠结,在两个商品间游移的情况,所以给了“再逛逛”的入口,让用户方便更换凑单的商品。

购物车会自动进行排序,把最近添加到购物车的商品选中,并排列到购物车最上方。其余商品属于同一个店铺的会归类打包到一起,变成一个整体,并按照最新最前的逻辑排列。

若A店铺和B店铺都有一个商品参加满199-20的活动,那应该怎么排序呢?

我的答案是:活动的优先级大于店铺的,若把A与B放一起,我会把他们合并在“跨店联合活动”下面,如下图。不过计算费用的时候,我还是会把他们各自拆开计算,逻辑还是用上方我讲的“批量结算”的计算方式。

五、降价&库存不足提醒

运用心理学的两个功能,当库存不足或商品比当初加入购物车便宜时,及时提醒用户:“该买了,赶紧下单吧!”

六、地址定位

用户到购物车会自动获取地址(未设置过的用户取当前定位的城市,设置过地址的用户取默认地址),根据用户的地址计算运费,获取发货的仓库及库存(多个仓库都有该商品)。

七、后期延展功能

我们平台上线没多久,用户基数小,数据很少,所以购物车没有放找相似、个性化推荐、购物车清理工具等功能,等后面用户基数大了,我再做延展,到那时候对平台用户的画像也会更清晰,到时候根据实际需求设计推荐算法。

八、最后想唠唠

以上是我个人的一些分析,公司就我一个产品,很多时候尴尬的是遇到问题,会找不到人讨论,也不知道想法对不对逻辑是否严谨,以上是我所想的功能原型设计,希望大家能和我一起探讨。

 

继续阅读
  • 版权声明: 发表于 2019年7月13日20:44:05
  • 转载注明:https://www.qieseo.com/118841.html
APP使用流程中的最后一步-完成与返回 产品设计

APP使用流程中的最后一步-完成与返回

功能型产品以实现某一项功能为目的,为用户提供方便,如订票APP为用户买票,图像处理APP为用户处理图片,购物APP为用户买东西。为达到流畅的操作,功能型产品注重流程设计,每一个步骤都依靠界面实现其功能...
浅析余额宝现状及未来 产品设计

浅析余额宝现状及未来

2013年6月,一个叫做余额宝的东西横空出世,从刚开始用户的疑惑,再到大家凭着对于大阿里,亦或是马云的信任,开始逐渐尝试这个新颖的赚钱工具,一时间好评如潮,小宝也创造了短短一个月聚拢资金150亿人名币...
浏览路线设计 产品设计

浏览路线设计

我第一次去上海宜家是2006年的时候娜姐带我去的,她特意告诉我让我细心去观察宜家的每一个细节。刚一进入宜家的大门就看到一张在大厅墙上的路线图。一张极为简单的路线图,就是一个大圈。从入口到出口正好形成了...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: