改版案例经验浅谈-充值页改版 for web

2,245 阅读4分钟

   为什么要改版

旧版充值页面设计以及体验比较老旧,随着业务扩大升级,现有的架构以及功能体验不足的问题也日趋明显。

主要存在以下问题

a.样式老旧

  • 原界面UI老旧

  • 信息阅读成本大,主次不明

b.支付过程繁琐

  • 支付路径过长,页面跳转过多

  • 用户体验不佳

c.体验不统一

  • 活动展示以及入口多种多样

  • 页面操作不统一,存在不需要操作交互

d.业务需求

  • 减少充值路径跳出率

  • 提升订单转户率

    产品目标

做设计一般是以目标导向设计法进行设计的,本次改版从架构层,交互层与视觉层出发进行改版。

架构层:改动部分产品结构,提高主需求的层级,同时弱化了非主要需求的层级,并基于不同使用场景优化了产品结构。

交互层:体验上更人性化,突出重点并简化部分交互流程。

视觉层:更轻量化,极简化,理念上遵顼内容为主的设计。

    改版过程

对于充值功能是一个冲动消费的过程,对用户来说最简单的操作就是【选中充值金额】-【支付】。在这个过程中任何一步多出来的操作都会减少用户充值的欲望。

1. 高效——用户

作为一个用户打开一个页面,最迫切的想法是立刻看到自己最需要的信息。

改版前

  • 空间浪费。左侧tab区只有3个选项,最多情况下也只有5个,并且其中部分充值选项的操作并不会在该页面完成;

  • 信息冗杂,主次不明。每个信息模块几乎是均等的;

  • 点击【充值】会跳转到新的窗口,脱离场景。

改版后(原型图)

  • 突出整个充值项目模块。在直播平台,用户关心的是需要多少虚拟币,需与支付金额一起提高层级关系;

  • tab整体移到顶部,提高空间利用率,使用户焦点更聚焦功能;

  • 点击【充值】在该页面出现支付二维码,降低用户脱离场景的不良体验。

2. 适配——方式对应场景

降低对用户沉浸式体验的打扰,提升用户体验是每个产品都需要考虑的。

场景举例:用户正在观看直播,在送礼物的时候金额数量不足,点击充值,跳转到新打开的页面。直接脱离用户当前观看的场景。所以对用户来将显得并不是那么友好。

改版前的充值页面,从使用场景上讲是打扰用户观看体验。

经过一系列思考后,从体验上讲不应该让用户脱离当前的观看场景。决定在直播间的充值以弹框的形式展示。同时保留现有的以网页展示的充值页面。

直播间弹框展示(原型图)

  • 在直播间充值方式以弹框展示,减少对用户的干扰,提升转化率;

  • 直播间将支付二维码直接展示出来,即时刷新,同时将高频支付方式展露出来。

3. 兼顾——视觉

弹框属于新的功能呈现,视觉配色上依旧选用品牌色。网页支付页面为了更好的区分主次于功能,调整了页面整体的字体颜色。

4. 最终方案呈现

直播间弹框展示

网页支付页面

    总结

做设计的工作就是在有限的时间和格局里进行突破。在弹框的实现过程会遇到不同的问题,譬如活动banner,在网页中是以横幅展示,在弹框由于要考虑直播间最小尺寸涉及到的高度问题,需要用竖屏的banner。

这个项目的导向就是要提升用户的付费率。项目上线后,从结果数据来看有较大的提升。并且后期会根据具体的数据情况考虑是否将网页支付方式去掉,只保留直播间内弹框支付。