电子商务结账设计案例研究
1888 年，26 岁的威廉·亨利·贝尔克 (William Henry Belk) 开了一家商店，后来发展成为美国最大的私营百货连锁店：Belk。如今，该公司拥有 290 家分店，主要分布在美国东南部，Belk.com 是美国访问量第七大的电子商务和购物网站。但即使是像 Belk 这样成功的零售商也面临着数字化挑战。根据 Baymard 研究所客户体验研究人员 2024 年的数据，全球电子商务零售商的平均购物车放弃率高达 70%。该研究所还根据可用性测试得出，大型电子商务网站平均可以对其结账流程进行近 40 项改进，这一举措可使转化率提高 35%。
为了应对这些全行业的挑战，Belk 的管理团队呼吁进行为期六个月的电子商务改革，包括重新设计购物和结账体验。作为这项简化购买渠道的更广泛举措的一部分，我被要求重新考虑购物袋体验（即客户在购买前如何查看他们的选择）和随后的结账流程，在此期间用户提供送货和付款详细信息。
重新设计的网站生动地说明了如何体谅用户的需求（在这里指的是年龄较大的用户群体）可以改善电子商务体验，从而提高客户满意度、转化率和销售额。
电子商务结账挑战
Belk 的执行团队希望在六个月内发布 MVP（最小可行产品），这是一个可行但激进的时间表。该团队已经对公司的用户群有了相当深入的了解，因此设计过程源于现有分析，而不是新的用户研究。Belk 告诉设计师，该公司迎合的受众群体近 80% 是女性，其最大的客户群年龄在 55 至 64 岁之间。此外，65% 的 Belk 客户年龄在45 岁或以上，46% 的客户通过直接流量访问网站，平均访客浏览 5.19 个页面并在网站上停留超过四分钟。
为了补充现有的研究，我分析了 Nordstrom 等竞争对手的网站，并向 Baymard Institute 寻求帮助，以查看购物车和结账用例和设计模式的最佳实践示例。我还借鉴了我设计和推出桌布品牌Prado y Barrio的经验，以及之前为荷兰最大的连锁药店之一 Etos 设计忠诚度应用程序的项目。这两个角色都让我了解到一个重要的电子商务原则：从客户旅程中消除不必要的步骤至关重要。
在检查 Belk 的网站后，我发现结账流程页面太多、文字太多，行动号召 (CTA) 按钮不一致且位置不理想，并且没有足够的图片来帮助买家查看和理解他们所购买的商品。对于中老年用户的目标受众而言，这些问题尤其成问题，他们由于远视和老花眼等可能在以后的生活中出现的状况，往往难以近距离看清东西。这些问题在移动屏幕上只会变得更加严重。
我对结账流程进行重新设计的主要目标是简化用户在查看购物袋中的商品并进行结账时遇到的屏幕、页面元素和交互流程。这些变化专门针对老年用户，但我相信它们将使每个人的体验更加用户友好和直观。作为设计工作的可交付成果，我分享了 Belk 移动和桌面购物渠道可用性变化的优先建议。
简化购物袋体验
对于购物袋体验，我们的主要目标是简化页面并引导用户执行一项关键行为：仔细检查袋子中的产品是否尺寸、款式、颜色和数量正确。任何曾经收到过尺码不合适的裤子或订错航班的人都明白这一步为何如此重要。退货对零售商来说是一笔重大损失：2023 年，客户退回了价值 7430 亿美元的商品。
在改版之前，Belk 网站提供了查看行李内容的选项，但该设计存在三个问题：
- 促销优惠信息占据了整个屏幕，分散了用户的注意力，使他们无法专注于主要目标。
- 产品图像太小，一些用户看不到。
- 通过包裹编辑按钮，用户可以在流程的每个步骤中更改他们的订单选择，而不是在流程结束时准备结账时。
增加缩略图尺寸是一个直觉决定——我们用眼睛来购买。但我们建议清除网站中的杂乱内容，并将编辑菜单限制在确认屏幕上，这是为了应对所谓的“选择悖论”，这一术语源于一系列研究，研究表明，选择太多会导致无所适从，让人们对自己的选择不太满意。
例如，研究人员 Sheena S. Iyengar 和 Mark R. Lepper 开展的一项开创性研究发现，当杂货店购物者在展示台上看到太多美味果酱选择时（即 24 种果酱选择而非 6 种），他们购买果酱的可能性就会降低。这一令人惊讶的发现受到了菜单选项有限的快餐休闲餐厅（如 Chipotle）和越来越多的数字产品设计师的欢迎。
秉承这些经验教训，我们针对“我的包”页面提出了几项策略性建议，以减少放弃率并通过消除干扰来扩大 CTA 的作用。这些建议包括：
- 折叠“我的购物袋”页面移动显示中的搜索栏，以限制放弃并增加滚动深度。
- 缩小 Belk 信用卡活动横幅的尺寸，并允许用户在不感兴趣时完全关闭窗口。
- 将颜色、尺寸、数量和运输详细信息自动折叠到一个整洁的容器中，并提供 +/- 选择数量变化。
- 在用户完成结账后，在购买流程的后期显示快速结账付款选项。
- 添加使用模式（灯箱）编辑袋子内容的选项，该选项需要用户参与，无需返回产品列表页面。
- 使用移动屏幕底部的粘性 CTA 按钮来引导用户完成购物渠道。
重新构想结账流程
对于结账体验，我们的主要目标是将分布在三个独特页面的信息（运输详情、付款信息和订单审核）压缩为一个可滚动的页面。
80-20 原则，也称为帕累托原则，帮助我们决定在设计中优先考虑哪些内容选项。简而言之，该规则假定 80% 的业务成果是由相同的 20% 的原因造成的。应用于 Belk 的移动和桌面结帐页面，这些“原因”归结为可访问性以及查看和调整订单详细信息、联系信息、付款详细信息、发货地点和到达速度的难易程度。这就是我们投入精力的地方。
借鉴 Belk 高转化率的移动应用，我们为访客和登录用户创建了单独的结账流程。这使我们能够更好地定制结账体验。例如，访客用户不太可能拥有 Belk Rewards Dollars 证书，因此我们缩小了访客结账中这些字段的大小。
对于登录用户，我们的重点是将所有相关的订单详细信息放在首屏。在 Belk 以前的网站上，这些详细信息显示在多个部分，需要用户跳过关键信息才能下订单。我们修改后的设计将缩略图、预计交货日期和订单价格放在一个页面上。这样，用户可以更轻松地同时看到他们要购买的商品、订单价格以及预计何时送货上门。
在客户花时间搜索新泳衣或凉鞋后，他们不想再花更多时间滚动寻找“购买”按钮。将“下订单”CTA 固定在结帐页面底部，无论用户向下滚动屏幕多远，它都会停留在原处，以鼓励他们完成购买。由于保存了他们的联系信息、地址和付款信息，因此无需询问这些信息：登录用户只需单击两次即可完成结帐。
概括起来，我们的主要建议包括：
- 将三页、多步骤的结账流程简化为简单的一步结账。
- 在移动设备和桌面屏幕的底部添加粘性 CTA，以牢记用户的目标并鼓励漏斗进展。
- 合并表单字段（例如电子邮件、电话号码、邮政编码、城市）以提高滚动深度。
- 在输入字段内加入大而清晰的文本字体的标题，以提高可访问性。
- 显示包含缩略图、订单价格和履行详情的首屏订单摘要。
- 默认使用信用卡向客人付款，并提供 PayPal 和 Afterpay 的替代选项。
编码设计解决方案
新的结账流程为客户提供的许多选项（包括店内取货、当日送达（在某些地区）和代发货）要求开发团队重新配置算法并编写离散代码字符串以应对极端情况和地理依赖性。重新设计的核心挑战之一是将多种付款和履行选项纳入源代码。
例如，虽然标准货运可以在 15 天内到达美国任何地方，但当日送达服务仅适用于部分邮政编码地区的客户。Belk 的电子商务团队在预算时间方面做得很好，可以适应这些细微差别，这对于客户体验至关重要，但需要相当复杂的软件工程才能执行。
在工作流程层面，实现如此高水平的用户自定义意味着设计和开发团队之间几乎不间断的沟通。添加场景的 Figma 页面是我为该项目制作的最大文件，我几乎每天都与工程团队交换意见，以优化礼品卡购买、替代支付选项和其他场景的用户体验。
另一个挑战是，虽然 Belk 的电子商务网站是第三方零售商的市场，但这些零售商的产品并不总是提供免费和折扣运费奖励，而且这些产品也属于不同的退货政策。将它们与附带标签区分开来作为“市场产品”非常重要，这样可以清晰地说明购买流程，并有望避免可能让用户感到沮丧和损害他们信任的误解。
虽然我们尽最大努力适应极端情况，但在某些情况下，保持简单和经济高效需要做出艰难的选择。最初，我们想为用户提供一种分批发货的方式——比如，将两条休闲裤中的一条寄到家庭地址，另一条寄到工作地址。但与开发团队的对话和进一步的市场分析表明，该功能将为一小部分用户带来的便利无法值得花费大量时间和人力来编写代码。
如果这里有一个教训，那就是：便利可能是电子商务的关键，但如何实现便利应该基于用户行为，而切勿过分追求便利，以免蚕食你业务的其他方面。
合作培养信心和信任
电子商务结账是数字设计的一个领域，需要整个组织利益相关者的开放协作。在这种情况下，设计和开发团队之间的对话揭示了两个团队都无法独自找到的解决方案，例如如何按地理区域细分当日发货的选项。与营销团队的长时间对话也带来了同样重要的启示。例如，促销横幅可以是一种有效的销售工具，但如果放置不当或过于占用屏幕空间，它们可能会激怒客户并影响销售。在这里，解决方案是一种妥协：我们保留了横幅，但缩小了它们，这样它们就不会将 CTA 推到首屏以下。
在这些模棱两可的情况下，要找到正确的平衡，需要采取整体方法，并让团队之间保持开放的沟通。有时你需要努力推进自己的想法；而其他时候，倾听才是最好的选择。
