大廠是如何做體驗創(chuàng)新的？來看攜程的實戰(zhàn)案例！

推薦閱讀

一、訂詳頁我們關注什么？

1. 兩大功能定位

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

2. 項目側重點

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

結合對線上問題的排查以及優(yōu)先級排序，我們對這三大項目側重點進行了設計目標和評估指標上的細化：

基礎體驗升級

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

流量轉化提效

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

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

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

接下來詳細闡述設計實踐與成果。

二、基礎體驗升級

1. 關于智慧行程的問題洞察

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

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

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

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

2. 行程軸縱向探索

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

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

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

按照這個設想，將線上 4 大類共計 40 余種出行場景的票面結構進行重構，新的票面秩序將幫助用戶從過去散點式的行程信息中解放出來，智慧行程核對更為輕松。

3. 導航器讓瀏覽提效

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

三、流量轉化提效

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

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

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

1. 轉移給時間：精細出行場景，打造實時動態(tài)行程

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

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

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

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

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

2. 轉移給系統(tǒng)：框架擴容，引入 Z 軸設計

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

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

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

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

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

四、項目成果

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

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

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

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

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

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

歡迎關注作者微信公眾號：「TripDesign」