赞助商
立即赞助

上亿人使用的百度网盘会员中心,是如何做体验设计的?

产品经验3年前 (2021)发布 流光
3.9K 0 0

以下是百度网盘UE团近期对中心验进行优化,希望对大家做业化产品有所帮助。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

项目背景

会员中承载产品增权益展示、购买、理的「集合」。自2016起推出会员超级会员两项增服务至今已4时间,随时间推移,用户对网盘会员的诉求越越多样,会员中也不仅仅承载支付能力,多获取福利信息感的尊享感知,同时产品框架的拓展性效率也待提升,因此了本次会员中改版项目。

对设计师而言,我们个项目所面临的挑战,不仅停留在用户验的优化还需要兼顾业转化。接下来将从确定目标、中心框架重构、视语言升级、沉淀通用组件等方面,跟大家分享下改版背的设计思考。

确认目标

在着手推进项目设计前,我们通定和定量的分析,并组织角对次升级的目标进行确认,次升级的目标是:提升用户决策效率;提升用户尊享感;沉淀设计组件库。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

1. 什么提升用户决策效率?

会员中价与信息的洼,用户需众多特权、优惠信息中出决策。整框架清晰、直观、易懂,提升用户决策效率及满意度的关键所。

我们通支付转化漏斗分析并结合用户反馈现,改版前,中心信息架构比扁平和单一,缺乏关键信息的直观展示,比:优信息、服务信息,导致部分用户无法在付费程中更地做决策。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

此外,在支付流程上,操链条长,容易引用户厌倦,导致用户流失。基考虑,我们将对现有框架进行升级,以提升用户的决策效率。

2. 为什么要提升用户尊享感?

中心也是用户感身份变化、感尊享的一步。改版前,不同身份用户(未开通//超级)看到的页面却是相同的,无法直观感受到不同身份的差异。

过UER用户访谈我们也发现,很多用户出现以下场景:

购会员后户,产生疑惑「是否购成功了吗?」;身为超级会员户,「感受到任何尊享感受」;快过期的会员户,「对会员/超级会员快过期的感知到,导致特权中断,影响使体验」…

上亿人使用的百度网盘会员中心,是如何做体验设计的?

因此,我们需要对整体身份的感知进行升级,户更清晰地感知到自己身份的层级。

3. 为么要沉淀设计组件库?

对于产而言,会员中心是会员类的要营渠道。

在日常「步快跑」迭代需求中,为了提升项目组的开发效率以及更好地实现产品侧多景模块灵活调用的诉求,需要对复用率较高且灵活多变的模块(尤其是支付模块、权模块)进行组件化。因此也对多个模块进行组件沉淀,提升产品迭代效率。不仅于此,组件化也能给用户提供更加统一的认知,做产品体验上的统一和规范化。

设计落地

确了目标后,从以下维度进行计升,解决现存问题:懂你所想,会员中心框架重构;凸显尊享知,视觉语言升;提升迭代效率,通用组件沉淀。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

1. 懂你所想,会员中心框架重构

我们本次框架重构的键词就是「懂你想」,只有更了解户,才供更符合户的择,从而升户决策效率。因此,我们在交互框架层面上,做了几件事:打分层布;强键信息;缩短支付步长;智推荐。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

打造分层布局

进入会员心用户,根据会员成长期可被划分为:历史未付费用户、会员开用户、会员即将过期用户、会员已过期用户。

因此,在这次框架设计中,我们根据身份、机、行为的差异进行分层布。改变往的「多人一面」的布架构,打的「多人多面」的灵分层页面布。

当用户是历史未付费用户,更加突出用户的权介绍和商品支付,便于用户了解会员服和商品息;当用户是开通中的用户,更加突出用户可尊享的福利息,突出尊享;当用户为即将过期用户或已过期用户,展示用户常用权息,唤醒用户付费愿,并为用户提供便捷的续费能力。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

下面是改版前后效果对比,从一身知多层理。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

强键信息

键信息是户更为「心」的信息,通过调研发现,盘户更注会员优惠信息、务到期醒及会员之间的差异性,因此在本次升级中,我们对户心的决策信息进行强,恰如分地展示于户决策,同时升户的付意愿。

增营渠道

通过户访谈,了解到很多户总是错过盘的福利,知道在哪里接受到一手信息。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

因此,本次升级我们在会员中心中增了营位,增户注的优惠的曝光。

务到期醒

针对即将过期或已过期的户,我们会展示户特权功的即将到期的信息,避免户特权功到期后,给户日使带来困扰,如使视频原画备份等功,我们会前告知给户:「3天后即将到期,将再享有视频原画备份和在线解压等11项特权」,户前做决策。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

强化特权异比

此,我们强化了特权比异,分展示了普用户、会员用户、级会员用户拥有特权功能异性,便于用户根据自身需求选择应更为合适会员服务,避免买等系列不便或者多花冤枉钱为。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

缩短支付步长

为更方便用户进行支付,让用户付费行为更加顺畅丝滑,我们摒弃以往页面跳转形式,采用浮收银台的方式,减少用户在页面间的跳转而带来的迷失感,达到简化支付路径的目的。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

也在用户即将期等状态,留原有前置展示品和支付操的方式,让用户一键完成续费,方便又快捷。同时,也在用户选择品支付时,展示用户帐号信息,避免用户买错的问题。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

智能化推荐

与以往不同,我们不局限于通过理性的信息展示,让用户自己搜寻信息、被动匹配,同时我们也不断试采用加拟人化、对话感的方式触达用户,推送给用户关注的信息,加精细化探索多样的运营场景。

比:针对已付费用户,结合用户的使用场,更展示特权信息,:「周末看视频,2倍速、2K、极速加载缺一不」;

上亿人使用的百度网盘会员中心,是如何做体验设计的?

当我们上新特权的时,也及时告用户,让他们享受更加富的权益。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

2. 凸显尊享感知,视觉语言升级

本次对会员中的视觉呈也了全新升级,不仅凸显会员的尊享感、感化,同时兼顾用户的识别效率及后续拓展性,针对这一目标,我们了以下优化:卡面升级,提升身份感;品牌色优化,确保拓展性;icon重塑,强化识别性;惊喜彩蛋,提升感化。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

卡片升,提升身

会员身卡片是用户直观受身变化的第一步。本次卡片计中,在卡片比例上,尽可能近于实物卡片,并在卡面肌理表达上,采用磨砂质地,更贴用户然认知,卡片颜色结会员品牌色进行计。同结网盘品牌基因中的logo的「云」,提升品牌差异化。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

当用户进入会员中心,采用光动效,同描绘「云」型,提升视觉层次,同加深用户认知。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

牌色优,确保拓展性

我们还重定义了会员体系的牌色,超级会员黑金配色来突显最级别身份。

主题色延续了网盘会员色系,超会员为金色,会员为红色,在此基础上调整色彩度。新配色在产品界面和运营活动上,能给用户带来更加直观的身知。

辅色黑白,因它色彩世界中的 「 典 」 ,给人以简洁、纯粹的审感受视觉享受。以黑白色作会员体系的辅色,可以衬托出黑金配色的尊享感。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

icon重塑,化识别性

在权icon计中,化识别性是本次优化的重点,因为图标的目的是用来辅助用户识别,帮助用户做决策的。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

在icon表现法上,从「线性」改成「面性」,增视觉比重;去除底部圆形衬底,采用异型图标,化icon之前的差异化,同异型的icon在占比较的域使用更加节空间,提升拓展性。

比如,当用户未付费时,特权icon仅作辅图形,因这种场景下,icon远文案能帮用户清晰理解,避免用户买错。

因此异型、面、无衬底的icon处理手法,也是在拓展方面优选择。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

以下是icon优化的整效果。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

惊喜彩蛋,提升感化

尊享感,不仅体功能、视觉层面,还体感化关怀,因此我们通过彩蛋式翻卡的触发形式,采用对话的方式,展示互动文案。

当用户首次进行翻卡时,它贴心问:「很高兴你与你相遇,愿美时光与你相伴。」;当用户常互动时,它风趣幽默:「据说超级,法力无边!」「你喜欢的样子超级有~」;当有用户关注的重要消息时,它及时预告式通:「4.11即将有一大波优袭来,超级最高5折哦」,从而营造一个风趣又贴心的小管家,也让我们的网盘服务变得更加贴心。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

3. 提升迭代效率,通用组件沉淀

会员中包括人信息展示、身份卡片、商品支付、尊享特权、尊享福利、体系、专属内、积分兑换模块。

其中有种模块在场中进行复用,为节省开及设计成,同时证验一致,我们次也沉淀出能够灵活整各个模块的位置的组件,来提升产品及运营效率。

比如:支付模块;特权展示模块。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

支付模块

支付模块承载类品信息的展示,在个场出现,比:浮收银台、中心页面、端收银台,以及类运营活动。为证支付验的一致,我们优先对支付模块进行统一和规范,包括其中的品展示、优展示、以及支付按钮的规范化。

为了便于用户感知到会员与级会员异,避免误买带来困扰,我们过品色(级会员色,会员红色)进区分。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

支付模块统和异,既能保持支付体验致性,也能避免用户会员权益生误解,为用户带来了更规范支付体验。

特权展示模块

于特权展示模块进特权展示优化,针以往特权数量多占用空大,以及特权展示信息过少用户看不懂问题,不再采用平铺,而是采用利用空侧滑展示,节省更多空;不再采用原有特权图标+特权名称,而是时展示辅助特权信息,便于用户更加了解特权内容。

并将特权展示方式进行组件,当有特权上线时,可直接通过后台配置进行上线,无需进行开发,升效率。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

同时,我们还成了营位、专享容、专属推荐等多个模的组件,根据会员商的设计规范,形成会员中心的组件库,升合作效率及户统一的认知体验。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

总结

以上是本会员心改版项目全过程,从前期用户调研、目标确定(1.提升用户决策效率;2.提升用户尊享感;3.提升迭代效率),到过多维度地将目标落地(1.懂你所想,会员心框架构;2.凸显尊享感知,视觉语言升级;3.提升迭代效率,用组件沉淀),不仅优化了体验、提高了效率,也付费转化率有所提升。

上亿人使用的百度网盘会员中心,是如何做体验设计的?

本会员心改版,是网盘所有学共努力,时也是会员心提供用户更多选择、更高效率、更多服务第步,它不再是械信息展示和冰冷支付平台,而是更懂用户、提供用户更多元服务聚地。

目前还有很多足和待善的地方,我们在尽最大努为户供更好更有值的务,感谢大一致来的支持与陪伴 。

欢迎关注公众号:「大牙的计笔记」

上亿人使用的百度网盘会员中心,是如何做体验设计的?

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

移动端设计的质量好坏,其实并不难度量。当用户可以流畅轻松地使用,不用耗费精力便可以完成各种任务,这就说明APP或者网站的...
交互设计
用户体验是用户在使用产品或者服务中的所有的主观感受。因此我们设计的过程中要以用户为中心进行设计,不能单单为了设计一个...
产品
容错的定义最初来源于计算机领域,当计算机发生故障后不会崩溃,可以正常工作,并可以从错误中恢复。这个容错性是指对错误的...
产品
视觉设计师≈美工/图标仔,是很多“圈外人”甚至设计师自己对“视觉设计”的理解。 当然,“美”作为信息传达的载体,其本质上,也...
用户体验设计
Google 开发了许多实用指标和工具,帮助衡量用户体验和质量,从而发掘优化点。一项名为 Web Vitals 的计划降低了学习成本,为...
用户体验
@卫夕君 :产品炫酷到让人惊叹,但事实却是销量惨淡,让人爱不起来,这背后真正的原因到底是什么呢?本文笔者将通过实例分析...
产品设计
为什么交互设计能帮助产品解决问题 为什么那么多人觉得应该先学UI设计再学交互设计,因为UI门槛低所以入手快。其实交互比UI更...
UI 设计
缺省页指页面的信息内容为空或信息响应异常的状态;设计缺省状态的作用不仅是引导用户在异常边界状态的操作提示,同时也是安...
交互