經(jīng)驗(yàn)，淘寶的UI設(shè)計(jì)師是這么做卡券包改版的

“小”是相對(duì)“大”而言的，手機(jī)淘寶是一艘流量航母，每天使用手機(jī)淘寶的用戶數(shù)接近兩億。相比航母甲板上動(dòng)則數(shù)百萬上千萬的拳頭業(yè)務(wù)，卡券包的用戶數(shù)顯然少得多。

卡券包具有較強(qiáng)的工具屬性，大部分用戶訪問卡券包是為了查看自己獲得的權(quán)益，來去匆匆，查完即走，對(duì)用戶的購買行為并沒有直接的推動(dòng)作用?？赡茉谏虡I(yè)回報(bào)和KPI的雙重考量下，卡券包改版的緊迫程度并不高。

事實(shí)上，在此次改版之前，由于業(yè)務(wù)調(diào)整、人員變動(dòng)，卡券包和其它的“小產(chǎn)品”一樣，年久失修，存在諸多體驗(yàn)上的問題。

看到這里，你可能會(huì)覺得卡券包十分可憐。既然這么不受待見，為何不直接把這塊業(yè)務(wù)干掉。與其活著被人詬病，不如有尊嚴(yán)的“狗帶”。

不要著急，我們?cè)倏匆唤M數(shù)據(jù)，你一定會(huì)對(duì)卡券包改觀：2016年雙11期間，卡券包的單日訪問峰值達(dá)到了日常流量的近20倍。試想，如果這個(gè)月你領(lǐng)到的薪水是往常的20倍，你的內(nèi)心會(huì)受到怎樣的沖擊。

不難看出，卡券包是典型的“大促怪物”，體形會(huì)隨著 “大促”報(bào)復(fù)性增“大”。平臺(tái)大促，權(quán)益密集發(fā)放，查詢權(quán)益的用戶數(shù)和權(quán)益的查詢頻次會(huì)激增。這個(gè)時(shí)候，平常一個(gè)小小的體驗(yàn)問題，就會(huì)被放大許多倍。

舊版卡券包存在以下幾個(gè)問題：
 

1. 權(quán)益種類繁多，歸類邏輯混亂，用戶無法快速聚焦要查詢的權(quán)益

舊版卡券包首頁有7個(gè)權(quán)益分類入口，包含了幾十種權(quán)益，這個(gè)數(shù)字還在不斷增加。當(dāng)用戶獲得某項(xiàng)權(quán)益，來卡券包查詢的時(shí)候，他可能都不知道應(yīng)該去哪里找。

如果你經(jīng)常使用卡券包，可能會(huì)發(fā)現(xiàn)用于線上購買流量時(shí)抵扣的“流量優(yōu)惠券”竟然被歸類在“門店消費(fèi)券”，“門店消費(fèi)券”里展示的應(yīng)該全是用于線下門店核銷使用的電子憑證類權(quán)益，如星巴克的咖啡抵用券、電影票等。這有點(diǎn)像你進(jìn)了女廁，發(fā)現(xiàn)墻上竟然有一排站立式小便池。

2016年雙11期間，我們收到一位用戶反饋，他通過“捉貓貓”游戲獲得了一張 KFC 的電子券消費(fèi)券，來到卡券包首頁的時(shí)候，他不知道應(yīng)該進(jìn)哪個(gè)權(quán)益分類入口查看。

用戶沒有義務(wù)對(duì)我們的產(chǎn)品結(jié)構(gòu)、業(yè)務(wù)邏輯和設(shè)計(jì)初衷了如指掌，但如果他在界面中找一樣?xùn)|西卻找不到，那肯定是我們的產(chǎn)品有問題。這位用戶的反饋引起了我們的重視，我們相信有相同困擾的用戶不在少數(shù)。
 

2. 用戶的訪問路徑較長，查詢效率低

2016年雙11期間，手機(jī)淘寶用戶人均獲得的店鋪優(yōu)惠券、雙11購物券、紅包等權(quán)益數(shù)量非常多。我們假設(shè)一個(gè)用戶獲得了1張店鋪優(yōu)惠券、1張雙11購物券和1個(gè)雙11紅包，他在舊版卡券包的查詢路徑如下圖：

可以看到，用戶完成這個(gè)查詢?nèi)蝿?wù)需要經(jīng)過這么多步驟，簡直令人發(fā)指。這就好像我們?nèi)ナ程么蝻?，打米飯要?號(hào)餐線，打葷菜要去2號(hào)餐線，打素菜要去3號(hào)餐線。每打一樣菜要換一條餐線重新排隊(duì)，問該食堂什么時(shí)候倒閉？

明確問題，我們開始著手解決問題：
 

1. 優(yōu)化權(quán)益的歸類邏輯

我們對(duì)卡券包現(xiàn)有的權(quán)益種類（主要是網(wǎng)店優(yōu)惠券和門店消費(fèi)券）進(jìn)行了梳理，明確了“線上抵扣”和“線下核銷”兩個(gè)主要的歸類原則：

1）凡是在線上使用、網(wǎng)購結(jié)算時(shí)抵扣使用的優(yōu)惠權(quán)益都?xì)w類在“網(wǎng)店優(yōu)惠券”。

2）凡是線下使用、需要在商家門店出示核銷的權(quán)益都?xì)w類在“門店消費(fèi)券”。

用戶以后再也不會(huì)在“門店消費(fèi)券”列表中看到流量券、飛豬旅行紅包等權(quán)益亂入了。

△ 重新歸類后的部分權(quán)益一覽

 

2. 縮短用戶訪問路徑，提升查詢效率

我們對(duì)多個(gè)競(jìng)品（用戶權(quán)益集合頁）進(jìn)行了分析，競(jìng)品的產(chǎn)品結(jié)構(gòu)可分為兩類：

1）常規(guī)的“分類入口+列表+詳情”結(jié)構(gòu)

使用該結(jié)構(gòu)的產(chǎn)品，對(duì)用戶的所有權(quán)益進(jìn)行了分類，幫用戶做了一層篩選。當(dāng)用戶獲得的權(quán)益數(shù)量較多時(shí)，能夠幫助用戶快速聚焦，找到要查看的權(quán)益。舊版卡券包使用的就是這個(gè)結(jié)構(gòu)。

2）扁平的“列表＋詳情”結(jié)構(gòu)

這種結(jié)構(gòu)相比前一種結(jié)構(gòu)，用戶不用去理解平臺(tái)的歸類邏輯，他看到的這個(gè)列表，就是所有權(quán)益，一目了然。少了“分類入口”，頁面層級(jí)減少，與我們“縮短用戶訪問路徑”的目標(biāo)吻合。

但是，扁平的頁面結(jié)構(gòu)產(chǎn)生了另一個(gè)問題：當(dāng)用戶獲得的權(quán)益數(shù)量較多，權(quán)益列表會(huì)變得很長，這個(gè)時(shí)候，用戶要從中找到某一項(xiàng)權(quán)益，會(huì)變得不那么容易，用戶的查詢效率也會(huì)因此降低。

我們又面臨一個(gè)問題：前一種結(jié)構(gòu)有問題，后一種結(jié)構(gòu)不完美。

絕妙的主意，我們嘗試將兩種結(jié)構(gòu)結(jié)合：

首頁保留“分類入口”的基礎(chǔ)上，新增一個(gè)模塊，這個(gè)模塊展示的內(nèi)容要是用戶當(dāng)下最關(guān)心的。那么，用戶訪問卡券包時(shí)最關(guān)心哪些內(nèi)容？權(quán)益的查詢和核銷是卡券包用戶的主要使用場(chǎng)景。

我們觀察了2016年雙11期間，卡券包查詢量最大的幾類權(quán)益的日均查詢率（日均查詢權(quán)益用戶數(shù)／日均獲得權(quán)益用戶數(shù)），發(fā)現(xiàn)有相當(dāng)一部分用戶會(huì)來查詢“最新”獲得的權(quán)益。

而當(dāng)一個(gè)用戶是在星巴克門店里打開卡券包，如果他的卡券包中有1張咖啡電子消費(fèi)券，這個(gè)時(shí)候他最關(guān)心的，一定是快速找到這張券。

基于如上的數(shù)據(jù)觀察和判斷，我們決定在新增模塊中展示“用戶最關(guān)心的”內(nèi)容是：

最近領(lǐng)取

用戶最近一段時(shí)間內(nèi)主動(dòng)領(lǐng)取的所有權(quán)益，數(shù)量較多，用戶可通過橫向滑動(dòng)的方式快速瀏覽，一直展示。

附近可用

根據(jù)用戶的地理位置信息展示可用的“門店消費(fèi)券”，默認(rèn)不展示。用戶點(diǎn)擊券面上的“立即使用”按鈕，權(quán)益核銷碼等信息會(huì)以彈窗的形式在當(dāng)前頁面展示。

確定了結(jié)構(gòu)和內(nèi)容，新版卡券包首頁最終的設(shè)計(jì)方案如下：

此時(shí)，我們同樣假設(shè)一個(gè)用戶在雙11當(dāng)天獲得了1張店鋪優(yōu)惠券、1張雙11購物券和1個(gè)紅包，使用新版的卡券包首頁，他的查詢路徑如下：

滑動(dòng)一下“最近獲得”，即可。

新版上線之后，卡券包首頁的跳失率較舊版明顯降低，而“附近可用”和“最新獲得”的UV點(diǎn)擊占比頗高，也就是說，已經(jīng)有相當(dāng)一部分用戶在首頁就完成了權(quán)益的查詢和使用。

以上即是手機(jī)淘寶里的“小產(chǎn)品”卡券包首頁的改版設(shè)計(jì)過程，遵循了基本的設(shè)計(jì)套路：

1. 了解產(chǎn)品的現(xiàn)狀，明確問題；
2. 看看同類型產(chǎn)品是怎么做的，取長補(bǔ)短；
3. 根據(jù)用戶使用場(chǎng)景，找到痛點(diǎn)；
4. 業(yè)務(wù)數(shù)據(jù)的觀察和使用貫穿始終；
5. 多看周星馳電影；

對(duì)于“小產(chǎn)品”的設(shè)計(jì)師來說，除了熟練“套路”以外，可能還需要多一點(diǎn)耐心和對(duì)用戶的敬畏之心。從體量上來看，卡券包是略“小”，而站在用戶體驗(yàn)的層面上來看，手機(jī)淘寶這個(gè)龐然大物，所有“大大小小”產(chǎn)品的體驗(yàn)總和才是他的全貌。