新東方文旅小程序用戶體驗(yàn)界面設(shè)計(jì)優(yōu)化
發(fā)表于：
01
項(xiàng)目背景
新東方作為國內(nèi)教育行業(yè)頭部企業(yè)，近幾年以新東方文旅作為突破口進(jìn)軍旅游行業(yè)，為了給用戶提供更加方便、個(gè)性化的旅游服務(wù)，新東方小程序應(yīng)運(yùn)而生。新東方文旅小程序經(jīng)過前期的研發(fā)上線，在UI設(shè)計(jì)方面并沒有達(dá)到預(yù)期效果，隨著業(yè)務(wù)的開展需要總體的升級(jí)優(yōu)化，進(jìn)而找到我們蘭亭妙微設(shè)計(jì)公司希望提供咨詢建議。
新東方文旅的目標(biāo)用戶從熱愛文化和旅游的老年人，逐步轉(zhuǎn)變?yōu)橐郧嗌倌隇橹鳎夏耆巳后w為輔。蘭亭妙微以打造有文化、有深度、體驗(yàn)更好的旅游產(chǎn)品為目標(biāo)，通過前期的競品分析、用戶畫像、情緒版等設(shè)計(jì)方式，結(jié)合目前開展的業(yè)務(wù)方向，使文旅APP的設(shè)計(jì)更加美觀、有趣、友好，提高品牌影響力和業(yè)務(wù)轉(zhuǎn)化率。
02
項(xiàng)目概述
產(chǎn)品定位
新東方文旅的產(chǎn)品定位是為用戶提供高品質(zhì)、有文化內(nèi)涵的旅游產(chǎn)品和服務(wù)，結(jié)合新東方教育資源的優(yōu)勢(shì)，打造獨(dú)特的文旅體驗(yàn)，讓旅游不僅僅是觀光，更是一次心靈的成長和文化的探索。
目標(biāo)用戶
新東方文旅的目標(biāo)用戶由于企業(yè)戰(zhàn)略的變化，由原來的熱愛旅游和文化的老年人，轉(zhuǎn)變?yōu)橐郧嗌倌暧螌W(xué)為主要賣點(diǎn)的青少年群體，同時(shí)也涵蓋老年群體，目標(biāo)用戶覆蓋范圍更廣。
設(shè)計(jì)風(fēng)格
前期設(shè)計(jì)第一輪的兩個(gè)方案，方案一是以紅色為主的更具特點(diǎn)的電商風(fēng)格，方案二是采用文化屬性與電商風(fēng)格的結(jié)合，第二輪的方案三是卡通風(fēng)格，對(duì)功能架構(gòu)進(jìn)行了調(diào)整，更加獨(dú)特、更具創(chuàng)意與年輕化。
03
第一次設(shè)計(jì)的方案
設(shè)計(jì)前
設(shè)計(jì)后
在調(diào)研中發(fā)現(xiàn)存在的問題有：
運(yùn)營氛圍弱、品牌基因弱、風(fēng)格不統(tǒng)一，無創(chuàng)意特色、圖標(biāo)、文字、層級(jí)等視覺設(shè)計(jì)較弱，體驗(yàn)較弱、懸浮窗過多，干擾用戶，交互效率低、頁面元素、交互模式不一致，用戶學(xué)習(xí)成本較高。
方案設(shè)計(jì)
但根據(jù)客戶第一輪溝通時(shí)的要求，設(shè)計(jì)方案在功能布局和布局上不需要調(diào)整，所以重點(diǎn)放在提升美觀度上，在結(jié)構(gòu)間距，字體、圖標(biāo)大小，圖片、圖標(biāo)等元素尺寸等方面進(jìn)行優(yōu)化。
頂部背景+搜索區(qū)：品牌信任感和專業(yè)度傳達(dá)，暖色輕背景營造氛圍，明確的交互提示。
膠囊廣告：符合電商、直播行業(yè)特點(diǎn)，營造營銷氛圍，調(diào)整尺寸，提升屏效比
金剛區(qū)：差異化、個(gè)性化、暖色電商感
熱賣項(xiàng)目區(qū)：放大圖片，清洗展示圖片信息內(nèi)容，每屏一個(gè)視覺焦點(diǎn)，每屏一個(gè)主推提示點(diǎn)。卡片視覺上符合視覺舒適比例，
產(chǎn)品區(qū)：利益點(diǎn)提取，信息層級(jí)邏輯調(diào)整，層次清晰，主次明了，吸引用戶點(diǎn)擊。參考電商產(chǎn)品瀑布流形式，增加視覺休息區(qū)，減少長瀑布流帶來的視覺負(fù)擔(dān)。
主風(fēng)格：新設(shè)計(jì)采用logo中的紅色作為主色，符合電商產(chǎn)品的視覺特點(diǎn)，圖標(biāo)采用線面結(jié)合的設(shè)計(jì)手法，更具獨(dú)特性，整體界面電商氛圍濃厚，更利于業(yè)務(wù)目標(biāo)的達(dá)成。
總結(jié)
04
第二次設(shè)計(jì)的方案
方案1
此方案在第一屏加在：為什么選擇新東方文旅？品牌介紹和宣傳以及六個(gè)重點(diǎn)欄目。下方欄目形式為大圖片通欄+文字，以美景吸引用戶興趣。
方案2
此方案第一屏增加了當(dāng)季旅行的特色索引欄目和課本里的中國特點(diǎn)欄目，與抖音中的視頻資源高效結(jié)合，契合初高中學(xué)生的需求。
新方案調(diào)整目標(biāo)
第二次提案，客戶方總監(jiān)提出要大膽發(fā)揮，不必拘泥于現(xiàn)有產(chǎn)品功能布局。所以這次提案更加的年輕、個(gè)性有創(chuàng)意，采用手繪、撕紙紋理、拼貼、卡通等設(shè)計(jì)及插畫手法
結(jié)構(gòu)原型調(diào)整
方案一布局采用長banner圖，打破常規(guī)banner尺寸，更具沖擊力及創(chuàng)新觀感，鑲嵌圓形搜索形狀，整體更加自由、個(gè)性。增加了「為什么選擇新東方文旅」，增強(qiáng)品牌感以及用戶信任感。推廣模塊分為：按目的地、按旅游屬性，兩個(gè)方向進(jìn)行模塊劃分，避免用戶認(rèn)知混亂
方案二通過時(shí)間維度分類主推產(chǎn)品,高效利用首屏；課本里的中國，與抖音熱賣產(chǎn)品聯(lián)動(dòng)，快速吸引為孩子尋找合適產(chǎn)品的用戶，也方便引流來的用戶快速找到想要參與的活動(dòng)。增加了「廣播」，放置熱門內(nèi)容、主推活動(dòng)等。「趣玩兒人氣榜」：產(chǎn)品展示區(qū)，按用戶感興趣的、或最近最熱的旅游熱點(diǎn)進(jìn)行分類推廣。「熱門話題」：功能與“新東方文旅，讓孩子見識(shí)不凡”類似，更加自由開放，用戶互動(dòng)性更強(qiáng)。最后是為其他平臺(tái)引流模塊。
視覺符號(hào)提取
根據(jù)logo以及文化、旅行的含義，我們從logo中提取了以毛筆筆觸為基礎(chǔ)的以下兩個(gè)視覺符號(hào)
過程嘗試及應(yīng)用
