2020年上半年我們對京東國際頻道進行了品牌視覺的全新升級,希望通過品牌強化及體驗升級兩個方向實現加強正品心智,提升頻道訪問量,品牌強化的業務目標。

友商案例分析:

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

項目背景

京東國際頻道流量較低,用戶對國際品牌尚未形成正品心智和購買習慣。2020年為了更好的承接更多來自黃金流程和全站的流量,為周年慶和618提供更豐富的運營支持,需要對頻道進行改版。

1. 舊版頁面

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

2. 競品分析

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

3. 目標用戶

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

“ 設計機會點 ”

通過用研報告我們發現,京東國際的目標用戶群中,女性用戶占多數,結合所收集到的相關競品信息,因此在與業務產品溝通中設計側提出可更多關注女性,考慮女性用戶需求,以美妝、個護、食品、母嬰和時尚為主 ;并且在整體的頻道設計風格中需關注年輕時尚且追逐品質化的傾向,升級整個頻道的視覺調性。

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

設計探索

1. 設計定位

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

2. 品牌關鍵詞探索

在設計探索之初,我們召集了團隊內設計師共同進行了頭腦風暴。暢聊了每個人心目中所理解的“國際”感的產品,以及心目中可用簡單的詞匯或圖形化描述的相關國際元素。 此處感謝@黃松偉老師給予的設計指導~

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

3. 品牌關鍵詞提取

通過產品定位分析,結合頭腦風暴中大家碰撞出的靈感“碎片”,我們最終提煉了以下幾個關鍵詞:

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

4. 根據關鍵詞探索衍生情緒圖

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

設計目標

在舊版分析中也提到,頻道的整體設計風格缺乏品牌調性,缺少可以讓用戶記憶的品牌元素,無法建立對京東國際的品牌認知;并且視覺信息層級混亂,設計規范性差,設計溝通維護成本高。

結合前期對用戶及競品的分析,以及一系列設計的探索,因此我們確定將從「品牌強化」及「體驗升級」兩個方向進行京東國際頻道的品牌視覺全新升級,實現加強正品心智,提升頻道訪問量,品牌強化的業務目標。

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

1. 品牌符號 / SYMBOL

在整個京東國際品牌塑造的過程中,我們一直在思考如何創建京東國際頻道專屬的品牌符號?并為此邀請了組內的所有設計師進行了多輪腦暴及圖形的繪制和評選。

這部分也是整個品牌升級過程中的設計挑戰,推翻現有設計是一件具有風險的事情,因為原先的設計元素已具備一定的識別度;考慮到整個品牌元素的翻新對用戶剛剛建立的認知度影響,這部分內容仍在持續推進中

整個過程中總共腦暴產出100+的品牌符號,也感謝在這過程中提供腦細胞的大家~

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

最終,在向頻道產品及業務團隊溝通時分別輸出了兩個方向的提案:

2. 色彩體系 / COLOR

品牌色 “紫”氣“東”來

京東國際的品牌色在18年及19年分別因品牌名稱的變換進行過重新定義;18年的品牌色結合當時的海豚形象整體偏粉嫩,19年的品牌色偏深紅。兩者均區別于京東app主站的品牌色,但業務反饋女性化特征過于顯性,且深紅色的感知會顯得沉穩老氣。

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

基于初期對京東國際腦暴而得的關鍵詞,以及相關的情緒圖,結合京東國際的用戶畫像(以一二線城市,高學歷高收入追求品質生活女性用戶為主),對比色彩情緒,我們最終將京東國際的品牌色更新為偏中性更品質和優雅的紫色。在視覺細節上,將原先版本的飽和度提高,增強了色彩的對比,并且基于品牌色確定衍生色,用于后續相關的延展使用。

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

輔助色 “豐富”斑斕

每一個顏色對應的漸變色,可用于圖標及各品類在界面上的呈現,引導用戶識別,力求打造輕質感親和自然的精致品質。

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

3. 字體體系 / FONT

舊版的首頁中雖用了京東朗正體作為樓層標題,但由于該字體字形的緣故,在重復出現時會顯得標題小且不易識別;新版首頁中保留了頻道logo中母品牌字體基因,將各樓層標題調整為蘋方,此字體是移動端常用的文字,棱角分明,干凈利落,具有品質感。

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

在文字層級梯度上用拉開字重及字號比例來提高內容的可讀性,文字用色部分在原有基礎上提高了純度,整體界面重點更突出,使層次更強烈,更快吸引眼球。

4. 柵格體系 / GRID

舊版頁面模塊布局割裂, 屏效低,上下左右的間距不統一,視角噪音大,缺乏產品調性,造成產品缺少品質感,從而也降低了用戶的信任度。本次的品牌視覺升級重新定義了柵格系統,希望通過骨骼重構賦予各個視覺元素以秩序感,在提升坪效的同時,使頁面布局更加統一。

圓角卡片

在走查完舊版視覺布局以及對當下流行的UI風格調研后,我們將各模塊間的間距進行統一,采用更圓潤的圓角處理。更圓潤的圓角能夠體現柔和及年輕化,與當下硬件設計靠齊。

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

結構透氣

通過將各樓層從內容上進行重組,削弱頁面的分割,使層級上更加清晰,同時增加空間的利用率,在大卡片部分統一橫向及縱向的間距,在小卡片時收攏間距,使之更為整體性。在保證視覺呼吸感的同時,提升整體瀏覽順暢度。減少界面中過于復雜的裝飾元素,使頻道更輕量化、精致感。

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

5. 圖標體系 / ICON

百寶箱圖標

舊版的百寶箱圖標均為異性擬物風,如需替換設計成本高,難以實現規范化;且業務類圖標及品類圖片區分不明顯,無法從視覺上直觀辨別。新版在規范統一背景色值后做統一處理,并選用了實物圖片,品類屬性一目了然。

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

底部導航圖標

舊版底部導航圖標均為直角處理,會顯得生硬,且部分圖標的語義并不符合。

新版圖標采取斷點式風格,在轉角處做圓潤倒角處理,與主站首頁風格保持統一的前提下也延續了頻道的整體調性。

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

6. 規范體系 / GUIDELINE

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

大廠是如何做改版的?來看京東國際頻道品牌升級的實戰案例!

收藏 319
點贊 93

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。