直覺設(shè)計(jì)打造用車創(chuàng)新體驗(yàn)-攜程接送機(jī)列表頁改版
攜程用一次“直覺設(shè)計(jì)”的改版給出答案:把頁面主角從供應(yīng)商換成 3D 車型,用汽車廣告級布光建立虛擬影棚,再讓冰箱門打開、大象塞進(jìn)去的場景化動效替代干巴巴的文字。結(jié)果,更大的車型被更多人下單,鷗翼門 Model X 的點(diǎn)擊率飆升。一次改版告訴你:好設(shè)計(jì),讓用戶無需思考就能選對車。
直覺設(shè)計(jì)的核心在于構(gòu)建無需解釋的體驗(yàn)——讓用戶的本能感知引領(lǐng)決策 。作為體驗(yàn)設(shè)計(jì)師的我們又應(yīng)該如何將用戶無意識的經(jīng)驗(yàn)轉(zhuǎn)化為可見之物呢?
我會結(jié)合攜程接送機(jī)列表頁的一次改版與大家分享,在面對供應(yīng)商服務(wù)同質(zhì)化困境,我們將主體從服務(wù)商轉(zhuǎn)向車型本身后,如何構(gòu)建符合用戶直覺認(rèn)知的3D車型矩陣。而基于全新的車型模型,我們又是如何探索用戶場景,用可視化語言與動態(tài)場景,編織出一條流暢、高效的決策路徑,讓用戶的選擇過程成為一種直覺的延伸。
01.信息架構(gòu)重構(gòu):從服務(wù)商本位到用戶價(jià)值導(dǎo)向
攜程接送機(jī)業(yè)務(wù)是由攜程專車和境內(nèi)外的服務(wù)商共同為大家提供服務(wù)的,用戶在我們的頁面上其實(shí)就是做兩件事:1決策車型,2選擇自己想要的服務(wù)
隨著攜程平臺對于服務(wù)標(biāo)準(zhǔn)的優(yōu)化與提高,我們發(fā)現(xiàn)服務(wù)商信息呈現(xiàn)逐漸同質(zhì)化的特征,而從下單行為的數(shù)據(jù)表明,用戶又更加傾向于服務(wù)好且價(jià)格穩(wěn)定的攜程專車。
為了讓用戶體驗(yàn)更佳,我們重構(gòu)了貨架的信息結(jié)構(gòu),按照車型維度,通過后臺的篩選策略和PK展示唯一的服務(wù)商,幫助用戶做減法。主體信息由之前的服務(wù)商變?yōu)榱司唧w的車型,通過用戶的點(diǎn)擊,再分步驟展開詳細(xì)的服務(wù)力信息。
為了更好地表達(dá)車型,除了純文字的方式,我們也嘗試了一些可視化的手法,比如照片與插畫,當(dāng)然它們都有各自的缺點(diǎn)和局限性。
最后我們選擇的是更能表達(dá)空間感的3d模型。
我們選取了汽車制造業(yè)上的輪軸比和輪高比,以及軸距長度等參數(shù),以這兩個決定不同車型之間最底層的差異的因素,建立了我們的基礎(chǔ)車型。
同時我們針對車漆和使用場景進(jìn)行了桌面研究,比如AXALTA涂料公司的車漆報(bào)告,出租車的色值演變過程等等,對基礎(chǔ)車型做了進(jìn)一步的細(xì)分。
至此我們完成了第一步,搭建了新的框架與1.0的車型矩陣。
02.虛擬汽車影棚:專業(yè)布光技術(shù)賦能車型視覺標(biāo)準(zhǔn)化
隨著我們對用戶訴求的細(xì)分,我們的sku也精細(xì)到了指定型號的車型(嵐圖夢想家、豐田埃爾法等等),但由于我們的基礎(chǔ)車型和真車的細(xì)節(jié)信息量差異非常大的。
為了讓這兩類車型在頁面上能夠展示得更和諧的同時,還能讓指定的品牌車型保留自己的特點(diǎn)。我們參考了汽車廣告的拍攝,我們對燈光種類與作用做了調(diào)研與篩選,比如最能定基調(diào)的頂部光源,模擬城市內(nèi)透的宮格燈、汽車隧道的條形燈、純面的燈等等。
以及在攝影棚中會運(yùn)用到的一些輔助燈光器具。
基于汽車攝影的布光法則,建立數(shù)字渲染標(biāo)準(zhǔn),為我們的車型搭建了一個虛擬的汽車攝影棚。
通過光影細(xì)節(jié)的升級,我們搭建了2.0的車型圖。
我們強(qiáng)化了指定車型自身的品牌屬性,同時也對齊了基礎(chǔ)車型和指定車型的車身信息量,而在新的虛擬攝影棚中,我們也可以更高效地去批量生產(chǎn)視覺統(tǒng)一的車型圖。
03.場景驅(qū)動下的體驗(yàn)創(chuàng)新
有了我們的車型之后,我們就可以依據(jù)這個模型去地挖掘用戶的使用場景,做更進(jìn)一步的創(chuàng)新了。
首先是旅游出行的場景,我們從nps和社交平臺上收集到了很多針對行李額的痛點(diǎn),在我們用車行李說明的頁面上,行李本身尺寸被描述得非常仔細(xì),但是一個后備箱里能放多少個行李箱,才是用車場景下用戶更關(guān)注的重點(diǎn)。
因此基于直覺設(shè)計(jì)的理念,我們把冰箱門打開,把大象放進(jìn)去。
通過這么一個小小的信息傳達(dá)改變,我們的用戶能更清晰直觀地找到符合自己訴求的車型,最終數(shù)據(jù)上看,我們的用戶有了比較明顯地往更大的車型下單的趨勢。
針對我們另外一部分的訂單,商務(wù)出行的場景。
我們將嵐圖夢想家從豪華車型中剝離出來。通過動畫強(qiáng)化了這個車型舒適的乘坐體驗(yàn)來吸引用戶嘗試,動畫上線后,對比無圖的版本,這個車型的訂單量獲得了提升。
另一方面,在香港市場,
我們發(fā)現(xiàn)用戶對帶鷗翼門的modelX是有很大興趣的。因此我們把特斯拉車型進(jìn)行了細(xì)分,拆成了modelS和modelX兩個車型,通過動畫突出modelX的鷗翼門,上線以后這個車型的下單占比也收獲了正向的數(shù)據(jù)反饋。
我們還挖掘到了特殊人群的使用場景,
比如無障礙和兒童出行的場景,我們用情景化的方式,通過模擬線下司機(jī)拉出輪椅踏板的方式,呈現(xiàn)了我們對無障礙車型所能提供的服務(wù)。
對于親子出游,從安全性上,我們調(diào)研到,嬰兒座椅是有年齡段標(biāo)準(zhǔn)的,為了幫助用戶更好地選擇合適的座椅,我們也對此進(jìn)行了針對性的設(shè)計(jì),未來也會在前端對此進(jìn)行優(yōu)化。
04.結(jié)尾
以上所說的內(nèi)容,都是我們基于直覺設(shè)計(jì)所完成的從框架到信息傳遞的改版,過去我們更多是通過文字和插圖的方式做信息傳達(dá)。
而在直覺設(shè)計(jì)的理念下,我們希望以用戶感知和經(jīng)驗(yàn)作為內(nèi)核,通過可視化、動態(tài)反饋、情景化聯(lián)系等手段,把信息更低門檻地傳遞給用戶,幫助他們高效做決策的同時,也能完成我們的設(shè)計(jì)目標(biāo)。
希望未來能探索更多直覺設(shè)計(jì)這一模型的可能性,感謝大家的觀看。
本文由人人都是產(chǎn)品經(jīng)理作者【TripDesign】,微信公眾號:【TripDesign】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于 CC0 協(xié)議。
- 目前還沒評論,等你發(fā)揮!