用戶體驗 ? Booking酒店預訂APP UI設計改版案例

Booking酒店預訂APP UI設計改版案例

發表于: 用戶體驗. 評論
Sponsor

前言:今天和大家分享APP的UI設計改版案例,Booking.com是一個國際級大型酒店預訂網站,在國內外也很受歡迎,本文將從使用場景、競品分析、用戶研究、動效設計、界面優化等多個方面來講述?Booking APP 的改版過程。

Booking酒店預訂APP UI設計改版案例

項目背景

Booking.com繽客是一家荷蘭初創公司,并已經發展成為全球最大的旅游電子商務公司之一。

在Booking上,旅客可以選擇世界上任何一處的住宿地點,包括公寓,度假酒店,民宿,五星級豪華度假村,樹屋甚至冰屋等等。每天,通過平臺預訂的房間數超過155萬。無論是商務旅行還是休閑旅行,人們都可以快速輕松地預訂到理想的住處。

競品分析

自從Booking發布以來,許多競爭對手都采用類似的商業模式瘋狂跟進,搶占市場,并且在某些方面比Booking本身做的還好。

在調研的前期階段,我去搜集了一些競爭對手和類似的平臺,分析UI,用戶體驗,用戶體驗地圖,信息架構和關鍵功能。但是我并不會花太多時間過于深入的去分析這些產品,因為我希望將重點放在Booking這個產品本身的訴求上。

項目背景

使用場景

在之前的調研過程中,我發現了許多不同的使用場景,經過匯總歸集,我集中關注以下3個場景:

場景1:用戶知道其行程的日期和目的地(默認場景)

場景2:用戶明確了日期但對其旅行的目的地不清楚

場景3:用戶知道目的地但不確定其旅行日期

APP使用場景

典型用戶

在進一步的研究中,我明確了4位具有不同需求和不同目標的典型用戶,這些數據對于改善不同用戶的體驗非常有用。

這個分析的目的是通過梳理最佳的用戶流程并提升產品體驗,來為不同需求的用戶提供最好的用戶體驗。

APP用戶研究分析

數據來源:在線研究和用戶訪談(30個用戶樣本)

用戶反饋

收集用戶評論,從中我收到了很多有價值的反饋,這些評論中沒有特別明確指出是可用性或功能性的問題。我將這些反饋分為4類(譯者注:對反饋的問題進行提煉整理):

1.預訂被取消

2.App的Bug

3.投訴的處理效率

4.反饋的進度

毫無疑問,最相關的是預訂被取消的問題。太多用戶會注意到不合理的費用或與房間的主人取得聯系時遇到困難。

Booking酒店預訂APP UI設計改版案例

用戶訪談

基于30個用戶樣本,我試圖獲得進一步的用戶反饋,從中注意到以下的幾點事實:

1.與其他平臺相比,booking的平均價格通常更高

2.產品過于突出好評,用戶很難發現一些真實的差評

3.當房屋主人接收到用戶的回復時聯系用戶也很困難

我想引用一段話,來總結這里面遇到的問題,這段話也蠻有意思的,它說的是:

“與其他應用比較來看,套路顯得有點多,會讓你覺得一切看起來都蠻劃算,總是想多賣一些東西給你?!?/p>

用戶痛點

總結之前的分析,我提出了以下幾點觀點:

1.沒有一個完美的解決方案能夠滿足所有用戶,用戶需要盡可能多的掌握有用信息。

2.沒有的功能沒有太多考慮到個性化需求。

3.可以改進UI并使用戶更加集中于他的目標,而不是完全“以推銷為中心”

4.優化用戶與房東之間的聯系問題

解決方案

從用戶痛點出發,嘗試找到合適的解決方案,來提升產品體驗。

主頁

總的來說,我對首頁進行了大手術。主頁的搜索功能已經完全重新設計,減少過多的干擾信息。

導航 :我設計了一個新的導航欄,剝離出“已保存”功能,這樣用戶就可以快速找到自己所收藏的商品。此外,我也優化了“交易”的模塊,后面我會詳細的說說這塊的改動思路。

其它功能?:至于之前的版本,我保留了最新搜索和相關推薦的功能,重新設計界面以改善UI的可用性。

Booking APP 主頁界面設計

社交功能

如今,社交網絡在用戶的生活中扮演重要的角色,那沒理由在booking中做的這么差。我搞了一個新功能,允許用戶關聯自己的好友并查看他們最新的選擇,包括他們的評價(喜歡/不喜歡)。我已將此功能放置到主頁的下方,因為我希望在將其推廣到其他模塊之前收集更多有關它的數據。

Booking APP 社交功能

搜索功能?

把這個功能分解為多個步驟。在輸入第一個詞后,即使沒有指定日期或其他信息,也能顯示相匹配的酒店。此外,我也加入了語音搜索,使搜索更容易?;谥拔覍Σ煌脩艚巧亩x,搜索的結果將根據最后的信息進行推薦:

1)1名成人 ——背包客 ——酒店

2)2名成人——度假夫婦——酒店,賓館或B&B(某種酒店形式)

3)2名成人 兒童——家庭——民宿公寓或酒店

4)1名成人 商務選擇——商人——酒店

Booking APP 搜索功能

列表頁面

列表頁針對易用性方面做了整體的優化:

1)我將篩選功能從3個按鈕更改為2個按鈕以減少用戶的操作步驟——將它放在頁面底部,方便使用

2)我添加了標簽功能來更好的區分屬性類型

3)在第一時間向用戶展示物業的主要設施特點。

注意:根據不同的用戶,可以智能突出顯示不同人正在尋找的不同信息。

4)我將報價的方式轉換為“單晚”而不是“總價”,以便在不同商品之間進行比較

Booking APP 列表頁設計

詳情頁

我列出許多可以在詳情頁面中加入的修改。將總價格突出顯示,以免有些隱形消費用戶可能會被忽略。

增強了一個與評論相關的次要功能,允許用戶通過不同標簽篩選它們。

Booking APP 詳情頁設計

交易功能

在優化開始時,我確定了操作場景2—— “用戶還不知道自己的目的地”作為優化方向。為了提供更好的用戶體驗,我增加了一個新的功能,用戶可以在其中找到不同目的地的區間。利用篩選功能,用戶可以選擇最適合其需求的區間(區間 – 大陸 – 國家等…)

Booking APP 交易功能

動效原型

最后,我還設計了一個整個項目的動效原型,把之前所有重設計的頁面串聯起來。

Booking APP 動效設計

結語

由于時間限制,分析和結果是基于我的個人經驗和少量數據,需要進行深入分析和其他測試,以便完善和驗證解決方案。

原文:https://medium.muz.li/booking-com-ux-case-study-7ffb39e54791
作者:Filippo Rovelli
譯者:?鹿崎(ID:?彩云譯設計)

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:為設計新人提供的設計交流群,請加入UI設計交流群,分享經驗、接單、求職、聊設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。

{ 發表評論 }