京東充值頻道改版分析
京東充值頻道改版是去年參與的項目,本文將以此為例,通過新舊版對比的形式來對此次改版進行簡要分析與總結(jié)。
先說說改版為了什么?一般改版需求的源頭來自KPI和GMV直接掛鉤的業(yè)務(wù)方,所以這類改版目的很簡單粗暴,就是增加營收。
但設(shè)計及實現(xiàn)目標(biāo)的過程并不能簡單粗暴,待結(jié)果落地后更需要我們將不足與經(jīng)驗整理分析出有效的方法論,以便我們未來遇到同類型需求時,快速實施可復(fù)用的設(shè)計方法及可遵循的思維方式。
項目背景&產(chǎn)品特性
背景
京東充值業(yè)務(wù)頻道在11年上線后一直是現(xiàn)有狀態(tài),時下來看ui老舊,體驗上也差強人意。引入新業(yè)務(wù),需增加水電煤繳費等功能。
產(chǎn)品特性
不同于服裝、3C等頻道需要“逛”、“導(dǎo)購”的元素或環(huán)節(jié),充值頻道有著明顯的特點:
- 高轉(zhuǎn)化,雖然pv/uv不如其他頻道高,但能點進充值頻道的用戶,通常都會有明確且實際的剛需(如手機停機了急需充值),下單的概率較高;
- 效率型,目標(biāo)用戶進行轉(zhuǎn)化的過程中,更追求操作體驗的方便、快速、簡單。
新&舊對比
僅主觀的來看兩個截圖,可能并不好說清楚兩者的體驗差異。
下面將按順序進行理性的分析(方法借鑒于“那個老點評京東天貓的人 ”-龐門正道)
首先將頁面置灰并加以高光亮點處理,目的是規(guī)避細節(jié)視覺上的打擾,以肉眼較為敏感的明暗對比來更直觀的分析頁面在信息架構(gòu)上的強弱節(jié)奏。
從高光分布(如紅框所示)來看,舊版因為使用的是老版公共頁頭,導(dǎo)航視覺過強;兩個廣告位包含在左側(cè)tab導(dǎo)航區(qū)下方,面積與導(dǎo)航本身相當(dāng);以及主操作區(qū)中slogan和附屬功能的擺放。整體上的頁面節(jié)奏有所欠缺。
新版 則將 主導(dǎo)航,左側(cè)tab導(dǎo)航,主操作區(qū),廣告位 各自成區(qū),互不干擾,滿足不同訴求的用戶更快捷的定位到相應(yīng)的區(qū)域再進行操作。主操作區(qū)中的節(jié)奏更利于用戶快速下單。
下來再對兩者的信息架構(gòu)觀察分析,這里以“手機充值”頁卡為例:
(1)主導(dǎo)航、搜索框
調(diào)用當(dāng)時京東舊版公共頁頭,對全品類業(yè)務(wù)很有幫助,有導(dǎo)流的作用,但不利于充值頻道的閉環(huán)體驗,增加頁面跳出的風(fēng)險;當(dāng)鼠標(biāo)懸停導(dǎo)航左側(cè)的“全部商品分類”時,下拉列表會對充值業(yè)務(wù)的側(cè)導(dǎo)航造成遮蓋,同樣不利于閉環(huán)體驗。
(2)面包屑導(dǎo)航
面包屑導(dǎo)航意義在于防止用戶“迷路”,適用于有較多層級包含關(guān)系的頁面,而這里用戶可直接通過左側(cè)tab導(dǎo)航來確定自己的位置,功能同質(zhì)化就需要做減法了,保留tab側(cè)導(dǎo)航即可。
(3)tab側(cè)導(dǎo)航
側(cè)導(dǎo)航選項較多,共8個選項(包括父子選項),這樣做好處是能將更多的功能外露,但是選項多了也會影響用戶做選擇,8選1的用時肯定比4選1的用時多,可以參考Hick’s Law (希克定律),另一方面,選項可點熱區(qū)面積較小、間距較近,影響閱讀和操作,可以參考Fitts’ Law(菲茲定律)。
廣告位置于導(dǎo)航之內(nèi),且空間占比過高,雖廣告位對業(yè)務(wù)來說不可忽視,但若影響了主功能的權(quán)重則得不償失。
(4)核心區(qū) ?
這里將直接影響轉(zhuǎn)化的充值信息填寫操作區(qū)域定義為核心區(qū)。
話費充值的主流程:
填寫號碼 → 選擇面值 → 瀏覽價格 → 確認(rèn)充值
舊版的核心區(qū),元素較多,考慮如下一種極端情況,可能完成一次充值需要:
瀏覽slogan? → 瀏覽進度條? → 查看充值類型? → 填寫號碼? → 查看“給多人充值”? → 查看到賬時間? → 選擇面值? → 瀏覽價格? → 查看充值幫助? → 確認(rèn)充值
(其中 “瀏覽”僅指看,“查看”指在看的基礎(chǔ)上有可能點擊,“紅字”為主流程。)
(1)主導(dǎo)航、搜索框
使用頻道頁專業(yè)頁頭,利于閉環(huán)體驗,用戶的充值業(yè)務(wù)訴求不會被其他無關(guān)的因素干擾。
(2)tab側(cè)導(dǎo)航
根據(jù)功能的父子關(guān)系,在新增“水電煤繳費”功能的基礎(chǔ)上縮減tab數(shù)量為4個,降低用戶選擇及思考時間。
(3)核心區(qū)
優(yōu)化下單主干操作環(huán)節(jié):
填寫號碼 → 選擇面值 → 瀏覽價格 → 確認(rèn)充值
弱化slogan,附屬功能整合至右上角,幫助入口置于核心區(qū)右側(cè),加強視覺表達,位置遠離充值按鈕,減少對下單流程的其他干擾,提升轉(zhuǎn)化效率。
最后
頁面上線后陸續(xù)切量30%、50%,同時也針對一些細節(jié)及遺留問題及時迭代修改,直至最終切全量(100%)運行.
最后數(shù)據(jù)較舊版,頁面跳出率最大降幅下降50%,轉(zhuǎn)化率較舊版提高了3~5倍,訪次價值、引入訂單量均有提升(鑒于數(shù)據(jù)敏感,不多做描述)
總結(jié)
不同于實體商品購買場景,該場景下用戶的任務(wù)更清晰、直接,新版突出了充值下單的主操作流程。但在頁面及品牌氛圍上還稍顯單薄,細節(jié)上還需迭代優(yōu)化,穩(wěn)步提升體驗,爭取為業(yè)務(wù)帶來更好的創(chuàng)收。
用戶體驗離不開每位參與者,不論是產(chǎn)品、開發(fā)、設(shè)計還是用戶,不論是好脾氣慢言細語、還是急性子喋喋不休,體驗的價值也往往產(chǎn)生于彼此的切身體驗以及溝通反饋之中,也希望大家有更多的反饋,我們也會帶著同理心在體驗上做的更好。
作者:嚴(yán)杰鐘
來源:https://jdc.jd.com/archives/2594
版權(quán)聲明:人人都是產(chǎn)品經(jīng)理尊重行業(yè)規(guī)范,所轉(zhuǎn)載的文章都注明作者和來源,若標(biāo)注有誤,請聯(lián)系主編QQ:419297645更改。
- 目前還沒評論,等你發(fā)揮!