细节无止境:星币商城支付流程重设计

积分商城是目前很多互联网产品都会采用的一种提升用户黏度的推广方式,积分商城中的积分通常可以以一定比例折现,从而刺激用户保持对产品的长期关注。易信同样拥有自己的积分商城——星币商城,提供了易信的通话时长、易信周边产品、其他精选实体商品等,供用户通过星币进行单独换购,或折抵一部分人民币进行换购。
支付流程,则是积分换购这一融合了积分支付和金融支付的复杂支付流程中的关键一环,支付流程的体验很大程度上影响了用户参与积分活动的积极性和支付转化率。

这篇文章将针对星币商城的支付流程(而不是整个星币商城,因为整个商城系统中涉及较多作为产品团队外的学习者难以了解的功能和特殊推广需求,作为学习对象意义并不大),通过产品需求、业务流程、信息架构的分析和梳理,针对交互流程和页面布局中可以考虑进行完善的细节,提出合理的改版建议。即使是一款已经经过长时间上线检测的、技术和用户数量方面都可以称得上成功的产品,在交互体验方面的细节也一定存在优化的空间。带着虚心学习和敢于批判的心,希望能和更多看到这篇文章的朋友一起,对这一典型积分换购系统的支付流程优化进行探讨和学习!

注:本文章基于易信iOS端V4.5.0.1874版本进行讨论。

1. 需求分析

  1. 星币商城支付流程需求分析:

    1. 用户在星币商城浏览中,点击查看合意的商品详情,开启一个支付流程
    2. 星币商城的商品所支持的支付方式分为4种:
      1. 仅星币支持
      2. 仅星币+易信支付
      3. “星币+易信支付”或“易信支付”两种皆可
      4. 仅易信支付。
    3. 易信支付需要通过绑定银行卡进行支付。
    4. 星币商城的商品分为两种,虚拟商品无需配送,无需提供送货地址。实体商品则需要提供送货地址。
  2. 产品目标:将用户的浏览量更好地转化为支付量,同时通过准确的偏好推荐入口,吸引用户进行二次购物。

  3. 设计目标:在现有支付流程的基础上,优化页面布局与支付流程细节,增强流程内页面的一致性和跳转逻辑的流畅性。

  4. 规则难点与风险:商品支持的支付方式有4种,商品送货类型有2种,此外还需要涉及绑定银行卡、设置支付密码、找回支付密码、短信验证等流程,页面跳转逻辑较为复杂,页面数量较多,如果页面布局各异会让用户产生凌乱感和不连贯感,流程繁琐会让用户厌倦甚至放弃支付。

2. 业务逻辑和系统

↓业务逻辑和系统流程图

3. 信息架构

通过对京东京豆、淘宝淘金币等竞品的信息架构分析和比选,以及卡片分类法的调研结果,对星币商城的支付流程和四个核心页面进行了信息架构优化。实际上,通过分析可以看出,对整体支付流程和大多数页面而言,本产品的设计已经非常合理,并符合用户操作习惯,因此重设计仅在布局和文案、交互细节等方面进行了微调。而当前版本的首页布局则在卡片分类法结果中表现得非常混乱,在重设计中将重点进行页面布局的优化和调整(见第5小结)。

3.1 支付流程信息架构

↓支付流程信息架构重设计

3.2 核心页面信息架构

↓首页信息架构

↓商品详情页信息架构

↓确认订单页信息架构

↓支付完成页信息架构

4. 交互流程图

同样,根据对京东京豆、淘宝淘金币等竞品的支付流程的分析和比选,对星币商城的交互跳转逻辑优化如下图所示。详细优化思路见第5小节(页面布局)和第6小节(交互方案),此处仅展示流程整体逻辑,以便于具体页面和交互方案的重设计中随时查看、理清思路,也利于后期开发同学跟进时了解功能点和跳转逻辑。

↓交互流程图(点击查看大图)

5. 页面布局与交互细节

依据第3小节(信息架构)中星币商城支付流程的架构,将整个支付流程涉及的页面分为首页、商品详情、订单流程、易信支付四大部分分别介绍页面和交互细节的重设计思路。

5.1 星币商城首页

重设计说明:
首页是布局方面重设计改动最大的一个页面,进行了多处布局调整,突出了对产品目标更重要的元素(如与星币获取、星币活动直接相关的“签到”、“冲星挑战赛”、“星币转转赚”几大入口和产品列表),将五个产品列表的布局由垂直顺序布局改为标签页并列布局等。在此不一一赘述,总之原则是以精简结构、视觉紧凑、指示清晰为纲,将各主要入口集中在无需滚动就能显示的区域内,提高对产品目标更重要的入口的曝光度。

↓星币商城(原版)

↓星币商城(重设计)

5.2 商品详情

5.2.1 商品信息Tab页

重设计说明:

  1. 增加用户评价的显示。看到其他用户的购买后评价更容易让用户获得心理的确定感,增加在浏览产品详情后决定购买的几率。
  2. 将页面拆分为3个Tab页,通过二级导航或在页面底端上拉进行跳转。让页面结构的划分更加明晰,让无需浏览图文详情的用户省去不停下滑屏幕跳过图文详情的麻烦(毕竟对有些商品而言,图文详情可能内容很长)。
  3. 将每人限购、本轮剩余、已选数量、支付方式、运费等项通过垂直列表呈现,使页面布局更规整简洁。
  4. 将已选数量和支付方式显式地列于列表中,避免用户只有在点开“马上购买”后才能看到该商品支持的支付方式到底是4种中的哪种,也避免了用户在了解已选数量等信息之前对点击“马上购买”的后果存在疑虑。
  5. 星级不够时更改“马上购买”按钮为跳转至冲星挑战的入口,文案更加友好。
  6. 微调“支付方式和数量”选择框的布局,以”易信支付“、”星币支付“等字样更清晰地标明支付方式。
  7. 商品轮播图作为全局性元素贯穿3个Tab页,增加整个产品详情页的一致性。

↓商品信息(原版)

↓商品信息(重设计)

5.2.2 图文详情Tab页

重设计说明:
将相关时间信息合并进图文详情Tab页中的商品介绍区,简化商品信息Tab页的结构,减轻视觉负担,因为用户并不需要在看到商品的第一眼就详细了解产品的使用事件等细节信息。其余参见5.2.1 “商品信息”标签页的说明。

↓商品信息(重设计)

5.2.3 评价Tab页

重设计说明:增加用户评价区,以标签页的方式呈现不同星级的评论,方便用户对其他用户的评价有更为透明的了解,增强用户对产品的信任感,提高购买转化率。其余参见5.2.1 “商品信息”标签页的说明。

↓评价(重设计)

5.3 订单流程

这部分属于经典的在线购物流程,原版页面已经设计得相当简洁合理,重设计主要针对交互细节而不是页面布局进行。因此,除“支付成功”页等布局修改较大的页面外,将不再逐一列出原版截屏,只介绍重设计的方案。

5.3.1 确认订单

重设计说明:

  1. 在虚拟商品的购买页面同样显示配送信息栏,通过文字变化告诉用户这是无需配送的虚拟商品。
  2. 用更大的卡片显示商品图片、商品名称和单价。
  3. 将购买数量、支付方式、运费、合计等项现式地用垂直列表呈现出来。
  4. 以上三点的重设计原因:应用内部,让虚拟商品与实体商品、不需易信支付和涉及易信支付的各类商品,在确认订单页的结构上具有一致性。应用外部,让星币商城的确认订单页面与淘宝、京东等常用网购平台的相应页面更为一致。使得用户对应用和自己的行为更有信任感,不会因为看到过于精简(虽然实际上已经包含了必备的信息)的界面而产生不确定的感觉。
    5.微调“易信支付-输入支付密码”、“我的银行卡”悬浮框的布局,优化页面的层次感、表意清晰性,增强该悬浮框在两种状态之间的一致性。
    6.优化点击“马上购买”后的跳转流程,省去“确认支付”的页面(因为在改版后的“确认订单”页面已经明示了支付方式和支付总价)。

↓确认订单(重设计)

5.3.2 订单详情

重设计说明:

  1. 将订单编号、下单时间两个信息元素移至顶部订单状态下方,让有关订单状态、编号和时间信息集中显示,也同样更节省页面空间。
  2. 配送信息、商品信息、运费、总价等信息以垂直列表显示,显示布局保持与“确认订单”页面一致,改版原因也基本相同:应用内部,让订单相关页面的结构上具有一致性。应用外部,让星币商城与淘宝、京东等常用网购平台的相应页面更为一致。使得用户对应用和自己的行为更有信任感,不会因为看到过于精简(虽然实际上已经包含了必备的信息)的界面而产生不确定的感觉。
    3.取消“也许感兴趣”的商品列表展示,“订单详情”页的目的是让用户尽快完成支付或确认取消,而不是做商品推介,此处设置指向其他商品的跳转入口会增大当前订单被继续无意义搁置的几率,与页面目的相悖。
    4.微调“取消订单”和“立即支付”两个按钮的布局,占满页面底部,更显规整。
    5.修改“取消订单成功”悬浮窗的位置,改为与取消订单原因的选择列表一致,减少用户视线的跳转,增强一致性。

↓订单详情(重设计)

5.3.3 支付详情

重设计说明:

  1. 导航栏下的顶部信息卡片保持与“订单详情”页一致的排版,显示订单状态为”支付成功“,并同时显示”已向商家XXX提交订单“、编号、下单时间和交易时间等信息。同样是为了显示关联信息,并节省页面空间。
  2. 配送信息、商品信息、购买数量、支付方式、实际支付总价等信息以垂直列表显示,显示布局保持与“确认订单”页面一致,让订单相关页面的结构上保持连贯。
    3.将商家联系方式移至顶部卡片的商家名称后面,使信息结构更紧凑。
    4.将支付方式的显示改为“易信支付(建设银行)”(原版为“建设银行”),所指更为明确。
    5.基于支付成功的页面,修改支付失败的页面。

↓支付详情(重设计)

5.3.4 购买成功/失败

重设计说明:

  1. 将原配图改为商品图片,避免无实际意义的图片占据大幅版面。
  2. 在“您可能还想买”列表中加入价格显示(原版只显示商品名),让用户看到更全面的核心信息有助于增大点击的几率。
  3. 以表意清晰、布局紧凑、结构精简为原则,微调文案以及各元素的布局。例如,将“喊朋友们来抢”按钮这一分享功能改至顶部导航栏右端。

↓购买成功(重设计)

5.3.5 管理收货地址

重设计说明:

  1. 各地址卡片之间增加间距,让卡片更加有信件的“地址字条”的感觉。
  2. “新增收货地址”按钮移至列表尾部(改版前是固定在页面底端),更加容易让用户注意到(尤其在列表较短的时候)。

↓管理收货地址(重设计)

5.3.5 添加新地址

重设计说明:
基本维持原设计,增加“街道”列表。一方面,将街道自动的输入变为选择,减少用户键盘输入,用户通常认为选择比输入更容易。另一方面获取街道数据可以方便快递更好的送达,数据也可用作其他分析。

↓添加新地址(重设计)

5.4 易信支付

这部分同样属于经典的在线支付流程,原版页面遵循“一个页面完成一件事”这一当前经过多个同类产品检验的原则,易用性已比较完善。因此,这部分的重设计同样主要针对交互细节寻求优化,而不是大规模地调整页面布局。在此将不再逐一列出原版截屏,只介绍重设计的方案。

5.4.1 银行卡添加流程相关页面

重设计说明:
将原设计中点击下一步才进行的卡号识别提前到卡号输入框失焦后自动进行,提示文案也做出了相应的修改。
将关于卡号、卡类型、银行的确定集中在一个页面内完成,与银行预留信息的页面清晰地分离。

↓添加银行卡(重设计)

5.4.2 银行预留信息

重设计说明:
将卡类型的选择流程移至前一步骤(添加银行卡),其余部分则基本上是纯表单操作,而说明提示框、用户协议的访问也没有过多可优化的余地,因此页面其余部分基本维持原设计。

↓添加银行卡(重设计)

5.4.3 验证手机号

重设计说明:
本页面属较为成熟的常规手机验证操作,原版设计已非常合理,没有过多可优化的余地,因此基本维持原设计,仅对提示文案进行微调,力求更加友好。
此外,考虑直接读取短信收入数据的可能性,自动读取系统信息模块最近一条收到的验证码短信中的连续6位数字,写入输入框,尽可能减少用户输入操作。

↓验证手机号(重设计)

5.4.4 设置支付密码

重设计说明:
单一功能页面,结构较为简单,基本维持原设计,仅对提示文案进行微调,并修改页面标题(原版为“设置密码”),改版后明确为“设置支付密码”,表意更加清晰。

↓设置支付密码(重设计)

5.4.5 确认支付密码

重设计说明:
单一功能页面,结构较为简单,基本维持原设计,仅对提示文案进行微调,并修改页面标题(原版为“设置密码”),改版后明确为“确认支付密码”,表意更加清晰。

↓确认支付密码(重设计)

5.4.6 验证支付密码

重设计说明:
基本维持原设计,仅重新设计了提示文案,微调了输入框样式和”忘记密码“的位置,轻微优化了元素的醒目程度。

↓验证支付密码(重设计)

5.4.7 忘记支付密码(选择银行卡)

重设计说明:
银行卡清单改为符合规范的垂直列表,取消“下一步”按钮,点选需要重设支付密码的银行卡后直接进入下一步,精简操作步骤。修改提示文案,表意更加清晰,明确了这一流程的目的是“重设”而不是“找回” 原密码。

↓忘记支付密码(选择银行卡)(重设计)

5.4.8 忘记支付密码(信息核验)

重设计说明:
基本维持原设计,微调了提示文案以表意更加清晰。其余部分同“银行预留信息”页面所述。

↓忘记支付密码(信息核验)(重设计)

6. 交互方案

根据以上页面中交互细节的重新设计,跳转流程和完成支付任务的交互方案也发生了相应的变化。本节以购买“专线电话25分钟”为例,介绍重设计后的交互方案。

星币商城支付环节的典型交互流程包括:
1.商品浏览与下单
2.绑定银行卡
3.使用易信支付
4.使用其他银行卡
5.绑定另一张银行卡
5个典型流程间的跳转出入口关系如下图所示:

↓5个典型流程之间的跳转关系

6.1 流程1:商品浏览与下单

↓商品浏览与下单

6.2 流程2:绑定银行卡

↓绑定银行卡

6.3 流程3:使用易信支付

↓使用易信支付

6.4 流程4:使用其他银行卡

↓使用其他银行卡

6.5 流程5:绑定另一张银行卡

↓绑定另一张银行卡

查看完整交互方案请点击链接

Qinsman wechat
关注我的公众号,一个卖馒头,也卖故事的地方:)