設計團隊如何賦能業務，提升用戶體驗的同時，助力業務達成目標？接下來通過「PLUS 未開通會員｜首屏｜體驗設計升級」項目進行整體復盤。

往期案例：

一、前期分析

1. 項目背景

PLUS未開通會員項目的背景有以下幾個關鍵點：

1. 未開通會員頻道"首屏"做為開卡轉化的核心陣地，80%的流量集中在首屏，卻沒有很好的發揮首屏價值。
2. PLUS 長期沉淀已有更多卡種，在主頻道內沒有呈現。
3. 未開通頻道長時間未做視覺升級，因此需要進行體驗設計優化，從而提升開卡效率。

2. 業務訴求

① 首先明確核心訴求

在于提升頻道首屏的開卡率

② 接下來拆解訴求

1. 頻道外露多卡種
2. 權益組織形式重構
3. 交互視覺體驗升級
4. 優化開卡鏈路

基于以上這幾點去促使用戶更快決策，助推到業務核心訴求從而提升首屏開卡率。

3. 現狀分析

明確業務訴求后，相應對頻道頁面的現狀進行分析，整合來看有以下 6 點。

1. 卡種選擇單一且無核心價值傳遞
2. 會員權益形式表達不清晰，撩撥感弱
3. 權益露出無權重差異
4. 轉化鏈路層級長
5. 聯名卡視覺樣式老舊且框架較高
6. 與正式開卡頁面視覺風格不統一

二、設計預研

對自身問題有了拆解后，接下來對淘系、零售、O2O 相關競品進行調研， 提煉競品的一些相關優勢策略點。正所謂“他山之石可以攻玉”。

并且羅列歸納了競品的幾種布局方式

因此，基于對自身現狀的分析，和對競品的分析，我們將本次體驗設計升級的策略主要錨定在 權益表達、結算鏈路、結構布局、卡種展示 四個關鍵點。

三、設計推演

設計推演拆分為發散和收縮兩個部分。

1. 飛機稿發散

發散階段圍繞 結構布局 和 卡種展示 進行發散.

① 結構布局發散了 包裹式布局 和 分段式布局

② 針對卡種展示，分別發散了 傳統 tab 切換 和 卡片輪播 以及 卡種場景化探索。

③ 由于有多種卡種，因此在卡種發散的過程中針對于 不同卡種的用戶感知，也進行了相應的探索。

比如 強感知 的皮膚顏色切換、卡面圖形切換，次強感知 的標簽樣式區分。

強感知 的皮膚顏色切換

強感知 的卡面圖形切換

次強感知 的標簽樣式區分

2. 收縮-策略推演

最后的方案收縮落地，我們主要圍繞前面提及的四個方向進行策略拆解，首先是權益展示。

1）權益展示

分為三個點：

① 是進行主次權益的權重差異，助力用戶決策。

② 會員權益顯性露出，強化關鍵信息，以及 sku 的輪播露出，打造強撩撥感。

③ 最后組件化輸出模塊，后臺靈活配置上傳，節省開發成本。

2）結算鏈路

① 摒棄了以往全頁面跳轉形式，采用浮層收銀臺的方式，減少用戶在頁面間跳轉帶來的迷失感，從而達到簡化支付路徑的目的。

② 其次視覺整體優化。保證視覺一致性傳遞。

3）結構布局

① 整體采用分段式布局結構、使模塊更聚焦，提升首屏的秩序感

② 分層展示便于開發還原。 「前期 UI 評審階段和開發做好溝通，便于開發判斷使用什么實現方式，從而做到又快又好的還原設計稿（皆大歡喜）」

4）卡種展示

① 多卡種滑動保證卡種外露的同時 引導用戶操作。

② 卡面微動效，強化 PLUS 的 品牌心智和用戶感知。

③ 卡面氛圍，最終采用 3D 打造的效果，彰顯 plus 品牌的尊貴感知，助力用戶決策。并且拓充氛圍坑位的運營屬性，可配置氛圍延展 plus 會員卡的情感化表達。

④卡面上進行不同卡種 slgan 的透傳，進行價值傳遞，進一步助力決策，比如京典卡：開通享 12 大特權，省錢又省心； 免費試用：開通享 8 大特權，免費試用 30 天；0 元開通：開通享 12 大特權，多用多省少用不虧。

⑤ 聯名卡整體視覺減負。

四、數據驗證

本次首屏設計體驗升級，在組內同學、產品和開發的共同的努力下，最終測試上線，通過測試版本追蹤數據，我們也得到了相應正向的反饋（這里就不放數據啦）。

歡迎關注「JellyDesign」的小程序：