從早幾年前移動互聯(lián)網(wǎng)大行其道，到如今VR/AR逐漸進入大家的視野，回過頭看，PC端的網(wǎng)頁設(shè)計和體驗作為一個“舊課題”似乎不再是企業(yè)和設(shè)計的核心問題。但是，我們真如想象中那樣遠離電腦了么？
從早幾年前移動互聯(lián)網(wǎng)大行其道，到如今VR/AR逐漸進入大家的視野，回過頭看，PC端的網(wǎng)頁設(shè)計和體驗作為一個“舊課題”似乎不再是企業(yè)和設(shè)計的核心問題。但是，我們真如想象中那樣遠離電腦了么?
項目背景
隨著互聯(lián)網(wǎng)保險日新月異的業(yè)務(wù)發(fā)展和產(chǎn)品需求的迭代，同時基于保險方面的設(shè)計經(jīng)驗積累，我們發(fā)起了對眾安PC官網(wǎng)的新一輪設(shè)計迭代與體驗優(yōu)化，這一輪優(yōu)化主要集中在以下三個方面：
網(wǎng)站起初定位是互聯(lián)網(wǎng)保險
電商網(wǎng)站，所以選擇了適用于繁雜內(nèi)容展示的“雙重導(dǎo)航”設(shè)計，這也是電商平臺常用的導(dǎo)航方式。但由于保險類商品數(shù)量不像京東、淘寶平臺這樣巨大，我們發(fā)現(xiàn)導(dǎo)航系統(tǒng)需要根據(jù)現(xiàn)狀進行梳理優(yōu)化，作出相應(yīng)的調(diào)整，使得導(dǎo)航更明確、更簡潔。
△ 原官網(wǎng)導(dǎo)航流程
2. 購買體驗的迭代優(yōu)化
隨著產(chǎn)品類型的豐富，不同類型的保險在瀏覽、購買過程中會差異化地產(chǎn)生許多新的信息展示和交互方式，我們需要對現(xiàn)有的購買體驗進行迭代，力求體驗統(tǒng)一性的同時，保證業(yè)務(wù)的差異化實現(xiàn)。我們也在移動端的商詳頁及投保流程的設(shè)計中積累了更多經(jīng)驗，是時候?qū)⑺鼈冊赑C網(wǎng)站端付諸實踐了。
△ 原產(chǎn)品縮略圖
3. 感官體驗的“耳目一新”
產(chǎn)品業(yè)務(wù)與服務(wù)一直在馬不停蹄地前進，在設(shè)計與體驗方面也要及時傳遞相應(yīng)的“感觀信息”。結(jié)合逐漸明確的客群特征，以及對當(dāng)前流行的設(shè)計風(fēng)格的調(diào)研，我們對PC官網(wǎng)視覺風(fēng)格的新一輪探索也拉開了帷幕。
△ 原產(chǎn)品縮略圖
開始前的思考
在著手設(shè)計具體的優(yōu)化方案前，團隊進行了多次討論，回答了幾個問題:
Q: 官網(wǎng)為誰服務(wù)?
A: 電腦端的用戶并未縮水，使用量依然龐大。而主動訪問還靠百度。
查閱
CNNIC的數(shù)據(jù)報告，我們發(fā)現(xiàn)近年手機超過9成的使用率的確擁有絕對的優(yōu)勢。但承載PC網(wǎng)站的電腦端使用量其實與手機相差無幾。我們也從后臺數(shù)據(jù)了解到，除了外部跳轉(zhuǎn)理賠操作的訪問外，絕大多數(shù)主動訪問的用戶都是通過搜索引擎來到官網(wǎng)，官網(wǎng)依然是人們了解企業(yè)的首選途徑之一。
△ 數(shù)據(jù)來源：CNNIC2016年度報告
Q: 用戶為什么來訪問官網(wǎng)?
A: 官網(wǎng)有用戶想要了解的企業(yè)信息，也是服務(wù)的獲取途徑。那么，使用體驗的流暢也很重要。
用戶來到官網(wǎng)一般做兩件事：選購產(chǎn)品、申請理賠。其中選購產(chǎn)品時，如何通過圖文信息介紹虛擬產(chǎn)品的特色、傳統(tǒng)投保流程在電腦上該如何優(yōu)化是值得我們從體驗角度好好探索的。
Q: 我們又該展示什么?
A: 官網(wǎng)是最好的形象宣傳媒介。用戶主動搜索看到的結(jié)果是對商家及產(chǎn)品建立信任感的第一步。
“內(nèi)事不決問百度”是大家很熟悉的一句話，而搜索結(jié)果中那個帶著“官網(wǎng)”小標(biāo)簽的選項更是許多人的首選。給訪問者留下一個好印象是必須的。
最終，我們明確了官網(wǎng)“基于產(chǎn)品 建立品牌形象”的目標(biāo)。以“舒適、設(shè)計感、面向用戶”這三個關(guān)鍵詞為基礎(chǔ)展開設(shè)計優(yōu)化。而這也是PC官網(wǎng)需要向用戶傳遞的信息。
△ 眾安官網(wǎng)優(yōu)化設(shè)計關(guān)鍵詞
經(jīng)過對官網(wǎng)內(nèi)容的全面梳理，我們將首頁、專題聚合頁、商品詳情及購買流程作為一期改版的主要內(nèi)容。
△ 官網(wǎng)內(nèi)容梳理
由內(nèi)而外 一步步優(yōu)化
明確了方向，大家便著手開始設(shè)計!
1. 梳理結(jié)構(gòu)
改版后官網(wǎng)更注重對產(chǎn)品的展示，結(jié)合官網(wǎng)與其他相關(guān)業(yè)務(wù)平臺網(wǎng)站的互通關(guān)系，我們將導(dǎo)航分為全局與一級導(dǎo)航兩個層級。全局導(dǎo)航適用于個人賬戶及公司各平臺間的跳轉(zhuǎn)，一級導(dǎo)航更專注于本站的產(chǎn)品和服務(wù)信息。鼠標(biāo)懸浮各類別標(biāo)簽可以預(yù)覽分類下的產(chǎn)品。
△ 將全局導(dǎo)航與本站導(dǎo)航分層
2. 首頁Banner：給足料，說好用戶故事
金融產(chǎn)品的視覺表達難是一個行業(yè)共識，但螞蟻金服這兩年的系列廣告給了我們一個很好的思考方向。服務(wù)于日常生活的金融產(chǎn)品故事該怎么說?——當(dāng)然是從生活本身的點滴說起。
首頁Banner作為網(wǎng)站首屏宣傳位，在方案探索過程中獲得了公關(guān)小伙伴的協(xié)作支持，得以從多個角度優(yōu)化我們的方案。
△ 梳理產(chǎn)品與各種角色的匹配性
△ 確定官網(wǎng)的視覺風(fēng)格傾向
結(jié)合特色產(chǎn)品與過往幾次用戶調(diào)研的結(jié)果，我們針對4大產(chǎn)品分類描繪了幾個典型的產(chǎn)品場景。而這4個場景所導(dǎo)向的是對應(yīng)的專題產(chǎn)品和它們的用戶故事。
△ 首頁Banner的故事展示
對于專題中的保險產(chǎn)品，我們嘗試通過更情感化的表達來讓用戶感知它們。無論是角色還是場景，通過他們說出了用戶的顧慮與考量。無論是人名、還是文案，我們都花費大量的精力進行構(gòu)思，力求令用戶獲得代入感，更容易產(chǎn)生共鳴。
而“與時俱進”也不能只是說說而已。開發(fā)語言的不斷升級已經(jīng)支持網(wǎng)頁承載更多樣的展示方式。既然如此，為什么不趁機炫一把大家都愛的視頻背景呢?
△ 版塊背景播放用戶故事視頻
總得來說，改版后的網(wǎng)頁正試圖通過產(chǎn)品故事與訪問者建立更深入的情感共鳴，運用更多樣的表現(xiàn)手法向人們展示更豐富的感官體驗。
△ 首頁改版前后對比
3. 商詳介紹：理性與感性結(jié)合，讓用戶好好看清我們的產(chǎn)品
由于保險產(chǎn)品沒有實體對象，產(chǎn)品特點及保障明細(xì)又關(guān)聯(lián)諸多細(xì)節(jié)條款，導(dǎo)致無論是我們作為設(shè)計傳達方，還是用戶作為信息接收方都對產(chǎn)品說明頭痛不已。而讓用戶高效獲取他們想了解的產(chǎn)品信息，是推動他們實行購買操作的重要因素。
經(jīng)過長期的業(yè)務(wù)跟進及總結(jié)，通過對產(chǎn)品信息優(yōu)先級的梳理、結(jié)合交互控件的應(yīng)用，最終，給出了更適合目前需求的詳情頁模板。
商品已成功加入購物車