2017-7-20 用心設計
如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里
從早幾年前移動互聯(lián)網(wǎng)大行其道，到如今VR/AR逐漸進入大家的視野，回過頭看，PC端的網(wǎng)頁設計和體驗作為一個“舊課題”似乎不再是企業(yè)和設計的核心問題。但是，我們真如想象中那樣遠離電腦了么？
隨著互聯(lián)網(wǎng)保險日新月異的業(yè)務發(fā)展和產品需求的迭代，同時基于保險方面的設計經(jīng)驗積累，我們發(fā)起了對眾安PC官網(wǎng)的新一輪設計迭代與體驗優(yōu)化，這一輪優(yōu)化主要集中在以下三個方面：
1. 調整網(wǎng)站信息結構
網(wǎng)站起初定位是互聯(lián)網(wǎng)保險電商網(wǎng)站，所以選擇了適用于繁雜內容展示的“雙重導航”設計，這也是電商平臺常用的導航方式。但由于保險類商品數(shù)量不像京東、淘寶平臺這樣巨大，我們發(fā)現(xiàn)導航系統(tǒng)需要根據(jù)現(xiàn)狀進行梳理優(yōu)化，作出相應的調整，使得導航更明確、更簡潔。
△ 原官網(wǎng)導航流程
2. 購買體驗的迭代優(yōu)化
隨著產品類型的豐富，不同類型的保險在瀏覽、購買過程中會差異化地產生許多新的信息展示和交互方式，我們需要對現(xiàn)有的購買體驗進行迭代，力求體驗統(tǒng)一性的同時，保證業(yè)務的差異化實現(xiàn)。我們也在移動端的商詳頁及投保流程的設計中積累了更多經(jīng)驗，是時候將它們在PC網(wǎng)站端付諸實踐了。
△ 原產品縮略圖
3. 感官體驗的“耳目一新”
產品業(yè)務與服務一直在馬不停蹄地前進，在設計與體驗方面也要及時傳遞相應的“感觀信息”。結合逐漸明確的客群特征，以及對當前流行的設計風格的調研，我們對PC官網(wǎng)視覺風格的新一輪探索也拉開了帷幕。
△ 原產品縮略圖
在著手設計具體的優(yōu)化方案前，團隊進行了多次討論，回答了幾個問題:
Q: 官網(wǎng)為誰服務？
A: 電腦端的用戶并未縮水，使用量依然龐大。而主動訪問還靠百度。
查閱CNNIC的數(shù)據(jù)報告，我們發(fā)現(xiàn)近年手機超過9成的使用率的確擁有絕對的優(yōu)勢。但承載PC網(wǎng)站的電腦端使用量其實與手機相差無幾。我們也從后臺數(shù)據(jù)了解到，除了外部跳轉理賠操作的訪問外，絕大多數(shù)主動訪問的用戶都是通過搜索引擎來到官網(wǎng)，官網(wǎng)依然是人們了解企業(yè)的首選途徑之一。
△ 數(shù)據(jù)來源：CNNIC2016年度報告
Q: 用戶為什么來訪問官網(wǎng)？
A: 官網(wǎng)有用戶想要了解的企業(yè)信息，也是服務的獲取途徑。那么，使用體驗的流暢也很重要。
用戶來到官網(wǎng)一般做兩件事：選購產品、申請理賠。其中選購產品時，如何通過圖文信息介紹虛擬產品的特色、傳統(tǒng)投保流程在電腦上該如何優(yōu)化是值得我們從體驗角度好好探索的。
Q: 我們又該展示什么？
A: 官網(wǎng)是最好的形象宣傳媒介。用戶主動搜索看到的結果是對商家及產品建立信任感的第一步。
“內事不決問百度”是大家很熟悉的一句話，而搜索結果中那個帶著“官網(wǎng)”小標簽的選項更是許多人的首選。給訪問者留下一個好印象是必須的。
最終，我們明確了官網(wǎng)“基于產品 建立品牌形象”的目標。以“舒適、設計感、面向用戶”這三個關鍵詞為基礎展開設計優(yōu)化。而這也是PC官網(wǎng)需要向用戶傳遞的信息。
△ 眾安官網(wǎng)優(yōu)化設計關鍵詞
經(jīng)過對官網(wǎng)內容的全面梳理，我們將首頁、專題聚合頁、商品詳情及購買流程作為一期改版的主要內容。
△ 官網(wǎng)內容梳理
明確了方向，大家便著手開始設計！
1. 梳理結構
改版后官網(wǎng)更注重對產品的展示，結合官網(wǎng)與其他相關業(yè)務平臺網(wǎng)站的互通關系，我們將導航分為全局與一級導航兩個層級。全局導航適用于個人賬戶及公司各平臺間的跳轉，一級導航更專注于本站的產品和服務信息。鼠標懸浮各類別標簽可以預覽分類下的產品。
△ 將全局導航與本站導航分層
2. 首頁Banner：給足料，說好用戶故事
金融產品的視覺表達難是一個行業(yè)共識，但螞蟻金服這兩年的系列廣告給了我們一個很好的思考方向。服務于日常生活的金融產品故事該怎么說？——當然是從生活本身的點滴說起。
首頁Banner作為網(wǎng)站首屏宣傳位，在方案探索過程中獲得了公關小伙伴的協(xié)作支持，得以從多個角度優(yōu)化我們的方案。
△ 梳理產品與各種角色的匹配性
△ 確定官網(wǎng)的視覺風格傾向
結合特色產品與過往幾次用戶調研的結果，我們針對4大產品分類描繪了幾個典型的產品場景。而這4個場景所導向的是對應的專題產品和它們的用戶故事。
△ 首頁Banner的故事展示
對于專題中的保險產品，我們嘗試通過更情感化的表達來讓用戶感知它們。無論是角色還是場景，通過他們說出了用戶的顧慮與考量。無論是人名、還是文案，我們都花費大量的精力進行構思，力求令用戶獲得代入感，更容易產生共鳴。
而“與時俱進”也不能只是說說而已。開發(fā)語言的不斷升級已經(jīng)支持網(wǎng)頁承載更多樣的展示方式。既然如此，為什么不趁機炫一把大家都愛的視頻背景呢？
△ 版塊背景播放用戶故事視頻
總得來說，改版后的網(wǎng)頁正試圖通過產品故事與訪問者建立更深入的情感共鳴，運用更多樣的表現(xiàn)手法向人們展示更豐富的感官體驗。
△ 首頁改版前后對比
3. 商詳介紹：理性與感性結合，讓用戶好好看清我們的產品
由于保險產品沒有實體對象，產品特點及保障明細又關聯(lián)諸多細節(jié)條款，導致無論是我們作為設計傳達方，還是用戶作為信息接收方都對產品說明頭痛不已。而讓用戶獲取他們想了解的產品信息，是推動他們實行購買操作的重要因素。
經(jīng)過長期的業(yè)務跟進及總結，通過對產品信息優(yōu)先級的梳理、結合交互控件的應用，最終，給出了更適合目前需求的詳情頁模板。
相對實體產品的功能展示，保險產品細碎的保障項目羅列也給控件設計增加了難度。不同的產品一般有1-4種版型可選，每個版型中包含的保障條目從一至十幾條不等。如何用一套控件匹配所有產品的展示是我們面臨的挑戰(zhàn)。
當用戶點擊“立即投保”進入投保流程時，還需要面對一些填寫相關信息的表單，這是規(guī)范專業(yè)的保險公司都會具備的，但互聯(lián)網(wǎng)保險真的需要這么多表單嘛？！
梳理過后，我們發(fā)現(xiàn)核心流程其實并不復雜。經(jīng)過適當?shù)膭h減、合并、以及視覺優(yōu)化，投保流程其實可以“輕”很多。
△ 重復內容刪減
△ 頁面內容重排
電腦端網(wǎng)頁的特點是頁面空間十分充裕，而大家也更習慣豎向表單排列。那么，以卡片形式左右展示兩張信息表單也許是大家更容易認可，也是認知上更的。
改版后，已登錄的注冊用戶進行投保可調用預留信息。在最簡情況下，只需一個勾選操作即可進入“下一步”。
出于行業(yè)的嚴謹，我們依然保留了信息復核的流程，但仰賴電腦端網(wǎng)頁的充分空間與合理的視覺排版，保單信息與優(yōu)惠信息的合并顯示也并不對用戶造成太多信息認知負擔。
投保成功頁則進一步完善了導流信息及同類產品推薦功能，為用戶提供了更明確的可前往路徑。
△ 完善控件細節(jié)及視覺優(yōu)化
4. 體驗提升：不知不覺間的信任與認可
對于一個金融保險類網(wǎng)站來說，它應當具備的安全、可信任感是比其他生活類服務網(wǎng)站要多得多的。這意味著，當我們討論這類行業(yè)的網(wǎng)站體驗時，我們考慮的用戶體驗也應有不同的切入點。
信任可以分為認知信任和情感信任……兩者結合即可激發(fā)基于信任的實際行為。
而商業(yè)網(wǎng)站中通常的信任行為，指的就是購買。
△ 認知信任與情感信任的關系
認知體驗主要依靠產品本身傳達出來的信息促進用戶執(zhí)行商家期待的行為。比如，用戶在選購對比不同的旅游意外險時會比較保險內具體的保障項目和相應的保費、保額。這是客觀影響了用戶判斷條件的信息，如果用戶獲取不到準確的產品信息，勢必會有“疑惑，不理解產品“，”商家說的不明白，不專業(yè)”之類的想法。
感性體驗則側重用戶自己被激勵、認同的感受，更多的被形容為享樂的、情感的體驗。如果用戶讀到我們專題中不同的用戶故事時，有幾個能讓他們心中不禁點頭感嘆“說到我心坎里了”，那正是我們試圖理解用戶的心情，希望他們能感受到被理解、被認同。
△ 信任體驗設計模型
共情引起共鳴，好用帶來正向反饋，認真考慮到體驗的方方面面，時間會證明用戶的認可。
經(jīng)過3個多月從設計到開發(fā)的忙碌后，新版官網(wǎng)終于在今年2月悄然上線。經(jīng)過一段時間的數(shù)據(jù)跟蹤，我們對此次改版的效果有了一個比較完整的反饋。話不多說，看數(shù)據(jù)：
上線一個月，流量穩(wěn)定，轉化率猛增。改版上線當月的總訪問量較上月基本持平，上線一個月后，客單量提升4倍，網(wǎng)站跳出率降低一半。
新頁面也為爆款產品的上線熱銷奠定了爆發(fā)基礎。改版上線后不久就迎來了新一年運營項目的全方位啟動，網(wǎng)站訪問量提升1.8倍，同期支付轉化率較改版前翻了一倍多。
官網(wǎng)一期改版告一段落，靜下心來梳理總結是我們團隊的又一次經(jīng)驗沉淀。此外，還要特別感謝PR小伙伴在官網(wǎng)內容方案上的支持，以及勤勞勇敢的開發(fā)小哥哥們在整個開發(fā)過程中對官網(wǎng)的鼎力支持！比心！
官網(wǎng)仍有許多地方需要我們“與時俱進”、逐步優(yōu)化，在之后的版本更迭中期待更優(yōu)的體驗和解決方案。
藍藍設計( m.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務