跳到主要內容

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.

這個網誌中的熱門文章

鑽石級贊助商 - KKBOX 帶你打造具備 NLP 功能的 Telegram Bot (上)

打造具備 NLP 功能的 Telegram Bot(上) 最近因為一些契機學了 Python 3,用它做了一個 Telegram Bot ( GitHub 連結 ),裡面用到 NLP Service,用上下兩篇文章記錄一下實作過程還有眉角。上篇首先教大家如何做一個最基本的回聲 Chatbot,接下來我們可以透過 NLP 服務,讓 Chatbot 根據使用者不同的訊息做回答,這樣就變成更加人性化的聊天機器人囉! 使用的工具及服務: Python 3 (for develop) pipenv (for dependency management) OLAMI (for NLP) ngrok (for testing) Step 1. Creating new bot Telegram 很有趣的地方在於,與其他通訊軟體(Line、Messenger)相比,開發者管理 Bot 的方式也是透過官方提供的一位 Bot 在處理的,它叫做 BotFather (眾 Bot 之父 XD)。如果已經有 Telegram 帳號,只要加 BotFather 為好友,就可以開始管理你的 Bot。 加入 BotFather 好友後,它會親切地問候,並告訴你他能為你提供什麼服務。 I can help you create and manage Telegram bots. If you're new to the Bot API, please see the manual ([https://core.telegram.org/bots](https://core.telegram.org/bots)). You can control me by sending these commands: /newbot - create a new bot /mybots - edit your bots [beta] /mygames - edit your games ([https://core.telegram.org/bots/games](https://core.telegram.org/bots/games)) [beta] Edit Bots /setname - change a bot's name /setdescr...

COSCUP 2025 Call for Proposals / 徵稿辦法

COSCUP 常規徵稿已於 2025-05-10 截止,接下來進入加碼徵稿階段。加碼徵稿是為了提升大會的稿件品質,依據投稿狀況(數量、品質)部分徵稿主題可能提前喊停。最遲請於 05 月 24 日(AoE) 前投稿,徵稿主題可參考下方列表。 The regular call for proposals (CFP) for COSCUP closed on May 10, 2025. We are now entering the bonus CFP phase to improve the quality of submissions. Some topics may close earlier than expected, depending on the current status of submissions (in terms of quantity and quality). Please submit by May 24 (AoE) at the latest. You may refer to the topic list below for inspiration. 開始投稿 Submit Your Proposal 提案須知 Things you may need to know 演講形式:預設為現場30分鐘演講包含QA,若有其他需求可於提案系統註明,由各主題主辦單位決定如何安排。 Talk Format : The default format is a 30-minute on-site talk, including Q&A. If you have other requirements, please indicate them while submitting your proposal. The final arrangement will be decided independently by the organizers of each topic. 語言:COSCUP 受眾包含海內外與會者,大會不限制發表語言但鼓勵以英語發表。大會將公布雙語議程表,請提供中英文版議程介紹。 L...

機器學習的五大實務問題:對企業的影響與相應的化解方式

Appier 首席機器學習科學家 林守德博士 正如 Jason Jennings 及 Laurence Haughton 在《以快吃慢–如何藉速度在商戰中克敵制勝》一書中指出──未來,不是大公司吃掉小公司,而是速度快的公司吃掉速度慢的公司。 從現在開始,唯有善用適當的資訊快速做出決策的企業,才能成為戰場上的贏家。 機器學習技術驅動了這場變革。無論企業是嘗試向顧客提出建議、改進生產製造流程或應對市場的變動,都能運用機器學習技術處理大量的資料,進而提高自身的競爭優勢。 然而,機器學習雖能創造大好機會,卻也同時帶來了相應的挑戰。機器學習系統需要大量的資料,以及執行複雜的運算能力。顧客期望改變、出乎意料的市場波動等等外部因素,都意味著機器學習模型的運作並不是百分之百的自動,往往仰賴許多外部的資源來作監控及維護。 此外,機器學習也有不少尚待解決的實務問題。以下將深入探討機器學習的五大實務問題,以及這些問題對企業應用會產生的影響。 1. 資料品質 機器學習系統仰賴資料進行訓練,而訓練資料在廣義上可分為「特徵」及「標籤」兩種類別。 「特徵」是輸入機器學習模型的資料,像是來自感測器、顧客問卷、網站 cookie 或歷史資訊等等。 然而這些特徵的品質可能良莠不齊。舉例而言,顧客在填寫問卷時可能會隨便填寫,或對題目略而不答;感測器可能因失靈而回傳錯誤資料;即使使用者的網頁行為明確,網站 cookie 回報的資訊也可能不完整。 此外,資料也可能包含雜訊,當無謂的資訊夾雜其中時,機器學習模型將會受到誤導而做出不正確的預測。 相較於「特徵」,「標籤」的正確性與穩定度更為重要。標籤是機器學習模型最後輸出的結果。所以需要在訓練的時間利用正確的結果教導機器學習模型。標籤的稀疏性也是個問題,這是當系統已掌握大量輸入的資料卻對輸出的結果沒有把握時出現的現象。在這樣的情況下,將難以針對該模型偵測其特徵與標籤之間的關聯性優化,甚至需要耗費額外的人力干預,將標籤與輸入資料關聯起來。 機器學習需仰賴輸入與輸出資料的關聯,才能具備足夠的泛化能力以預測未來行動並提供相關建議。因此,如果輸入資料過於雜亂、殘缺或有所偏差時,將可能難以理解某輸出/標籤的產出原因。近年來機器學習也開發出許多先進的方法如半指導式學習,轉移學習來處理這樣的問題。 2. 複雜性與品質的取捨 建立強大的機器學習模型需要大量的計算資源來處理特徵和...