视觉升级

“售后退换”大升级

(A)

2021年底至2022初,我与 UX 设计师 Jingyao 合作为 Returns shopper 进行交互/视觉升级。在任何平台上或平台外,消费者在退换货时都可能会使用到 Returns,所以我们有责任将其做得更流畅更具美观,帮助商家减少信誉与货品损失。这意味着我们的平台团队、品牌团队以及每个编辑人员及其设计团队之间的协作的成功。

这里展示的大多数项目都侧重于重新设计用户界面,更好地展示 Returns shopper 可以支持任何的品牌语言,基于 AfterShip 的”移动端规则优先“,项目将特别关注移动领域。

(B)

Returns 作为 AfterShip 第二大产品,已经成为了公司的重要项目之一。作为敏捷开发精神的追随者之一,我加入到 Returns 帮助 Shopper 端拥有更好的视觉表现(特别是移动终端的表现)尽管在项目进程中途。我在公司设计资源协调下去协助合作平台项目。但是我仍为 Returns 迭代上线并取得成功而骄傲。

(C)

- 职位:2021-2023 UX Designer

前言

Returns 产品分为两个部份,一个是 Admin,商家(B端用户)可以在上面管理自己的退换货情况与设置规则。另一个则是 Shopper,商家可以通过 Returns 提供的 CSM 框架来向他们自己的用户(C端用户)展示品牌退换货页面。Returns 团队在 2021 年被确立为公司第二大产品,并投入更多资源进行团队扩充与销售升级。

在 2021 年底,我与 Returns 合作进行 Returns Shopper 视觉升级。我门的目标是推动整个 Shopper 的品牌表达,以流行通用为准设计共享的组件模块。例如,如果像 Dyson 这样的网站需要一个用于退换货的页面模块,那么我们可以将其用作表达其品牌设计的点,来增强 Dyson 品牌的声音。

研究设计期间,我们研究每个品牌,以及他们受众的期望。期望以用户为导向,在完成后,我们的 Shopper 感觉并不是纯粹的通用 CMS 设计元素。而是每个使用者品牌驱动下的完整视觉呈现。

产品发展

AfterShip Returns 是该 AfterShip 与 2018 年推出的一款产品退货管理系统,旨在帮助电商企业简化和优化退货流程,提升客户满意度和运营效率。

经过数年的发展壮大,Returns 已经成为 AfterShip 不可或缺的重要组成部分。随着电子商务行业的迅速发展(特别是疫情时代)和竞争日益激烈,退货管理变得越来越重要。Returns 不仅仅是简单的退货处理系统,它已经演变成了一个综合的退货解决方案,涵盖了退货申请、退货物流、退款处理、客户沟通等多个环节,让电商企业能够更加高效地处理退货事务。通过 AfterShip Returns,电商企业可以提供更便捷的退货流程,减少客户投诉和纠纷,提升品牌声誉和客户忠诚度。
[图 1]
在2021年,Returns 开始与中小企业(SME)和大型企业(Enterprise)用户展开合作,这标志着产品逐渐进入成熟期。通过采用产品导向增长(PLG)策略,Returns 能够更好地满足不同规模的客户需求,并为其提供更加个性化和专业化的服务。
[图 2]
然而遵循 PLG 策略的 Returns 在通往成熟期的发展中遇到了瓶颈,主要困难在于以低价格来吸引 SME 的策略已经达到了极限(甚至有些合作企业直言选择我们是因为其低价格优势)。而产品功能与体验也无法说服 Enterprise 用户买单。 这样的策略也会带来许多负面影响。

- 产品的用户体验和价值是至关重要的。如果过分依赖低价格,可能会降低产品的价值和用户体验,从而影响用户的满意度和忠诚度。

- 低价格往往会吸引一些价格敏感的用户,但这类用户可能并不是忠诚度高的用户,他们更可能会转而购买价格更低的产品。

为了进一步推动Returns的发展,我们需要提升其产品特性和交互体验,从而提升产品的价值和竞争力,吸引更多用户并使其长期留存。

Returns 组成

[图 3]
Admin 部分:商家可以在 Admin 部分管理自己的退换货情况和设置规则。通过 Admin 部分,商家可以方便地跟踪退换货订单,管理退货流程,设置退换货规则和政策等。这样可以帮助商家提高退换货的效率和管理水平。

Shopper 部分:商家可以通过 Returns 提供的 CSM 框架向他们的用户展示品牌的退换货页面。通过 Shopper 部分,商家可以自定义展示页面的风格、内容和功能,从而提升品牌形象,增强用户体验,同时也可以帮助用户更方便地进行退换货操作。

通过 Admin 和 Shopper 两个部分的协同作用,Returns产品可以帮助商家更好地管理退换货流程和提升品牌形象,同时也能够提供优质的退换货体验给用户,实现双赢的效果。

Returns 是怎么帮助不同品牌实现其品牌感的?

Returns Shopper 基于 CMS 帮助商家建立品牌感。内容管理系统(CMS)是一种用于管理和发布在线内容的软件系统。它允许用户创建、编辑、组织和发布文本、图片、视频等内容,而无需具备专业的编程知识。商家通过 Shopper 可以轻松地创建,更新和维护其品牌网站。
[图 4]

“Shopper ” 是个老头

对比 基于 Shopify Polaris 组件库设计的 Admin。与此相比,Shopper 页面设计风格看上去更像十年前的购物网页,其缺乏现代化的设计元素和用户体验。
[图 5] 设计缺陷
[图 6] 旧风格
[图 7] 混乱的布局
[图 8] 移动端不友好
针对设计风格陈旧、缺少规范、视觉不统一、缺少品牌性等问题,我们的策略是:

- 重新设计 Shopper 风格:重新设计页面,采用现代化、简洁的设计风格,注重用户体验和视觉吸引力。我们可以参考当前流行的设计趋势和风格,确保页面看上去更加现代化。

- 引入设计规范:建立设计规范和风格指南,确保页面的设计风格、颜色、排版、图标等元素符合统一的规范,这样可以提升页面的整体品质和一致性。

- 视觉统一化:确保页面中的各个元素、颜色、字体、排版等视觉元素统一,以提升页面整体的视觉效果和品质,这样增强用户体验和品牌形象。

- 强化品牌形象:在页面设计中考量流行品牌风格,以强化品牌形象和识别度。我们的最终目标是通过品牌化设计,提升商家品牌形象与加深用户对该品牌的认知和信任感。
在进行视觉优化项目之前,我与设计师 Jingyao 一起总结了目前 Shopper 端的页面及逻辑,将视觉优化项目全面覆盖所有问题,期望提升 Shopper 端页面的视觉效果和用户体验,实现更好的页面设计和品牌形象展示。
[图 9]
我们研究了许多流行风格(如快销品)。快销品的风格画像通常具有活力、鲜明、简洁、易辨认的特点,旨在吸引消费者的注意并促使购买行为。
通过对主要竞品的分析,我们也确定了产品的主要差异点,并设定优化计划。
[图 10]

开始之前

我们通过创建“品牌指南”文件开始了这个过程,该文件呈现了品牌的核心原则和视觉风格,可以帮助我们可以进一步推动品牌表达的方面,并将情绪板与每个品牌可以做什么的方案呈现在 Shopper 页面上。
[图 11]
例如,40 Colori 有一些视觉标志:它在整个设计中使用了衬线字体设计其 logo,采用湖蓝色来传达复古基调并反映手工风格的本质,将干净的无衬线字体与经典字体搭配起来。通过湖蓝与亮橙来突出网页中的服饰元素。

利用这些特性并重新组合它们,我们可以创建一个更加专注、具体和独特的品牌形象,这可以更清楚地反映是什么让 40 colori 成为优质服饰的提供商,这些元素足以忠于其品牌。

我们发现的许多品牌都有独特的受众与风格,我们的 Shopper 框架应该能够适应这些变化。我们希望创造出支持每个品牌的细节与风格设计。

提升用户体验与视觉

用户进入 Shopper 的首要目的是查询购买订单并发起退货申请,这一阶段非常关键,因为用户在这个过程中能够感受到商家呈现的品牌感。为了确保用户能够在这一阶段感受到商家的品牌形象和价值观,我们采取以下策略:

品牌标识展示/运用:在用户进入 Shopper 后台查询订单和发起退货申请的页面上,突出展示商家的品牌标识和标志。确保品牌标识清晰可见,并使用商家品牌的主打色彩和配色方案让用户在第一时间就能够认识到商家的品牌身份,并增强用户对品牌的印象和记忆,提升品牌感知度。

用户体验设计:在查询订单和发起退货申请的过程中,设计简洁直观的操作流程和界面布局,提升用户体验。确保用户能够顺利完成操作,同时感受到商家对用户的关怀和服务质量。
[图 12]
当用户查询到订单并寻找需要退货服务的订单时,我们重新调整模块,使用卡片设计来区分不同模块。这帮助用户更直观地查看订单信息和状态,快速进行退货操作,提升用户体验并减少操作混乱的可能性。同时,卡片设计也能让页面整体更有层次感,使用户更容易理解和浏览订单信息。
[图 13]
[图 14]
针对用户在 Shopper 选择直接退货或换货的情况,商家更倾向于引导退货用户说出真实的声音,来引导用户选择其他店铺产品或换货,来弥补用户与减少商家的损失。为了实现这一目标,我们采取以下策略:

- 聆听用户反馈:在引导用户选择其他产品或换货的过程中,商家应该积极聆听用户的真实声音和反馈。了解用户的需求和意见,根据用户的反馈调整引导策略,提升用户体验和满意度。

- 提供优惠和服务:为了吸引用户选择其他产品或换货,商家可以提供一定的优惠和服务,如折扣、赠品或快速配送等。通过提供额外的价值,吸引用户选择其他产品或换货,减少商家的损失。

A/B

在 Shopper 使用过程中,我们对退货理由和换货商品下单表单的交互模式进行了A/B设计,采用了两种不同的方式:Sheet 和 Modal。

Sheet 样式是从屏幕右侧滑出的形式,操作流程较为自然,用户可以清晰地看到页面的变化,占据空间较小,便于用户理解和操作,具有一定的可定制性。这种交互模式可能更适合面向消费者用户,能够提升用户体验和操作便利性。
[图 15]
而 Modal 样式是直接在屏幕中心弹出的形式,突出提醒用户需要进行的操作,信息集中在屏幕中央,可以增加交互的趣味性和吸引力,但可能覆盖屏幕内容,影响用户体验,也可能影响操作流畅性。
[图 16]
通过 A/B 设计,我们可以评估两种交互模式的优缺点,根据用户反馈和数据分析,选择最适合用户的交互模式,以提升用户体验和用户满意度。在实际使用中,我们需要综合考虑产品特点和用户需求,选择最合适的交互模式,以达到更好的效果。

移动不一定是妥协

我们还着手改善 Shopper 的移动端体验,目标是提高我们的视觉及简化操作逻辑。我们希望创造一种顺畅的体验,为移动用户提供尽可能最佳的体验。

- 确保页面在不同屏幕尺寸下能够正常显示,并且布局合理,内容清晰。

- 在移动页面上提供清晰的逻辑指示,让用户能够快速找到他们需要的信息或商品。

- 调整页面元素的大小和间距,使其更适合在小屏幕设备上浏览。确保按钮和链接的大小适中,便于用户点击操作。
[图 17]

更加完善的风格指南

其中包含产品中使用的常用组件库,并扩展到设计师需要遵循的设计原则,以及用户体验指南产品中使用的每个部分的使用和实现,从表单元素到排版和整个屏幕配置。

风格指南对于我们的开发人员和设计师来说都至关重要,它为我们提供了一个共享的组件库,并确保我们设计的一致性。
[图 18]

最终结果

最终的用户体验结合了更深入的品牌主题和页面结构整理,允许商家创立更具品牌特色的退换货系统。在本次视觉升级融合了品牌、视觉表达和以用户为中心的体验,使得 Returns shopper 处于品退货管理系统体验的前沿。
[图 19]
下一个项目