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