2023年項(xiàng)目復(fù)盤(pán)：跨境電商詳情頁(yè)的改版設(shè)計(jì)總結(jié)

項(xiàng)目復(fù)盤(pán)：跨境電商詳情頁(yè)的改版設(shè)計(jì)總結(jié)一、改版背景

1.項(xiàng)目介紹

此次改版對(duì)象屬跨境電商領(lǐng)域的Doba項(xiàng)目，它是面對(duì)美國(guó)市場(chǎng)的Dropshipping（一件代發(fā)）平臺(tái)，通過(guò)一件代發(fā)的優(yōu)勢(shì)，來(lái)關(guān)心零售商無(wú)需任何初始成本即可順當(dāng)開(kāi)展電商之路。

當(dāng)有訂單產(chǎn)生時(shí)，零售商將商品信息發(fā)送給平臺(tái)，再由平臺(tái)將商品通過(guò)物流交付至終端消費(fèi)者手中，由此關(guān)心零售商完成銷(xiāo)售獵取利潤(rùn)。這種新興的業(yè)務(wù)模式相比傳統(tǒng)的Wholesale（批發(fā)）讓零售商免去初始成本和備貨壓力、時(shí)間更為自由敏捷，讓用戶(hù)專(zhuān)注于銷(xiāo)售本身。

面對(duì)用戶(hù)主要有三類(lèi)：自建站零售商、第三方平臺(tái)零售商和初入門(mén)的新手。

2.現(xiàn)有問(wèn)題

Doba自上線(xiàn)一段時(shí)間后，通過(guò)數(shù)據(jù)調(diào)取發(fā)覺(jué)了詳情頁(yè)的問(wèn)題，發(fā)覺(jué)不論是刊登轉(zhuǎn)化，還是保藏轉(zhuǎn)化都偏低，并且跳出很高。因此有了這次項(xiàng)目改版，目標(biāo)很簡(jiǎn)潔：提升當(dāng)前詳情頁(yè)轉(zhuǎn)化、并降低跳出。

3.模型指導(dǎo)

類(lèi)似這種簡(jiǎn)單的、大型的項(xiàng)目改版，就可以調(diào)用專(zhuān)業(yè)的頂層模型。此次采納了基于雙鉆模型優(yōu)化后的三鉆模型來(lái)指導(dǎo)流程推動(dòng)。

整個(gè)設(shè)計(jì)流程被拆分為三個(gè)階段：洞察、實(shí)施和驗(yàn)證階段，三者形成閉環(huán)缺一不行。

另外，它會(huì)有階段性的發(fā)散和收斂，比如洞察階段，優(yōu)先通過(guò)問(wèn)題走查、用戶(hù)調(diào)用、數(shù)據(jù)分析等方法來(lái)發(fā)覺(jué)問(wèn)題，之后依據(jù)業(yè)務(wù)價(jià)值、用戶(hù)價(jià)值來(lái)進(jìn)行問(wèn)題收斂，完成問(wèn)題的定義。這個(gè)過(guò)程是為了做正確的事。

接著，實(shí)施階段，通過(guò)競(jìng)品分析、頭腦風(fēng)暴、理論搜集等方法來(lái)制定設(shè)計(jì)策略，通過(guò)優(yōu)劣分析、方案評(píng)審來(lái)確認(rèn)最終方案。此過(guò)程為了把事情做正確。

最終，驗(yàn)證階段，通過(guò)ab測(cè)試、定性反饋等方法來(lái)衡量指標(biāo)，通過(guò)緣由分析、方法沉淀來(lái)復(fù)盤(pán)總結(jié)。這個(gè)過(guò)程是去檢驗(yàn)有沒(méi)有做正確。

以這樣的模式來(lái)推動(dòng)流程，很大程度上避開(kāi)了因缺失方法或者多早鉆研細(xì)節(jié)導(dǎo)致的種種問(wèn)題。

4.詳情頁(yè)的意義

詳情頁(yè)是買(mǎi)家了解商品的主要途徑，它所承載的意義是關(guān)心買(mǎi)家查看商品信息從而進(jìn)行決策，重要性可見(jiàn)一斑。但是相比傳統(tǒng)的C端詳情頁(yè)，在用戶(hù)側(cè)又存在兩大難點(diǎn)：一類(lèi)是B端，一類(lèi)是海外。

二、發(fā)覺(jué)、定義問(wèn)題

1.用戶(hù)討論

關(guān)于B類(lèi)買(mǎi)家：

B類(lèi)和海外用戶(hù)這兩類(lèi)屬性距離我們相對(duì)遙遠(yuǎn)，所以需要通過(guò)用戶(hù)討論來(lái)提前了解用戶(hù)?；谇捌诘膯?wèn)卷調(diào)研，發(fā)覺(jué)B類(lèi)買(mǎi)家基本都會(huì)存在以下這些決策點(diǎn)：本地倉(cāng)發(fā)貨、免郵、變體豐富、熱賣(mài)變體、便利變體對(duì)比、利潤(rùn)空間、庫(kù)存夠、商品質(zhì)量好。

專(zhuān)注Dropshipping（以下簡(jiǎn)稱(chēng)DS）的B類(lèi)買(mǎi)家和以自身喜好為決策的C類(lèi)買(mǎi)家有明顯差別。他們主要訴求是完成銷(xiāo)售獵取利潤(rùn)，因此他們所關(guān)注的信息明顯更為綜合和全面。但是目前線(xiàn)上的信息權(quán)重分布，并不符合B類(lèi)買(mǎi)家的心智。

關(guān)于美國(guó)用戶(hù)：

密歇根高校心理學(xué)系的Hannah教授基于一系列試驗(yàn)在《Culturalvariationineyemovementsduringsceneperception》這篇論文指出，相比關(guān)注均衡、強(qiáng)調(diào)集體主義的中國(guó)用戶(hù)，美國(guó)用戶(hù)更關(guān)注單個(gè)對(duì)象，更強(qiáng)調(diào)個(gè)人主義。

《NewsWeek》一篇專(zhuān)欄文章，從生理學(xué)的角度提出，亞裔美國(guó)人和非亞裔美國(guó)人在面對(duì)簡(jiǎn)單、繁忙的場(chǎng)景時(shí)，會(huì)使用到不同的大腦活動(dòng)區(qū)域。亞裔美國(guó)人的大腦活動(dòng)集中在處理圖形與背景關(guān)系的區(qū)域，而非亞裔美國(guó)人的大腦活動(dòng)集中在識(shí)別物體的區(qū)域。

這些差異導(dǎo)致了中美用戶(hù)面對(duì)同一界面的不同感知，中國(guó)人相比美國(guó)人更擅長(zhǎng)接受理解簡(jiǎn)單的界面。淘寶、京東那樣的簡(jiǎn)單界面對(duì)于國(guó)內(nèi)用戶(hù)來(lái)說(shuō)琳瑯滿(mǎn)目，但對(duì)于美國(guó)用戶(hù)來(lái)說(shuō)特別眼花繚亂、認(rèn)知困難。

因此，面對(duì)美國(guó)用戶(hù)的詳情頁(yè)在視覺(jué)上可能需要更加克制、減負(fù)。

2.數(shù)據(jù)分析

當(dāng)前用戶(hù)設(shè)備中，1280px、1366px的小屏用戶(hù)占據(jù)近30%以上。但是由觸達(dá)率數(shù)據(jù)發(fā)覺(jué)，小屏用戶(hù)一屏內(nèi)無(wú)法看全主圖、變體，而且物流信息以及四個(gè)行動(dòng)點(diǎn)都處在盲區(qū)，這可能是導(dǎo)致高跳出的主要緣由。

3.問(wèn)題走查

通過(guò)團(tuán)隊(duì)的問(wèn)題走查，也發(fā)覺(jué)了幾個(gè)明顯問(wèn)題：

比如頁(yè)面層級(jí)過(guò)于雜亂、視覺(jué)噪音較多；主圖尺寸過(guò)大、占用大量空間；Price（現(xiàn)價(jià)）和MSPR（建立零售價(jià)）不易區(qū)分，利潤(rùn)難認(rèn)知，尤其對(duì)于注意利潤(rùn)的買(mǎi)家來(lái)說(shuō)很致命；先變體后行動(dòng)的動(dòng)線(xiàn)產(chǎn)生SKU維度誤會(huì)；查看多變體信息時(shí)，需要手動(dòng)一個(gè)個(gè)切換，較多操作負(fù)荷。

三、定義問(wèn)題

通過(guò)前期發(fā)散得到了一系列問(wèn)題，總體來(lái)說(shuō)可以定義為四個(gè)方面：視覺(jué)噪音、層級(jí)混亂、屏效過(guò)低和操作低效。因此，接下次的設(shè)計(jì)策略就可以圍繞這四個(gè)方一直制定：信息降噪、層級(jí)清楚、提升屏效和鏈路優(yōu)化。

四、設(shè)計(jì)策略

1.層級(jí)優(yōu)化

層級(jí)優(yōu)化前需要先進(jìn)行信息分級(jí)。基于B類(lèi)買(mǎi)家問(wèn)卷調(diào)研的結(jié)果，與項(xiàng)目側(cè)重新確認(rèn)信息優(yōu)先級(jí)并達(dá)成全都，后續(xù)的層級(jí)優(yōu)化將主要參考此分級(jí)結(jié)果。

然后，通過(guò)一維分析法梳理現(xiàn)有層級(jí)的問(wèn)題，并根據(jù)上述分級(jí)結(jié)果重新調(diào)整。比如合并層級(jí)、并通過(guò)兩端布局提升屏效；大幅度的去色降噪；垂直布局來(lái)易于買(mǎi)家的閱讀比價(jià)；行動(dòng)點(diǎn)前置來(lái)降低買(mǎi)家觸達(dá)成本等等，詳細(xì)細(xì)節(jié)不再贅述。

2.網(wǎng)格布局

確立最小原子為5px，建立margin=40px，gutter=10px，總寬1200px的柵格系統(tǒng)；以及5px、10px、15px、20px、40px的間距系統(tǒng)。全部的元素盡量根據(jù)此框架進(jìn)行布局，進(jìn)一步優(yōu)化層級(jí)，建立頁(yè)面秩序感和舒適的閱讀節(jié)奏。

3.鏈路優(yōu)化

對(duì)應(yīng)走查中的鏈路問(wèn)題。對(duì)于B類(lèi)買(mǎi)家來(lái)說(shuō)，他們并非和C類(lèi)買(mǎi)家一樣出于自用的目的，他們需要全面對(duì)比商品的變體、價(jià)格、庫(kù)存等因素。但當(dāng)前變體的呈現(xiàn)和對(duì)比很不直觀，買(mǎi)家查看不同變體子商品信息時(shí)需要大量的操作成本，重復(fù)低效，不便于買(mǎi)家快速?zèng)Q策。

這里調(diào)研了四類(lèi)包含了變體表格的主流競(jìng)品：Modalyst、Spocket、Eprolo和Oberlo。Spocket和Oberlo使用了彈窗來(lái)承載，Modalyst和Eprolo分別使用了下側(cè)tabs和右側(cè)功能區(qū)進(jìn)行承載。

考慮到觸達(dá)成本以及空間利用率，借鑒了Spocket、Oberlo的做法，新增鏈接入口，以彈窗的形式承載全部變體子商品的信息，關(guān)心買(mǎi)家直觀比對(duì)促進(jìn)決策；同時(shí)在子商品右側(cè)供應(yīng)加購(gòu)操作，便于加購(gòu)意向買(mǎi)家的快速操作。

五、方案呈現(xiàn)

以下便是評(píng)審時(shí)最終達(dá)成全都的方案（詳細(xì)的細(xì)節(jié)呈現(xiàn)有出許多方案，這里就不放了）。

再上一波方案對(duì)比。項(xiàng)目側(cè)認(rèn)為比以前的更清爽、潔凈了，不過(guò)不太確定數(shù)據(jù)的走向，究竟整體改動(dòng)很大，所以就需要最終的驗(yàn)證階段。

六、驗(yàn)證、復(fù)盤(pán)

上線(xiàn)后觀看數(shù)據(jù)的表現(xiàn)，發(fā)覺(jué)基本都是正向（以下數(shù)據(jù)均脫敏處理）——保藏轉(zhuǎn)化提升了6.0%，刊登轉(zhuǎn)化提升了2.6%，跳出降低了10.2%，人均會(huì)話(huà)時(shí)長(zhǎng)提升了16.6%。由此基本能得出一個(gè)結(jié)論：這是一次勝利的設(shè)計(jì)改版，并且對(duì)業(yè)務(wù)側(cè)貢獻(xiàn)了價(jià)值。

為了能夠復(fù)用到團(tuán)隊(duì)其他項(xiàng)目，就需要做一些方法的沉淀。比如對(duì)美國(guó)用戶(hù)的降噪、對(duì)B類(lèi)買(mǎi)家的信息分級(jí)等，甚至是三鉆模型本身都可以沉淀下來(lái)。讓大家拿來(lái)即用，不用花時(shí)間去重復(fù)思索。

這個(gè)過(guò)程不限形式，可以像我一樣寫(xiě)篇文章、可以ppt匯報(bào)、也可以特地做個(gè)設(shè)計(jì)共享。

七、最終

以上便是基于宏觀模型指導(dǎo)下進(jìn)行的一次項(xiàng)目改版，每個(gè)小伙伴都可以結(jié)合自己詳細(xì)的業(yè)務(wù)、用戶(hù)狀況來(lái)參考使用。盼望對(duì)你有所啟發(fā)。

我是設(shè)計(jì)師Andrew，我們下期再見(jiàn)。

參考文章：

張宏波