編輯導(dǎo)讀：在產(chǎn)品的迭代升級(jí)過(guò)程中，改版設(shè)計(jì)是常常會(huì)遇到的問(wèn)題，而商業(yè)產(chǎn)品的購(gòu)買(mǎi)頁(yè)則是其中的重中之重。文章對(duì)58APP商業(yè)產(chǎn)品購(gòu)買(mǎi)頁(yè)的升級(jí)改版進(jìn)行了詳細(xì)的梳理，對(duì)遇到的一些問(wèn)題進(jìn)行了分析總結(jié)，供大家參考學(xué)習(xí)。

01 設(shè)計(jì)背景商業(yè)推廣在58業(yè)務(wù)方面承接著很大的流量，也承載著較高的業(yè)務(wù)收入。

但由于商業(yè)產(chǎn)品購(gòu)買(mǎi)頁(yè)改版面向的用戶(hù)群體不僅僅是用戶(hù)更是58的客戶(hù)，與收入掛鉤的改動(dòng)往往牽一發(fā)而動(dòng)全身。所以在改版優(yōu)化開(kāi)始前我們首先拆解了收入數(shù)據(jù)的公式與收入路徑的對(duì)應(yīng)關(guān)系，購(gòu)買(mǎi)前的入口的UV提升由業(yè)務(wù)方負(fù)責(zé)，我們主要優(yōu)化的是「購(gòu)買(mǎi)轉(zhuǎn)化率」&「復(fù)購(gòu)率」的提升。

在「購(gòu)買(mǎi)中」的節(jié)點(diǎn)上，我們推動(dòng)了「購(gòu)買(mǎi)頁(yè)」的改版，以提升購(gòu)買(mǎi)轉(zhuǎn)化率。在「購(gòu)買(mǎi)后」，復(fù)購(gòu)率提升上在未來(lái)我們也準(zhǔn)備做一些小小的推動(dòng)和嘗試。

由于追溯至上次商業(yè)購(gòu)買(mǎi)頁(yè)的改版還在3年前，導(dǎo)致整體頁(yè)面稍顯老舊，與58App整體改版后的主視覺(jué)格格不入，缺乏品質(zhì)感。再細(xì)看流程層級(jí)、信息架構(gòu)以及細(xì)節(jié)體驗(yàn)上也存在一些問(wèn)題。

基于購(gòu)買(mǎi)頁(yè)面收入高，體量大的商業(yè)特性。我們首先意識(shí)到：貿(mào)然打破客戶(hù)原有的操作習(xí)慣，做過(guò)多的創(chuàng)新改革，只會(huì)徒增客戶(hù)的學(xué)習(xí)成本。所以如何在不破壞客戶(hù)對(duì)頁(yè)面原有認(rèn)知的基礎(chǔ)上，在細(xì)微處提升客戶(hù)購(gòu)買(mǎi)體驗(yàn)，從而提升商業(yè)收入是我們本次改版的要點(diǎn)。

02 改版思路在改版之前，我們以用戶(hù)訪(fǎng)談的形式去挖掘了客戶(hù)對(duì)于購(gòu)買(mǎi)產(chǎn)品流程中遇到的痛點(diǎn)，最后發(fā)現(xiàn)80%以上的非會(huì)員客戶(hù)的問(wèn)題都可以歸為以下3個(gè)點(diǎn)：

這3個(gè)問(wèn)題看似簡(jiǎn)單，卻是決定了客戶(hù)是否順利下單的關(guān)鍵。在訪(fǎng)談中我們察覺(jué)當(dāng)客戶(hù)出現(xiàn)“覺(jué)得購(gòu)買(mǎi)不順暢”、“看不懂怎么用”、“覺(jué)得不值那么多錢(qián)”等傾向的想法時(shí)基本上都最終會(huì)選擇終止購(gòu)買(mǎi)。

由此本次改版優(yōu)化從以上3個(gè)問(wèn)題切入。

1. 如何讓客戶(hù)更順暢的下單讓流程符合行為模型：當(dāng)我們梳理了客戶(hù)購(gòu)買(mǎi)流程發(fā)現(xiàn)，現(xiàn)有頁(yè)面的購(gòu)買(mǎi)流程與客戶(hù)的行為模型是不相符的。客戶(hù)的行為模型應(yīng)該是：

「了解效果」-「信息確認(rèn)」-「選擇套餐」-「優(yōu)惠確認(rèn)」-「費(fèi)用明細(xì)」-「勾選協(xié)議」-「最終付款」。但是現(xiàn)有流程并非如此，所以我們補(bǔ)全了缺失的「了解效果」部分。

功能調(diào)整加減法：同時(shí)調(diào)整了優(yōu)惠信息的展示方式，將「優(yōu)惠劵」+「費(fèi)用明細(xì)」 整合至「折扣明細(xì)」，同時(shí)將賬戶(hù)明細(xì)細(xì)化，讓客戶(hù)付費(fèi)安心，不必返回前頁(yè)核對(duì)余額。

以「功能調(diào)整加減法」的形式讓客戶(hù)更加清晰的知道自己的優(yōu)惠明細(xì)，從而讓客戶(hù)購(gòu)買(mǎi)流程更加順暢。

2. 如何讓客戶(hù)看得懂新老客差異展示：調(diào)查發(fā)現(xiàn)，現(xiàn)如今多數(shù)互聯(lián)網(wǎng)的商業(yè)產(chǎn)品購(gòu)買(mǎi)頁(yè)其實(shí)往往不但要承接購(gòu)買(mǎi)支付的功能，同時(shí)也承載著讓用戶(hù)了解「產(chǎn)品是什么」的責(zé)任。

58的商業(yè)產(chǎn)品也不例外，但由于改版前頁(yè)面與前置頁(yè)面并無(wú)產(chǎn)品介紹的模塊，新客進(jìn)入后很大程度上完全不了解產(chǎn)品玩法與規(guī)則，而老客雖有過(guò)購(gòu)買(mǎi)行為，但對(duì)效果的感知也存在一知半解的情況。

所以本次改版我們新增了產(chǎn)品介紹模塊，同時(shí)對(duì)新老客做了區(qū)別展示。對(duì)新客放大展示，文字與示意圖的結(jié)合讓效果更加直觀。而老客則收起圖片集中展示，這樣既不會(huì)打破原有信息架構(gòu)，又能讓二者都對(duì)使用規(guī)則和效果能有足夠的清晰了解。

3. 如何讓客戶(hù)覺(jué)得買(mǎi)的很值得調(diào)研中我們發(fā)現(xiàn)很多客戶(hù)在初次購(gòu)買(mǎi)過(guò)程中，由于購(gòu)買(mǎi)前是感知不到使用效果的，滿(mǎn)眼高昂價(jià)格的套餐讓他們不免心有疑惑，“這么貴的東西到底值不值？”

購(gòu)買(mǎi)頁(yè)應(yīng)該承擔(dān)起告知客戶(hù)“值得”的責(zé)任。那么該如何讓客戶(hù)感知到“值得”并提升信任感呢？

真實(shí)的購(gòu)買(mǎi)評(píng)價(jià)+滾動(dòng)氣泡提示：首先在產(chǎn)品介紹頁(yè)的彈窗中， 我們嘗試著引入「購(gòu)買(mǎi)評(píng)價(jià)」去分享更多類(lèi)似“買(mǎi)家秀”的評(píng)論。真實(shí)的評(píng)價(jià)會(huì)讓客戶(hù)增加對(duì)產(chǎn)品的信任，也會(huì)觸發(fā)客戶(hù)“我收獲的會(huì)比付出的更多”的感受。

與此同時(shí)我們還增加了氣泡提示的效果，滾動(dòng)的氣泡動(dòng)效可以給客戶(hù)心理暗示即“大家都在購(gòu)買(mǎi)的產(chǎn)品的確是值得購(gòu)買(mǎi)的好產(chǎn)品” ，利用從眾心理去刺激客戶(hù)下單。

橫縱展示AB測(cè)試：在套餐選擇方面，我們進(jìn)行了一個(gè)小小的AB測(cè)試，探索套餐橫縱展示方式對(duì)客戶(hù)價(jià)格感知的影響。

市面上以這兩種展示形式有很多，為了探究商業(yè)產(chǎn)品購(gòu)買(mǎi)套餐展示形式對(duì)于客戶(hù)的感知所造成的差異，我們?cè)谕谶M(jìn)行了橫縱兩種展示方式的對(duì)比。在測(cè)試前期，二者差距并不明顯，但在持續(xù)跟蹤對(duì)比數(shù)據(jù)5周后，我們發(fā)現(xiàn)無(wú)論從點(diǎn)擊率還是轉(zhuǎn)化率上豎版效果明顯要優(yōu)于橫版，并最終選擇全線(xiàn)推全豎版。

通過(guò)這種小小的策略改進(jìn)，我們了解客戶(hù)在不同展示形式下對(duì)價(jià)值感知的差異，并調(diào)整策略，同時(shí)利用真實(shí)評(píng)價(jià)和氣泡提示此類(lèi)心理策略給客戶(hù)以信任感，讓客戶(hù)覺(jué)得買(mǎi)的值得。

03 設(shè)計(jì)驗(yàn)證改版后的購(gòu)買(mǎi)頁(yè)面視覺(jué)上更具品質(zhì)感，購(gòu)買(mǎi)流程更加符合客戶(hù)的行為模型，產(chǎn)品效果與使用規(guī)則更加清晰地展示。上線(xiàn)后我們持續(xù)跟蹤的數(shù)據(jù)效果，在訂單均金額，收入貢獻(xiàn)均有明顯增長(zhǎng)。

另外除跟蹤數(shù)據(jù)外，我們對(duì)上線(xiàn)之后的滿(mǎn)意度也做了調(diào)研跟蹤。我們分別從支付方式滿(mǎn)意度，展示滿(mǎn)意度，套餐展示滿(mǎn)意度入手發(fā)放問(wèn)卷調(diào)研，經(jīng)過(guò)清洗未完成和重復(fù)填寫(xiě)的部分，實(shí)際回收了了四千余份用戶(hù)的反饋結(jié)果：三項(xiàng)滿(mǎn)意度均有提升。

以上結(jié)論均可驗(yàn)證讓用戶(hù)「買(mǎi)的更順暢」、「買(mǎi)的更明白」、「買(mǎi)的更值得」的商業(yè)產(chǎn)品優(yōu)化思路是有效的，所以我們將該思路進(jìn)行了復(fù)用在「刷新簡(jiǎn)歷」，「黃金展位」和「優(yōu)選投遞」等商業(yè)產(chǎn)品購(gòu)買(mǎi)頁(yè)的優(yōu)化改版上，也同樣取得了反響不錯(cuò)的成果。

04 總結(jié)規(guī)劃購(gòu)買(mǎi)頁(yè)優(yōu)化只是中臺(tái)商業(yè)小小的一步，但是推動(dòng)整個(gè)58招聘與黃頁(yè)業(yè)務(wù)更好的商業(yè)購(gòu)買(mǎi)體驗(yàn)是我們未來(lái)要跨出的一大步。

在完成購(gòu)買(mǎi)中的購(gòu)買(mǎi)轉(zhuǎn)化率提升后，我們將目光放在了在購(gòu)買(mǎi)完成后提升復(fù)購(gòu)率上，搭建了數(shù)據(jù)效果展示中心，讓客戶(hù)對(duì)購(gòu)買(mǎi)效果的感知可視化，亦可有針對(duì)性的對(duì)投放貼進(jìn)行管理與配置。未來(lái)我們也會(huì)持續(xù)針對(duì)客戶(hù)在「購(gòu)買(mǎi)中」「購(gòu)買(mǎi)后」流程中所對(duì)應(yīng)的關(guān)鍵節(jié)點(diǎn)進(jìn)行優(yōu)化，持續(xù)優(yōu)化和完善功能，為客戶(hù)更好的服務(wù)及體驗(yàn)。

作者：文雅，交互設(shè)計(jì)師

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶(hù)體驗(yàn)設(shè)計(jì)中心（微信公眾號(hào)@58UXD），作者@文雅

題圖來(lái)自Unsplash，基于CC0協(xié)議