上亿人使用的泛娱乐微信店,是如何做改版设计的? - 优设网 - UISDC

上亿人使用的泛娱乐微信店,是如何做改版设计的?

2018/04/27 8943评论区

在本文中,作者对泛娱乐微信店改版设计进行了总结,有很多值得借鉴的地方,与你分享。

一、项目背景

1. 「泛娱乐微信店」是什么?

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

2. 为什么要改版?

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

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

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

改版需要解决三大问题:

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

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

  • 游戏币模式,即虚拟货币模式。
  • 包月模式,即订阅,到期扣费包月模式。
  • 道具模式,即单品购买。

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

基础功能缺失

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

二、如何解决问题

1. 设计目标

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

2. 设计过程

怎样提升付费效率?

  • 合理的分类设计:从程序实现模型到用户心理模型。
  • 便捷的流程设计:通过推荐与搜索,提高用户检索效率。

△ 合理分类设计

△ 便捷流程设计

△ 对应的布局设计

怎样进行品牌教育?

  • 合理的触点,适时进行用户品牌教育。
  • 通过运营设计,透过好友关系链,老用户分享优惠券,拉拢新用户。向新用户传递商品价值观。

△ 合理触点

△ 擅用运营设计

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

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

三、视觉设计

1. 统一的商店体系色彩

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

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

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

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

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

△ 最终方案呈现

欢迎关注作者「腾讯CDC体验设计」的微信公众号:

「优秀团队的改版设计案例」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/pan-entertainment-wechat-store-reversion-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 界面设计 版式设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 web前端开发 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 平面设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里