Back

DTC的购买页设计

概述

假在所有独立站中,受众特征决定了所有的设计逻辑。而受众,又是由品类决定的。
产品的特征会吸引对应的受众,我们的设计需要符合目标用户。

品类

假发 ,美妆类

目标受众

北美黑人

平台

Shopify

市场特征

假发对于黑人而言,是必须品。每个黑人都是发型专家,对假发的从小耳濡目染非常清晰。因此,该品类结合了日用品和美妆的特征。

生活与时尚用品

快速决策购买

外观导向的产品

场景化

常规DTC流程

对于高品质&技术含量的单品而言,往往标准的流程如下,通过一个极佳的产品详情页,来说服用户。

广告平台
AD Platform
详情页
Landingpage
购买页
Purchase Page
购物车
Shopping Cart
结算页
Checkout

假发DTC流程

而对于高频率购买,且用户很了解的品类而言。以上流程就非常的不合适。因此需要尽可能的缩短步骤。

广告平台
AD Platform
详情页
Landingpage
购买页
Purchase Page
购物车
Shopping Cart
结算页
Checkout

扩展阅读
假发品类报告

该报告介绍了用户的特征,决策逻辑等等

设计逻辑

通过热力图,以及品类目标用户的特征,设计了新的页面。解决了Shopify默认模板不合适的问题。有效的提升了页面转化。

默认模板无法满足需求

没有KSP标签
图片展示无分类
没有秒杀与倒计时组件
没有营销组件
没有价格的分期展示
没有套装或者赠品模块
Guide只有尺寸才有
物流信息很粗糙
没有悬浮按钮
….

热力图分析

前面3屏是用户停留时间最多的,特别是首屏,所以要把关键信息尽可能放在前面。

第一屏

  • 首图精选发质和高清图,吸引用户
  • 交互区吸引用户互动,产生更深印象
  • 自动轮播和视频,提升用户了解
  • 功能+细节+详情,让用户速览该产品

第二屏

  • 标题和标签方便用户快速识别产品核心信息
  • 突出优惠后价格,支持分期,购买消费门槛
  • 营销活动区,有多种优惠折扣,刺激消费欲望
  • 尺寸蕾丝都有Guide,让选型更加准确,减少退换货

第三屏

  • 配置活动营销专区,优惠力度大,吸引消费者
  • 配送时间更加精准,方便用户时间规划,提升购物体验
  • 提供丰富多样的支付选择,满足不同用户的支付习惯
  • 可通过产品信息和清单中,详细了解产品的具体参数、功能特点以及包装内物品等信息,帮助用户全面认识产品
  • 可通过品牌保障,了解为用户提供的相关售后服务,让用户购物更安心

购买页面的原型演示,可以点击操作

Tips: 以下内容为figma嵌入,请耐心等待加载,然后鼠标移入可滚动查看。

细节设计

根据每屏的问题,有一个前后的对比,更加直观地看出改版前后的区别

第一屏

热力图显示这是用户点击最高的区域,在橱窗图的设计与规范上,需要尽可能展示更多吸引力的内容来提升转化

橱窗图设计

用户是把橱窗图看成详情页的地方,可以快速了解商品详情并完成购买,所以橱窗图设计优化直接影响转化率,是购买页中非常重要部分

封面图演示,可以上下滚动查看内容

Tips: 以下内容为figma嵌入,请耐心等待加载,然后鼠标移入可滚动查看。

其他细节设计

根据每屏的问题,有一个前后的对比,更加直观地看出改版前后的区别

第二屏

第三屏

第四屏

UI Kits