UX設計案例研究：建立更好的用戶體驗（重新設計Air Peace Airline網站）

18 人贊了文章

以下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

坐飛機旅行總是能給人帶來很棒的體驗，但我認為應該考慮預訂航班時給用戶帶來的壓力。在如今的數字世界，我們越來越重視速度和簡單性，因此擁有一個好用的，可以為用戶節省時間的在線預訂系統非常重要。

鑒於此原因，我選擇了奈及利亞航空公司-Air Peace Airline，作為有效用戶體驗（UX）設計研究案例。下面，和我一起來找到改善他們預訂系統的方法。

設計進程

按照下面的設計進程，我在項目開始前進行可用性測試，並以驗證項目的可行性來結束：

調研

經過多次與朋友進行討論和採訪一些潛在客戶後，我總結出了以下幾個要點：

• 大多數人在去機場的路上預訂航班。
• 有些人在參與商務會議時預定。
• 還有些人，在看電影的時候預定。
• 還有一些人，希望在預定系統中提供租車，預訂旅館，附近景點推薦等功能，因為很多人可能不熟悉目的地的環境。

我們驗證了大多數人在做其他事情時預訂航班的想法。最終，用戶更願意使用一種在繼續進行日常活動的同時，更好，更快，更易於使用的方法來預訂航班。

目標

• 付款流程應該設計得更快。用戶應該能夠儘快完成付款，然後返回到日常其它各種活動。
• 實施一個平台，在該平台上科研進行所有付款操作。通過在網站上收集信用卡詳細信息而不是重定向用戶來完成此操作。這將有助於保留客戶和減少用戶操作步驟。
• 能夠提供預訂計程車服務，帶你到達目的地將會是另一個很棒的體驗。

先決條件

• 用數據備份所有設計決策。
• 了解付款流程，並設法解決此問題。
• 提出設計解決方案並進行驗證。

用戶畫像

我為希望在Air Peace網站上訂航班的的典型用戶創建了一個角色。我正在使用「Mr.Sammie Gold「的用戶名作為我們今天的用戶，當然，除了這個之外還有許多其它使用場景。

故事板

我進一步為Sammie創建了一個故事板，他只想能夠快速預訂航班並繼續他的會議。

原型設計

在Bēhance上查看原型設計。

預定進程

航班搜索

目前預定進程

Mr.Sammie更喜歡簡潔的表單：

新的預定航班體驗

提供不較複雜的表單，實際上會給用戶帶來更好的體驗。通過這種方式，用戶只需點擊一下滑鼠，即可輕鬆從「預訂」-「登機」-「我的旅行」，趕緊開始預訂吧。

航班預定，在重設計之前和之後的對比：

目前的體驗

該表單是不是看起來更容易和更友好呢？

選擇你喜歡的航班和座位類型：

設計前個人信息頁面：

設計前個人信息表單：

這看起來有點太擁擠，所以我來簡化它：

新的個人信息表單

現在是不是看起來很直接？

當前支付流程圖頁面：

原先結帳流程

原先的流程將用戶重定向到「PayGate」和「Webpay」，這根本不是必需的。 您實際上可以在Air Peace網站上直接完成所有付款。 所以，我們來解決這個問題：

哦，等一下：

你是否注意到在付款流程中，你必須選擇三次付款方式？ 這可能會讓用戶感到懷疑和恐懼，所以讓我們進行改變。現在讓我們看看：

新的付款流程

首先，每次付款都是在Air Peace網站上進行的。用戶不必強迫自己選擇付款方式 - 系統會為你自動選擇。而現在，這些步驟已經減少到兩個了。

看！用戶完成付款後，航班信息會發送到他的電子郵件中，Sammie先生很高興 - 所以他又開心的將注意力轉移到會議上！

其它特色：

哦，是的！現在，用戶可以計劃他的旅行。如果他點擊「計劃旅行」按鈕：

• 他可以有選擇性的預定計程車了。在這裡，可以看到各種計程車公司的排名，他選擇排名最靠前的那家公司。
• 他還可以有選擇性的進行酒店預訂。在預定界面會清晰地展示具有不同等級排名的酒店。

用戶可以在這個新的環境中查詢自己住宿附件美麗的景點。

驗證可行性：

在原型設計好之後，我對一些潛在用戶進行了驗證測試，並發現：

• 該網站變得更容易使用，因為用戶在第一眼就很容易看到他們想要做的。
• 預訂航班也變得更容易，使用表單形式，用戶填寫更簡單、快速。支付流程大大縮短，所有操作都在Air Peace網站上完成，而不是將用戶重定向到其他網頁。
• 用戶界面看起來更友好，更吸引用戶眼球。

總的來說，人們喜歡最終的成果！現在，更多人希望使用Air Peace來預訂他們的航班了。

原文作者：perrie fidelis

原文地址：https://medium.freecodecamp.org/airpeace-website-a-ux-case-study-e0ef593f2619

相關閱讀：

反面教材，這9個糟糕的網頁設計實例引以為戒

設計類網站的「聯繫我們」頁面設計盤點

乾貨！2018年你值得一看的網頁設計作品集賞析

網頁設計有難題？12款網頁設計模板給你靈感！

極簡網頁設計技巧，打造簡約之美

進階學習，如何無代碼設計一款美觀且實用的網站？

網站著陸頁設計，讓用戶開心著陸的10大技巧！

網站設計缺乏創意？視差滾動網站設計讓你與眾不同

收集網站用戶反饋的5個常用問題

這9款小眾時尚的酒店網站設計，讓你不再戀家

時尚的不僅僅是它們的服裝，還有它們的網站設計

10個最新互動式Web設計實例欣賞