項目背景

我的專屬會場作為大促期間的固化功能型會場，一直以來的定位都是滿足用戶與「我」相關(guān)的需求，核心目標(biāo)是通過高效導(dǎo)購方式來促進(jìn)購買轉(zhuǎn)，以輔助帶動大盤GMV的提升。

在今年618中，我的專屬會場除了承載它長線的個性化導(dǎo)購目標(biāo)之外，為了配合平臺實現(xiàn)大促期間對京東服務(wù)業(yè)務(wù)的推廣，也將承載提升服務(wù)曝光、帶動服務(wù)增長的業(yè)務(wù)訴求，因此，在這次618我的專屬會場設(shè)計定位中，以轉(zhuǎn)化率為北極星指標(biāo)，服務(wù)新用戶增長&服務(wù)轉(zhuǎn)化率為重點關(guān)注指標(biāo)，并以優(yōu)化導(dǎo)購維度提升導(dǎo)購效率、挖掘與「我」相關(guān)的服務(wù)需求為核心發(fā)力點。

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

設(shè)計思路

1. 打造「與我相關(guān)」的瀏覽動線

經(jīng)過多年大促的驗證以及沉淀，我的專屬會場已形成一定固化的用戶心智，即與「我」強相關(guān)，且與大促優(yōu)惠強相關(guān)，因此基本框架可以概括為「功能區(qū)」與「推薦區(qū)」兩大部分。

功能區(qū)的主要目的是讓用戶快速中識別是我的專屬頁面，并滿足用戶在大促期間主動找尋固定功能的訴求，推薦區(qū)則以專屬個性化的導(dǎo)購維度來滿足用戶逛頁面的訴求。

在具體的動線設(shè)計上，除了遵循以上的基礎(chǔ)原則，這次也重點延續(xù)了產(chǎn)品化迭代的思路，根據(jù)去年618及雙11的數(shù)據(jù)效果進(jìn)行了動線優(yōu)化，并結(jié)合本次服務(wù)拉新的挑戰(zhàn)目標(biāo)，將服務(wù)內(nèi)容與用戶相關(guān)的需求進(jìn)行融合，適當(dāng)?shù)慕o予更多了曝光強化。

2. 容層面提升專屬感

減少功能層級，提升專屬內(nèi)容曝光優(yōu)先級

根據(jù)過往數(shù)據(jù)來看，功能區(qū)一直屬于頁面高點擊和高轉(zhuǎn)化模塊，在去年雙11嘗試將部分入口信息展開后，數(shù)據(jù)更是提升明顯，因此在本次618中，我們繼續(xù)強化了符合用戶需求的功能價值并減輕功能層級，將「我的優(yōu)惠」、「我的足跡」信息展開，并新增符合用戶需求的新功能「我的常購」，同時推動上游功能接口，拉取了專屬感信息，如優(yōu)惠券臨期提醒、常購次數(shù)等；固定功能入口也按照數(shù)據(jù)效果進(jìn)行了展示順序的優(yōu)化，并強化了信息更新提醒，增加整個區(qū)域的吸引力。

迭代專屬推薦維度

在推薦區(qū)的迭代中，首先是將高價值維度的進(jìn)行延續(xù)，優(yōu)化設(shè)計細(xì)節(jié)。例如，針對身份定投模塊進(jìn)行原子層面的迭代，通過身份標(biāo)簽的強化和區(qū)分來突顯不同的用戶專屬感；針對常逛品類則進(jìn)行了AB測試，驗證不同優(yōu)惠表達(dá)對用戶的吸引度。

其次是低價值維度的弱化淘汰以及對新維度的挖掘。例如，根據(jù)年貨節(jié)常試的新維度數(shù)據(jù)效果發(fā)現(xiàn)，場景維度及會場維度數(shù)據(jù)表現(xiàn)一般，綜合BI類的導(dǎo)購魔方表現(xiàn)較好，尤其標(biāo)簽、榜單類素材，因此本次新增以標(biāo)簽和榜單為主的專屬推薦樓層，并根據(jù)用戶身份標(biāo)簽生成個性化文案，以打造與我相關(guān)的專屬感氛圍，而針對一直效果平平但由于戰(zhàn)略支持需要呈現(xiàn)的附近門店模塊，則與榜單標(biāo)簽進(jìn)行了整合，以縮減樓層高度，提升整體瀏覽效果。

3. 利用「情感化「氛圍與用戶溝通

品牌延續(xù)

整體視覺延續(xù)主會場主題「熱愛如光」與主KV保持一致?！肝业摹箷鍪桥c用戶自我相關(guān)的一個主要會場，貫穿全時期的整個時間線，視覺形式上需要做到契合預(yù)售期和非預(yù)售期的整個主線視覺樣式，「我的專屬」主打智能服務(wù)，也將承載提升服務(wù)曝光、帶動服務(wù)增長的業(yè)務(wù)訴求所以在整體視覺上采用了預(yù)售期的「彈幕」圖形元素和非預(yù)售期的「周年慶嘉年華」圖形元素保證與全時期主KV視覺風(fēng)格保持一致，同時整個會場采用科技藍(lán)的色調(diào)，營造科技、智能、趣味去打造整體調(diào)性，以達(dá)到增加服務(wù)的曝光、帶動提升服務(wù)業(yè)務(wù)的增長率。

身份專屬的氛圍營造

整個「我的專屬」會場，定投用戶的身份與用戶的信息息息相關(guān)，視覺需要打造與用戶強相關(guān)的氛圍，讓用戶在「我的專屬」里找到歸屬感，而這次我們主KV的圖形為「彈幕」所以啟發(fā)了在頭圖上想傳達(dá)的目的，以彈幕形式營造「情感化」氛圍嘗試與用戶溝通，根據(jù)不同身份用戶打造不同視角氛圍，具體如下：

普通用戶：通過分析用戶行為，制定身份關(guān)鍵詞，彈幕氛圍結(jié)合前端技術(shù)以彈幕氣泡的動畫效果給用戶呈現(xiàn)驚喜感，讓用戶感知「京東一直在默默的關(guān)心你」。

PLUS用戶：為了凸顯PLUS的特別，在頭像的外框置入了PLUS的品牌色，在彈幕氛圍上置入PLUS用戶在618的專屬優(yōu)惠信息，傳達(dá)給plus用戶的貼心服務(wù)

生日用戶：對于在6月1日-18日生日的用戶我們在頭圖氛圍上貼上了「生日快樂」的標(biāo)簽，在彈幕氛圍上也把最真誠的祝福語融入到彈幕氣泡上來表達(dá)對生日用戶的關(guān)懷。

專屬禮包

這次的618分以三個時期為活動節(jié)點，在不同時期分發(fā)三個專屬禮包，為了展示用戶不同的的專屬特點，在視覺樣式和氛圍上融入了時期的特點以及身份標(biāo)簽。

專享禮包：針對于專場期的用戶不同身份定投給用戶的優(yōu)惠券禮包，為了更突出優(yōu)惠信息，背景氛圍在這個禮包里降級地去弱化，讓優(yōu)惠券的身份信息和優(yōu)惠信息更突出，加強點擊感。

618超級大禮包：高潮期是整個活動的頂峰，所以高潮期的禮包視覺會與主會場相呼應(yīng)，主題的氛圍烘托也會更熱鬧，在主題樣式中加入了禮盒、京豆、優(yōu)惠券等插畫物體去營造整個嘉年華氛圍，讓用戶深刻去感知年中逛歡優(yōu)惠力度大的感知。

生日禮包：本次特別為在6.1-6.18與京東同生日的用戶投放的一個貼心禮包，生日用戶初次打開禮包會有禮盒包彈出來抖動打開禮盒，如此設(shè)計是為了給生日的用戶帶來神秘感和驚喜感，打開禮盒之后是我們的生日券禮包，在生日券禮包里我們以蛋糕為主體，同時與前端技術(shù)結(jié)合使生日蠟燭的火光在搖晃，想達(dá)到一個真實的慶生場景，用視覺嘗試與用戶溝通-你的重要日子京東都陪著你。

4. 通過技術(shù)為頁面增加吸引力

我的專屬會場，承載的是我的各種身份，其他內(nèi)容不多，整體結(jié)構(gòu)比較簡單，那么如何用前端優(yōu)化使進(jìn)入頁面的用戶能夠迅速感受這種「專屬身份」的氛圍呢？如何豐富頁面的內(nèi)容展現(xiàn)呢？我們從以下幾個方面進(jìn)行了實踐。

頭圖身份元素動畫

頭部是整個頁面氛圍最重要的部分，用戶進(jìn)入頁面首先看到的就是頭部的身份標(biāo)識，所以我們要做的就是吸引用戶在此停留，查看其專屬的信息，于是我們嘗試給頭圖的身份元素增加一些動畫效果，來留住用戶的目光。首先我們來看看實際成品：

主要優(yōu)化點：

• SVG環(huán)形漸變實現(xiàn)。由于目前沒有比較好的辦法能夠?qū)崿F(xiàn)環(huán)形的漸變，我們采用了一種曲線救國的方案，實現(xiàn)方法是使用2層SVG，一層是完整的徑向漸變，一層是裁剪50%的徑向漸變，最終疊加成環(huán)形漸變；
• PLUS銘牌高光動畫。PLUS銘牌是身份的標(biāo)識，我們使用了背景動畫來實現(xiàn)高光的效果，體現(xiàn)一種尊貴感；

禮包氛圍優(yōu)化

本地會場主推的促銷方案是各種身份禮包，包括生日禮包、專享禮包、618大禮包。各種禮包會有不同的彈出效果，在設(shè)計稿定稿之后，我們認(rèn)為生日禮包是我們的主推促銷方案，但是如果只是簡單的彈窗，沒有給生日用戶驚喜感，于是我們決定給彈窗增加一些氛圍的優(yōu)化，在與視覺同學(xué)討論方案后，決定模仿真實禮物盒打開，并且增加蠟燭燃燒的效果，使用戶產(chǎn)生參與感，展現(xiàn)效果如下：

樓層標(biāo)題小動畫

由于頁面本身結(jié)構(gòu)比較簡單，導(dǎo)致頁面從瀏覽角度比較單調(diào)，于是我們從前端的角度思考，如何能夠用上一點比較有「技術(shù)意義」的實踐呢？最近observe這個特性很有意思，那我們就簡單試試好了。

我們給所有的樓層增加了一個observe監(jiān)聽，當(dāng)觸發(fā)enter事件的時候，執(zhí)行動畫。使用這個特性的原因是我們發(fā)現(xiàn)observe的兼容性非常好，且不用像以往一樣，頻繁觸發(fā)scroll，觸發(fā)條件也相對更準(zhǔn)確。經(jīng)過測試，我們發(fā)現(xiàn)效果非常好，省去了scroll方法還需要阻斷的情況，而且這個小優(yōu)化，讓運營和產(chǎn)品也覺得非常眼前一亮。

項目成果

1. 頁面展示

這一次的視覺在氛圍上更注重情感化去塑造打造氛圍，區(qū)別于以往偏功能化的特點，自身在禮包和頭圖的物件塑造上顏色更柔和、造型更細(xì)膩，以科技感和專屬感通過定投身份給用戶帶來情感化上的共鳴。

基于運營策略的不同，對比于往期的「我的」頁面這一次更注重強調(diào)專屬感和點擊感去輔助京東服務(wù)業(yè)務(wù)曝光以及引流。

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

本次會場的北極星指標(biāo)目標(biāo)達(dá)成，轉(zhuǎn)化率與服務(wù)新用戶增長環(huán)比19年雙11均有了較大的增長，在設(shè)計策略與運營策略配合優(yōu)化下，也帶動了整點引單和點擊的大幅提升。

通過產(chǎn)品化迭代思路，避免了每次活動都從零開始，思路的迭代和沉淀除了帶來設(shè)計效果上的提升，也能夠真正利用數(shù)據(jù)思路驅(qū)動每一次活動都能穩(wěn)定的增長，以發(fā)揮設(shè)計和業(yè)務(wù)的價值。

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