上億人使用的百度網(wǎng)盤會員中心,是如何做體驗設計的?

2020-5-19    資深UI設計者

以下是百度網(wǎng)盤UE團隊近期對會員中心體驗進行優(yōu)化,希望對大家做商業(yè)化產(chǎn)品有所幫助。

項目背景

會員中心是承載著產(chǎn)品增值權(quán)益展示、購買、管理的「集合地」。自2016年起推出會員和超級會員兩項增值服務至今已有4年時間,隨著時間推移,用戶對網(wǎng)盤會員的訴求越來越多樣,會員中心也不僅僅承載著支付能力,更多地是獲取福利信息和情感上的尊享感知,同時在產(chǎn)品框架上的拓展性和效率也有待提升,因此有了本次會員中心改版項目。

對于設計師而言,我們發(fā)起這個項目所面臨的挑戰(zhàn),不僅停留在用戶體驗的優(yōu)化還需要兼顧商業(yè)轉(zhuǎn)化。接下來將從確定目標、會員中心框架重構(gòu)、視覺語言升級、沉淀通用組件等方面,跟大家分享下改版背后的設計思考。

確認目標

在著手推進項目設計前,我們通過定性和定量的分析,并組織多角色對本次升級的目標進行確認,本次升級的目標是:提升用戶決策效率;提升用戶尊享感;沉淀設計組件庫。

1. 為什么要提升用戶決策效率?

會員中心是價值與信息的洼地,用戶需要在眾多特權(quán)、優(yōu)惠信息中做出決策。整個框架清晰、直觀、易懂,是提升用戶決策效率及滿意度的關(guān)鍵所在。

我們通過支付轉(zhuǎn)化漏斗分析并結(jié)合用戶反饋發(fā)現(xiàn),改版前,會員中心信息架構(gòu)比較扁平和單一,缺乏關(guān)鍵性信息的直觀展示,比如:優(yōu)惠信息、會員服務信息,導致部分用戶無法在付費過程中更好地做決策。

此外,在支付流程上,操作鏈條較長,容易引起用戶厭倦,導致用戶流失?;谶@些考慮,我們將對現(xiàn)有框架進行升級,以提升用戶的決策效率。

2. 為什么要提升用戶尊享感?

會員中心也是用戶感知身份變化、感知會員尊享的第一步。改版前,不同身份用戶(未開通/會員/超級會員)看到的會員頁面卻是相同的,無法直觀感受到不同身份的差異。

通過UER的用戶訪談我們也發(fā)現(xiàn),很多用戶出現(xiàn)以下場景:

購買會員后用戶,產(chǎn)生疑惑「是否購買成功了嗎?」;身為超級會員用戶,「感受不到任何尊享感受」;快過期的會員用戶,「對會員/超級會員快過期的也感知不到,導致特權(quán)中斷,影響使用體驗」…

因此,我們需要對整體身份的感知進行升級,讓用戶更清晰地感知到自己身份的層級。

3. 為什么要沉淀設計組件庫?

對于產(chǎn)品而言,會員中心也是會員類活動的主要運營渠道。

在日?!感〔娇炫堋沟枨笾校瑸榱颂嵘椖拷M的開發(fā)效率以及更好地實現(xiàn)產(chǎn)品側(cè)多場景模塊靈活調(diào)用的訴求,需要對復用率較高且靈活多變的模塊(尤其是支付模塊、特權(quán)模塊)進行組件化。因此我們也對多個模塊進行組件沉淀,提升產(chǎn)品迭代效率。不僅于此,組件化也能給用戶提供更加統(tǒng)一的認知,做到產(chǎn)品體驗上的統(tǒng)一和規(guī)范化。

設計落地

明確了目標后,我們從以下維度進行設計升級,解決現(xiàn)存問題:懂你所想,會員中心框架重構(gòu);凸顯尊享感知,視覺語言升級;提升迭代效率,通用組件沉淀。

1. 懂你所想,會員中心框架重構(gòu)

我們本次框架重構(gòu)的關(guān)鍵詞就是「懂你所想」,只有更了解用戶,才能提供更符合用戶的選擇,從而提升用戶決策效率。因此,我們在交互框架層面上,做了以下幾件事:打造分層布局;強化關(guān)鍵信息;縮短支付步長;智能化推薦。

打造分層布局

進入會員中心的用戶,根據(jù)會員成長周期可被劃分為:歷史未付費用戶、會員開通中用戶、會員即將過期用戶、會員已過期用戶。

因此,在這次框架設計中,我們根據(jù)身份、動機、行為的差異進行分層布局。改變以往的「多人一面」的布局架構(gòu),打造出新的「多人多面」的靈活分層頁面布局。

當用戶是歷史未付費用戶時,我們更加突出用戶的特權(quán)介紹和商品支付,便于用戶了解會員服務和商品信息;當用戶是開通中的用戶,我們更加突出用戶可尊享的福利信息,突出尊享感;當用戶為即將過期用戶或已過期用戶時,我們展示用戶常用特權(quán)信息,喚醒用戶付費意愿,并為用戶提供便捷的續(xù)費能力。

下面是改版前后效果對比,從單一身份感知到多元分層處理。

強化關(guān)鍵信息

關(guān)鍵信息也是用戶更為「關(guān)心」的信息,通過調(diào)研發(fā)現(xiàn),網(wǎng)盤用戶更加關(guān)注會員優(yōu)惠活動信息、服務到期提醒以及會員之間的差異性,因此在本次升級中,我們對用戶所關(guān)心的決策信息進行強化,恰如其分地展示便于用戶決策,同時提升用戶的付費意愿。

新增運營渠道

通過用戶訪談,了解到很多用戶總是錯過網(wǎng)盤的福利活動,不知道在哪里能接受到一手信息。

因此,本次升級我們在會員中心中新增了運營位,增加用戶關(guān)注的優(yōu)惠活動的曝光。

服務到期提醒

針對即將過期或已過期的用戶,我們會展示用戶常用特權(quán)功能的即將到期的信息,避免用戶特權(quán)功能到期后,給用戶日常使用帶來困擾,比如使用視頻原畫備份等功能,我們也會提前告知給用戶:「3天后即將到期,將不再享有視頻原畫備份和在線解壓等11項特權(quán)」,讓用戶提前做決策。

強化特權(quán)的差異對比

此外,我們還強化了特權(quán)對比的差異,分別展示了普通用戶、會員用戶、超級會員用戶擁有特權(quán)功能的差異性,便于用戶根據(jù)自身需求選擇對應更為合適的會員服務,避免買錯等一系列不便或者多花冤枉錢的行為。

縮短支付步長

為了更方便用戶進行支付,讓用戶付費行為更加順暢絲滑,我們摒棄以往全頁面跳轉(zhuǎn)形式,采用了浮層收銀臺的方式,減少用戶在頁面間的跳轉(zhuǎn)而帶來的迷失感,達到簡化支付路徑的目的。

也在用戶即將過期等狀態(tài),保留了原有前置展示商品和支付操作的方式,讓用戶一鍵完成續(xù)費,方便又快捷。同時,也會在用戶選擇商品支付時,展示用戶帳號信息,避免用戶買錯的問題。

智能化推薦

與以往不同,我們不局限于通過理性的信息展示,讓用戶自己搜尋信息、被動匹配,同時我們也在不斷嘗試采用更加擬人化、對話感的方式觸達用戶,推送給用戶更為關(guān)注的信息,更加精細化地探索多樣的運營場景。

比如:針對已付費用戶,結(jié)合用戶的使用場景,更多展示特權(quán)信息,如:「周末看視頻,2倍速、2K、極速加載缺一不可」;

當我們上了會員新特權(quán)的時候,也會及時告知用戶,讓他們享受更加豐富的權(quán)益。

2. 凸顯尊享感知,視覺語言升級

本次對會員中心的視覺呈現(xiàn)也做了全新升級,不僅凸顯會員的尊享感、情感化,同時兼顧用戶的識別效率及后續(xù)拓展性,針對這一目標,我們做了以下優(yōu)化:卡面升級,提升身份感;品牌色優(yōu)化,確保拓展性;icon重塑,強化識別性;驚喜彩蛋,提升情感化。

卡片升級,提升身份感

會員身份卡片是用戶直觀感受身份變化的第一步。本次卡片設計中,在卡片比例上,盡可能接近于實物卡片,并在卡面肌理表達上,采用磨砂質(zhì)地,更貼合用戶自然認知,卡片顏色結(jié)合會員品牌色進行設計。同時結(jié)合網(wǎng)盤品牌基因中的logo的「云」,提升品牌差異化。

當用戶進入會員中心時,采用光影動效,同時描繪「云」型,提升視覺層次感,同時加深用戶認知。

品牌色優(yōu)化,確保拓展性

我們還重新定義了會員體系的品牌色,超級會員選用黑金配色來突顯最高級別身份。

主題色延續(xù)了網(wǎng)盤會員色系,超級會員為金色,會員為紅色,在此基礎(chǔ)上調(diào)整色彩明度。新配色在產(chǎn)品界面和運營活動上,能給用戶帶來更加直觀的身份感知。

輔助色為黑白,因為它是色彩世界中的 「 經(jīng)典 」 ,給人以簡潔、純粹的審美感受和視覺享受。以黑白色作為會員體系的輔助色,可以襯托出黑金配色的尊享感。

icon重塑,強化識別性

在特權(quán)icon設計中,強化識別性是本次優(yōu)化的重點,因為圖標的目的是用來輔助用戶識別,幫助用戶做決策的。

我們在icon表現(xiàn)手法上,從「線性」改成「面性」,增強視覺比重;去除底部圓形襯底,采用異型圖標,強化icon之前的差異化,同時異型的icon在占比較小的區(qū)域里使用更加節(jié)省空間,提升拓展性。

比如,當用戶是未付費時,特權(quán)icon僅作為輔助圖形,因為在這種場景下,icon遠沒有文案更能幫助用戶清晰理解,避免用戶買錯。

因此異型、面性、無襯底的icon處理手法,也是在拓展方面較優(yōu)選擇。

以下是icon優(yōu)化后的整體效果。

驚喜彩蛋,提升情感化

尊享感,不僅體現(xiàn)在功能、視覺層面,還體現(xiàn)在情感化關(guān)懷,因此我們通過彩蛋式翻卡的觸發(fā)形式,采用對話的方式,展示互動文案。

當用戶首次進行翻卡時,它會貼心問候:「很高興你與你相遇,愿美好時光與你相伴?!?;當用戶日?;訒r,它風趣幽默:「據(jù)說超級會員,法力無邊!」「你喜歡的樣子超級會員都有~」;當有用戶關(guān)注的重要消息時,它會及時預告式通知:「4.11日即將有一大波優(yōu)惠福利襲來,超級會員最高5折哦」,從而營造一個風趣又貼心的小管家,也讓我們的網(wǎng)盤會員服務變得更加貼心。

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

會員中心包括個人信息展示、身份卡片、商品和支付、尊享特權(quán)、尊享福利、成長體系、專屬內(nèi)容、積分兌換等模塊。

其中有多種模塊會在多場景中進行復用,為了節(jié)省開發(fā)及設計成本,同時保證體驗一致性,我們本次也沉淀出能夠靈活調(diào)整各個模塊的位置的組件,來提升產(chǎn)品及運營效率。

比如:支付模塊;特權(quán)展示模塊。

支付模塊

支付模塊承載了會員類商品信息的展示,會在多個場景出現(xiàn),比如:浮層收銀臺、會員中心頁面、全端收銀臺,以及會員類運營活動。為了保證支付體驗的一致性,我們優(yōu)先對支付模塊進行統(tǒng)一和規(guī)范,包括其中的商品展示、優(yōu)惠展示、以及支付按鈕的規(guī)范化。

為了便于用戶感知到會員與超級會員之間的差異,避免錯誤購買帶來的困擾,我們通過品牌色(超級會員的金色,會員的紅色)進行區(qū)分。

支付模塊的統(tǒng)一和差異,既能保持支付體驗的一致性,也能避免用戶對會員權(quán)益產(chǎn)生誤解,為用戶帶來了更規(guī)范的支付體驗。

特權(quán)展示模塊

對于特權(quán)展示模塊進行特權(quán)展示的優(yōu)化,針對以往特權(quán)數(shù)量多占用空間大,以及特權(quán)展示信息過少用戶看不懂的問題,不再采用平鋪的方式,而是采用利用橫向空間的側(cè)滑方式展示,節(jié)省更多空間;不再采用原有的特權(quán)圖標+特權(quán)名稱的方式,而是同時展示輔助特權(quán)信息,便于用戶更加了解特權(quán)內(nèi)容。

并將特權(quán)展示方式進行組件化,當有新特權(quán)上線時,可直接通過后臺配置進行上線,無需進行開發(fā),提升效率。

同時,我們還完成了運營位、專享內(nèi)容、專屬推薦等多個模塊的組件化,也根據(jù)會員商業(yè)化的設計規(guī)范,形成會員中心的組件庫,提升合作效率及用戶統(tǒng)一的認知體驗。

總結(jié)

以上就是本次會員中心改版項目的全過程,從前期用戶調(diào)研、目標確定(1.提升用戶決策效率;2.提升用戶尊享感;3.提升迭代效率),到通過多維度地將目標落地(1.懂你所想,會員中心框架重構(gòu);2.凸顯尊享感知,視覺語言升級;3.提升迭代效率,通用組件沉淀),不僅優(yōu)化了體驗、提高了效率,也對付費轉(zhuǎn)化率有所提升。

本次會員中心改版,是網(wǎng)盤所有同學的共同努力,同時也是會員中心提供給用戶更多選擇、更率、更多服務的第一步,它不再是機械的信息展示和冰冷的支付平臺,而是更懂用戶、提供給用戶更多元服務的聚集地。

目前還有很多不足和待完善的地方,我們也在盡最大努力為用戶提供更好更有價值的服務,感謝大家一致以來的支持與陪伴 。

文章來源:優(yōu)設    作者:百度UE團隊

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔