京東超級體驗店小程序升級——到家與到店的用户體驗聚焦

語言: CN / TW / HK

項目背景
京東電器超級體驗店(以下簡稱:超體店), 是京東自營的大型電子消費主題購物中心。通過品牌賦能、科技賦能、供應鏈賦能、體驗賦能,打通多業態融合和線上線下融合。
隨着超體店在重慶與合肥的開業,業務形態也正在進行逐步升級。

(超體店門店全面升級)

根據目前超體項目整體升級計劃,超體小程序的迭代也是升級過程的重要一環。
超體小程序從2019年起進行過1次大的改進,期間也承接了頁面功能的小迭代,但根據業務訴求,當前小程序難以承載升級後超體店的用户需求,使用體驗有待提升。

Part1: 明確目標與制定設計策略
改版迭代類項目,核心思路應該是先定義要解決什麼問題,然後才是如何解決。因此,在產出具體方案之前,儘量弄清這些事情:

  • 改版的背景和動機;

  • 產品現狀;

  • 用户情況;

核心在於掌握當前產品方向,以及能為迭代提供決策的核心信息

改版動機:
超體小程序的核心意義在於提高 用户線下逛購的體驗 ,以及 超體商品及服務的上門 。隨着超體店的整體升級,小程序的用户體驗也有待改善。

產品定位:
首先,我們對超體小程序2.0當前的整體框架及頁面進行了分析

(超體小程序2.0框架與頁面)

隨後,我們梳理了用户到家與到店購物場景的各個流程,並思考當前小程序2.0是否能為用户的線下逛購及線上購物提供更好的體驗。

(到店場景購物流程)

最終總結出目前2.0小程序存在的問題:

  • 小程序整體:購物場景區分不明顯,功能無法滿足多場景用户需求,不符合購物動線

  • 線上場景:無自身特色,可替代性強

  • 線下場景:線下使用場景無法貼合用户線下逛購動線,實用性較差

因此本次3.0改版的核心任務在於

  • 到家與到店場景的區分

  • 到家與到店的核心場景的需求解決

  • 視覺元素的改善

我們也對超體小程序進行了重新的定位:
創新的門店零售工具,滿足 到店到家 多場景購物

Part 2: 明確設計內容及頁面佈局:
用户畫像:
超體業務的用研側為我們提供了超體消費者的用户畫像;用户構成主要是以中年家庭羣體為主,該類用户非網絡原住民,也更篤信“眼見為實”;年輕羣體則是我們的潛在用户,他們精通熟悉各網絡產品,追求新鮮新潮的體驗。

(超體用户畫像)

因此在頁面的設計及佈局上,我們需要保持整體內容的輕量化,保證界面的簡潔,重點信息的突出,用户不需要過多的學習成本即可操作。我們還與超體的業務方溝通,希望能在開業後,通過一些創新的營銷手段和有趣的線下活動,去吸引潛在的年輕羣體來超體店進行逛購。

(頁面設計方向)

用户核心場景分析:
小程序2.0對於用户使用場景的定義較為模糊,即無法解決用户為什麼需要使用超體小程序?這個問題的答案就在於:

  • 弄清用户的核心場景

  • 如何幫助用户解決核心場景需求

首先,我們是從大數層面,對於用户整體的數據進行了蒐集與分析。根據數據結果,到店用户會更在意線上的逛購體驗;而對於到家用户而言,除了關注優惠外,線下到店體驗、在家線上下單已經成為多數用户趨勢。

(用户數據蒐集)

隨後 我們也和業務方溝通,整理了到家與到店用户在逛購的行為流程,總結出用户的核心場景。

對於到店用户其核心場景在於:

  • 掃碼購 :即線下逛購挑選心儀商品,隨後對商品進行掃碼,線上下單購買。

對於到家用户,其核心場景在於:

  • 線下到店體驗、在家線上下單

競品分析:

在具體方案設計前,我們也帶着設計目標去對市面上的競品進行分析,梳理已被市場驗證的頁面結構、場景情況及異同點,思考是否有可借鑑意義。

(線下逛店競品分析)

(到家頁面競品參考)

綜合總結下來,到店頁面的核心在於保證頁面佈局清晰的前提下,首先滿足用户的逛店的核心需求。而到家頁面的核心在於突出超體特色服務及2小時極速達權益,保證產品的差異性和獨特性。
Demo確定:
在總結完前期的分析與調研後, 我們根據業務側給到的demo進行調整, 定義用户核心訴求及,對信息的優先級也重新進行排列。

(小程序3.0首頁demo)

Part 3:設計呈現及內容表達
交互方案:

1.用户核心需求的解決

用户的精力是有限的,用户使用某個產品,或進入某個頁面,必然帶着其核心的訴求。而我們在頁面的信息層級、功能羅列上,也必然首先保證其核心需求解決的良好體驗。


比如,在到店的情況下,用户更多的時間精力是放在線下逛購。在這種情況下,他們使用小程序的核心場景,便是在體驗完心儀的產品後,進行掃碼,針對該商品更多詳情或直接進行加購。因此我們就將 “掃碼購” 這一核心功能置前,並針對其不同狀態進行了不同的樣式設計。

在家的場景下,用户有更多的時間進行線上瀏覽,因此我們將更多的優惠內容放置首屏。同時, “線下體驗後,在家進行線上下單” 已成為當前用户的多數選擇,我們也將用户的線下體驗足跡與到家內容相結合,並將該模塊前置。

2.特色內容的突出與區分

根據超體業務形態,當前有許多吸引消費者的特色內容,需要進行突出與前置。
比如,在到家首頁當中,我們對 超體特色免費服務 突出,並將優惠內容的前置。
在到店頁面中,根據業務反饋,超體店 線下的活動體驗 非常受到消費者的歡迎。因此我們也梳理了活動預約的邏輯,將該模塊放置在首屏,並根據用户預約狀態進行不同展示,保證用户線上預約,線下活動參與的良好體驗。

3.最合適的設計樣式選擇

超級體驗店的業務是線上與線下的結合,即包括了為用户配送到家的內容,也涉及線下到店的體驗,因此其涉及的信息及場景較多。在設計的過程中,我們也在不斷思考和對比, 哪些樣式才是適合 ,最能幫助用户快速掌握到所需的核心信息。

視覺方案:

1. 解析項目需求:

首先我們對項目進行氛圍訴求拆解,作為京東電器小程序,首先需要 突出品牌印記 ,加強用户京東品牌屬性認知,使用京東背書加強用户的認同感。
之後再對項目目標進行整理,本次業務需求是超體品牌升級後的視覺升級迭代,希望可以用簡潔的視覺語言突出功能信息符合用户訴求,引導用户線上線下全流程操作。

整體項目 的目標定位是: 加強品牌印記、提升品牌形象

2.  視覺方向推導:

首屏表現:清晰簡潔的視覺風格,突出功能信息符合用户使用訴求,強調品牌專業度,保證頁面風格清爽簡潔,引導用户線上線下全流程操作。

視覺符號:運用品牌凸顯作為主視覺符號,強調頁面品牌調性,並結合主圖形的延展圖形,滿足不同場景訴求。

樓層表現:採用卡片與商品的結合,突出主推活動模塊,大色塊與彌撒投影的結合,點綴年輕科技感

配色方向:採用京東mall品牌色為主色,添加臨近輔助色,強化品牌感

Part 4:頁面展示:

目前隨着超體業務的升級,超體的小程序也仍舊在不斷地優化迭代中,不斷地改善用户體驗,為消費者創造良好的購物體驗。

以上,感謝閲讀。

感謝項目成員施羽、麗梅、雲林、成碩、西貝、丹妹、華康、紫薇、馨妍、的認真負責與辛苦付出,也感謝各位超體業務組的成員支持!