推薦閱讀

一、訂詳頁我們關(guān)注什么？

1. 兩大功能定位

縱觀過往的更新迭代，火車票訂單詳情基本圍繞“電子服務(wù)憑證”與“訂后服務(wù)導(dǎo)購”這兩大功能定位展開，一方面記錄用戶的交易行為，為用戶提供完善的售后服務(wù)；另一方面也可以利用集團(tuán)強(qiáng)大的供應(yīng)鏈與商品力優(yōu)勢，為用戶提供酒店、用車、門票等“一站式預(yù)訂服務(wù)”，將訂后流量再轉(zhuǎn)化。

2. 項(xiàng)目側(cè)重點(diǎn)

基于以上歷史功能定位，加之在項(xiàng)目前期與產(chǎn)品同學(xué)進(jìn)行了多輪意見互換，我們將項(xiàng)目側(cè)重點(diǎn)鎖定在以下三個方面：

結(jié)合對線上問題的排查以及優(yōu)先級排序，我們對這三大項(xiàng)目側(cè)重點(diǎn)進(jìn)行了設(shè)計目標(biāo)和評估指標(biāo)上的細(xì)化：

基礎(chǔ)體驗(yàn)升級

給用戶更加清晰易讀的行程信息展示，降低復(fù)雜智慧行程的核對費(fèi)力度，提升整體瀏覽體驗(yàn)。

流量轉(zhuǎn)化提效

通過頁面框架重組，一是讓繁多的火車服務(wù)功能入口出現(xiàn)在更合適的地方，用戶找尋更為便捷，降低服務(wù)引發(fā)率；二是解決交叉業(yè)務(wù)位置靠下，難曝光的問題，提升火車訂后交叉業(yè)務(wù)曝光率與交叉覆蓋率。

產(chǎn)品的溫度感打造

通過設(shè)計手段，緩和訂后略帶冷峻的工具氣質(zhì)，給予用戶貼心的出行關(guān)懷，積累用戶對我們的正向情感，提升 NPS。

接下來詳細(xì)闡述設(shè)計實(shí)踐與成果。

二、基礎(chǔ)體驗(yàn)升級

1. 關(guān)于智慧行程的問題洞察

21 年初，老版訂單詳情需要快速承接諸如：上車補(bǔ)票、跨站多買等簡單的單程無票智慧方案，權(quán)衡了開發(fā)改造成本之后，彼時采用的是復(fù)用老票面+行程軸的結(jié)構(gòu)。

在智慧方案出現(xiàn)之前，票面信息直接對應(yīng)實(shí)際的行程信息，上下車站點(diǎn)分布在票面的兩端。智慧方案的出現(xiàn)打破了這種一貫以來的認(rèn)知心智，對于多買或者補(bǔ)票方案來說，票面左側(cè)的站點(diǎn)不一定是實(shí)際上車點(diǎn)，票面右側(cè)的站點(diǎn)也不一定是實(shí)際下車點(diǎn)，用戶需要來回在軸與票之間來回瀏覽理解，此時的行程信息能用，但不直觀。

22 年業(yè)務(wù)擴(kuò)展出了多程智慧無票方案，如下圖所示，此時的行程軸已經(jīng)嚴(yán)重信息過載，我們無法在一屏之內(nèi)同時在軸線上解釋清楚「多程」「中轉(zhuǎn)」以及「某一程需要多買或者補(bǔ)票」這三件事，于是只好將后者剝離至票面展示。此時的訂后行程信息復(fù)雜度爆增，看起來費(fèi)勁。

后續(xù)在人工電話咨詢+在線咨詢的問題排查中，我們也發(fā)現(xiàn)行程相關(guān)的問題位于前三，因而在本次訂單頁升級項(xiàng)目里，提升智慧行程可讀性將是一個重要待辦。

2. 行程軸縱向探索

既然橫向的行程軸存在空間上存在局限，直接與票面關(guān)聯(lián)又過于生硬，我們何不嘗試縱向的結(jié)構(gòu)，直接將票面與行程信息關(guān)聯(lián)融合呢？

在后續(xù)的方案嘗試中，我們首先將多類智慧行程中，存在共性的行程行動點(diǎn)進(jìn)行提煉。（對于這些行動點(diǎn)的定義為：物理世界中需要乘客進(jìn)行響應(yīng)的行為）

繼而將這些行動點(diǎn)落在縱向的軸線上，作為線索，將多程行程進(jìn)行串聯(lián)。

按照這個設(shè)想，將線上 4 大類共計 40 余種出行場景的票面結(jié)構(gòu)進(jìn)行重構(gòu)，新的票面秩序?qū)椭脩魪倪^去散點(diǎn)式的行程信息中解放出來，智慧行程核對更為輕松。

3. 導(dǎo)航器讓瀏覽提效

對于超復(fù)雜的多人多程訂單，客觀上存在更多的信息量，勢必占據(jù)大量高度，為了能夠讓用戶在首屏依舊可以縱覽全程概況，我們設(shè)計了側(cè)邊導(dǎo)航器，除了在用戶滑動頁面的過程中自動映射所屬的行程區(qū)間；你也可以通過點(diǎn)擊導(dǎo)航器，讓頁面快速錨地至相應(yīng)的票面位置，查看更便捷。

三、流量轉(zhuǎn)化提效

訂單詳頁承接的業(yè)務(wù)繁多，截止改版前已有長達(dá) 4 屏之多。不同業(yè)務(wù)相互“爭奪地盤”，相互分焦，導(dǎo)致真正對用戶有用的功能入口無法得到有效凸顯。特別是由于酒店用車等交叉業(yè)務(wù)長期處于 3-4 屏，曝光轉(zhuǎn)化受限。

既然業(yè)務(wù)帶給頁面的復(fù)雜度無法消失，有沒有辦法將其轉(zhuǎn)移呢？

最終我們分別采用“轉(zhuǎn)移給時間”和“轉(zhuǎn)移給系統(tǒng)”兩條設(shè)計策略，來解決上述問題。

1. 轉(zhuǎn)移給時間：精細(xì)出行場景，打造實(shí)時動態(tài)行程

將用戶一級出行場景（行前、行中、行后）根據(jù)實(shí)際出行時間節(jié)點(diǎn)、列車的運(yùn)行狀態(tài)進(jìn)行細(xì)拆，得到精細(xì)化的動態(tài)行程狀態(tài)。

以行程狀態(tài)為線索，我們調(diào)整了火車強(qiáng)相關(guān)功能的展示方式，從原來的在頁面腰部不加區(qū)分地混排展示，調(diào)整為現(xiàn)在有側(cè)重地在頭部聚合。提升流量分發(fā)效率，讓用戶能夠更快速地找到最需要的功能。

除此之外對于剩余的功能入口，建立視覺梯度，滿足業(yè)務(wù)場景化推薦的訴求。

在檢測到用戶順利通過進(jìn)站閘機(jī)并發(fā)車后，票面信息會進(jìn)一步簡化降噪，取而代之的是用戶在行中更為關(guān)注的列車實(shí)時運(yùn)行進(jìn)度，進(jìn)一步提升體驗(yàn)。

至此信息呈現(xiàn)方式不再一成不變，而是根據(jù)用戶的來訪時間動態(tài)演繹。

2. 轉(zhuǎn)移給系統(tǒng)：框架擴(kuò)容，引入 Z 軸設(shè)計

傳統(tǒng)的縱向樓層堆疊顯然無法解決交叉業(yè)務(wù)位置靠下，曝光受限的問題，挖掘 Z 軸空間，也許是個不錯的解題思路。

在接下來的方案構(gòu)思中，我們將眾多模塊拆分為火車行程強(qiáng)相關(guān)與交叉服務(wù)強(qiáng)相關(guān)兩大類，在現(xiàn)有的訂單層上方擴(kuò)展出彈性交叉面板，來包容多元的交叉業(yè)務(wù)。

在喚起前，彈性面板將占據(jù)約 20%高度，核心交叉入口在首屏得以曝光，點(diǎn)擊率大幅提升。并且我們能利用這一尺空間，打造訂后一站式預(yù)訂的視覺氛圍感知。

喚起后，自然不能浪費(fèi)用戶寶貴的探索欲，通過整合已有的交叉優(yōu)惠和折扣信息，放大火車用戶有專屬優(yōu)惠的感知，為交叉預(yù)訂轉(zhuǎn)化增添動力。

考慮到拖拽仍存在一定交互成本，除了拖拽，我們也支持用戶通過「按鈕點(diǎn)擊」、「頂部 tab 切換」、「滑動訂單層至底部粘連」這三種方式對交叉面板進(jìn)行喚起操作。讓用戶可以在「查看訂單」與「瀏覽交叉服務(wù)」之間絲滑切換。

四、項(xiàng)目成果

通過以上設(shè)計策略，初步完成了對基礎(chǔ)體驗(yàn)與流量轉(zhuǎn)化效率的雙升級。上線一段時間后的數(shù)據(jù)結(jié)果表明：火車酒店交叉率顯著提升，各功能入口點(diǎn)擊率均不同程度提升。除此之外我們也觀測到，改版之后的月度 NPS 滿意度，處于遞增態(tài)勢；服務(wù)引發(fā)率的相對值顯著降低，業(yè)務(wù)指標(biāo)與體驗(yàn)指標(biāo)均達(dá)到第一階段的設(shè)計預(yù)期。

隨后我們也將行之有效的策略在其他業(yè)務(wù)線進(jìn)行推廣和沿用：

五、探索未完待續(xù)...

雖然改版始于解決核心體驗(yàn)問題和業(yè)務(wù)訴求，但我們也十分在意產(chǎn)品的“溫度感”。通過頭部實(shí)時動態(tài)目的地天氣動態(tài)氛圍，幫助用戶更加直觀 Get 到達(dá)日目的地的天氣狀況，合理規(guī)劃出行安排，從而打造有溫度的出行體驗(yàn)。

圖片除此之外，火車票設(shè)計團(tuán)隊(duì)正在進(jìn)一步挖掘更多能夠帶給用戶出行關(guān)懷的差異化設(shè)計，比如：旅游路線行中沿途景點(diǎn)展示、中轉(zhuǎn)換乘、同車換座動態(tài)可視化指引、多進(jìn)站口高鐵站最優(yōu)路線規(guī)劃...敬請期待。

最后，感謝你能讀到這里，愿我們的努力能為你帶來更好的出行體驗(yàn)

歡迎關(guān)注作者微信公眾號：「TripDesign」