案例分析

页面编辑器的用户体验

(A)

AfterShip Page builder 允许用户通过简单的拖拽编辑行为在 Shopify 创建精美的登陆页面来优化其商店。作为 Page builder 的 UX 设计师之一,我负责产品的MVP上线,模板视觉设计,交互优化及Figma 组件库维护。这个项目伴随我在 AfterShip 一路成长。在我任职期间,我们的团队规模扩大了一倍多,我对我们的产出,设计以及团队协作感到自豪。

(B)

事实上,并不是所有的设计工作都可以让设计师发挥自我,但 Page builder 正是这种类型的工作。作为使用 Webflow 的设计师,能亲自设计一款页面编辑器是我的荣幸。

(C)

- 职位:2021-2023 UX Designer
[图 1]

AfterShip Page builder:概述

AfterShip Page builder 是一个多合一页面构建器,可帮助商家通过精美的登陆页面优化其商店。当我在 2021年4月加入 AfterShip 时,它还是 AfteShip 售前中的一个概念产品,负责这个产品的产研团队才刚刚组建完成。我的目标是进行头脑风暴与前期调研,设计上线 MVP,并负责后续的模板设计,部份交互优化及 Figma 组件库维护。

以下是我在该产品前期作出的一些努力的片段。由于我参与的项目和计划范围广泛,我发现很难全面总结我在 AfterShip Page builder 的各种工作内容。就让这作为亮点进行总结吧。如果您想了解更多详细信息,我很高兴亲自进行阐述。

试试水温:MVP

最小可行性分析(MVP)是一种评估产品或项目可行性的有效方法。通过明确,核心功能、资源要求、市场需求、风险评估和预算时问因素,可以确定产品开发的方向和范围,并验证产品的可行性。MVP 分析有助于减少资源和时间的浪费,从而加速产品的市场推出速度,同时提高产品的成功机会。
[图 2]
对于新产品的设计与开发上线,使用最小可行性分析(MVP)的方法是非常重要的。这是因为MVP的理念是在尽可能短的时间内开发出一个最基本的产品原型,以验证产品概念和市场需求。通过 MVP 设计 Pagebuilder 这款页面编辑器,可以带来以下几个好处:

- 节省时间和成本:MVP 的设计方法可以让团队集中精力开发最核心功能,避免不必要的功能和复杂性,从而节省时间和成本。

- 快速反馈和迭代:通过 MVP,可以快速将产品推向市场,获取用户反馈和数据,从而及时调整和改进产品,实现快速迭代。

- 确保市场需求:MVP 可以帮助团队验证产品概念和市场需求,避免开发出无人问津的产品,确保投入资源的有效利用。

用户体验在 MVP 中的重要性

全面有效的用户体验设计在 MVP 上线阶段是不可或缺的。其意义在于确保产品核心功能的可用性、收集用户反馈和验证假设、提升用户参与度和留存率,以及降低产品风险和成本。通过注重用户体验设计,可以为产品的成功和持续发展打下坚实的基础。
[图 3] 定义问题比解决问题更重要
接下来我将为您介绍我们在设计 MVP 过程中所作出的努力,通过精心打磨的最小可行性产品(MVP)设计,我们将为您呈现出一款经过精心打磨的产品原型,旨在验证产品概念和市场需求。我们不仅节省了时间和成本(仅两个月便完成从立项到上线!),还通过快速反馈和迭代,确保产品符合用户需求并具有竞争力。让我们一同探索在设计 MVP 过程中所做出的努力,希望为您带来一些启发。

问题:产品矩阵中缺失的枢纽

2021年,刚拿到老虎环球基金和高瓴创投 6600 万美金的融资的 AfterShip 是一家服务国际电商赛道的 B2B SaaS 公司,其产品涵盖商家物流追踪、邮件营销、退换货服务等售前售后各个环节,其产品主要在 Shopify 中为商家提供服务。

其售后业务主要为 Tracking 负责查询包裹,Returns 负责退换货。售前业务则为 Email 与 Review Dropshipping 等。我们聚合多种产品,覆盖电商销售的多数环节,构成产品矩阵。
[图 4] 2020 Product Matrix
为何为多数而非全部?是因为在B端用户的电商销售流程中,一直缺少直接参与构建其电商网站的一环。这一空白导致我们的产品无法覆盖电商销售的全流程,因此需要填补这个空缺。

这一环节的意义在于为零售商提供一个敏捷的页面编辑器,用于品牌推广和转化。精心设计的着陆页可以提高潜在客户获取和销售转化率,帮助B端商家取得成功。通过拥有这样的页面编辑器,我们可以为客户提供更全面的解决方案,使他们能够更好地管理其电商网站并提升业务表现。填补这一空白将为我们的产品矩阵增添价值,提升客户满意度,并拓展我们的市场份额。
[图 5]
我们入局,也意味意味着更多的 ARR
[图 6] 2023 Product Matrix
通过聚合产品矩阵,我们可以填补目前产品未覆盖的领域,完善产品矩阵,提升产品线的全面性和竞争力。比如直接集成 Email,Review 进行营销活动,在 B 端推荐 Dropshipping 进行待代发货,可以获得售后一站式保障等等。

发掘客户画像:我们的目标用户群体

2020年,随着疫情的到来,电子商务迎来了蓬勃发展的时代。在人与人相互隔离的情况下,大量人群涌入Shopify等平台开设自己的独立站点,希望实现个体业务的梦想。

经过数据对比分析,我们发现在2021年,绝大多数使用我们产品的用户为中小型商家(SMB)。因此,我们的 Page Builder 的初始目标便是服务这一群体。这些中小型商家希望通过我们的工具来打造个性化的网页,提升用户体验,吸引更多客户,实现业务增长的目标。让我们深入了解这些目标用户,为他们提供更好的服务和支持!
[图 7]
根据用户调研结果,我们总结了目标用户群体的共性特征:

- 主要为个人或小型B端商家(SMB)
- 具备一定的设计能力,但不熟悉代码编写
- 缺乏设计能力或无法承担雇佣设计师的费用,希望能够创建出具有吸引力的网站
- 缺乏时间学习复杂的页面编辑器

通过深入了解用户的需求和痛点,我们将致力于为这一群体提供简单易用的 Page Builder 工具,帮助他们快速、高效地打造出符合自己需求的网站,实现业务增长和品牌建设的目标。

深入了解用户痛点

在团队准备就绪后,我们开展了一次 Workshop,绘制了用户旅程图

通过绘制的结果,我们发现新手用户在面对复杂的编辑器时表现出极度的困惑和挫败,这可能导致用户的付费意愿降低以及流失增加。
[图 8]
针对这一发现,我们需要专注于用户体验的简单性和可用性,努力提供一个直观、易懂的界面,帮助用户轻松、快速地完成网页编辑任务。这将提高用户满意度和保留率。

通过将干净、用户友好的设计放在首位,简化编辑流程,并提供清晰易懂的说明,我们可以使用户,特别是新手,更容易在平台上导航并高效完成他们的任务。

此外,加入用户友好的功能,如拖放功能、内联编辑和实时预览,可以进一步增强编辑体验,并使用户能够轻松创建和定制内容。

制定战略,规划产品驱动增长(PLG)

PLG 指的是产品驱动增长(Product-Led Growth),是一种通过产品本身来推动用户增长和市场扩张的策略。PLG 的核心理念是让产品成为吸引用户、留住用户和推动用户增长的引擎,通过不断改进产品、优化用户体验和提供增值服务来实现增长目标。
[图 9]
PLG 强调产品在用户增长中的关键作用,强调产品的易用性、功能性和用户体验的不断优化。相较于传统的营销推广策略,PLG 更加关注产品本身的质量和价值,倡导通过产品本身的吸引力和口碑效应来吸引用户,实现持续的用户增长和市场扩张。PLG 已成为许多互联网和科技公司的主要增长策略之一,被认为是一种高效、可持续的增长模式。
在产品驱动增长的不同阶段中,战略上不能懈怠。竞品研究在不同阶段有不同的目标。首先要了解当前产品所处的生命周期阶段以及用户特征。
[图 10]
通过对主要竞品的分析,我们确定了产品的主要差异点,并在 Workshop 中进行了讨论。
[图 11]

如何让用户 Have a good time

为了优化目标用户体验和提高操作效率,我们设计了以下指标

- 提供清晰明了的页面选择界面,让用户快速找到需要创建的页面类型;

- 简化拖拽元素的操作,确保用户能够轻松地将元素放置到页面上;

- 设计直观易用的左侧编辑功能,让用户可以方便地编辑内容和样式;

- 添加预览功能,让用户能够实时查看页面在不同设备上的显示效果;

- 提供明确的发布按钮,让用户能够快速将页面发布到他们的Shopify店铺中。
[图 12]

选择最佳设计方案,并制定 Page Builder 产品发展阶段

过收集设计方案、设定评估标准、比较分析、组织投票,我们确定了 MVP 的最佳设计方案,这个方案符合目标用户需求和市场趋势。
[图 13]
同时,为更好帮助 Page Builder 增长,我们规划并绘制了产品发展阶段
[图 14]

MVP 诞生!

基于交互风格,在经过充分讨论后,我们确定了优先使用公司的 Email 编辑器作为开发页面编辑器的基础,以快速推出MVP(Minimum Viable Product,最小可行产品)。我们首先推出的页面类型为About me,以满足用户对内容故事性的需求,同时也能快速进行市场验证。
[图 15]
[图 16]

后续维护

在MVP上线后,我们逐步完善了常见的网站布局、各种功能,并提供了丰富的预设模板。

同时,我们在 Figma 中持续维护设计组件库,确保设计风格的一致性和可复用性。
[图 17]

一年后 ——

团队现状

随着一年的发展,Page Builder 团队规模已经翻倍增长,产品更新运行稳定。团队协作日臻完善,包括产品经理、数位 UX 设计师,前端/后端工程师、质量保证人员、销售团队以及客户支持人员。这些不同角色的协作为产品的持续优化和发展提供了强大的支持。
[图 18]

渴望增长

在 Page builder 上线一年后,为了适应产品生命周期的变化和用户需求的不断演变,我们决定对产品进行全新的改版。经过深入的用户研究和市场调研,我们将在新版本中引入更多创新功能和优化体验,以提升用户满意度和提高产品竞争力。接下来将展示我们在改版过程中,我们团队作出的努力与贡献,我们投入了大量时间和精力来设计,开发与测试新功能,确保用户可以享受到更流畅、更强大的页面构建体验。

公司售前战略的转变:由 SMB 转向 SME

随着市场环境的变化和公司发展的需求,公司决定将售前发展战略从针对中小型企业(SMB)转变为针对中小企业(SME)。这一转变是基于对市场的深入分析和对客户需求的深刻理解,我们相信致力于服务中小企业将有助于公司实现更大的增长和更加稳健的业务发展。在这一转变中,我们将重点关注中小企业的需求和痛点,提供更加专业化和个性化的解决方案
[图 19]
随着我们专注于中小企业市场,MRR和ARR将会持续增长,为公司带来更加稳定和持续的收入来源。

PLG 的下一阶段

我们在 MVP 阶段定下的 产品生命周期管理(PLG) 战略可以更近一步了。在过去一年中,我们已经完成了常见页面功能模块的研发工作,现在需要进一步基于 PLG 来优化产品。通过 PLG 的方法论和工具,我们可以更好地理解产品在不同阶段的发展需求,有针对性地进行优化和调整,以确保产品持续满足用户的需求并保持竞争力。
[图 20]

期盼产品更好的用户

在过去的一年中,我们的团队通过用户访谈和用户反馈收集了大量用户反馈与问题。为了更好地回应这些反馈,我们汇总了这些体验问题,并准备对产品进行有针对性的调整和优化。
[图 21]

新的设计方案-更加灵活直接的编辑器

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

风格指南对于我们的开发人员和设计师来说都至关重要,它为我们提供了一个共享的组件库,并确保我们设计的一致性。
[图 22]
该风格指南还提供了产品设计原则以及有关版式、可访问性和用户体验的说明与教学。Pagebuilder  设计团队由设计师组成,其中既有工作了数年年的人员,也有正在熟悉产品的新设计师。风格指南是帮助就通用范例和行业标准达成共识的一种方式。
[图 23]

宏观与微观下的自适应规则

对我来说很重要的是,风格指南不仅仅由单个 UI 元素组成,还包括需要在产品体验中使用的更多分子部分。基于元素与更多分栏的引入,设计师们重构了原本网格结构,现在它具有 12 分栏并且在新元素被拖拽到分栏时,它可以自适应的调整该元素所占的分栏与其他分栏所占据的空间。

并且,我们也在不同断点下优化 分栏规则,让页面在不同设备下表现优异。这为用户设定了一致的预期行为模式。
[图 24]
[图 25]
[图 26]

复杂 Block 的自适应规则

部份复杂功能若交给用户基于元素来自定义可能会带来不必要麻烦,势必会增加用户理解成本。针对如复杂倒计时与产品销售页,我们暂时保留了其作为 Block 插入页面的交互逻辑,并优化其在各种设备下的视觉表现
[图 27]

交互规则迭代

基于 元素与 Columns 规则的引入,用户能:

- 用户在左侧模块区拖拽元素后,可以直接在页面上编辑内容

- 设计师 Zoe 重新设计了交互逻辑,新增元素与 Columns 逻辑。现在在页面上编辑可以使用 Columns 定义元素宽度及大小,对比以往的固定模块,这样更加灵活。

- 通过投入时间和精力来改进 Page builder 的用户体验和设计,我们将为用户提供统一的体验,也可以为新手用户/设计用户提供更多页面的自定义能力。
[图 28]
[图 29]

编辑栏体验改进

过去,我们必须在左侧编辑栏完成添加编辑 Block/Section 的功能,因为我们无法在右侧浏览页面直接编辑。这迫使我们必须让用户使用左侧编辑栏完成所有编辑工作。编辑栏高度过长导致用户需要反复使用滚动行为来编辑,这些因素使用户感到困惑,并否定在浏览页面编辑的可能性。编辑栏还混合了太多类型的控件(如:页面基础设置),导致了空间狭小和混乱的体验。

基于 元素 与 分栏 规则的引入,用户可以直接在页面上编辑。之前着重在左侧编辑栏编辑页面的逻辑不再适应产品发展,Zoe 优化了左侧编辑栏,减轻了用户在左侧反复编辑内容的负担。
[图 30]

拖拽列表迭代

大量的 Block/Section 功能之前是通过左侧编辑栏进行拖拽添加的,Zoe 对其进行了优化。现在用户可以直接在右侧网页区添加 Block/Section ,使左侧编辑栏信息更清晰,同时可使用户保持对于网页视觉效果的聚焦。
[图 31]

信息架构(IA)

默认 Poppins:我们设定了明确的字号大小规则,该字号规则可套用任何 Page builder 支持的字体 。这在我们的 UI 中添加了清晰的信息层次结构,简化了设计决策,又为用户提供了关于文本层次的明确信号。同时我们也修改了默认字体,使其在页面上拥有更好的表现。
[图 32]
公司的其他产品团队仍在使用 Polaris 组件系统进行开发,Polaris 拥有自己的设计规范与标注系统。为页面编辑器设计一套全新的标注系统是我一直期望的,这可帮助建立全团队对于设计规范的认知,并帮助技术人员高度还原设计样式。
[图 33]

模板视觉风格

我们在 Admin 建立了更好的模板筛选器,同时精心优化所有已有预设模板并对标流行品牌。
[图 34]

结论

优化改版后的 Page builder 在用户体验方面取得显著提升,用户反馈显示页面布局更清晰,操作更流畅,整体可用性得到了明显改善。

系统响应速度显著提升,使得用户能够更快地访问到所需信息,减少了等待时间,增强了用户对 Page builder 的使用体验。

用户访问量和留存率的增加表明优化改版后的 Page builder 吸引了更多用户的关注,同时也提高了用户的粘性和忠诚度,为网站的长期发展奠定了良好基础。
[图 35]
下一个项目