跳到主要內容

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.

這個網誌中的熱門文章

COC 通報處理說明公告 - 20240811 通報事件

各位好, COSCUP COC 服務小組於 2024 年 8 月 11 日接獲一件通報,內容涉及在會期干擾議程進行;並於會後持續發送私訊予會中結識的講者;同時,該行為人亦被紀錄於活動當日干擾志工執行勤務。 有關此事件的處理過程,詳如下述: COC 服務小組接到通報後,於 8 月 15 日正式成立專案小組進行討論與檢視相關資料。經查,通報內容與 COC 條款「持續干擾議程或活動的正常進行,無視工作人員或與會者的制止」相符。同一行為人於大會期間,另有兩位會眾通報類似事件,COC 服務小組皆已明確指正其行為並重申 COC 規範和界線。綜合此次會後通報,行為人經提醒仍多次抵觸 COC 條例。 有鑒於上述行徑已明確影響 COSCUP 其他會眾之權益,COC 服務小組將依照 COSCUP COC 之辦法記錄事件處理過程及結果、行為人資料等,於籌備團隊組長群資料夾建立文件,以俾後續籌備團隊審慎思量該名行為人未來的參與形式與程度。 在此,感謝會眾願意信任 COC 和 COSCUP 團隊並且將其所遇到的事件於會後彙整提供予我們。另本次通報中,通報人所提及之部分事項,因非屬 COSCUP 大會參與期間和相關行為,已建議通報人另行循其他正規途徑處理。在此聲明, COSCUP 的 COC 落實並非要拒任何人於門外,而是希冀透過針對行為本身的評估,為無論志工、社群協調人、講者、廠商與所有會眾營造舒適與安全的交流環境。 我們在乎所有人於 COSCUP 大會的各種參與體驗與感受,如果您在大會和籌組期間有相關困擾,籌備團隊志工將會竭力協助釐清,希望一同打造友善的 COSCUP 與會環境。 COSCUP 2024 COC 服務小組

你所不知道的 foodpanda

  2020 左右,隨著新冠疫情流行,台灣也逐漸流行起一股懶人旋風。懶懶躺在沙發上,動動手指滑滑螢幕,生鮮或美食就能快速又安全地由可愛的粉紅色熊貓外送員送達您門口。多數人知道 foodpanda 是台灣最大生鮮美食外送平台,也不少人知道 foodpanda 在台灣不斷擴張業務範圍,但 foodpanda 也有許多台灣科技圈所不知道的事。 例如,foodpanda 其實並非台灣本土廠商,也非只專注在亞洲區域。foodpanda 隸屬於德國 Delivery Hero 集團,業務橫跨歐洲、亞洲、美洲及北非,旗下更有十多個生鮮美食外送品牌。除此之外,foodpanda 於 2021 年時也在台灣正式成立全球第三個 Tech Hub。做為四大產品 RD 研發中心之一,台灣與德國柏林、新加坡及土耳其伊斯坦堡的人才緊密地合作,專注於打造 end-to-end 的顧客體驗。諸如月費方案 Panda Pro、外帶自取、餐廳內用 (目前仍未在台灣上市) 等功能。期待能持續吸收優秀人才、與其它三個跨國研發中心合作,打造後疫情時代新的成長引擎。 事實上,台灣的 foodpanda 研發團隊並不僅止於打造台灣本土產品。反之,我們所建立的平台及產品,已成功於近 20 個國家、10 個品牌上市。要在快速的步調下,打造持續進步且符合不同國家文化客戶需求的產品,我們依靠的是 專案團隊成員一條龍組合 從 Product Manager、Engineering Manager、iOS/Android/Web/Backend developer、QA、Product Designer、Product Analyst 全都在同一個 product line squad。讓相同產品的團隊成員能緊密合作、第一手快速了解市場、滿足需求。 國際專業團隊緊密合作 foodpanda 的 iOS/Android/Web/Backend 等專業工程師,都各自設有其跨 squad 的 chapter 組織。讓工程師能在專案團隊以外,有跨國跨團隊專業能力交流的機會。在 chapter 中,相同技術域領的專家們,會一起制定共同的實作標準、分享在專案中遇到類似的挑戰,並且找出可能的應對方案。因此,在 foodpanda 我們不只打產品專案團隊的速度戰、還打整個集團的整合能力團體戰,讓德國、新加坡、台灣、伊斯坦堡的工程師...

COSCUP 2020 行前通知 / Are you ready ~~

(English below / 下半部有英文版) COSCUP 2020 即將開始了,我們幫你設計了一個簡單的引導手冊,讓你不錯過 COSCUP 每個小細節。 主要資訊 大會活動時間為 2020-08-01 - 2020-08-02 地點在 台灣科技大學 (台北市大安區基隆路四段43號) 活動前 申請通過 OSCVPass 享有氮氣咖啡與 VIP 室的使用 個人贊助方案 :集合您力量達成一個黃金等級 前夜派對 :自由入場、喝一杯、聊開源 議程表 :排出最想聽的議程的最佳解 填寫「 健康聲明 」、閱讀「 防疫守則 」:我 OK、大家也 OK 預先 登記參加 BoF 小聚,讓志同道合的朋友可以找到您 身為家長,歡迎預約 遊樂園 🎠服務 出發前 查詢前往會場 台科大 的最佳路徑 查看 會場地圖 ,會議廳、教室不迷路! 抵達會場 確認「 健康聲明 」是否填寫了! 是否詳細閱讀「 防疫守則 」! 請全程配戴口罩! 😷 TR、RB 都有設置報到處與自由索取的小貓袋! 我們有提供「紅色頸繩」,給不方便被拍照、攝影的您。如有需求,請在報到處拿取,並全程佩戴在明顯之處供相關人員識別。 如果... 我是講者,我應該直接前往所屬的社群議程教室。 我是會眾,可以先看看行程上第一個議程教室在哪。 我有帶小朋友,可以前往 TR515 遊樂園🎠 我有厚重行李,可以到 TR517 使用寄放行李服務。 大會期間 逛逛贊助商攤位 (TR 2F) 、社群攤位 (TR 3F) 、使用 OPass app,秀出 QRcode 讓攤位人員掃描取得點數,並到大會攤位 (TR 3F) 兌換贈品,數量有限! 逛逛 志工任務 、蒐集獎勵,或到志工服務台 (TR 2F) 報名 COSCUP 2021 的志工! 到 BoF 會議室 (TR 4F) 門口尋找屬於您的聚會,與同好暢談彼此在相同主題上的新發現 TR 1F 有小餐車,也可以來這裡點杯氮氣咖啡配上老闆私房料理的牛肋排。 我迷路了 以下為會場與商店的座標位置,透過地圖軟體可以方便指...