跳到主要內容

How we designed Booking.com for Business

How we designed Booking.com for Business

看最完整的內容請前往 http://blog.booking.com

Originally posted by in http://blog.booking.com
It’s no secret that Booking.com has a strong data-driven culture. We validate our work through A/B experimentation, allowing millions of customers to have their say in what works best. But quantitative research is not our answer to everything; we adjust our toolset to the problem at hand.
When we set out to build Booking.com for Business, it immediately felt like we were in a startup. Suddenly, the wealth of experimentation data at our disposal wasn’t enough to start building the application for businesses. To kick-off the design work, we needed to know more about our business users’ needs, motivations, and current frustrations. We needed to get out of the building and talk to them.

Initial research

We performed a series of user interviews in several countries with a significant share of business travel. We met with business travellers of all types (from interns to CEOs), along with the people who organise the business trips for them.
We learned that business users have unique set of needs. Booking a holiday can be a fun pastime on its own, but booking a business trip is part of a job—it needs to be as efficient as possible. There’s also more to business travel than making the booking itself. Companies need an overview of who is going where and how budgets are spent. Existing business travel solutions either don’t satisfy such needs, or they’re expensive and complex.
These and many other insights became the foundation for our work. They were synthesized into a set of user personas that shaped the design of the product as we went on.



Product vision

Armed with knowledge about potential users, we started brainstorming. Our aim was to create a vision of the product that would help our personas accomplish their goals. The outcome of these brainstorms was a list of high-level requirements that were later visualised as a set of wireframes. This tangible representation of our ideas enabled us to have fruitful conversations with stakeholders. The wireframes were high-level enough that we could temporarily set aside details of technical implementation and visual design, but also detailed enough to convey the purpose of each screen.



Minimal viable product (MVP)

The product vision was exciting, but it was just a hypothesis. We didn’t want to spend months implementing something ultimately not useful for customers, and not beneficial to our business. It was important to get the product out there as soon as possible, and to start learning from real world usage. We knew that we already had a great product—Booking.com itself—and we could build on its strengths. With this in mind, we defined the minimal scope that would be sufficient to validate our ideas, and started mapping out the user journey.


Filling the user journey with designs felt like finishing a puzzle. As we progressed, we could see how complete the whole picture was from the design perspective.
However, soon after we started implementation, we noticed a problem. Separate design mockups didn’t provide a true feeling of the user experience. They were static. It wasn’t always clear how the application would respond to user actions, and how one page would transition into another. We found ourselves figuring out these details along the way.
It was also important to get user feedback on design decisions we had made so far. Unfortunately, the actual product was still at the early stage of development, and putting mockups in front of users gave us limited feedback.

Prototype

As a response to these issues, we created an interactive prototype that simulated the end-to-end user flow. For example, it was possible to land on the product page, go through the sign-up process, view transactional emails, experience key application features, sign-out, and sign back in again. In this way, we solved two problems at once: we had created a tool that would better guide product development and procure high-quality user feedback.
We kept it lean and didn’t spend much time creating the prototype. We simply placed mockups in HTML files and connected them with hyperlinks. In-page interactions were triggered by bits of basic Javascript code that showed images of various UI states on click. For example, when the user clicked on an area of the mockup that had a button, the image changed simulating interface response.


Some design solutions that previously looked good as static mockups didn’t work so well when presented in the dynamic prototype. Acknowledging this helped us to fix design issues before they reached the product. Participants in user testing sessions were also more engaged with the prototype because it felt like a real product.
But prototypes are not without limitations. It’s hard to do full-blown usability tests with them. They may look real, but not every possible scenario is supported, so facilitators need to carefully steer participants. Maintaining the prototype also becomes tedious over time. We tried to make it easier by separating reusable parts like header, footer, navigation, etc. into include files. We accomplished this by using Jekyll, a static website generator.


The good news is that we didn’t have to rely solely on the prototype for long. The product quickly took shape and it soon became possible to put the real thing in front of users.

User feedback

After the product reached the MVP state, it became easier to get user feedback. Although the product wasn’t yet ready to be publicly announced, we were able to start gathering usage data and feedback from early adopters. We also continued usability testing, because the usage data told us what was happening, but often left us wondering why.


Even with the working product at our disposal, we continued using prototypes to fill the gaps during usability tests. We seamlessly integrated feature prototypes into the live product and switched them on specifically for usability session participants. This helped us to establish whether mocked-up ideas were worth implementing, and also to test parts of the application that were still in development.
Usability labs were not our only test environment. We visited company offices and observed how the product was performing in the real world. These office visits were highly valuable, providing us with insight from observation of users in their natural environment. We had a chance to see what tools they used, what workarounds they developed, and how our product would fit their work process. This was absolute gold. Some things that performed well in the lab set-up, failed during office visits.
We saw that our users were working in a very busy environment and were constantly distracted. The time they spent making a decision was very short. Plus, they were sceptical about introducing new tools into their work. All this posed a particular challenge for a crucial step in the user journey: the product page. Our users needed tangible proof that the product would do as it promised, and that it was reliable. They wanted to explore the product before making any commitments.

Product page

The research findings informed new product page designs. But we needed confirmation that they would actually solve the problems we had observed. We opted for remote surveys as a method to gather feedback quickly and on a large scale. This enabled us to cover several markets and bring a quantitative component into the research.
Survey participants were presented with various versions of the page and were asked to click and comment on page elements that stood out to them. Afterwards they were asked a series of questions that helped us gauge how well they understood our offering, and how likely they were to sign-up.
It took us a few survey iterations to arrive at a version that proved to work well for our users. Had we gone with one of the new designs without testing, we would have ended-up with a sub-optimal page upon product launch.
Now that we had the fully-tested user journey in place, we could reveal the product to the world.



Final thoughts

Fast forward to today. The product is up and running. We can now make decisions through A/B experimentation as there is an established base and a sufficient number of users that continues to grow. If we look back on the process that brought us here, this is what comes to mind:
  • In an environment of uncertainty, it was important to remain open to change. We had to think creatively not just about the product itself, but also about how to get there.
  • We were focused on the user from day one and all the way through. Even when we didn’t yet have the complete product, we used the prototype to get user feedback.
  • By combining quantitative and qualitative research methods, we got the best of both worlds. This was and will remain our recipe to continuously improve the user experience.

這個網誌中的熱門文章

實戰 Vibe Coding:利用 Amazon Q Developer CLI 打造經典平台跳躍遊戲

本篇文章將介紹如何透過 Amazon Q Developer CLI 建構一款完整的 2D 平台跳躍遊戲,從初始生成、功能增強,到最終打造出具備多關卡、多樣互動元素的遊戲體驗。特別的是,過程中開發者並未撰寫任何一行程式碼,僅透過自然語言指令與 CLI 對話完成所有工作,實踐「Vibe Coding」( 氛圍編碼 )。 本文作者為 Haowen Huang, AWS Senior Developer Advocate. 擁有 20 年以上電信、互聯網以及雲端運算等行業架構設計、技術及創業管理等豐富經驗,曾任職於 Microsoft、Sun Microsystems 等企業,專注為遊戲、電商、媒體和廣告等企業客戶提供 AI/ML、數據分析和企業數字化轉型等解決方案諮詢服務。 引言 本篇文章 ( English Version ) 將介紹如何使用 Amazon Q Developer CLI ,以 無需撰寫任何程式碼 的方式,打造一款經典的 2D 平台跳躍遊戲。透過「Vibe Coding」( 氛圍編碼 ) 的開發流程,開發者可以藉由簡單的語言提示詞 (prompt),逐步完成從遊戲雛型、功能擴充到完整關卡設計的開發流程。 整體開發流程將分為三個步驟: 1. 生成遊戲雛型 2. 功能擴充強化與畫面調整 3. 導入參考架構建立完整遊戲 環境建置 使用者需先安裝並設定 Amazon Q Developer CLI 。對於 macOS 使用者,可透過下列步驟完成安裝: 下載並安裝 Amazon Q Developer CLI 登入 Builder ID 完成認證 開啟終端機控制與無障礙設定 執行 q doctor 指令檢查 Amazon Q Developer CLI 是否安裝成功: 遊戲開發方面,建議使用 Python 語言與 Pygame 套件,可透過下列指令完成安裝;Pygame 提供以下功能支援: 畫面與動畫渲染 音效播放 鍵盤與搖桿輸入控制 物理模擬與碰撞偵測 多種媒體格式支援(圖片與音效) $ q doctor $ pip install pygame 第一步驟:初步生成遊戲雛型 透過簡單的一句 prompt,Amazon Q Developer CLI 結合 Pyg...

利用 Jitsi 建立個人化的視訊會議平台

  近期因為疫情的關係,越來越多企業開始實施分流或在家工作,視訊會議的需求也日益增加。 在商用解決方案選擇上,有不少企業會選擇知名品牌的產品,例如  Cisco Webex 、 Google Meet 、 Microsoft Teams 、 Zoom  都是很不錯的方案。 KKBOX 集團在去年便試行及做好充分 work from home 的準備,今年五月也因應疫情升溫,全員 work from home 至今兩個月有餘。 當然,取之 Open Source,也要對社群有些貢獻。在這一屆 COSCUP,我們要來介紹 Open Source 圈中也很知名,效果也很不錯的一套視訊會議平台: Jitsi 。 除了基本的視訊會議功能外,在最後我們也會示範如何透過 Jitsi 畫面輸出到 YouTube/Twitch 或其他支援 RTMP 的平台進行直播。 由於篇幅有限,且 Jitsi 可以調整的細節非常多。今天我們純粹很快速的示範,如何簡單的建置出一個 Jitsi 環境,並提供單場會議內容錄影或直播。 Jitsi 的文件可以在 這裡 找到。 今天透過 AWS Lightsail 的 $10/month instance(1 core CPU + 2GB RAM + 60GB SSD),作業系統則是 Ubuntu 20.04 來示範。當然,使用其他 VPS 亦可,大同小異,這邊直接跳過 VPS 相關的建置過程。 *firewall 相關資料參考 這裡 及 這裡 。 針對系統做必要的更新 基本的 apt repository 更新: $ sudo apt update 因為後面要示範的會議錄影及直播需要使用 ALSA loopback device,如果是 EC2 or Lightsail 則需要額外安裝 generic kernel( 註 ): $ sudo apt install linux-image-generic linux-headers-generic linux-image-extra- virtual 接著做系統套件們的更新: $ sudo apt dist-upgrade $ sudo apt autoremove 如果是 AWS EC2 or Lightsail 則需要另外再將預設的 AWS optimized kernel...

Navicat 17:AI 驅動資料管理的未來

在快速變化的資料管理領域,Navicat 始終站在創新與效率的最前沿。作為領先的資料庫管理與開發解決方案提供商,Navicat 再次以其最新版本 Navicat 17.2 展現了其在業界的卓越實力,讓使用者在資料管理中更具競爭優勢。 Navicat 17 推出標誌著資料庫管理技術的一次重要飛躍。該版本引入了一系列人工智慧 (AI) 驅動的功能,旨在進一步簡化操作流程並提升工作效率。這些功能讓使用者能夠輕鬆處理複雜的資料分析,並實現更智能的商業決策。 Navicat Premium 一直以來都是資料庫管理的佼佼者,該工具支援多達九種資料庫,包括 MySQL、PostgreSQL、MongoDB、MariaDB、SQL Server、Oracle、SQLite、Redis,以及 Snowflake。這樣的綜合性設計不僅消除了多平台切換帶來的困擾,還極大化了使用者的工作效率。 為提供更高效的協作工具,Navicat 雲端功能 (Navicat Cloud) 進一步提升了團隊合作的靈活性。使用者可以在雲端實現即時協作,讓團隊成員無論身處何地,都能共同編輯與管理項目,從而實現更高效的工作流程。 自創立以來,Navicat 已累積超過 500 萬次下載,並擁有超過 18 萬名使用者,包括多家知名的 Fortune 500 公司,如 Apple、Google、JP Morgan 等。這些成就不僅體現出 Navicat 的產品實力,更說明其在業界的深厚信譽。 Navicat 始終秉持創新與使用者導向的理念,致力於為資料管理提供最可靠、高效的解決方案。未來,我們將持續推出更多令人興奮的新功能,幫助使用者應對不斷變化的商業需求。 現在就探索 Navicat 17.2,感受 AI 技術帶來的全新資料管理體驗吧!欲了解更多資訊,歡迎造訪我們的官方網站: https://www.navicat.com.tw