設計與思考?:駕校一點通 APP 5.0 改版設計回顧

4 評論 11087 瀏覽 50 收藏 13 分鐘

這次5.0版本改版的使命不僅要整體提升駕校一點通App的用戶體驗,也需要與行業內的其他產品形成差異。在改版期間,駕校一點通從App、PC、Wap端到品牌logo做了一系列體驗升級。這篇文章旨在針對此次App端改版過程,做完整的設計回顧。

駕校一點通作為移動端教輔類工具,一直深受廣大用戶的喜愛。隨著功能的豐富與強大,產品的結構也越來越復雜,現有的信息架構已不能承載產品未來的發展,設計改版勢在必行。

這次5.0改版主要將各種功能進行結構化整合、根據駕校一點通的調性重新定義產品視覺風格,讓信息架構和視覺展現更加合理,創造流暢生動的用戶體驗。改版不僅僅只是為了視覺感受上更具有設計感,而是希望能讓用戶有更好的體驗,形成品牌的忠誠度。

駕校一點通團隊于2016年9月底啟動了5.0版本的設計改版,到目前5.4版本,所有改版的內容已悉數上線。在啟動改版之前,設計團隊調研了駕考同類型產品,發現頁面結構以及視覺設計都比較一致,且產品頁面多年都很少進行視覺更新迭代。所以,這次5.0版本改版的使命不僅要整體提升駕校一點通App的用戶體驗,也需要與行業內的其他產品形成差異。在改版期間,駕校一點通從App、PC、Wap端到品牌logo做了一系列體驗升級。這篇文章旨在針對此次App端改版過程,做完整的設計回顧。

圍繞問題,設定設計目標

基于舊版的產品分析,用戶體驗設計團隊發現如下幾個問題:

  1. 信息架構不合理,入口多,主次信息不清晰。
  2. 視覺風格過時,樣式較為單一,品牌認知度較弱。
  3. 運營頁面信息比較雜亂,與整體頁面融合度不高。
  4. 同類產品,頁面差異性不大,其產品的差異性較弱。

用戶體驗設計團隊的小伙伴們多次迭代,從用戶角度出發,針對問題以及競品分析的結果,不斷發散收斂,得到此次改版的設計方向:合理規劃信息架構,確定駕校一點通產品設計調性,形成差異化的視覺語言,重新全面包裝,提升品牌認知度,整體提升線上的用戶體驗。

1、合理的信息架構,引導用戶行為

舊版首頁入口太多,主次信息不清晰,信息架構不夠合理?;诋a品用戶數據分析、用戶使用行為和產品功能需求等三個方面,交互同學對于首頁信息結構重新進行了調整。

新改版后的主要功能模塊有:考試、福利、社區、發現、購車。首頁改版中,將考試練習、模擬考試和做題相關功能提煉出來,整合成首頁頭部卡片內容,讓考試做題這塊核心功能更加突出。同時,在考題練習、模擬考試上面顯示用戶已完成題庫百分比和最高得分的數據,不僅對考題練習和模擬考試進行解釋說明,還能提醒用戶進行下一步操作,增加產品與用戶之間的聯系。

在首頁的情感化設計中,我們也加入了“老司機”形象,讓老司機給用戶陪伴感,同時可以有效引導用戶更加快速直接的進行操作。

駕校一點通V5.0首頁改版對比圖

2、確定駕校一點通產品視覺語言,制定設計規范

通過設計團隊多次討論和分析,在APP5.0設計改版中,產品需要回歸用戶剛性需求:強化考試做題頁。優化科目一、科目四線上做題體驗,重新梳理科目二、科目三展示內容。增加福利頁面,優化社區、購車頁面,其他功能展示適當弱化和規范化。

在駕校一點通App此次視覺改版中,我們得到調研反饋問題,主要集中在缺乏設計感、風格保守、土氣、粗糙不精致等。根據梳理后的的品牌視覺感受,整體采用扁平化風格使體驗更加輕量化。通過對內容布局、顏色、圖標、字體等細節元素上進行了重新設計,使得頁面更加簡潔,便于用戶聚焦產品功能及內容本身。

(1)內容布局

新版中去除所有多余元素,將同類信息進行系統性歸納,并整理到一張卡片內做為獨立的單元進行展示,使頁面干凈,清晰和美觀布局。歸納整合了功能模塊,降低用戶的理解成本,增加產品易用性。

目前線上考試首頁界面的截圖

(2)顏色

重新定義的產品品牌色——綠色,讓頁面整體顯得更干凈、更年輕、更專業,配合駕校一點通產品slogan:“學車更輕松”。讓用戶輕松產生信賴感,加深用戶對品牌的認知,并給用戶一種綠色通道的感覺,選擇駕校一點通意味著一路綠燈。

改版后的引導頁截圖

(3)圖標

此次圖標的圖形及顏色也秉承輕量化設計,遵循品牌特征,化繁為簡。采用了較為明快的色彩,使得圖標充滿朝氣與活力,增加愉悅感以及辨識度。同時,我們也解決了舊版中頁面圖標風格不統一的問題。

改版前后圖標對比

(4)字體

改版中,我們也嚴格規范了字體色值和字號的使用,讓頁面有清晰的視覺層級關系。標題加粗,讓用戶能直接快速的獲取信息。信息模塊之間的間距也比之前更大一些,從而區分層級關系,形成視覺的節奏感。

駕校一點通App作為一個成熟產品,從主功能頁面到二級三級頁面,有著上百個頁面。在我們前期視覺風格成型后,為了團隊設計能夠快速協作,并具有統一性,設計規范的制定也是必不可少。有了規范,后續迭代中也能保持設計初衷,遵循定制好設計規范,維護好品牌形象,能使產品在不斷更新迭代中保持品牌形象不走樣,保持產品特性,同時產品的規范統一增加了用戶使用認知,有效提升用戶體驗。

駕校一點通設計規范部分截圖

3、融入情感化設計,優化運營相關內容頁面

對于工具類應用產品,年輕用戶比例超過整體行業。在駕校的用戶群中,我們發現,24歲以下用戶占比接近四成,比移動端整體高出7個百分點;30歲以下用戶占比超過七成,用戶年輕化程度較高。一般工具類產品頁面給人感覺是冰冷且模式機械化的。在情感化設計中,我們也推出老司機形象,配合產品運營設計,讓頁面在不失專業性、權威性的基礎上,更具有活力,更貼合用戶生活,增強用戶的愉悅感。

暗中觀察的老司機

駕校一點通作為學車類工具產品,很多用戶都會在拿到駕駛證之后,會以卸載產品來作為學車拿證的一個儀式感。對于這一點,我們也一直想除了報名駕校和考試做題的功能,賦予駕校一點通產品更多的內容,從而使用戶黏性更高??荚囀醉撝?,我們將學員pk頁面從之前的小入口,拿出來單獨作為一個模塊。背景彈幕樣式的微動畫的呈現方式,強化了點擊入口,活動內頁活潑的視覺效果,讓做題與游戲緊密結合在一起,增加用戶使用的愉悅感。調整后的學員pk頁在上線一周后,數據呈火箭式增長。

從此次5.0開始,我們對福利、社區、發現、購車頁面也進行了優化,福利和社區頁面作為運營頁面,與報名考試首頁相比,視覺上更為活潑,從而吸引用戶,刺激用戶的點擊。讓運營頁面不失活動熱鬧的氣氛同時又與主頁面官方冷靜的氣質保持一致,這需要我們對整體頁面的把控以及細節上的思考是嚴謹細致的。

新版考試、福利、社區、發現、購車首頁截圖

4、品牌體驗優化升級,與其它競品形成差異化

為了讓線上多端體驗更加完整,在App改版初步完善后, Wap端以及PC端也相繼進行改版,使得三端體驗保持一致。此次改版設計中,我們一直遵循以下幾項原則:統一設計來源、統一信息布局、統一視覺語言。精致的細節可以讓產品視覺散發氣質,形成產品的視覺語言。根據每一個不同的模塊,通過不同樣式的組合設計,準確地傳達信息內容。從每一個細節去強化產品氣質,形成與競品的差異化。

目前線上的駕校一點通、駕考寶典、車輪駕考通頁面截圖

總結

每一個季度,用研團隊會通過用戶訪談和問卷調研,對產品體驗進行調研和總結。同時,APP頁面中,我們一直保留了用戶反饋入口,每天會收集到上千條用戶反饋信息,我們從用戶反饋信息中提取有價值的信息,并整理優化我們的產品,希望能夠讓每一位用戶都能滿意。無論是產品本身還是功能的更新迭代,我們都以用戶為中心。

 

作者:?馬亞薈

本文來源于人人都是產品經理合作媒體@58用戶體驗設計中心(微信公眾號@58UXD),作者@?馬亞薈

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 雖然是廣告,但是還是寫的不錯的,哈哈

    來自廣東 回復
  2. 如何增加用戶粘性還是沒有具體說明啊~

    來自上海 回復
  3. 這是廣告吧

    來自江蘇 回復