今年以來(lái)，京東購(gòu)物小程序圍繞"一鍵發(fā)現(xiàn) 萬(wàn)物好店"的產(chǎn)品心智，從消費(fèi)鏈路的上游提升可逛性出發(fā)進(jìn)行了一系列產(chǎn)品&營(yíng)銷設(shè)計(jì)升級(jí)。1.0 致力于打造更契合微信域的用戶體驗(yàn)；2.0 嘗試以一種有趣的姿態(tài)留住偶發(fā)閑逛用戶。2.0 近期已陸續(xù)上線，借此機(jī)會(huì)和大家分享一下整個(gè)改版過(guò)程及思路。

一、變化與契機(jī)

過(guò)去，京購(gòu)小程序更多是京東 APP 在微信域的分身，在貨品、產(chǎn)品設(shè)計(jì)及營(yíng)銷層面與京東 APP 沒(méi)有任何差別。現(xiàn)在，小程序已由散點(diǎn)式孤島向全域營(yíng)銷轉(zhuǎn)變，成為京東在微信域流量及交易的主陣地。與此同時(shí)，我們面向的用戶也更加多元偶發(fā)，他們購(gòu)物需求模糊，以閑逛、消磨時(shí)間為主，偏好居家日用、?品生鮮等高頻高耗商品。在微信域差異化貨品及算法的加持下，前端設(shè)計(jì)急需打破現(xiàn)狀，進(jìn)行體驗(yàn)差異化升級(jí)，塑造微信域?qū)傩闹恰?

二、改版思路

基于人貨場(chǎng)差異化洞察，改版思路圍繞"知心省心開(kāi)心"的用戶需求體系，從被動(dòng)支持、到主動(dòng)引領(lǐng)、再到互動(dòng)交流，階梯式構(gòu)建用戶對(duì)京購(gòu)小程序的結(jié)構(gòu)化認(rèn)知。

1. 知心

打造契合微信域的用戶體驗(yàn)

首頁(yè)作為小程序的門面擔(dān)當(dāng)，即是用戶心智承接的核心陣地，也是內(nèi)容分發(fā)的主要場(chǎng)景。故 1.0 為用戶打造"知心"的消費(fèi)體驗(yàn)，我們先從首頁(yè)切入。在此過(guò)程中我們也面臨著渠道、人群、品牌等多重挑戰(zhàn)。

基于數(shù)據(jù)/用戶/競(jìng)品等專業(yè)洞察，以結(jié)構(gòu)化思維解構(gòu)分析，由里及表從框架、內(nèi)容、動(dòng)線、品牌 4 個(gè)方向升級(jí)應(yīng)對(duì)以上挑戰(zhàn)。

框架承載能力升級(jí)

針對(duì)框架的升級(jí)，將從廣度和深度來(lái)個(gè)維度來(lái)進(jìn)行拆解，為每一個(gè)閑逛場(chǎng)景，重塑更具包容性體驗(yàn)框架。

廣度上，面向不斷擴(kuò)展的多元化電商內(nèi)容結(jié)合設(shè)計(jì)趨勢(shì)跟隨及偶發(fā)用戶特性，將舊版樓層堆疊嚴(yán)重的貨架型框架，通過(guò)內(nèi)容精簡(jiǎn)使 feeds 移入首屏讓用戶快速進(jìn)入逛的狀態(tài)。

深度上，將舊版單一扁平框架拓展成一個(gè)更具探索性的立體框架，以應(yīng)對(duì)日益增多的渠道特色需求。通過(guò)搖一搖融入社交心智高效分發(fā)內(nèi)容、向左打造私域化陣地、向右建設(shè)專屬活動(dòng)日歷、下拉則用娛樂(lè)化承接偶發(fā)用戶，讓用戶更好的發(fā)現(xiàn)內(nèi)容。

feeds 內(nèi)容表達(dá)能力升級(jí)

雙列流設(shè)計(jì)弱化了推薦 feeds 不同內(nèi)容的個(gè)性表達(dá)，基于前期大量的設(shè)計(jì)探索，我們從「觸達(dá)表現(xiàn)心智」3 個(gè)層面系統(tǒng)化構(gòu)建更具精細(xì)化的內(nèi)容表達(dá)模型，提升內(nèi)容觸達(dá)效率的同時(shí)豐富內(nèi)容形式。

動(dòng)線多元化升級(jí)

在瀏覽前中后場(chǎng)景下深挖偶發(fā)用戶痛點(diǎn)，結(jié)合用戶行為及心理進(jìn)行多元化營(yíng)銷動(dòng)線設(shè)計(jì)，吸引持續(xù)瀏覽和點(diǎn)擊。

品牌心智升級(jí)

在完成首頁(yè)整體體驗(yàn)架構(gòu)設(shè)計(jì)后，我們也圍繞著京東品牌繼承、差異化貨品調(diào)性打造、大促特色營(yíng)銷氛圍改造 3 個(gè)維度進(jìn)行了京購(gòu)小程序品牌心智升級(jí)。

① 京東品牌繼承與重塑

微信生態(tài)環(huán)境下，京購(gòu)小程序在繼承京東品牌調(diào)性的基礎(chǔ)上，通過(guò)兼顧場(chǎng)域特色，打造更聚焦、包容、多元的品牌記憶點(diǎn)，重塑京東微信域?qū)僖曈X(jué)體系。提煉高效、豐富、親和的設(shè)計(jì)關(guān)鍵詞，并定義品質(zhì)簡(jiǎn)潔、親和舒適、輕透明快的視覺(jué)基調(diào)，從色彩、 圖形 、質(zhì)感、動(dòng)效 4 個(gè)維度進(jìn)行設(shè)計(jì)映射。

匹配微信域五大機(jī)會(huì)品類貨品特性

挖掘微信域 5 大機(jī)會(huì)品類特性，從色彩精細(xì)化傳達(dá)、情緒性語(yǔ)義意向來(lái)布控場(chǎng)域類目主色調(diào)，塑造微信域差異化類目專屬心智。

有渠道特色的大促營(yíng)銷場(chǎng)建設(shè)

在京東大促主題背景下，微信域?qū)f(xié)同主站的節(jié)奏爆點(diǎn)、核心玩法、權(quán)益結(jié)算、尖貨爆品內(nèi)容。在此基礎(chǔ)上，制定預(yù)熱期搶跑營(yíng)銷節(jié)點(diǎn)，實(shí)現(xiàn)對(duì)大促整體節(jié)奏上的補(bǔ)位增長(zhǎng)，在場(chǎng)景期通過(guò)限時(shí)營(yíng)銷部署對(duì)抗品類期的銷售疲軟的差異化營(yíng)銷策略。結(jié)合微信域用戶動(dòng)機(jī)及特點(diǎn)，我們進(jìn)行了有渠道特色的差異化營(yíng)銷場(chǎng)設(shè)計(jì)。

為統(tǒng)一大促期間用戶感知，我們?cè)谄放啤㈩伾帮L(fēng)格調(diào)性上，同步了主站的大促營(yíng)銷心智，打造遞進(jìn)式大促首頁(yè)基調(diào)。并基于小程序日常"低價(jià)"的營(yíng)銷策略，預(yù)熱期采用顏色降噪設(shè)計(jì)讓用戶更聚焦信息為大促造勢(shì)。品類專場(chǎng)期配合微信紅點(diǎn)通知，在開(kāi)?紅及 bigday 同步 app 視覺(jué)氛圍，喚醒承接微信的京東老用戶。

與此同時(shí)，為了更好的承接微信域用戶，圍繞"承接場(chǎng)效、優(yōu)惠透?jìng)?、視覺(jué)減負(fù)、營(yíng)銷感知"等設(shè)計(jì)策略，打造具有微信域特色的大促營(yíng)銷場(chǎng)設(shè)計(jì)，并不斷嘗試和校驗(yàn)試跑出最適合小程序的體驗(yàn)設(shè)計(jì)方案，激發(fā)用戶"逛"的興趣。

最后為助力業(yè)務(wù)提升用戶行為轉(zhuǎn)化，針對(duì)微信域組件&動(dòng)效等前端設(shè)計(jì)模塊，持續(xù)進(jìn)行 ABtest 測(cè)試，并基于數(shù)據(jù)反饋沉淀高轉(zhuǎn)化設(shè)計(jì)策略。

2. 省心

① 為用戶帶來(lái)"省心又省錢"的購(gòu)物體驗(yàn)

我們的用戶是典型省錢不省生活的一群人，不管是消費(fèi)體驗(yàn)還是貨品供應(yīng)，我們都希望做到省心又省錢。

消費(fèi)鏈路升級(jí)：購(gòu)物全流程用戶需求識(shí)別與滿足

過(guò)去京購(gòu)小程序側(cè)重"搜索轉(zhuǎn)化"的單一路徑。為了給用戶帶去省心的消費(fèi)體驗(yàn)，新版以購(gòu)前明確購(gòu)物需求、購(gòu)中快速?zèng)Q策轉(zhuǎn)化、購(gòu)后獲取專屬服務(wù)的體驗(yàn)定位進(jìn)行消費(fèi)鏈路升級(jí)。

購(gòu)前：向消費(fèi)鏈路上游延伸

購(gòu)前針對(duì)用戶的模糊需求，在完善搜索功能的同時(shí)利用熱點(diǎn)話題、微信域尖貨榜單、延展推薦等內(nèi)容升級(jí)搜索流程，向消費(fèi)鏈路上游延伸，承接用戶閑逛探索需求。

購(gòu)中：快速?zèng)Q策轉(zhuǎn)化

購(gòu)中基于信息減負(fù)、路徑縮短、社交輔助等設(shè)計(jì)策略，構(gòu)建短商詳、購(gòu)物車分享、短鏈結(jié)算等新型產(chǎn)品形態(tài)來(lái)提升用戶決策轉(zhuǎn)化效率。

購(gòu)后：打造更具專屬感的服務(wù)體驗(yàn)

購(gòu)后以用戶分層，圍繞不同場(chǎng)景、不同用戶身份的內(nèi)容&權(quán)益滲透設(shè)計(jì)，打造更具專屬感的服務(wù)體驗(yàn)。

微信域特色頻道：一段從認(rèn)知到相知的旅程

京購(gòu)小程序通過(guò)重運(yùn)營(yíng)、強(qiáng)干預(yù)的方式試驗(yàn)跑出微信域的心智單品和類目，從"單品、品類、品牌"維度孵化"10 元店、單單返、大牌微力"等特色營(yíng)銷 IP。在此背景下，設(shè)計(jì)側(cè)圍繞從認(rèn)知到相知的過(guò)程，進(jìn)一步助推差異化貨品占領(lǐng)用戶心智。

認(rèn)知：記住我的樣子

為快速穿透用戶心智形成記憶認(rèn)知的目的，設(shè)計(jì)上圍繞"頻道定位、品質(zhì)凸顯、微信專屬"等關(guān)鍵詞，著重刻畫(huà)逛購(gòu)動(dòng)線中"無(wú)需計(jì)算的直降、邀友享低價(jià)的特權(quán)"，并通過(guò)品類調(diào)性，聯(lián)動(dòng)頭圖、商卡打造沉浸式的品類營(yíng)銷動(dòng)線，匹配用戶類目心智，立足于為用戶帶來(lái)"有品質(zhì)最省錢"的購(gòu)物體驗(yàn)。

除日常運(yùn)營(yíng)外，頻道每月定期聯(lián)動(dòng)品類和品牌打造營(yíng)銷 Bigday，以 "超 V 單品日、超級(jí)返、大牌 V 力"進(jìn)行全新升級(jí)。為進(jìn)一步穿透用戶心智，團(tuán)隊(duì)內(nèi)部頭腦風(fēng)暴反復(fù)推敲，以"心智連貫性、設(shè)計(jì)延展性"為原則，選取"V"作為微信域系列 IP 的超級(jí)符號(hào)，并根據(jù)應(yīng)用場(chǎng)景特征設(shè)定符號(hào)延展原則，在首頁(yè)、頻道、黃流等購(gòu)物全鏈路布局有效發(fā)聲點(diǎn)，形成統(tǒng)一的、多方位的營(yíng)銷聲浪。

相知：記住我的好

受微信去中心化特色影響，用戶在微信的購(gòu)物行為更加偶發(fā)、快捷，為加速用戶行為轉(zhuǎn)化，基于"短鏈"的設(shè)計(jì)思維，結(jié)合"愛(ài)達(dá)法則+上癮模型"，搭建了積木式的 "IDA 后鏈路互動(dòng)增長(zhǎng)策略"提升流量 ROI。即從資源入口進(jìn)入，通過(guò)區(qū)分不同生命周期的用戶設(shè)計(jì)覆蓋首頁(yè)、頻道、黃流等全鏈路權(quán)益營(yíng)銷動(dòng)線，讓對(duì)的人，在對(duì)的地點(diǎn)，獲得最適合 TA 的權(quán)益，將"省心"貫徹到底。

用"精準(zhǔn)權(quán)益、互動(dòng)裂變、私域沉淀"三位一體的積木式短鏈互動(dòng)模型，賦能京東微信域廣告后鏈路，充分串聯(lián)及發(fā)揮公眾號(hào)、視頻號(hào)等微信域非中心化的業(yè)務(wù)能力，并最終沉淀到京東購(gòu)物小程序做整體交易，拉長(zhǎng)及放大用戶價(jià)值。

與此同時(shí)，為加速用戶行為轉(zhuǎn)化，融合心理學(xué)認(rèn)知偏差等定律，對(duì)模型進(jìn)行"復(fù)刻"和"升級(jí)"。在微信域特色頻道和營(yíng)銷玩法中孵化"復(fù)訪、裂變、轉(zhuǎn)化"等短鏈玩法，助力業(yè)務(wù)增長(zhǎng)。

3. 開(kāi)心

更精準(zhǔn)的匹配用戶泛娛樂(lè)、泛社交興趣

隨著用戶消費(fèi)場(chǎng)景的多元化，內(nèi)容對(duì)整個(gè)消費(fèi)行為產(chǎn)生了多維影響，作為傳統(tǒng)電商平臺(tái)如何從單一的理性貨架導(dǎo)購(gòu)到豐富的感性內(nèi)容引導(dǎo)，從單一的滿足商品剛需到增加情感因素和人文關(guān)懷？1.0 通過(guò)差異化體驗(yàn)升級(jí)拉近與微信消費(fèi)者的距離，2.0 我們依然選擇從用戶視角出發(fā)，將小程序二樓作為創(chuàng)新試驗(yàn)田，嘗試用更內(nèi)容化娛樂(lè)化的方式與用戶建立聯(lián)系；我們想要京東不再那么"一本正經(jīng)"，而是以一種有趣的姿態(tài)讓用戶在娛樂(lè)中完成購(gòu)物初體驗(yàn)。

依托于微信小程序二樓開(kāi)放能力，區(qū)別于常規(guī)瀏覽動(dòng)線，我們以逆向思維在頁(yè)面頂部開(kāi)拓一個(gè)能與用戶深度交流的二樓娛樂(lè)陣地。通過(guò)首頁(yè)娛樂(lè)任意門引發(fā)用戶好奇心自發(fā)下拉，進(jìn)入我們精心設(shè)計(jì)的神秘好玩世界；再以視頻化&游戲化&社交化等好玩有趣的內(nèi)容，并搭配微信即時(shí)打款，鎖定用戶進(jìn)入后的黃金 5 秒注意力，循序漸進(jìn)的通過(guò)傳統(tǒng)電商權(quán)益牽引用戶進(jìn)入電商流程，從而鏈接小程序新消費(fèi)場(chǎng)景。

觸達(dá)：傳遞娛樂(lè)屬性，強(qiáng)化好玩有趣心智

在霸屏下拉入口的設(shè)計(jì)中，秉承意向性及情緒化表達(dá)的設(shè)計(jì)原則，基于泛娛樂(lè)化關(guān)鍵詞映射，打破京購(gòu)小程序平穩(wěn)的主流色系，用高飽和反差對(duì)比色形成視覺(jué)沖擊；以輕擬物風(fēng)深入構(gòu)建元素細(xì)節(jié)呈現(xiàn)，盡可能塑造元素中的空間、體積、光源等復(fù)雜的物理表現(xiàn)，增加界面的質(zhì)感厚度和縱深感，整體炫彩動(dòng)感，使二樓好玩基調(diào)拉滿，給用戶煥然一新的直觀感受。

吸引：突破認(rèn)知壁壘，貼近用戶真實(shí)生活

契合內(nèi)容表達(dá)的設(shè)計(jì)風(fēng)格探索

小程序二樓如何突破認(rèn)知壁壘吸引用戶停留，我們進(jìn)行了前瞻性的泛娛樂(lè)化內(nèi)容探索。在內(nèi)容呈現(xiàn)上，短視頻以更加輕松直觀的表達(dá)和更廣泛的用戶接受度來(lái)吸引用戶持續(xù)停留；小游戲以反套路低門檻易上手的魔性玩法來(lái)獲得用戶投入精力增加粘性；社交互動(dòng)以抓住目標(biāo)用戶正能量相親相愛(ài)的特質(zhì)來(lái)刺激用戶病毒式傳播。

1.0 我們建立起的審美是一種對(duì)秩序、精致美的追求，2.0 需要更多元化的審美打亂設(shè)計(jì)的秩序，以一種更為感性的設(shè)計(jì)方式來(lái)傳遞調(diào)性，貼近偶發(fā)用戶真實(shí)生活；我們根據(jù)內(nèi)容特色嘗試?yán)?quot;新丑風(fēng)"、土味暴力美學(xué)風(fēng)、美女封面老頭樂(lè)等設(shè)計(jì)風(fēng)格讓視覺(jué)表現(xiàn)陷入"百家爭(zhēng)鳴"的局面。

激勵(lì)設(shè)計(jì)呼應(yīng)現(xiàn)實(shí)場(chǎng)景，激發(fā)用戶體驗(yàn)爽感

激勵(lì)機(jī)制作為吸引用戶的有效手段，嘗試用虛擬設(shè)計(jì)映射實(shí)體的手法來(lái)與現(xiàn)實(shí)場(chǎng)景呼應(yīng)，拉滿體驗(yàn)爽感從而建立與用戶的情感共鳴，讓小程序二樓走出一條"別樣花路"。

把生活中的記憶通過(guò)夸張的動(dòng)效方式加入到激勵(lì)設(shè)計(jì)的體驗(yàn)鏈路中，通過(guò)動(dòng)效設(shè)計(jì)來(lái)引導(dǎo)用戶情緒，強(qiáng)化喜悅感知；最終經(jīng)過(guò)反復(fù)調(diào)試，現(xiàn)金設(shè)計(jì)復(fù)刻了 Money 撲面而來(lái)的驚喜動(dòng)效。

有了現(xiàn)金動(dòng)效的打樣，紅包的動(dòng)效設(shè)計(jì)也就順利很多。

轉(zhuǎn)化：牽引用戶軟著陸電商環(huán)境

當(dāng)用戶被吸引后，在此階段使用簡(jiǎn)單直接的傳統(tǒng)電商權(quán)益逐步牽引用戶進(jìn)入電商流程；至此通過(guò)整套動(dòng)線，讓這些偶發(fā)閑逛用戶發(fā)現(xiàn)好玩有趣不一樣的京東。

寫在最后

在微信生態(tài)環(huán)境下京購(gòu)小程序匯聚了形形色色的用戶，他們可能是忙忙碌碌的打工人、有錢有閑的小鎮(zhèn)青年、歲月靜好的大爺大媽…；他們帶著獨(dú)特的生活氣息來(lái)到這，很有幸為他們呈現(xiàn)不一樣的京東；希望每一個(gè)來(lái)到京購(gòu)小程序的用戶都可以感受到知心、省心和開(kāi)心。

作者：JellyDesign