微信支付UI设计改版分析

2018-04-04| 发布者: 悲哀的夏天| 查看: 3788

泛娱乐微信店在经营多年之后,问题也渐渐出现,因此我们进行了一次UI设计改版,让这个虚拟商店继续更好地为用户服务。项目背景“泛娱乐微信店”是什么?泛娱乐微商店是计费平台部为公司所有虚拟业务提供和服务的一个 ...

泛娱乐微信店在经营多年之后,问题也渐渐出现,因此我们进行了一次UI设计改版,让这个虚拟商店继续更好地为用户服务。

项目背景

“泛娱乐微信店”是什么?

泛娱乐微商店是计费平台部为公司所有虚拟业务提供和服务的一个付费渠道,是微信钱包中一个便捷的泛娱乐业务付费入口。

微信支付UI设计改版分析

UI设计

为什么要改版?

  • 这些年,微信钱包布局的服务o2o已经渗透到生活中的方方面面:购物、网贷、理财、城市服务……成功为用户带来了便利的服务体验。

  • 计平在钱包中的泛娱乐业务付费入口,既为用户付费提供了便利,也促进了公司营收。

  • 但是泛娱乐微信店在经营多年之后,问题也渐渐出现,因此我们进行了一次设计改版,让这个虚拟商店继续更好地为用户服务。

改版需要解决三大问题:

一、现有付费用户:商店框架与流程不方便快速找商品

微信支付UI设计改版分析

UI设计

PS:公司业务按照程序实现逻辑分为:游戏币、道具、包月。而这些都是实现模式

  • 游戏币模式,即虚拟货币模式

  • 包月模式,即订阅,到期扣费包月模式

  • 道具模式,即单品购买

二、潜在付费用户:根本不知道微信有入口

微信支付UI设计改版分析

UI设计

三、基础功能缺失

虽然微信店经营了多年,但是身为一个商店,由于历史原因,依然有很多基础功能(如交易查询、包月到期查询等等)缺失。因此这次需要完善这些基础功能。

如何解决问题

1. UI设计目标

在已知问题之下,设计开始针对已知的体验问题进行解决,因此设计定下以下目标:

微信支付UI设计改版分析

UI设计

2. UI设计过程

一、怎样提升付费效率?

1.1 合理的分类UI设计:从程序实现模型到用户心理模型。

微信支付UI设计改版分析

UI设计

1.2 便捷的流程UI设计:通过推荐与搜索,提高用户检索效率

微信支付UI设计改版分析

UI设计

对应的布局UI设计

微信支付UI设计改版分析

UI设计

二、怎样进行品牌教育?

2.1 合理的触点,适时进行用户品牌教育。

微信支付UI设计改版分析

UI设计

2.2 通过运营设计,透过好友关系链,老用户分享优惠券,拉拢新用户。向新用户传递商品价值观。

微信支付UI设计改版分析

UI设计

三、补全基础功能,建立一个服务一体化的虚拟商店

作为一个微信中便捷的虚拟商店,可以类比实体店中的便利店。快捷购物是商店的核心。因此这个过程中我们也补充相应基础功能,建立一个一体化的虚拟商店。

微信支付UI设计改版分析

UI设计

视觉设计

统一的商店体系色彩

利用腾讯充值品牌延展出商店体系的色彩,加深用户对品牌的印象(和新版微商店一致),让用户清晰的知道这里是官方的虚拟商店。

主要模块卡片化-突出最主要内容的层级

在不影响其合理分类的基础上,用模块卡片化结合错落排列的方式来突出页面主要模块的层级,同时用垂直的视线引导用户阅读内容信息,使用户更聚焦于主要操作,同时方便用户快速找到所需业务,提高付费效率。

制定控件与规范,排列组合,适配全量业务场景及功能

制定全量业务的专区页规范,业务可根据需要排列组合,为多种业务模式提供可复用的模板,同时制定运营banner规范,统一整体页面风格。

微信支付UI设计改版分析

最终方案呈现

微信支付UI设计改版分析

微信支付UI设计改版分析

UI设计

微信支付UI设计改版分析

UI设计


狂笑

好色

亲亲

晕倒

点赞

恶心

3条评论 3788人参与 网友评论 文明发言,请先登录注册

文明上网理性发言,请遵守国家法律法规。

发表评论

最新评论

引用 小小猫狸 2018-4-4 06:11
[耶]
引用 boytu 2018-4-4 06:11
转发了
引用 避影敛迹 2018-4-4 06:11
[赞][赞][赞]

查看全部评论(3)

©2001-2018 沃禾互联网智库 http://www.ioooooo.com/中国互联网举报中心陕ICP备11007441号-1 非经营性网站Powered byDiscuz!X3.4公安网备|网站地图
手机版小黑屋广告合作客服QQ:57490593@qq.comComsenz Inc.