2020-5-19 資深UI設(shè)計(jì)者
以下是百度網(wǎng)盤(pán)UE團(tuán)隊(duì)近期對(duì)會(huì)員中心體驗(yàn)進(jìn)行優(yōu)化，希望對(duì)大家做商業(yè)化產(chǎn)品有所幫助。
會(huì)員中心是承載著產(chǎn)品增值權(quán)益展示、購(gòu)買(mǎi)、管理的「集合地」。自2016年起推出會(huì)員和超級(jí)會(huì)員兩項(xiàng)增值服務(wù)至今已有4年時(shí)間，隨著時(shí)間推移，用戶對(duì)網(wǎng)盤(pán)會(huì)員的訴求越來(lái)越多樣，會(huì)員中心也不僅僅承載著支付能力，更多地是獲取福利信息和情感上的尊享感知，同時(shí)在產(chǎn)品框架上的拓展性和效率也有待提升，因此有了本次會(huì)員中心改版項(xiàng)目。
對(duì)于設(shè)計(jì)師而言，我們發(fā)起這個(gè)項(xiàng)目所面臨的挑戰(zhàn)，不僅停留在用戶體驗(yàn)的優(yōu)化還需要兼顧商業(yè)轉(zhuǎn)化。接下來(lái)將從確定目標(biāo)、會(huì)員中心框架重構(gòu)、視覺(jué)語(yǔ)言升級(jí)、沉淀通用組件等方面，跟大家分享下改版背后的設(shè)計(jì)思考。
在著手推進(jìn)項(xiàng)目設(shè)計(jì)前，我們通過(guò)定性和定量的分析，并組織多角色對(duì)本次升級(jí)的目標(biāo)進(jìn)行確認(rèn)，本次升級(jí)的目標(biāo)是：提升用戶決策效率；提升用戶尊享感；沉淀設(shè)計(jì)組件庫(kù)。
1. 為什么要提升用戶決策效率？
會(huì)員中心是價(jià)值與信息的洼地，用戶需要在眾多特權(quán)、優(yōu)惠信息中做出決策。整個(gè)框架清晰、直觀、易懂，是提升用戶決策效率及滿意度的關(guān)鍵所在。
我們通過(guò)支付轉(zhuǎn)化漏斗分析并結(jié)合用戶反饋發(fā)現(xiàn)，改版前，會(huì)員中心信息架構(gòu)比較扁平和單一，缺乏關(guān)鍵性信息的直觀展示，比如：優(yōu)惠信息、會(huì)員服務(wù)信息，導(dǎo)致部分用戶無(wú)法在付費(fèi)過(guò)程中更好地做決策。
此外，在支付流程上，操作鏈條較長(zhǎng)，容易引起用戶厭倦，導(dǎo)致用戶流失。基于這些考慮，我們將對(duì)現(xiàn)有框架進(jìn)行升級(jí)，以提升用戶的決策效率。
2. 為什么要提升用戶尊享感？
會(huì)員中心也是用戶感知身份變化、感知會(huì)員尊享的第一步。改版前，不同身份用戶（未開(kāi)通/會(huì)員/超級(jí)會(huì)員）看到的會(huì)員頁(yè)面卻是相同的，無(wú)法直觀感受到不同身份的差異。
通過(guò)UER的用戶訪談我們也發(fā)現(xiàn)，很多用戶出現(xiàn)以下場(chǎng)景：
購(gòu)買(mǎi)會(huì)員后用戶，產(chǎn)生疑惑「是否購(gòu)買(mǎi)成功了嗎？」；身為超級(jí)會(huì)員用戶，「感受不到任何尊享感受」；快過(guò)期的會(huì)員用戶，「對(duì)會(huì)員/超級(jí)會(huì)員快過(guò)期的也感知不到，導(dǎo)致特權(quán)中斷，影響使用體驗(yàn)」…
因此，我們需要對(duì)整體身份的感知進(jìn)行升級(jí)，讓用戶更清晰地感知到自己身份的層級(jí)。
3. 為什么要沉淀設(shè)計(jì)組件庫(kù)？
對(duì)于產(chǎn)品而言，會(huì)員中心也是會(huì)員類活動(dòng)的主要運(yùn)營(yíng)渠道。
在日常「小步快跑」迭代需求中，為了提升項(xiàng)目組的開(kāi)發(fā)效率以及更好地實(shí)現(xiàn)產(chǎn)品側(cè)多場(chǎng)景模塊靈活調(diào)用的訴求，需要對(duì)復(fù)用率較高且靈活多變的模塊（尤其是支付模塊、特權(quán)模塊）進(jìn)行組件化。因此我們也對(duì)多個(gè)模塊進(jìn)行組件沉淀，提升產(chǎn)品迭代效率。不僅于此，組件化也能給用戶提供更加統(tǒng)一的認(rèn)知，做到產(chǎn)品體驗(yàn)上的統(tǒng)一和規(guī)范化。
明確了目標(biāo)后，我們從以下維度進(jìn)行設(shè)計(jì)升級(jí)，解決現(xiàn)存問(wèn)題：懂你所想，會(huì)員中心框架重構(gòu)；凸顯尊享感知，視覺(jué)語(yǔ)言升級(jí)；提升迭代效率，通用組件沉淀。
我們本次框架重構(gòu)的關(guān)鍵詞就是「懂你所想」，只有更了解用戶，才能提供更符合用戶的選擇，從而提升用戶決策效率。因此，我們?cè)诮换タ蚣軐用嫔?，做了以下幾件事：打造分層布局；?qiáng)化關(guān)鍵信息；縮短支付步長(zhǎng)；智能化推薦。
打造分層布局
進(jìn)入會(huì)員中心的用戶，根據(jù)會(huì)員成長(zhǎng)周期可被劃分為：歷史未付費(fèi)用戶、會(huì)員開(kāi)通中用戶、會(huì)員即將過(guò)期用戶、會(huì)員已過(guò)期用戶。
因此，在這次框架設(shè)計(jì)中，我們根據(jù)身份、動(dòng)機(jī)、行為的差異進(jìn)行分層布局。改變以往的「多人一面」的布局架構(gòu)，打造出新的「多人多面」的靈活分層頁(yè)面布局。
當(dāng)用戶是歷史未付費(fèi)用戶時(shí)，我們更加突出用戶的特權(quán)介紹和商品支付，便于用戶了解會(huì)員服務(wù)和商品信息；當(dāng)用戶是開(kāi)通中的用戶，我們更加突出用戶可尊享的福利信息，突出尊享感；當(dāng)用戶為即將過(guò)期用戶或已過(guò)期用戶時(shí)，我們展示用戶常用特權(quán)信息，喚醒用戶付費(fèi)意愿，并為用戶提供便捷的續(xù)費(fèi)能力。
下面是改版前后效果對(duì)比，從單一身份感知到多元分層處理。
強(qiáng)化關(guān)鍵信息
關(guān)鍵信息也是用戶更為「關(guān)心」的信息，通過(guò)調(diào)研發(fā)現(xiàn)，網(wǎng)盤(pán)用戶更加關(guān)注會(huì)員優(yōu)惠活動(dòng)信息、服務(wù)到期提醒以及會(huì)員之間的差異性，因此在本次升級(jí)中，我們對(duì)用戶所關(guān)心的決策信息進(jìn)行強(qiáng)化，恰如其分地展示便于用戶決策，同時(shí)提升用戶的付費(fèi)意愿。
新增運(yùn)營(yíng)渠道
通過(guò)用戶訪談，了解到很多用戶總是錯(cuò)過(guò)網(wǎng)盤(pán)的福利活動(dòng)，不知道在哪里能接受到一手信息。
因此，本次升級(jí)我們?cè)跁?huì)員中心中新增了運(yùn)營(yíng)位，增加用戶關(guān)注的優(yōu)惠活動(dòng)的曝光。
服務(wù)到期提醒
針對(duì)即將過(guò)期或已過(guò)期的用戶，我們會(huì)展示用戶常用特權(quán)功能的即將到期的信息，避免用戶特權(quán)功能到期后，給用戶日常使用帶來(lái)困擾，比如使用視頻原畫(huà)備份等功能，我們也會(huì)提前告知給用戶：「3天后即將到期，將不再享有視頻原畫(huà)備份和在線解壓等11項(xiàng)特權(quán)」，讓用戶提前做決策。
強(qiáng)化特權(quán)的差異對(duì)比
此外，我們還強(qiáng)化了特權(quán)對(duì)比的差異，分別展示了普通用戶、會(huì)員用戶、超級(jí)會(huì)員用戶擁有特權(quán)功能的差異性，便于用戶根據(jù)自身需求選擇對(duì)應(yīng)更為合適的會(huì)員服務(wù)，避免買(mǎi)錯(cuò)等一系列不便或者多花冤枉錢(qián)的行為。
縮短支付步長(zhǎng)
為了更方便用戶進(jìn)行支付，讓用戶付費(fèi)行為更加順暢絲滑，我們摒棄以往全頁(yè)面跳轉(zhuǎn)形式，采用了浮層收銀臺(tái)的方式，減少用戶在頁(yè)面間的跳轉(zhuǎn)而帶來(lái)的迷失感，達(dá)到簡(jiǎn)化支付路徑的目的。
也在用戶即將過(guò)期等狀態(tài)，保留了原有前置展示商品和支付操作的方式，讓用戶一鍵完成續(xù)費(fèi)，方便又快捷。同時(shí)，也會(huì)在用戶選擇商品支付時(shí)，展示用戶帳號(hào)信息，避免用戶買(mǎi)錯(cuò)的問(wèn)題。
智能化推薦
與以往不同，我們不局限于通過(guò)理性的信息展示，讓用戶自己搜尋信息、被動(dòng)匹配，同時(shí)我們也在不斷嘗試采用更加擬人化、對(duì)話感的方式觸達(dá)用戶，推送給用戶更為關(guān)注的信息，更加精細(xì)化地探索多樣的運(yùn)營(yíng)場(chǎng)景。
比如：針對(duì)已付費(fèi)用戶，結(jié)合用戶的使用場(chǎng)景，更多展示特權(quán)信息，如：「周末看視頻，2倍速、2K、極速加載缺一不可」；
當(dāng)我們上了會(huì)員新特權(quán)的時(shí)候，也會(huì)及時(shí)告知用戶，讓他們享受更加豐富的權(quán)益。
本次對(duì)會(huì)員中心的視覺(jué)呈現(xiàn)也做了全新升級(jí)，不僅凸顯會(huì)員的尊享感、情感化，同時(shí)兼顧用戶的識(shí)別效率及后續(xù)拓展性，針對(duì)這一目標(biāo)，我們做了以下優(yōu)化：卡面升級(jí)，提升身份感；品牌色優(yōu)化，確保拓展性；icon重塑，強(qiáng)化識(shí)別性；驚喜彩蛋，提升情感化。
卡片升級(jí)，提升身份感
會(huì)員身份卡片是用戶直觀感受身份變化的第一步。本次卡片設(shè)計(jì)中，在卡片比例上，盡可能接近于實(shí)物卡片，并在卡面肌理表達(dá)上，采用磨砂質(zhì)地，更貼合用戶自然認(rèn)知，卡片顏色結(jié)合會(huì)員品牌色進(jìn)行設(shè)計(jì)。同時(shí)結(jié)合網(wǎng)盤(pán)品牌基因中的logo的「云」，提升品牌差異化。
當(dāng)用戶進(jìn)入會(huì)員中心時(shí)，采用光影動(dòng)效，同時(shí)描繪「云」型，提升視覺(jué)層次感，同時(shí)加深用戶認(rèn)知。
品牌色優(yōu)化，確保拓展性
我們還重新定義了會(huì)員體系的品牌色，超級(jí)會(huì)員選用黑金配色來(lái)突顯最高級(jí)別身份。
主題色延續(xù)了網(wǎng)盤(pán)會(huì)員色系，超級(jí)會(huì)員為金色，會(huì)員為紅色，在此基礎(chǔ)上調(diào)整色彩明度。新配色在產(chǎn)品界面和運(yùn)營(yíng)活動(dòng)上，能給用戶帶來(lái)更加直觀的身份感知。
輔助色為黑白，因?yàn)樗巧适澜缰械?「 經(jīng)典 」 ，給人以簡(jiǎn)潔、純粹的審美感受和視覺(jué)享受。以黑白色作為會(huì)員體系的輔助色，可以襯托出黑金配色的尊享感。
icon重塑，強(qiáng)化識(shí)別性
在特權(quán)icon設(shè)計(jì)中，強(qiáng)化識(shí)別性是本次優(yōu)化的重點(diǎn)，因?yàn)閳D標(biāo)的目的是用來(lái)輔助用戶識(shí)別，幫助用戶做決策的。
我們?cè)趇con表現(xiàn)手法上，從「線性」改成「面性」，增強(qiáng)視覺(jué)比重；去除底部圓形襯底，采用異型圖標(biāo)，強(qiáng)化icon之前的差異化，同時(shí)異型的icon在占比較小的區(qū)域里使用更加節(jié)省空間，提升拓展性。
比如，當(dāng)用戶是未付費(fèi)時(shí)，特權(quán)icon僅作為輔助圖形，因?yàn)樵谶@種場(chǎng)景下，icon遠(yuǎn)沒(méi)有文案更能幫助用戶清晰理解，避免用戶買(mǎi)錯(cuò)。
因此異型、面性、無(wú)襯底的icon處理手法，也是在拓展方面較優(yōu)選擇。
以下是icon優(yōu)化后的整體效果。
驚喜彩蛋，提升情感化
尊享感，不僅體現(xiàn)在功能、視覺(jué)層面，還體現(xiàn)在情感化關(guān)懷，因此我們通過(guò)彩蛋式翻卡的觸發(fā)形式，采用對(duì)話的方式，展示互動(dòng)文案。
當(dāng)用戶首次進(jìn)行翻卡時(shí)，它會(huì)貼心問(wèn)候：「很高興你與你相遇，愿美好時(shí)光與你相伴?！?；當(dāng)用戶日常互動(dòng)時(shí)，它風(fēng)趣幽默：「據(jù)說(shuō)超級(jí)會(huì)員，法力無(wú)邊！」「你喜歡的樣子超級(jí)會(huì)員都有~」；當(dāng)有用戶關(guān)注的重要消息時(shí)，它會(huì)及時(shí)預(yù)告式通知：「4.11日即將有一大波優(yōu)惠福利襲來(lái)，超級(jí)會(huì)員最高5折哦」，從而營(yíng)造一個(gè)風(fēng)趣又貼心的小管家，也讓我們的網(wǎng)盤(pán)會(huì)員服務(wù)變得更加貼心。
會(huì)員中心包括個(gè)人信息展示、身份卡片、商品和支付、尊享特權(quán)、尊享福利、成長(zhǎng)體系、專屬內(nèi)容、積分兌換等模塊。
其中有多種模塊會(huì)在多場(chǎng)景中進(jìn)行復(fù)用，為了節(jié)省開(kāi)發(fā)及設(shè)計(jì)成本，同時(shí)保證體驗(yàn)一致性，我們本次也沉淀出能夠靈活調(diào)整各個(gè)模塊的位置的組件，來(lái)提升產(chǎn)品及運(yùn)營(yíng)效率。
比如：支付模塊；特權(quán)展示模塊。
支付模塊
支付模塊承載了會(huì)員類商品信息的展示，會(huì)在多個(gè)場(chǎng)景出現(xiàn)，比如：浮層收銀臺(tái)、會(huì)員中心頁(yè)面、全端收銀臺(tái)，以及會(huì)員類運(yùn)營(yíng)活動(dòng)。為了保證支付體驗(yàn)的一致性，我們優(yōu)先對(duì)支付模塊進(jìn)行統(tǒng)一和規(guī)范，包括其中的商品展示、優(yōu)惠展示、以及支付按鈕的規(guī)范化。
為了便于用戶感知到會(huì)員與超級(jí)會(huì)員之間的差異，避免錯(cuò)誤購(gòu)買(mǎi)帶來(lái)的困擾，我們通過(guò)品牌色（超級(jí)會(huì)員的金色，會(huì)員的紅色）進(jìn)行區(qū)分。
支付模塊的統(tǒng)一和差異，既能保持支付體驗(yàn)的一致性，也能避免用戶對(duì)會(huì)員權(quán)益產(chǎn)生誤解，為用戶帶來(lái)了更規(guī)范的支付體驗(yàn)。
特權(quán)展示模塊
對(duì)于特權(quán)展示模塊進(jìn)行特權(quán)展示的優(yōu)化，針對(duì)以往特權(quán)數(shù)量多占用空間大，以及特權(quán)展示信息過(guò)少用戶看不懂的問(wèn)題，不再采用平鋪的方式，而是采用利用橫向空間的側(cè)滑方式展示，節(jié)省更多空間；不再采用原有的特權(quán)圖標(biāo)+特權(quán)名稱的方式，而是同時(shí)展示輔助特權(quán)信息，便于用戶更加了解特權(quán)內(nèi)容。
并將特權(quán)展示方式進(jìn)行組件化，當(dāng)有新特權(quán)上線時(shí)，可直接通過(guò)后臺(tái)配置進(jìn)行上線，無(wú)需進(jìn)行開(kāi)發(fā)，提升效率。
同時(shí)，我們還完成了運(yùn)營(yíng)位、專享內(nèi)容、專屬推薦等多個(gè)模塊的組件化，也根據(jù)會(huì)員商業(yè)化的設(shè)計(jì)規(guī)范，形成會(huì)員中心的組件庫(kù)，提升合作效率及用戶統(tǒng)一的認(rèn)知體驗(yàn)。
以上就是本次會(huì)員中心改版項(xiàng)目的全過(guò)程，從前期用戶調(diào)研、目標(biāo)確定（1.提升用戶決策效率；2.提升用戶尊享感；3.提升迭代效率），到通過(guò)多維度地將目標(biāo)落地（1.懂你所想，會(huì)員中心框架重構(gòu)；2.凸顯尊享感知，視覺(jué)語(yǔ)言升級(jí)；3.提升迭代效率，通用組件沉淀），不僅優(yōu)化了體驗(yàn)、提高了效率，也對(duì)付費(fèi)轉(zhuǎn)化率有所提升。
本次會(huì)員中心改版，是網(wǎng)盤(pán)所有同學(xué)的共同努力，同時(shí)也是會(huì)員中心提供給用戶更多選擇、更率、更多服務(wù)的第一步，它不再是機(jī)械的信息展示和冰冷的支付平臺(tái)，而是更懂用戶、提供給用戶更多元服務(wù)的聚集地。
目前還有很多不足和待完善的地方，我們也在盡最大努力為用戶提供更好更有價(jià)值的服務(wù)，感謝大家一致以來(lái)的支持與陪伴 。
文章來(lái)源：優(yōu)設(shè) 作者：百度UE團(tuán)隊(duì)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com