从0到1设计购物车功能

产品小白专属,10周线上特训,测、练、实战,22位导师全程带班,11项求职服务,保障就业!了解一下

之前写过一篇《实例分析:不同平台购物车设计》,分析了主流平台的购物车功能利弊。这次,我基于自己公司的产品定位,写了对购物车各子功能原型设计思路并画了原型图。下面,和大家一起来开启从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元的优惠券;展开的弹窗会展示所有用户可以使用的优惠券,若选中的商品不能使用某张优惠券,可以通过点击“查看可用商品”去凑单使用该优惠券。

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

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

3. 商品排序

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

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

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

五、降价&库存不足提醒

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

六、地址定位

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

七、后期延展功能

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

八、最后想唠唠

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

 

作者:季月,微信公众号:季月

本文由 @季月 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 Unsplash,基于CC0协议。

给作者打赏,鼓励TA抓紧创作!
5人打赏
评论
欢迎留言讨论~!
  1. 不错,还没细看,同为只有一个产品设计一个电商app,你的文章我将作为参考

    回复
  2. 只有一个产品 你可以拉着我去啊 本人明年6月毕业 可实习
    有产品实习经历 一本 在学校也有app设计经历

    回复
    1. 只有一个产品有时候并不是招不到人,是用人成本的问题

      回复
    2. emmm
      那能不能加我一个微信呢 万一有机会呢 :smile:
      p13629199764

      回复
  3. 缺少着商品状态的考虑,最常见的分类:有效商品和失效商品,其中,失效商品又细分为下架,删除,售罄,当然售罄状态能够做其他的设计。

    「删除」的交互,对安卓和IOS也被其他的产品培养了一些习惯。

    选中和开启编辑功能后的切换,由编辑状态恢复到常规状态的刷新,细节性的交互需求也可以进行说明。

    回复
    1. 感恩,在编辑那一块我直接展示的图,细节描述一笔带过了,可能会有些不清楚,哈哈

      回复