跳到主要內容

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.

這個網誌中的熱門文章

為什麼電視直播比賽總是比網路快?看低延遲串流如何搶秒數

  大多時候,你在網路上看的 Live 直播串流,其實不是與現實世界完全同步的即時轉播,先看看以下這些場景,相信對你來說並不陌生。 NBA 冠軍賽才正看到精彩處,隔壁鄰居卻突然爆出一陣歡呼,原來,用電視觀賞同一場比賽的他們,比你早 30 秒歡呼慶祝三分球入網,不小心點開社群媒體,更發現朋友們早已發文熱烈討論比賽結果。 就像電影被暴雷一樣,少了即時參與的驚喜感、提早知道結局,觀看直播活動的樂趣頓時大打折扣。 或是,收看跨年演唱會時,正當你興高采烈倒數最後 30 秒時,才發現,窗外的慶祝煙火已經此起彼落,大家都已經跨入新的一年,只有你還停留在前一年。 雖然從絕對時間來看,這些狀況都僅有延遲短短幾秒鐘,但在體感上,觀賞體驗卻大受影響,用「失之毫釐,差之千里」來形容再恰當不過。 使用直播串流時,為什麼你的世界總是比別人慢幾秒?原因正是「串流延遲」。 從攝影機到觀眾螢幕的層層關卡 串流延遲,指的是攝影機拍到影像後,直到觀眾端螢幕出現畫面的時間差。 一般來說,有線電視直播約延遲 5 到 10 秒,而 YouTube、LINE、Twitch 等多數 OTT 平台,延遲大多介於 15 秒至 30 秒,距離延遲秒數低於 3 秒的「超低延遲」(Ultra Low Latency)標準,還有一大段距離,這也讓現有直播內容的互動效果有限。 但想克服延遲並不容易,光是一段畫面要從現場攝影機,傳到電腦和手機螢幕,中間所需流程多到難以想像。 KKStream 執行副總李卓軒 Kevin C.H. Lee 解釋,這流程大致包含一開始的攝影機收取影音訊號,接著需轉換訊號、傳輸、上傳雲端、加密、備份,傳到終端裝置後再解碼,最後才是播放。 這整段「螢幕到螢幕」的過程,就像是將包裹從A點運送到B點,只要中間有幾個環節耽誤,就會讓整體運送時間不斷疊加。「每個步驟都要優化,只要有個點延遲很高,加總起來就無法達到超低延遲的標準,這需要很強的技術掌控力。」Kevin 說。 另一個挑戰則在於,由於各大終端裝置原廠(如Apple、Google)雖然有提供低延遲串流相對應的規範,但並未說明實際的執行細節,因此串流技術業者只能自己摸索。 受限於技術瓶頸,目前大多數的直播串流服務,只能在延遲、直播規模和影像品質三者間取捨。例如,常見的視訊會議軟體,像是 Zoom、Google Meet,雖然延遲相對低,但參與人數上...

COSCUP x UbuCon Asia 2026 錄取攤位公告/Full List of Accepted Community Booths at COSCUP x UbuCon Asia 2026

Full List of Accepted Community Booths at COSCUP x UbuCon Asia 2026 COSCUP x UbuCon Asia 2026 Booth now release. See which community you can meet on COSCUP x UbuCon Asia 2026. No. Community Introduction 01 UbuCon Asia HackMD 02 Ubuntu Community & Ubuntu-TW HackMD 03 Cloud Native Taiwan User Group x WasmEdge HackMD 04 Automotive Grade Linux HackMD 05 Ruby Taiwan HackMD 06 Wikimedia Movement in AI Era HackMD 07 t2linux HackMD 08 Twinkle AI HackMD 09 Taiwan JVM Team HackMD 10 Interledger Foundation HackMD 11 SITCON Student Information Technology Conference HackMD 12 OpenEverest HackMD 13 WordPress Taiwan Community HackMD 14 OSPN (Open Source People Network) Japan HackMD 15 GolangTW HackMD 16 opencocon distribution HackMD 17 Open Culture Foundation HackMD 18 GDG TW (Google Developers Groups Taiwan) HackMD 19 FediDev KR & FediLUG (Japan) HackMD 20 Blockchain and Distributed Ledger HackMD 21 Open-EP (E-Paper) Community HackMD 22 FOSS for All HackMD 23 ...

COSCUP 2026 BoF / Hacking Corners 參與辦法及使用規則 Participation Guidelines and Usage Rules

COSCUP 大會是台灣乃至全球開源愛好者的年度盛事 ; 每年吸引來自世界各地的開放文化愛好者參加。如果你熱愛開源,尋找志同道合的朋友,不妨加入我們的 BoF / Hacking Corner 活動! 在 2026 年的 COSCUP 中,來與朋友一起參加 BoF 會議或 Hacking Corners 吧! Meet friends at the BoF sessions or Hacking corners of COSCUP 2026! BoF (Birds of Feather flock together) 時間 / Time: Aug 8th and 9th, 10:00 - 16:00 活動場地 / Location: Room TR310-2 想象一下,在一個充滿激情的房間裡,你與一群同樣狂熱的開源愛好者圍坐一起,分享著那些只有“內行人”才懂的秘密。從未來技術的預測到那些奇妙的代碼秘籍,BoF 讓你的每一次對話都精彩絕倫!。 COSCUP 年會聚集開放源碼社群成員,是舉辦和開源、社群及開放文化有關開源相關主題 BoF 的絕佳環境! Imagine being in a room bursting with passion, sitting in a circle with a group of equally enthusiastic open-source aficionados, sharing secrets known only to insiders. From predicting future technologies to uncovering marvelous coding hacks, BoF sessions make every conversation extraordinarily engaging! The COSCUP annual conference gathers members of the open-source community, providing an excellent environment for hosting BoFs on topics related to open source, community, and open culture. - 加入我們的 BoF 聚會,與來自全...