跳到主要內容

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.

這個網誌中的熱門文章

COSCUP 2019 CfP is now open, submit your proposal before May 6th, 2019.

We are looking for talks in several open-source related areas, please submit your proposal before May 6th, 2019. After the review process from the coordinators, we will publish the full programme in early June.一如往常,在今年的 COSCUP 我們徵求各式各樣不同的 Open Source 相關稿件。請於 5 月 6 日前投稿,或可參考本頁下方各議程軌資訊。Submit your proposalImportant DatesSubmission deadline: May 6th, 2019 (截稿時間)Full programme published: Early June (預定公佈時間)COSCUP 2019: Aug 17-18 (with welcome party at 16th night), at National Taiwan University of Science and TechnologyPartner conferences / 合作研討會特別軌We are gladly welcome HKOSCon (Hong Kong Open Source Conference,) COSCon (China Open Source Conf,) and OSPN OSC (オープンソースカンファレンス) join us with a special track. Please check their CfP form for more information about the track.今年 COSCUP 與 OpenSource HK 的「HKOSCon」、開源社的「COSCon」及 OSPN 的「OSC」合作推出特別軌,以期邀請各地的開源愛好者前來與大家一會。其各自的徵稿資訊,請參考下方連結。opensource.hk "HKOSCon" Special Track開源社 "COSCon" Special TrackOSPN "オープンソースカンファレンス" Spe…

2016 Unconference 議程公告!

嗨、各位親朋好友們
今年的 Unconference 名單出爐啦! 由於每一個 Talk 都相當精彩,因此我們想了辦法讓所有投稿的人都有舞台可以分享。 Unconference 演講場地為中研院活動中心的平面會議室。 對於其中的講題有興趣的朋友們請不要錯過囉 :-D
8/21 Unconference 活動中心的平面會議室時間 講題 講者 10:45
|
11:05 用開放原始碼技術翻轉傳統產業IT架構 Derek Hsu11:10
|
11:30 會自動飛行的"神奇寶貝"and飛行技巧 gavin 11:45
|
12:05 ProbeDroid: Crafting Your Own Dynamic Instrument Tool on Android for App Behavior Exploration | 沈宗賢 (AndyShen)12:10
|
12:30 蒙地卡羅模擬與志願運算 趙元13:30
|
13:50 Runtime PM for CPU idling in Linux kernelfreedom Koan-Sin Tan 13:55
|
14:15 Fuzzing and Mozilla GARY KWONG gkw14:30
|
14:50 無良房東一度電收你 5.5 元,你難道不生氣嗎?——從自幹智慧電表講起 Felix and Timo14:55
|
15:15 COSCUP + AppDevKit Jeff Lin C 備註:議程時間可能會調動。

COSCUP 2019 開源貢獻者保留票申請 / Open Source Contributors (OSC) Tickets Application

開源貢獻者資格 由 2018/5/12 到現在,實際針對開源專案提供開發、推廣、或其他有助專案進展之貢獻者,提出貢獻相關證明即可報名。
開源專案意指專案成果以 FSFOSI 認同之公眾授權條款釋出者 所提出之貢獻,必須可以經由公開途徑查證(例如提供 GitHub、Google Code、SourceForge 等公開專案平台上的討論紀錄、網址、commit log、信件文本、公開釋出之演講投影片紀錄等。) 海外參與者 你身在海外,雖想回台參與 COSCUP,但並非貢獻者又害怕搶不到票嗎?COSCUP 歡迎所有的海外人士前來參加!只要你居住在海外、承諾與會,並願意於 SNS 或個人 blog 公佈自己即將與會之訊息,即使非貢獻者或講者,也將優先獲得我們的 VIP 邀請。請在報名表上註明您的出發地,我們將再與您聯絡。

海外參與者請於第四個 Section 告訴我們您從哪裡來,並勾選相關選項。
Key dates5/12 報名截止。5/13 ~ 5/18 審查期間。5/19 第一次審查完畢,開始補件。5/26 前補件完成。6/2 公告開源貢獻者正式名單,通過的開源貢獻者可以在 KKTIX 上報名。 申請表單 申請方法與詳細資訊:https://goo.gl/forms/x7rmsEPsooBSK46T2

Who can apply for OSC tickets? Your participation in an open source project since 2018/5/12 makes you eligible for applying for a Registration Code. The open source project and your participation must meet the following conditions:
The project source code must be released with a license approved by Free Software Foundation or Open Source InitiativeThe project must be hosted on a public repository such as GitHub, Google Code, Sour…