上億人使用的手機淘寶卡券包,設計師是這么做改版的!

神患:大公司里有很多“小產品”,手機淘寶里的卡券包就是??ㄈ鞘謾C淘寶用戶的權益倉庫,存儲著用戶在平臺內獲取的眾多權益,比如店鋪優惠券、紅包、會員卡等。

“小”是相對“大”而言的,手機淘寶是一艘流量航母,每天使用手機淘寶的用戶數接近兩億。相比航母甲板上動則數百萬上千萬的拳頭業務,卡券包的用戶數顯然少得多。

卡券包具有較強的工具屬性,大部分用戶訪問卡券包是為了查看自己獲得的權益,來去匆匆,查完即走,對用戶的購買行為并沒有直接的推動作用??赡茉谏虡I回報和KPI的雙重考量下,卡券包改版的緊迫程度并不高。

事實上,在此次改版之前,由于業務調整、人員變動,卡券包和其它的“小產品”一樣,年久失修,存在諸多體驗上的問題。

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

不要著急,我們再看一組數據,你一定會對卡券包改觀:2016年雙11期間,卡券包的單日訪問峰值達到了日常流量的近20倍。試想,如果這個月你領到的薪水是往常的20倍,你的內心會受到怎樣的沖擊。

上億人使用的手機淘寶卡券包,設計師是這么做改版的!

不難看出,卡券包是典型的“大促怪物”,體形會隨著 “大促”報復性增“大”。平臺大促,權益密集發放,查詢權益的用戶數和權益的查詢頻次會激增。這個時候,平常一個小小的體驗問題,就會被放大許多倍。

舊版卡券包存在以下幾個問題:

1. 權益種類繁多,歸類邏輯混亂,用戶無法快速聚焦要查詢的權益

舊版卡券包首頁有7個權益分類入口,包含了幾十種權益,這個數字還在不斷增加。當用戶獲得某項權益,來卡券包查詢的時候,他可能都不知道應該去哪里找。

上億人使用的手機淘寶卡券包,設計師是這么做改版的!

如果你經常使用卡券包,可能會發現用于線上購買流量時抵扣的“流量優惠券”竟然被歸類在“門店消費券”,“門店消費券”里展示的應該全是用于線下門店核銷使用的電子憑證類權益,如星巴克的咖啡抵用券、電影票等。這有點像你進了女廁,發現墻上竟然有一排站立式小便池。

2016年雙11期間,我們收到一位用戶反饋,他通過“捉貓貓”游戲獲得了一張 KFC 的電子券消費券,來到卡券包首頁的時候,他不知道應該進哪個權益分類入口查看。

上億人使用的手機淘寶卡券包,設計師是這么做改版的!

用戶沒有義務對我們的產品結構、業務邏輯和設計初衷了如指掌,但如果他在界面中找一樣東西卻找不到,那肯定是我們的產品有問題。這位用戶的反饋引起了我們的重視,我們相信有相同困擾的用戶不在少數。

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

2016年雙11期間,手機淘寶用戶人均獲得的店鋪優惠券、雙11購物券、紅包等權益數量非常多。我們假設一個用戶獲得了1張店鋪優惠券、1張雙11購物券和1個雙11紅包,他在舊版卡券包的查詢路徑如下圖:

上億人使用的手機淘寶卡券包,設計師是這么做改版的!

可以看到,用戶完成這個查詢任務需要經過這么多步驟,簡直令人發指。這就好像我們去食堂打飯,打米飯要去1號餐線,打葷菜要去2號餐線,打素菜要去3號餐線。每打一樣菜要換一條餐線重新排隊,問該食堂什么時候倒閉?

明確問題,我們開始著手解決問題:

1. 優化權益的歸類邏輯

我們對卡券包現有的權益種類(主要是網店優惠券和門店消費券)進行了梳理,明確了“線上抵扣”和“線下核銷”兩個主要的歸類原則:

1)凡是在線上使用、網購結算時抵扣使用的優惠權益都歸類在“網店優惠券”。

2)凡是線下使用、需要在商家門店出示核銷的權益都歸類在“門店消費券”。

用戶以后再也不會在“門店消費券”列表中看到流量券、飛豬旅行紅包等權益亂入了。

上億人使用的手機淘寶卡券包,設計師是這么做改版的!

△ 重新歸類后的部分權益一覽

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

我們對多個競品(用戶權益集合頁)進行了分析,競品的產品結構可分為兩類:

1)常規的“分類入口+列表+詳情”結構

上億人使用的手機淘寶卡券包,設計師是這么做改版的!

使用該結構的產品,對用戶的所有權益進行了分類,幫用戶做了一層篩選。當用戶獲得的權益數量較多時,能夠幫助用戶快速聚焦,找到要查看的權益。舊版卡券包使用的就是這個結構。

2)扁平的“列表+詳情”結構

上億人使用的手機淘寶卡券包,設計師是這么做改版的!

這種結構相比前一種結構,用戶不用去理解平臺的歸類邏輯,他看到的這個列表,就是所有權益,一目了然。少了“分類入口”,頁面層級減少,與我們“縮短用戶訪問路徑”的目標吻合。

但是,扁平的頁面結構產生了另一個問題:當用戶獲得的權益數量較多,權益列表會變得很長,這個時候,用戶要從中找到某一項權益,會變得不那么容易,用戶的查詢效率也會因此降低。

我們又面臨一個問題:前一種結構有問題,后一種結構不完美。

絕妙的主意,我們嘗試將兩種結構結合:

首頁保留“分類入口”的基礎上,新增一個模塊,這個模塊展示的內容要是用戶當下最關心的。那么,用戶訪問卡券包時最關心哪些內容?權益的查詢和核銷是卡券包用戶的主要使用場景。

上億人使用的手機淘寶卡券包,設計師是這么做改版的!

我們觀察了2016年雙11期間,卡券包查詢量最大的幾類權益的日均查詢率(日均查詢權益用戶數/日均獲得權益用戶數),發現有相當一部分用戶會來查詢“最新”獲得的權益。

上億人使用的手機淘寶卡券包,設計師是這么做改版的!

而當一個用戶是在星巴克門店里打開卡券包,如果他的卡券包中有1張咖啡電子消費券,這個時候他最關心的,一定是快速找到這張券。

基于如上的數據觀察和判斷,我們決定在新增模塊中展示“用戶最關心的”內容是:

最近領取

用戶最近一段時間內主動領取的所有權益,數量較多,用戶可通過橫向滑動的方式快速瀏覽,一直展示。

附近可用

根據用戶的地理位置信息展示可用的“門店消費券”,默認不展示。用戶點擊券面上的“立即使用”按鈕,權益核銷碼等信息會以彈窗的形式在當前頁面展示。

確定了結構和內容,新版卡券包首頁最終的設計方案如下:

上億人使用的手機淘寶卡券包,設計師是這么做改版的!

此時,我們同樣假設一個用戶在雙11當天獲得了1張店鋪優惠券、1張雙11購物券和1個紅包,使用新版的卡券包首頁,他的查詢路徑如下:

滑動一下“最近獲得”,即可。

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

以上即是手機淘寶里的“小產品”卡券包首頁的改版設計過程,遵循了基本的設計套路:

1. 了解產品的現狀,明確問題;
2. 看看同類型產品是怎么做的,取長補短;
3. 根據用戶使用場景,找到痛點;
4. 業務數據的觀察和使用貫穿始終;
5. 多看周星馳電影;

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

歡迎關注淘寶UED 的微信公眾號:

上億人使用的手機淘寶卡券包,設計師是這么做改版的!

「干貨超足的5個改版實戰經驗總結」

  1. LOGO 改版:《揭秘LOGO設計流程!超詳細的騰訊云LOGO 改版記錄全過程》
  2. 官網改版:《QQ官網全新蛻變!IM QQ 改版(第一期)設計總結》
  3. Pinterest 改版:《改版實戰!聊聊PINTEREST官網再設計過程的經驗思考》
  4. QQ 新版表情:《騰訊ISUX丨揭秘QQ 新版表情背后的設計故事》
  5. 提升數據:《騰訊ISUX丨通過優化,我們將QQ會員付費用戶數提高了5倍!》

【優設網 原創文章 投稿郵箱:yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量190萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

收藏 13
點贊

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。