大廠案例 | 京東超級(jí)體驗(yàn)店小程序升級(jí)——到家與到店的用戶(hù)體驗(yàn)聚焦

▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來(lái)到專(zhuān)業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)

轉(zhuǎn)自：京東設(shè)計(jì)中心JDC

編輯：張夢(mèng)如

共 2989 字 20 圖  預(yù)計(jì)閱讀 8 分鐘

01. 項(xiàng)目背景

京東電器超級(jí)體驗(yàn)店（以下簡(jiǎn)稱(chēng)：超體店），是京東自營(yíng)的大型電子消費(fèi)主題購(gòu)物中心。通過(guò)品牌賦能、科技賦能、供應(yīng)鏈賦能、體驗(yàn)賦能，打通多業(yè)態(tài)融合和線(xiàn)上線(xiàn)下融合。
隨著超體店在重慶與合肥的開(kāi)業(yè)，業(yè)務(wù)形態(tài)也正在進(jìn)行逐步升級(jí)。

（超體店門(mén)店全面升級(jí)）

根據(jù)目前超體項(xiàng)目整體升級(jí)計(jì)劃，超體小程序的迭代也是升級(jí)過(guò)程的重要一環(huán)。
超體小程序從 2019 年起進(jìn)行過(guò) 1 次大的改進(jìn)，期間也承接了頁(yè)面功能的小迭代，但根據(jù)業(yè)務(wù)訴求，當(dāng)前小程序難以承載升級(jí)后超體店的用戶(hù)需求，使用體驗(yàn)有待提升。

02. 明確目標(biāo)與制定設(shè)計(jì)策略

改版迭代類(lèi)項(xiàng)目，核心思路應(yīng)該是先定義要解決什么問(wèn)題，然后才是如何解決。因此，在產(chǎn)出具體方案之前，盡量弄清這些事情：

• 改版的背景和動(dòng)機(jī)；
• 產(chǎn)品現(xiàn)狀；
• 用戶(hù)情況；

核心在于掌握當(dāng)前產(chǎn)品方向，以及能為迭代提供決策的核心信息

改版動(dòng)機(jī)：
超體小程序的核心意義在于提高用戶(hù)線(xiàn)下逛購(gòu)的體驗(yàn)，以及超體商品及服務(wù)的上門(mén)。隨著超體店的整體升級(jí)，小程序的用戶(hù)體驗(yàn)也有待改善。

產(chǎn)品定位：
首先，我們對(duì)超體小程序 2.0 當(dāng)前的整體框架及頁(yè)面進(jìn)行了分析

（超體小程序2.0框架與頁(yè)面）

隨后，我們梳理了用戶(hù)到家與到店購(gòu)物場(chǎng)景的各個(gè)流程，并思考當(dāng)前小程序 2.0 是否能為用戶(hù)的線(xiàn)下逛購(gòu)及線(xiàn)上購(gòu)物提供更好的體驗(yàn)。

（到店場(chǎng)景購(gòu)物流程）

最終總結(jié)出目前 2.0 小程序存在的問(wèn)題：

• 小程序整體：購(gòu)物場(chǎng)景區(qū)分不明顯，功能無(wú)法滿(mǎn)足多場(chǎng)景用戶(hù)需求，不符合購(gòu)物動(dòng)線(xiàn)
• 線(xiàn)上場(chǎng)景：無(wú)自身特色，可替代性強(qiáng)
• 線(xiàn)下場(chǎng)景：線(xiàn)下使用場(chǎng)景無(wú)法貼合用戶(hù)線(xiàn)下逛購(gòu)動(dòng)線(xiàn)，實(shí)用性較差

因此本次 3.0 改版的核心任務(wù)在于

• 到家與到店場(chǎng)景的區(qū)分
• 到家與到店的核心場(chǎng)景的需求解決
• 視覺(jué)元素的改善

我們也對(duì)超體小程序進(jìn)行了重新的定位：
創(chuàng)新的門(mén)店零售工具，滿(mǎn)足到店到家多場(chǎng)景購(gòu)物

 

03. 明確設(shè)計(jì)內(nèi)容及頁(yè)面布局

用戶(hù)畫(huà)像：
超體業(yè)務(wù)的用研側(cè)為我們提供了超體消費(fèi)者的用戶(hù)畫(huà)像；用戶(hù)構(gòu)成主要是以中年家庭群體為主，該類(lèi)用戶(hù)非網(wǎng)絡(luò)原住民，也更篤信“眼見(jiàn)為實(shí)”；年輕群體則是我們的潛在用戶(hù)，他們精通熟悉各網(wǎng)絡(luò)產(chǎn)品，追求新鮮新潮的體驗(yàn)。

（超體用戶(hù)畫(huà)像）

因此在頁(yè)面的設(shè)計(jì)及布局上，我們需要保持整體內(nèi)容的輕量化，保證界面的簡(jiǎn)潔，重點(diǎn)信息的突出，用戶(hù)不需要過(guò)多的學(xué)習(xí)成本即可操作。我們還與超體的業(yè)務(wù)方溝通，希望能在開(kāi)業(yè)后，通過(guò)一些創(chuàng)新的營(yíng)銷(xiāo)手段和有趣的線(xiàn)下活動(dòng)，去吸引潛在的年輕群體來(lái)超體店進(jìn)行逛購(gòu)。

（頁(yè)面設(shè)計(jì)方向）

用戶(hù)核心場(chǎng)景分析：
小程序 2.0 對(duì)于用戶(hù)使用場(chǎng)景的定義較為模糊，即無(wú)法解決用戶(hù)為什么需要使用超體小程序？這個(gè)問(wèn)題的答案就在于：

• 弄清用戶(hù)的核心場(chǎng)景
• 如何幫助用戶(hù)解決核心場(chǎng)景需求

首先，我們是從大數(shù)層面，對(duì)于用戶(hù)整體的數(shù)據(jù)進(jìn)行了搜集與分析。根據(jù)數(shù)據(jù)結(jié)果，到店用戶(hù)會(huì)更在意線(xiàn)上的逛購(gòu)體驗(yàn)；而對(duì)于到家用戶(hù)而言，除了關(guān)注優(yōu)惠外，線(xiàn)下到店體驗(yàn)、在家線(xiàn)上下單已經(jīng)成為多數(shù)用戶(hù)趨勢(shì)。

（用戶(hù)數(shù)據(jù)搜集）

隨后我們也和業(yè)務(wù)方溝通，整理了到家與到店用戶(hù)在逛購(gòu)的行為流程，總結(jié)出用戶(hù)的核心場(chǎng)景。
對(duì)于到店用戶(hù)其核心場(chǎng)景在于：

• 掃碼購(gòu)：即線(xiàn)下逛購(gòu)挑選心儀商品，隨后對(duì)商品進(jìn)行掃碼，線(xiàn)上下單購(gòu)買(mǎi)。

對(duì)于到家用戶(hù)，其核心場(chǎng)景在于：

• 線(xiàn)下到店體驗(yàn)、在家線(xiàn)上下單

競(jìng)品分析：
在具體方案設(shè)計(jì)前，我們也帶著設(shè)計(jì)目標(biāo)去對(duì)市面上的競(jìng)品進(jìn)行分析，梳理已被市場(chǎng)驗(yàn)證的頁(yè)面結(jié)構(gòu)、場(chǎng)景情況及異同點(diǎn)，思考是否有可借鑒意義。

（線(xiàn)下逛店競(jìng)品分析）

（到家頁(yè)面競(jìng)品參考）

綜合總結(jié)下來(lái)，到店頁(yè)面的核心在于保證頁(yè)面布局清晰的前提下，首先滿(mǎn)足用戶(hù)的逛店的核心需求。而到家頁(yè)面的核心在于突出超體特色服務(wù)及 2 小時(shí)極速達(dá)權(quán)益，保證產(chǎn)品的差異性和獨(dú)特性。
在總結(jié)完前期的分析與調(diào)研后，我們根據(jù)業(yè)務(wù)側(cè)給到的 demo 進(jìn)行調(diào)整，定義用戶(hù)核心訴求及，對(duì)信息的優(yōu)先級(jí)也重新進(jìn)行排列。

（小程序3.0首頁(yè)demo）

04. 設(shè)計(jì)呈現(xiàn)及內(nèi)容表達(dá)

交互方案：

1.用戶(hù)核心需求的解決

用戶(hù)的精力是有限的，用戶(hù)使用某個(gè)產(chǎn)品，或進(jìn)入某個(gè)頁(yè)面，必然帶著其核心的訴求。而我們?cè)陧?yè)面的信息層級(jí)、功能羅列上，也必然首先保證其核心需求解決的良好體驗(yàn)。
比如，在到店的情況下，用戶(hù)更多的時(shí)間精力是放在線(xiàn)下逛購(gòu)。在這種情況下，他們使用小程序的核心場(chǎng)景，便是在體驗(yàn)完心儀的產(chǎn)品后，進(jìn)行掃碼，針對(duì)該商品更多詳情或直接進(jìn)行加購(gòu)。因此我們就將“掃碼購(gòu)”這一核心功能置前，并針對(duì)其不同狀態(tài)進(jìn)行了不同的樣式設(shè)計(jì)。
在家的場(chǎng)景下，用戶(hù)有更多的時(shí)間進(jìn)行線(xiàn)上瀏覽，因此我們將更多的優(yōu)惠內(nèi)容放置首屏。同時(shí)，“線(xiàn)下體驗(yàn)后，在家進(jìn)行線(xiàn)上下單”已成為當(dāng)前用戶(hù)的多數(shù)選擇，我們也將用戶(hù)的線(xiàn)下體驗(yàn)足跡與到家內(nèi)容相結(jié)合，并將該模塊前置。

2.特色內(nèi)容的突出與區(qū)分

根據(jù)超體業(yè)務(wù)形態(tài)，當(dāng)前有許多吸引消費(fèi)者的特色內(nèi)容，需要進(jìn)行突出與前置。
比如，在到家首頁(yè)當(dāng)中，我們對(duì)超體特色免費(fèi)服務(wù)突出，并將優(yōu)惠內(nèi)容的前置。
在到店頁(yè)面中，根據(jù)業(yè)務(wù)反饋，超體店線(xiàn)下的活動(dòng)體驗(yàn)非常受到消費(fèi)者的歡迎。因此我們也梳理了活動(dòng)預(yù)約的邏輯，將該模塊放置在首屏，并根據(jù)用戶(hù)預(yù)約狀態(tài)進(jìn)行不同展示，保證用戶(hù)線(xiàn)上預(yù)約，線(xiàn)下活動(dòng)參與的良好體驗(yàn)。

3.最合適的設(shè)計(jì)樣式選擇

超級(jí)體驗(yàn)店的業(yè)務(wù)是線(xiàn)上與線(xiàn)下的結(jié)合，即包括了為用戶(hù)配送到家的內(nèi)容，也涉及線(xiàn)下到店的體驗(yàn)，因此其涉及的信息及場(chǎng)景較多。在設(shè)計(jì)的過(guò)程中，我們也在不斷思考和對(duì)比，哪些樣式才是適合，最能幫助用戶(hù)快速掌握到所需的核心信息。

視覺(jué)方案：

1. 解析項(xiàng)目需求：

首先我們對(duì)項(xiàng)目進(jìn)行氛圍訴求拆解，作為京東電器小程序，首先需要突出品牌印記，加強(qiáng)用戶(hù)京東品牌屬性認(rèn)知，使用京東背書(shū)加強(qiáng)用戶(hù)的認(rèn)同感。
之后再對(duì)項(xiàng)目目標(biāo)進(jìn)行整理，本次業(yè)務(wù)需求是超體品牌升級(jí)后的視覺(jué)升級(jí)迭代，希望可以用簡(jiǎn)潔的視覺(jué)語(yǔ)言突出功能信息符合用戶(hù)訴求，引導(dǎo)用戶(hù)線(xiàn)上線(xiàn)下全流程操作。

整體項(xiàng)目 的目標(biāo)定位是：加強(qiáng)品牌印記、提升品牌形象

2. 視覺(jué)方向推導(dǎo)：

首屏表現(xiàn)：清晰簡(jiǎn)潔的視覺(jué)風(fēng)格，突出功能信息符合用戶(hù)使用訴求，強(qiáng)調(diào)品牌專(zhuān)業(yè)度，保證頁(yè)面風(fēng)格清爽簡(jiǎn)潔，引導(dǎo)用戶(hù)線(xiàn)上線(xiàn)下全流程操作。

視覺(jué)符號(hào)：運(yùn)用品牌凸顯作為主視覺(jué)符號(hào)，強(qiáng)調(diào)頁(yè)面品牌調(diào)性，并結(jié)合主圖形的延展圖形，滿(mǎn)足不同場(chǎng)景訴求。

樓層表現(xiàn)：采用卡片與商品的結(jié)合，突出主推活動(dòng)模塊，大色塊與彌撒投影的結(jié)合，點(diǎn)綴年輕科技感

配色方向：采用京東mall品牌色為主色，添加臨近輔助色，強(qiáng)化品牌感

05. 頁(yè)面展示

目前隨著超體業(yè)務(wù)的升級(jí)，超體的小程序也仍舊在不斷地優(yōu)化迭代中，不斷地改善用戶(hù)體驗(yàn)，為消費(fèi)者創(chuàng)造良好的購(gòu)物體驗(yàn)。

—  The end  —

?? 原創(chuàng)文章精選??

如何評(píng)估設(shè)計(jì)質(zhì)量，提升設(shè)計(jì)技能

你常常忽略的 7 個(gè)具有破壞性的體驗(yàn)鴻溝

一篇文章告訴你服務(wù)設(shè)計(jì)到底能做什么？

看 Apple CarPlay 如何提升駕駛安全和駕駛體驗(yàn)

游戲新手指導(dǎo)怎么做？一起看看《對(duì)馬島之魂》如何打造初次對(duì)抗體驗(yàn)

制定 “小目標(biāo)”，了解產(chǎn)品管理中的結(jié)構(gòu)化思維

35+ 的 Windows 系統(tǒng)到底有什么了不起？細(xì)數(shù)系統(tǒng)界面設(shè)計(jì)的演變

導(dǎo)師與學(xué)員的高效交流 APP 設(shè)計(jì) —— Lightship

后疫情時(shí)代，如何通過(guò)服務(wù)設(shè)計(jì)恢復(fù)真正的人際互動(dòng)？

?? 我們一起聊設(shè)計(jì) ???♂?

高質(zhì)量，學(xué)設(shè)計(jì)行交流微信群

期待與更多優(yōu)秀用戶(hù)體驗(yàn)設(shè)計(jì)師一起成長(zhǎng)

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時(shí)充電。分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí)，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲(chóng)微信號(hào)【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號(hào)三分設(shè)的粉絲）