大公司里的“小產(chǎn)品”設(shè)計:淘寶APP之卡券包首頁的改版設(shè)計過程
對于“小產(chǎn)品”的設(shè)計師來說,除了熟練“套路”以外,可能還需要多一點(diǎn)耐心和對用戶的敬畏之心。從體量上來看,卡券包是略“小”,而站在用戶體驗(yàn)的層面上來看,手機(jī)淘寶這個龐然大物,所有“大大小小”產(chǎn)品的體驗(yàn)總和才是他的全貌。
大公司里有很多“小產(chǎn)品”,手機(jī)淘寶里的卡券包就是??ㄈ鞘謾C(jī)淘寶用戶的權(quán)益?zhèn)}庫,存儲著用戶在平臺內(nèi)獲取的眾多權(quán)益,比如店鋪優(yōu)惠券、紅包、會員卡等。
本文男主,在寸土寸金的“我的淘寶”有套剛需房
“小”是相對“大”而言的,手機(jī)淘寶是一艘流量航母,每天使用手機(jī)淘寶的用戶數(shù)接近兩億。相比航母甲板上動則數(shù)百萬上千萬的拳頭業(yè)務(wù),卡券包的用戶數(shù)顯然少得多。
圖片來自電影《Gulliver’s Travels》
卡券包具有較強(qiáng)的工具屬性,大部分用戶訪問卡券包是為了查看自己獲得的權(quán)益,來去匆匆,查完即走,對用戶的購買行為并沒有直接的推動作用。可能在商業(yè)回報和KPI的雙重考量下,卡券包改版的緊迫程度并不高。
事實(shí)上,在此次改版之前,由于業(yè)務(wù)調(diào)整、人員變動,卡券包和其它的“小產(chǎn)品”一樣,年久失修,存在諸多體驗(yàn)上的問題。
圖片來自電影《WALL·E》
看到這里,你可能會覺得卡券包十分可憐。既然這么不受待見,為何不直接把這塊業(yè)務(wù)干掉。與其活著被人詬病,不如有尊嚴(yán)的“狗帶”。
不要著急,我們再看一組數(shù)據(jù),你一定會對卡券包改觀:2016年雙11期間,卡券包的單日訪問峰值達(dá)到了日常流量的近20倍。試想,如果這個月你領(lǐng)到的薪水是往常的20倍,你的內(nèi)心會受到怎樣的沖擊。
不難看出,卡券包是典型的“大促怪物”,體形會隨著 “大促”報復(fù)性增“大”。平臺大促,權(quán)益密集發(fā)放,查詢權(quán)益的用戶數(shù)和權(quán)益的查詢頻次會激增。這個時候,平常一個小小的體驗(yàn)問題,就會被放大許多倍。
明確問題
舊版卡券包存在以下幾個問題:
1. 權(quán)益種類繁多,歸類邏輯混亂,用戶無法快速聚焦要查詢的權(quán)益
舊版卡券包首頁有7個權(quán)益分類入口,包含了幾十種權(quán)益,這個數(shù)字還在不斷增加。當(dāng)用戶獲得某項(xiàng)權(quán)益,來卡券包查詢的時候,他可能都不知道應(yīng)該去哪里找。
如果你經(jīng)常使用卡券包,可能會發(fā)現(xiàn)用于線上購買流量時抵扣的“流量優(yōu)惠券”竟然被歸類在“門店消費(fèi)券”,“門店消費(fèi)券”里展示的應(yīng)該全是用于線下門店核銷使用的電子憑證類權(quán)益,如星巴克的咖啡抵用券、電影票等。這有點(diǎn)像你進(jìn)了女廁,發(fā)現(xiàn)墻上竟然有一排站立式小便池。
2016年雙11期間,我們收到一位用戶反饋,他通過“捉貓貓”游戲獲得了一張 KFC 的電子券消費(fèi)券,來到卡券包首頁的時候,他不知道應(yīng)該進(jìn)哪個權(quán)益分類入口查看。
用戶沒有義務(wù)對我們的產(chǎn)品結(jié)構(gòu)、業(yè)務(wù)邏輯和設(shè)計初衷了如指掌,但如果他在界面中找一樣?xùn)|西卻找不到,那肯定是我們的產(chǎn)品有問題。這位用戶的反饋引起了我們的重視,我們相信有相同困擾的用戶不在少數(shù)。
2. 用戶的訪問路徑較長,查詢效率低
2016年雙11期間,手機(jī)淘寶用戶人均獲得的店鋪優(yōu)惠券、雙11購物券、紅包等權(quán)益數(shù)量非常多。我們假設(shè)一個用戶獲得了1張店鋪優(yōu)惠券、1張雙11購物券和1個雙11紅包,他在舊版卡券包的查詢路徑如下圖:
可以看到,用戶完成這個查詢?nèi)蝿?wù)需要經(jīng)過這么多步驟,簡直令人發(fā)指。這就好像我們?nèi)ナ程么蝻?,打米飯要?號餐線,打葷菜要去2號餐線,打素菜要去3號餐線。每打一樣菜要換一條餐線重新排隊(duì),問該食堂什么時候倒閉?
解決問題
明確問題,我們開始著手解決問題:
1. 優(yōu)化權(quán)益的歸類邏輯
我們對卡券包現(xiàn)有的權(quán)益種類(主要是網(wǎng)店優(yōu)惠券和門店消費(fèi)券)進(jìn)行了梳理,明確了“線上抵扣”和“線下核銷”兩個主要的歸類原則:
- 凡是在線上使用、網(wǎng)購結(jié)算時抵扣使用的優(yōu)惠權(quán)益都?xì)w類在“網(wǎng)店優(yōu)惠券”。
- 凡是線下使用、需要在商家門店出示核銷的權(quán)益都?xì)w類在“門店消費(fèi)券”。
用戶以后再也不會在“門店消費(fèi)券”列表中看到流量券、飛豬旅行紅包等權(quán)益亂入了。
重新歸類后的部分權(quán)益一覽
2. 縮短用戶訪問路徑,提升查詢效率
我們對多個競品(用戶權(quán)益集合頁)進(jìn)行了分析,競品的產(chǎn)品結(jié)構(gòu)可分為兩類:
(1)常規(guī)的“分類入口+列表+詳情”結(jié)構(gòu)
使用該結(jié)構(gòu)的產(chǎn)品,對用戶的所有權(quán)益進(jìn)行了分類,幫用戶做了一層篩選。當(dāng)用戶獲得的權(quán)益數(shù)量較多時,能夠幫助用戶快速聚焦,找到要查看的權(quán)益。舊版卡券包使用的就是這個結(jié)構(gòu)。
(2)扁平的“列表+詳情”結(jié)構(gòu)
這種結(jié)構(gòu)相比前一種結(jié)構(gòu),用戶不用去理解平臺的歸類邏輯,他看到的這個列表,就是所有權(quán)益,一目了然。少了“分類入口”,頁面層級減少,與我們“縮短用戶訪問路徑”的目標(biāo)吻合。
但是,扁平的頁面結(jié)構(gòu)產(chǎn)生了另一個問題:當(dāng)用戶獲得的權(quán)益數(shù)量較多,權(quán)益列表會變得很長,這個時候,用戶要從中找到某一項(xiàng)權(quán)益,會變得不那么容易,用戶的查詢效率也會因此降低。
我們又面臨一個問題:前一種結(jié)構(gòu)有問題,后一種結(jié)構(gòu)不完美。
“摻在一起做撒尿牛丸啊,笨蛋!”這是周星馳電影《食神》里的經(jīng)典橋段。
鵝頭和雙刀火雞兩波人為爭奪撒尿蝦和牛肉丸的經(jīng)營權(quán)談判。眼看要談崩,昔日食神史蒂芬周出了個主意:把撒尿蝦和牛肉丸摻在一起做成撒尿牛丸,結(jié)合牛肉的鮮和撒尿蝦的甜,做出來的撒尿牛丸不僅好吃好玩,還可以激發(fā)人的自信心。
圖片來自電影《食神》
絕妙的主意,我們嘗試將兩種結(jié)構(gòu)結(jié)合:
首頁保留“分類入口”的基礎(chǔ)上,新增一個模塊,這個模塊展示的內(nèi)容要是用戶當(dāng)下最關(guān)心的。那么,用戶訪問卡券包時最關(guān)心哪些內(nèi)容?權(quán)益的查詢和核銷是卡券包用戶的主要使用場景。
我們觀察了2016年雙11期間,卡券包查詢量最大的幾類權(quán)益的日均查詢率(日均查詢權(quán)益用戶數(shù)/日均獲得權(quán)益用戶數(shù)),發(fā)現(xiàn)有相當(dāng)一部分用戶會來查詢“最新”獲得的權(quán)益。
而當(dāng)一個用戶是在星巴克門店里打開卡券包,如果他的卡券包中有1張咖啡電子消費(fèi)券,這個時候他最關(guān)心的,一定是快速找到這張券。
基于如上的數(shù)據(jù)觀察和判斷,我們決定在新增模塊中展示“用戶最關(guān)心的”內(nèi)容是:
- 最近領(lǐng)?。?/strong>用戶最近一段時間內(nèi)主動領(lǐng)取的所有權(quán)益,數(shù)量較多,用戶可通過橫向滑動的方式快速瀏覽,一直展示。
- 附近可用:根據(jù)用戶的地理位置信息展示可用的“門店消費(fèi)券”,默認(rèn)不展示。用戶點(diǎn)擊券面上的“立即使用”按鈕,權(quán)益核銷碼等信息會以彈窗的形式在當(dāng)前頁面展示。
確定了結(jié)構(gòu)和內(nèi)容,新版卡券包首頁最終的設(shè)計方案如下:
此時,我們同樣假設(shè)一個用戶在雙11當(dāng)天獲得了1張店鋪優(yōu)惠券、1張雙11購物券和1個紅包,使用新版的卡券包首頁,他的查詢路徑如下:
滑動一下“最近獲得”,即可。
新版上線之后,卡券包首頁的跳失率較舊版明顯降低,而“附近可用”和“最新獲得”的UV點(diǎn)擊占比頗高,也就是說,已經(jīng)有相當(dāng)一部分用戶在首頁就完成了權(quán)益的查詢和使用。
以上即是手機(jī)淘寶里的“小產(chǎn)品”卡券包首頁的改版設(shè)計過程,遵循了基本的設(shè)計套路:
- 了解產(chǎn)品的現(xiàn)狀,明確問題;
- 看看同類型產(chǎn)品是怎么做的,取長補(bǔ)短;
- 根據(jù)用戶使用場景,找到痛點(diǎn);
- 業(yè)務(wù)數(shù)據(jù)的觀察和使用貫穿始終;
- 多看周星馳電影。
對于“小產(chǎn)品”的設(shè)計師來說,除了熟練“套路”以外,可能還需要多一點(diǎn)耐心和對用戶的敬畏之心。從體量上來看,卡券包是略“小”,而站在用戶體驗(yàn)的層面上來看,手機(jī)淘寶這個龐然大物,所有“大大小小”產(chǎn)品的體驗(yàn)總和才是他的全貌。
感謝閱讀。
相關(guān)文章
淘寶2017設(shè)計升級:手淘首次以設(shè)計為主導(dǎo)的版本升級
淘寶2017的商品詳情改版設(shè)計:從商業(yè)目標(biāo)維度去挖掘設(shè)計改進(jìn)方向
作者: 神患
來源:微信公眾號【淘寶用戶體驗(yàn)設(shè)計】
整文章是基于分析的問題來設(shè)計,但是“問題”是如何發(fā)現(xiàn)的?如果假設(shè)的“問題”,不是真正的問題,那設(shè)計不就是都是沒意義?
卡卷包的產(chǎn)品設(shè)計目的,核心是什么?核心需求、轉(zhuǎn)化是什么?然后現(xiàn)在在這些核心上,現(xiàn)有的情況如何?才能找出對應(yīng)的“問題”并進(jìn)入分析設(shè)計吧
從分析設(shè)計來說,寫這文章的人設(shè)計思想還是有的,不過偏重交互為主,而且修改后的價值記錄也沒呈現(xiàn),當(dāng)然也不需要呈現(xiàn)給我們讀者。不過產(chǎn)品,不是應(yīng)該拿結(jié)果,是優(yōu)化后的結(jié)果莫?
優(yōu)化確實(shí)是有減少訪問路徑,但其實(shí)還是用起來很復(fù)雜,復(fù)雜原因在于用戶不關(guān)心你們的分類而是更關(guān)心自己到底有什么;
所以:既然你已經(jīng)知道用戶當(dāng)下最想看的是什么了,為什么還要那么小氣的只放在頭部還是做滑動?這個交互差評!非常困難,我需要至少3秒滑動+5分鐘停留才能看清楚是什么。
建議:分tab“最近領(lǐng)取”/“全部卡券”;最近領(lǐng)取展示30-50條;
大雜燴
排版混亂,分不清楚,也許是我太小白
我感覺分類不是一個邏輯,視覺上混亂,不一致,剛打開還是分不清到底什么券
多看周星馳電影 點(diǎn)贊
淘寶最新版本ios6.5.3 沒有“附近可用”, 是不是分類增多了
??