在主流的電商平臺(tái)認(rèn)知里,京東通常以「品質(zhì)好,服務(wù)優(yōu),價(jià)格高」著稱(chēng),相對(duì)于淘寶、拼多多等友商,其平臺(tái)調(diào)性與「下沉」相距甚遠(yuǎn)。因此,如何借助大促期間激增的流量,為平臺(tái)帶來(lái)更多下沉用戶(hù)與銷(xiāo)售額,便成為了下沉(超值特賣(mài))會(huì)場(chǎng)的主要使命。

設(shè)計(jì)思路

1. 核心數(shù)據(jù)指標(biāo)定位

下沉?xí)?chǎng)在本次618之前,一共只做了兩期(19年雙11、20年年貨節(jié))嘗試,相比主會(huì)場(chǎng)等傳統(tǒng)會(huì)場(chǎng),還未形成成熟的結(jié)構(gòu)框架,因此,對(duì)于會(huì)場(chǎng)該怎么做,北極星指標(biāo)是什么,還處在探索階段。

關(guān)于北極星指標(biāo):

作為售賣(mài)型會(huì)場(chǎng),我們自然地在前兩次活動(dòng)中將GMV增長(zhǎng)(GMV=訂單量x客單價(jià))作為下沉?xí)?chǎng)的北極星指標(biāo),但對(duì)往期活動(dòng)的數(shù)據(jù)表現(xiàn)進(jìn)行復(fù)盤(pán)后,會(huì)發(fā)現(xiàn)下沉?xí)?chǎng)的客單價(jià)受盤(pán)品策略的影響較大,不利于設(shè)計(jì)策略的效果驗(yàn)證。因此,為了精準(zhǔn)定位設(shè)計(jì)發(fā)力方向,我們剔除了客單價(jià)這個(gè)變量,將訂單量增長(zhǎng)作為本次下沉?xí)?chǎng)的北極星指標(biāo)。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

在明確了北極星指標(biāo)后,我們采用UGD數(shù)據(jù)拆解思路,將其拆分細(xì)化為「提升訂單轉(zhuǎn)化率」和「提升日均UV」兩個(gè)數(shù)據(jù)指標(biāo),并圍繞這兩個(gè)數(shù)據(jù)指標(biāo),進(jìn)行了如下數(shù)據(jù)提升策略探索。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

2. 提升訂單轉(zhuǎn)化率——內(nèi)容吸引

下沉?xí)?chǎng)主要推薦低價(jià)商品,促銷(xiāo)玩法豐富,最大的賣(mài)點(diǎn)是「便宜」,基于這些特點(diǎn),如何提升內(nèi)容吸引力及熱鬧氛圍,更好地傳達(dá)「低價(jià)」、「超值」等優(yōu)惠感知,進(jìn)而提升訂單轉(zhuǎn)化率,是首要解決的問(wèn)題。本次618,我們針對(duì)提升內(nèi)容吸引力做了以下嘗試。

降價(jià)曲線(xiàn)樣式創(chuàng)新,增強(qiáng)促銷(xiāo)氛圍

頭部主推單品是會(huì)場(chǎng)內(nèi)最優(yōu)質(zhì)的商品,它們降價(jià)力度大,屬于會(huì)場(chǎng)沖擊銷(xiāo)量的主力,在往期活動(dòng)的單品坑位樣式設(shè)計(jì)中,我們希望更多地展示利益點(diǎn)信息,并通過(guò)重形式的搶購(gòu)按鈕引導(dǎo)用戶(hù)點(diǎn)擊。但用研結(jié)論反饋,用戶(hù)通常只關(guān)注商品和往常相比是否真的更便宜?;诖?,在本次618中,我們只保留了價(jià)格信息,結(jié)合后臺(tái)到手價(jià)功能,通過(guò)曲線(xiàn)、箭頭等圖形化表達(dá),將到手價(jià)格同日常價(jià)與往期最低價(jià)做了兩段價(jià)格錨點(diǎn)對(duì)比,突出最核心的「直降」屬性,以提升信任感。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

這一部分視覺(jué)聚焦于傳遞降價(jià)內(nèi)容信息,由于文案信息較多,我們所需要做的就是降噪,下沉用戶(hù)對(duì)于價(jià)格等促銷(xiāo)信息非常敏感,視覺(jué)會(huì)用最直接的方式放大價(jià)格,圖形化曲線(xiàn)及標(biāo)簽突出「直降」信息,整體用飽和度較高的暖色調(diào)劃分重點(diǎn)區(qū)域聚焦決策信息。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

重點(diǎn)模塊延續(xù)雙11特殊化標(biāo)簽展示,突出優(yōu)惠信息

通常來(lái)說(shuō),用戶(hù)打開(kāi)的頁(yè)面的首要想了解的內(nèi)容是「有多省錢(qián)?」「我為什么要買(mǎi)」,所以在視覺(jué)傳達(dá)上面需要更加簡(jiǎn)短有力,清晰直觀,讓用戶(hù)能夠快速接受核心權(quán)益。在氛圍營(yíng)造上結(jié)合頁(yè)面風(fēng)格,以及飽和度較高的暖色調(diào)吸引用戶(hù)。因此下沉?xí)?chǎng)在重點(diǎn)模塊側(cè)重突出「直降」利益點(diǎn),特殊化箭頭標(biāo)簽形式帶給用戶(hù)一定的功能感知讓用戶(hù)對(duì)優(yōu)惠信息一目了然影響用戶(hù)決策。并結(jié)合搶購(gòu)引導(dǎo)按鈕,促進(jìn)用戶(hù)點(diǎn)擊。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

與下沉熱鬧氛圍契合的創(chuàng)新包裝及主kv品牌視覺(jué)延續(xù)

整體延續(xù)主kv視覺(jué)風(fēng)格,塑造用戶(hù)對(duì)618一致的品牌認(rèn)知。同時(shí)契合下沉?xí)?chǎng)特性及用戶(hù)視覺(jué)表達(dá)差異性,進(jìn)行優(yōu)惠感、熱鬧氛圍及場(chǎng)景沉浸感氛圍傳遞。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

下沉預(yù)售期:延續(xù)主kv熱愛(ài)如光主圖形結(jié)合彈幕元素同時(shí)突出場(chǎng)景沉浸感氛圍

在延續(xù)主kv熱愛(ài)如光圖形基礎(chǔ)上,會(huì)著力于結(jié)合主題(京選品質(zhì)、工廠直供、斗地主等),選擇契合的色彩及元素,用微場(chǎng)景氛圍的包裝形式給用戶(hù)傳達(dá)具有下沉?xí)?chǎng)特性的視覺(jué)形式,給用戶(hù)傳遞不一樣的熱鬧沉浸感受。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

下沉專(zhuān)場(chǎng)期:延續(xù)主kv熱愛(ài)無(wú)限元素,主打品類(lèi)呈現(xiàn),營(yíng)造熱鬧賣(mài)貨氛圍

在延續(xù)主kv熱愛(ài)如光的基礎(chǔ)上融入無(wú)限符號(hào)的概念,重點(diǎn)突出利益點(diǎn)、品類(lèi)及紅包熱鬧氛圍的傳達(dá),結(jié)合不同主推品類(lèi)定義契合的色彩,讓用戶(hù)能夠清楚的感知我們的熱鬧賣(mài)貨氛圍。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

下沉高潮期:延續(xù)主會(huì)場(chǎng)光線(xiàn)呈迸發(fā)狀態(tài),主打生日盛典氛圍

高潮期整體結(jié)合主kv迸發(fā)狀態(tài)的光線(xiàn),6.16與6.18融合舞臺(tái)場(chǎng)景與生日元素,6.17當(dāng)天主推直播概念,分別營(yíng)造舞臺(tái)生日盛典及直播真實(shí)場(chǎng)景氛圍,給用戶(hù)帶來(lái)一定的場(chǎng)景沉浸感。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

樓層形式感的下沉促銷(xiāo)概念傳達(dá)

以往下沉?xí)?chǎng)聚焦于商品本身的信息傳達(dá),缺少對(duì)主題概念的包裝,從用戶(hù)認(rèn)知來(lái)說(shuō)缺乏特色,不夠吸引用戶(hù),從主題概念傳達(dá)上來(lái)說(shuō)差異化體現(xiàn)較弱。為了更好的滿(mǎn)足業(yè)務(wù)訴求,提升用戶(hù)體驗(yàn),基于現(xiàn)有問(wèn)題,我們結(jié)合主題內(nèi)容(京挑細(xì)選、京心助農(nóng)、京打細(xì)算、京心陪伴),運(yùn)用插畫(huà)形式,描述整體微場(chǎng)景概念,提升沉浸感氛圍表達(dá)。結(jié)合主題特性選擇契合的色彩及元素進(jìn)行設(shè)置,不同維度包裝商品,提升用戶(hù)認(rèn)知及體驗(yàn)。

與往期對(duì)比:

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

整體視覺(jué)呈現(xiàn):

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

微動(dòng)效嘗試

對(duì)標(biāo)友商動(dòng)效存在的頁(yè)面狀態(tài),我們希望能夠運(yùn)用動(dòng)效提升畫(huà)面的熱鬧活波氛圍,重點(diǎn)內(nèi)容突出,吸引用戶(hù)關(guān)注度。因此我們?cè)陬^圖樓層使用光暈呼吸和流星劃過(guò)的背景動(dòng)效增加整個(gè)樓層的視覺(jué)吸引力,使用蛋糕的主體來(lái)突出618是京東生日的節(jié)日氛圍,然后圍繞蛋糕主體加上浮動(dòng)的商品增加大促的氛圍感知,整體達(dá)到吸引用戶(hù)眼球的目的。

動(dòng)效解構(gòu)

動(dòng)效按覆蓋層級(jí)分為背景、主體、前景三種。背景為氛圍光線(xiàn),例如金色氛圍光、劃過(guò)的流星等;主體為動(dòng)效的主體,例如蛋糕臺(tái);前景為需要浮動(dòng)的元素,例如紅包和商品圖等。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

背景動(dòng)效實(shí)現(xiàn)

背景分為四個(gè)部分:

  • 背景圖片:去掉所有動(dòng)效元素的背景圖片,固定展示在最底部;
  • 光暈:一張光暈的整圖,初始大小為圖片的一半,初始透明度50%,然后在1.5秒內(nèi)過(guò)渡到正常的大小和100%透明度,之后又在1.5秒內(nèi)過(guò)渡到初始狀態(tài),以此往復(fù),在蛋糕臺(tái)等主體的遮蓋下達(dá)到呼吸一般淡入淡出的效果;
  • 光線(xiàn):將所有固定位置展示的光線(xiàn)切成一張整圖,初始透明度為0%,然后在1.5秒內(nèi)過(guò)渡到100%透明度,之后又在1.5秒內(nèi)過(guò)渡到初始狀態(tài),以此往復(fù),達(dá)到與光暈同步出現(xiàn)隱藏的效果;
  • 流星:將每個(gè)流星單獨(dú)切圖,根據(jù)視覺(jué)稿放在特定位置,使蛋糕臺(tái)等主體可以完全遮蓋住流星的初始位置,然后在1.5秒內(nèi)將流星過(guò)渡到在初始位置的基礎(chǔ)上加(向右運(yùn)動(dòng))或者減(向左運(yùn)動(dòng))兩倍寬度和兩倍高度的位置,且透明度過(guò)渡到0%,之后再過(guò)1.5直接回到初始狀態(tài),以此往復(fù),達(dá)到流星和光暈同步劃過(guò)的效果。

主體動(dòng)效實(shí)現(xiàn)

主體只有蛋糕臺(tái)一個(gè)部分:去掉所有動(dòng)效元素的主體整圖,固定展示在背景部分之上,作用為凸顯主題和遮擋背景動(dòng)效初始狀態(tài)雜亂的部分。

前景動(dòng)效實(shí)現(xiàn)

前景部分由多個(gè)位置不同的紅包還有商品圖片組成,動(dòng)效實(shí)現(xiàn)的方式相同:將前景物品單獨(dú)切圖,放到設(shè)計(jì)稿上相同位置,然后設(shè)置在0.5秒內(nèi)向上過(guò)渡7個(gè)像素,之后在1秒內(nèi)過(guò)渡到初始位置下面7個(gè)像素,再在0.5秒內(nèi)過(guò)渡到初始位置,以此往復(fù),達(dá)到單個(gè)前景物品上下擺動(dòng)的效果,多個(gè)前景物品設(shè)置開(kāi)始運(yùn)動(dòng)的時(shí)間不同,達(dá)到錯(cuò)落有致的擺動(dòng)效果。

效果展示

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

3. 提升日均UV——挽留機(jī)制

玩法優(yōu)化:拓展挽留鏈路,降低體驗(yàn)影響

20年年貨節(jié)我們?cè)谙鲁習(xí)?chǎng)引入了挽留機(jī)制,用戶(hù)當(dāng)天首次離開(kāi)會(huì)場(chǎng)時(shí),會(huì)觸發(fā)視頻(招商廣告)挽留彈窗,用戶(hù)觀看完視頻后可領(lǐng)取京豆、優(yōu)惠券等獎(jiǎng)勵(lì),業(yè)務(wù)希望通過(guò)看視頻領(lǐng)獎(jiǎng)的形式,以達(dá)到提升用戶(hù)停留時(shí)長(zhǎng),促進(jìn)回訪與轉(zhuǎn)化的目的,但上線(xiàn)后數(shù)據(jù)表現(xiàn)并不理想,未達(dá)到預(yù)期效果。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

因此在本次設(shè)計(jì)之前,我們對(duì)20年年貨節(jié)挽留機(jī)制的用戶(hù)體驗(yàn)路徑進(jìn)行了分析, 發(fā)現(xiàn)在每個(gè)觸點(diǎn)中存在以下問(wèn)題。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

針對(duì)這些問(wèn)題,結(jié)合促進(jìn)用戶(hù)回訪與轉(zhuǎn)化的目標(biāo),我們對(duì)玩法做了一次全面升級(jí):不再局限于用戶(hù)離開(kāi)時(shí)這一觸點(diǎn),在用戶(hù)進(jìn)入、瀏覽、離開(kāi)會(huì)場(chǎng)等行動(dòng)觸點(diǎn),通過(guò)紅包、低價(jià)單品等內(nèi)容吸引用戶(hù)每日參與并刺激轉(zhuǎn)化。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

優(yōu)化后的挽留機(jī)制,極大減少了用戶(hù)看視頻做任務(wù)的參與成本,次日回訪率對(duì)比20年年貨節(jié),提升了8倍之多。

前端實(shí)現(xiàn)

用戶(hù)在app內(nèi)每日第一次進(jìn)會(huì)場(chǎng)觸發(fā)領(lǐng)取紅包彈窗,第一次離開(kāi)會(huì)場(chǎng)觸發(fā)挽留彈窗。因?yàn)闆](méi)有后臺(tái)資源支持,因此怎樣記錄和獲取用戶(hù)當(dāng)天的活動(dòng)狀態(tài),根據(jù)狀態(tài)來(lái)判斷中獎(jiǎng)彈窗或挽留彈窗的展示,就成了最大的問(wèn)題。

針對(duì)這些問(wèn)題,我們對(duì)需求進(jìn)行了解構(gòu)分析并高效落地:

判斷用戶(hù)在app環(huán)境下的登錄狀態(tài)

  • app內(nèi)判斷:jm-common移動(dòng)端基礎(chǔ)js庫(kù)提供isApp方法判斷當(dāng)前環(huán)境是否為特定app,isApp('jd')返回為true即在app內(nèi)
  • 已登錄判斷:復(fù)合查詢(xún)接口入?yún)"type": "loginState", "mapTo": "timeline"},返回結(jié)果response.data.timeline.login的值true即為已登錄,但在測(cè)試過(guò)程中發(fā)現(xiàn)由于紅包接口返回的數(shù)據(jù)保留在app本地,用戶(hù)更換賬號(hào)登錄后展示的還是之前的賬號(hào)領(lǐng)取的紅包,因此還需要獲取用戶(hù)的信息進(jìn)行校驗(yàn);使用myMultiNumInfo接口可查詢(xún)到用戶(hù)的昵稱(chēng),返回結(jié)果response.code的值為0則為已登錄,response.userMultiInfo.nickName的值即為用戶(hù)昵稱(chēng),使用此接口替代復(fù)合查詢(xún)接口查詢(xún)登錄狀態(tài)可解決更換賬號(hào)數(shù)據(jù)展示有誤的問(wèn)題。

進(jìn)入會(huì)場(chǎng)判斷當(dāng)天未領(lǐng)取紅包且紅包未領(lǐng)完則請(qǐng)求紅包接口

若請(qǐng)求了紅包接口返回了紅包金額或者返回的信息為紅包已經(jīng)搶光的話(huà),使用localstorage本地存儲(chǔ)將紅包接口返回的數(shù)據(jù)存儲(chǔ)在app本地,并使用日期和用戶(hù)昵稱(chēng)拼接的字符串標(biāo)記該數(shù)據(jù);打開(kāi)會(huì)場(chǎng)的時(shí)候,使用日歷和用戶(hù)昵稱(chēng)拼接的字符串從localstorage中獲取紅包信息,如果沒(méi)有獲取到信息,則請(qǐng)求紅包接口,如果有獲取到信息,則展示紅包金額或已搶光。

領(lǐng)到紅包后點(diǎn)左上角返回按鈕則出現(xiàn)挽留彈窗

京東app提供導(dǎo)航欄返回事件自定義api,可以使用這個(gè)api達(dá)到返回事件攔截的效果,但僅支持app左上角返回按鈕點(diǎn)擊攔截,不支持物理按鍵或屏幕右滑的返回方式攔截;郵件申請(qǐng)攔截域名白名單,然后在頁(yè)面加載完成后向原生發(fā)起申請(qǐng)攔截返回事件的請(qǐng)求,以注冊(cè)返回?cái)r截事件,若攔截請(qǐng)求成功,用戶(hù)點(diǎn)擊app左上角返回按鈕后,原生不再執(zhí)行真正的返回功能,而是調(diào)用H5內(nèi)指定方法執(zhí)行,如果需要返回上級(jí)頁(yè)面,則可以調(diào)用api提供的方法通知原生返回。

中途離開(kāi)會(huì)場(chǎng)則當(dāng)天不出現(xiàn)挽留彈窗

調(diào)用紅包接口獲取到紅包金額的時(shí)候,往紅包數(shù)據(jù)中加入一個(gè)firstBack字段值為true存儲(chǔ)到localstorage中;為document綁定visibilitychange事件監(jiān)聽(tīng),當(dāng)離開(kāi)頁(yè)面的時(shí)候,則將localstorage中當(dāng)天該昵稱(chēng)對(duì)應(yīng)紅包數(shù)據(jù)中的firstBack字段的值改為false;用戶(hù)點(diǎn)擊app左上角返回按鈕的時(shí)候,獲取localstorage中當(dāng)天該昵稱(chēng)對(duì)應(yīng)的紅包數(shù)據(jù),若紅包數(shù)據(jù)中有紅包金額,且firstBack字段的值為true,則展示挽留彈窗,否則直接返回上級(jí)頁(yè)面。

項(xiàng)目成果

1. 頁(yè)面展示

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

2. 數(shù)據(jù)表現(xiàn)

本次活動(dòng)上線(xiàn)后的訂單量數(shù)據(jù),無(wú)論是全時(shí)期還是日均,環(huán)比19年雙11與20年年貨節(jié)均有顯著提升,北極星指標(biāo)達(dá)成效果較好。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

3. 用戶(hù)調(diào)研反饋

預(yù)熱期和專(zhuān)場(chǎng)期兩期調(diào)研顯示,無(wú)論是對(duì)下沉用戶(hù)還是非下沉用戶(hù),下沉?xí)?chǎng)的優(yōu)惠感傳遞較佳。

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

△ 截圖引自:2020年618大促用戶(hù)調(diào)研報(bào)告

總結(jié)

本次618,我們?cè)谙鲁習(xí)?chǎng)踐行了大促活動(dòng)的產(chǎn)品化迭代思路,在前期與業(yè)務(wù)側(cè)就核心目標(biāo)與北極星指標(biāo)達(dá)成一致后,無(wú)論是在方案推動(dòng)以及最后的上線(xiàn)效果來(lái)看,都比往期有了長(zhǎng)足進(jìn)步。未來(lái),在延續(xù)往期已驗(yàn)證策略,保證會(huì)場(chǎng)基礎(chǔ)產(chǎn)出效果的前提下,如何結(jié)合行業(yè)、用戶(hù)趨勢(shì)的變化,打造具有京東品牌印記的大促下沉?xí)?chǎng),將會(huì)是我們持續(xù)探索的發(fā)力方向。

更多京東實(shí)戰(zhàn)案例:

歡迎關(guān)注「JellyDesign」的小程序:

京東如何做好特賣(mài)會(huì)場(chǎng)設(shè)計(jì)?來(lái)看我的項(xiàng)目總結(jié)

收藏 88
點(diǎn)贊 17

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。