設計師就是只會設計版面會畫圖的嗎？答案是否定的，現在的設計師需要懂點數據，那麼為什麼還要看數據？從京東雲年終採購季項目案例，京東雲設計團隊是如何運用數據助力產品設計的呢？現在來聊聊…
在日常工作中，我們是不是會遇到這樣的場景
實際上，這種情況可能每天都在發生，大家對定位，用戶，審美等看法不一，最終靠「個人感覺」決定。不僅降低效率，對產品價值提升更毫無幫助，這時就需要數據為你的設計作支撐。
大家都知道 UED（User Experience Design）用戶體驗設計團隊，主張「以用戶為中心的設計」，那麼什麼是 GD 呢？GD（GrowthDesign）增長設計，主張「以用戶為中心，以增長為導向」。GrowthDesign
而京東雲設計團隊也在每一次的項目案例當中快速成長。今天給大家分享我們向GD轉型的一個案例 —— 年終採購季大促，聊一聊數據如何助力產品設計。
項目背景
電商必不可少的環節，那就是「大促」，而京東雲的年終採購季就是年度大促。此次項目由京東雲設計團隊來支持。年終採購季的目標受眾是京東雲用戶及拉新、下沉用戶。對於京東雲來說，2019是快速成長的一年，因此我們的運營活動也要配合起來，打造最具產業屬性的智能雲。全面提升數字化轉型的效益和效率，拉動新用戶，對外擴大影響力，對內進行設計沉澱。
本次的年度大促活動分為三個階段，分別是：點亮科技-助創業起航（預熱期）、點亮生活-助零售創新（熱賣期）、點亮夢想-助力2020（返場期）。每個環節的數據也是下一步做的更好的基石，環環相扣，步步促進。
視覺維度
工欲善其事，必先利其器。尋找和制定一個合理全面的618方案思路，是提高效率和準確率的關鍵。經過設計團隊腦暴，我們梳理制定了4個方案步驟：
- 設計維度定義；
- 尋找切入點；
- 符號抽象；
- 輸出方案。
我們將根據這條主線來抽絲剝繭，分享在年終採購季項目中的思考。
△ 方案步驟
大促設計開始之前找准設計方向，不在迷宮裡原地打轉很重要。在經過不同設計師之間的頭腦風暴，結合運營訴求，整個活動將圍繞 #科技感 #衝擊力 #空間感 三個要點思維發散。
△ Brain storm
尋找切入點是創意關鍵，如何表現科技感，設計師需要做的，就是根據需求將「科技」這個詞結合自身產品屬性，通過視覺表現的方式呈現出來，讓用戶產生共鳴。搭建具有超未來科技感的空間模型，並在此基礎上加以動感的元素，為用戶營造高科技、強衝擊力、新奇又具有共鳴的視覺感受。
△ 尋找切入點
抽象化符號可以升華主題，根據我們推導出的切入點，視覺側聯想出了代碼符號和雲產品作為本次大促的視覺基礎圖形。</>、{}、@是一種計算符號，能給目標用戶帶來歸屬感，同時在整個構圖上保持著強透視空間感，加強畫面的衝擊力形成畫面縱深。
△ 抽象化符號
創意落地
1. 交互策略
活動頁的互動設計與產品的互動設計有許多相似之處，例如都需要明確此次活動/產品設計的目標，其次需要在設計上呈現信息層級，避免頁面信息堆積毫無主次。
針對「年終採購季」活動的信息進行拆解和整合，發現此次活動需要展現的信息包括：
- 活動標題；
- 活動時間 ；
- 產品/商品；
- 優惠/利益（折扣、秒殺、返京豆、抽獎）；
- 互動話題 ；
- 活動規則。
如何將以上信息合理地展現在頁面上，並讓用戶參與進來是此次設計的關鍵。
- 首先需要充分利用首屏展示核心信息。在一期、二期以及三期的活動頁中，將活動標題、活動時間等核心內容放置在首屏，同時為了給話題頁引流，在首屏中增加了互動話題入口。
- 其次將活動規則等次要內容放置在底部或者以摺疊的形式展示，減輕用戶視覺負擔。
- 最後則是需要突出活動優惠/利益，抓住用戶注意力，吸引用戶瀏覽、操作。
在三期的活動頁設計中，我們通過在產品列表中增加「消費返京豆」的標籤強調大促優惠，並在樓層標題中使用「低至」、「返利」等詞語直接告訴用戶利益點。
△ 互動設計概覽
2. 視覺策略
整個活動戰線較長，是全階段全鏈路的系列活動。活動的整體設計是京東雲設計團隊根據主視覺對大促進行後期創意延展。隨著時間的推移，整體頁面色彩由偏冷的藍紫變到偏暖的紅金越來越熱鬧，最後回歸偏冷的藍金。從色彩心理學理論上運用顏色持續為用戶提供新鮮感，避免視覺疲勞。背景採用縱深的太空艙模型，體現行業屬性的科技感。通過計算符號使參與用戶具有認同感，運用多彩的營銷元素體現衝擊力和活動氛圍。
△ 三個階段視覺概覽
在設計執行的過程中，發現頁面最後的整體高度過高，瀏覽起來的體驗並不是很好，為了解決這個問題，我們為頁面設計了3個導航，分別是頂導航，側導航和卡片式導航。其中卡片導航在首屏顯示，使用戶點擊進頁面第一時間能跳轉到自己感興趣的樓層。
頂導航和側導航均在頁面下滑至第二屏時開始顯示，頂導航顯示主要樓層，側導航顯示樓層內小分類，提升了用戶在尋找目標產品時的體驗度。
△ 導航樣式
數據驅動產品設計
在進行完創意落地後，我們需要尋找所做設計的價值所在，為什麼要做數據驅動的設計？原因很簡單，在項目開發過程中，設計師需要對設計方案負責。對設計方案的負責要求，既要對開始的設計依據負責，也要對最後的設計結果負責。這時候我們需要依靠某些指標去支撐設計依據，以及驗證設計結果。將活動按轉化路徑進行分解，通過對比每個轉換路徑節點的點擊率來評估活動的效果，為進一步提升轉化率提供參考。
挖掘核心數據價值，以客戶導向為中心。
Step 1. 通過挖掘數據以及業務導向獲得明確的設計目的
提高轉化率
CTR轉化率是指進行到第一步的用戶有多少順利進入了第二步。提高轉化率，最終目的就是業務增長。
拉動新用戶，提高用戶活躍度
京東雲雖然不是社交產品，但也需要拉動新用戶，提高用戶活躍度來增加用戶粘性。購買雲產品畢竟不是高頻活動，用戶基本上都是有購買需求時才回來網站看看，其他時候都不會想著打開或登錄網站。如果用戶跟平台的互動少了，當產品到期時可能會選擇退出轉到其他平台。
Step 2. 拆分指標
拆分指標就是把剛剛的第一步的目的拆分成具體可量化的指標，可以用多個指標來衡量一個目的。根據AARRR模型，本次活動我們拆分出了PV（頁面瀏覽量）、UV（獨立訪客人數）、VV（用戶訪問次數）、CTR（轉化率）新用戶訪問次數、跳出率、退出率、平均訪問時長這幾大類數據進行分析。
△ AARRR模型
Step3.制定方案並實施
首先我們對這3期活動上線第一周的數據做了一個對比分析。
相比於一期，雙十一二期的瀏覽量整體提升，三期稍微有些回落但整體表現好於一期，其原因是二期正值雙十一黃金期，流量在此期間達到峰值，其中值得關注的是在同等時間內，「雲產品」相關模塊點擊率有一定提升，「雲產品」豆腐塊導航點擊率提升五成，雲主機產品的購買按鈕點擊率提升範圍在二至三成內，因此在三期對雲主機樓層進行了優化，通過視覺和文案增強其突出性，打造出雲主機新手專區,將黃金位置的時間軸部分加入返京豆內容條，優化內容及配圖提高返京豆活動的點擊量，提煉精簡卡片部分，縮小高度，設計話題部分卡片提高活動互動量。突出新用戶雲主機樓層，促進新用戶轉化。
以下數據均為已處理的虛擬數據，但變化趨勢是真實的
△ 年中採購季數據對比
接著對數據層面表現較好的第二期進行具體分析，整理出雙十一單天數據，二期整體數據以及頁面模塊點擊量。
△ 頁面模塊點擊量
從數據層面反映出
- 新用戶訪問次數占整體UV量的近百分之八十，拉新促活的目標完成的不錯；
- 用戶對雲主機系列產品的關注程度很高, 單個產品最高pv占總pv量的約2成；
- 京東雲設計團隊提出設計的頂導航、豆腐塊導航設計，聚焦性與識別性強，點擊量整體較高，雲產品占總pv量約1.8成，UV數據也很不錯，證明此次導航的設計大大增強頁面瀏覽的便捷度；
- 新增大轉盤抽獎模塊點擊量也較高，pc量占約0.9成，設計時與產品模塊做區分，視覺上吸引、引導用戶進行點擊 。
總結
本次年終採購季活動頁面的設計，對我們來說，最大的收穫是可以從多角度去思考，以數據結果為落腳點，在產品策略和目標的基礎上，縱向反推設計思路與風格。反覆地推敲打磨，從而解決風格過時，轉化率低，頁面結構不合理等問題。
因此，作為一名理性的設計師，我認為設計就是在洞見的基礎上，通過觀察、分析數據，利用數據來助力產品和業務的成功。這是我們成長的重要階段，以目標為導向，用創新和美的方式，讓用戶獲得更好的體驗過程，從而驅動數據的增長。
無論是用數據指標做效果衡量，還是用數據指標進行問題判斷和原因鎖定，客觀公正的態度和科學的實驗方法都是最重要的。數據相關的知識體系非常複雜，甚至需要有專職的數據分析師或用戶研究員參與，本次文中列舉的是一些基礎的數據分析方法，還不太全面，以後JDCD與您共同探討數據分析。
最後
我們是JDCD ，好啦～聊完了這麼多的項目經驗，那麼本尊登場～
△ 努力的小姐姐（悄悄偷拍）
我們是JDCD——京東雲設計團隊，在這裡會給大家分享項目設計經驗，會分享設計技巧。關注我們一起探討學習進步吧～