Web Core Experience

Web Core Experience is an ecosystem of frameworks, tools, and features that utilize Machine Learning to transform how we develop personalized user experiences. It also drives more meaningful business metrics and improves the way we collaborate to build Booking.com’s Web products.

I was a founding member responsible for coming up with the high-level design vision to get leadership buy-in, draft a roadmap to explore tangible outcomes with my product counterparts, and build a strong team of designers.

The challenge

For a long time, our website was built for a single supply (Accommodations) and through a single business metric measuring bookings. Product teams were free to explore any real estate as long as their key metric was preserved. As a result, our product lacked a coherent approach for personalization and we weren’t serving our user’s diverse needs beyond booking a property.

This approach also expected product teams to write bespoke code, internally coordinate with lots of other teams for placement, and invent their own way of measuring and monitoring success every time they released a new feature.

Defining the vision

In collaboration with my research and product counterparts I came up with a design vision that demonstrates the opportunity of moving to a multi-purpose and multi-product universe. In order to achieve this, I realized that we would need to build an ecosystem powered by Machine Learning. In collaboration with engineering, I designed this ecosystem and illustrated how it will work.

We chose our website’s homepage as our initial testing ground due to its organic visitors and the diverse use cases it accommodates. I created a pitch deck detailing the problem, the proposed solution, and the homepage use case to get buy-in, raise awareness, gather feedback, and figure out collaboration opportunities.

Designing initial use cases

We had multiple problems on the homepage which we could tackle to put our new system to the test. From user research, I knew that one of the most evident ones was how we displayed campaigns and promotions. There was a lack of clear hierarchy and consistency between the UI elements used to display campaigns. There were also no page-level placement frameworks and governance. All resulting in campaigns diminishing each other's value and the business not having a single way to monitor each placement’s performance.

Together with the design team, we came up with the concept of primary (large investment marketing campaigns) and secondary (feature awareness) campaigns. We also designed a hero component and banner components to showcase these campaign types on the homepage. We also worked with our Machine Learning team to figure out how we could place and order these UI components throughout the homepage depending on user context.

Knowing that a good developer experience is also crucial to our definition of done, we also used campaigns as the first use case for the Merchandising Platform. We worked with the team to integrate these UI components into the tool so content creators and product teams could review and monitor their campaigns from a single place. We also made sure that there was an approval process in place so we could ensure consistency and better governance at the page level.

In addition, I worked with stakeholders I mapped across our Marketing and Technology teams to create and document a process on how to create high-quality campaigns and how our teams can make content creators' lives easier. I made sure to highlight the specific roles each party plays in the process so everyone had a clear picture of their responsibilities.

Proof of concept

I mapped out a campaign calendar to see which campaigns we can help expose better and use as our proof of concept. Starting with smaller audience campaigns to test, learn and iterate on the designs. We helped run a campaign called Flash Deals, a Super Bowl ad campaign for the US called Booking.yeah and finally, our largest audience campaign, Black Friday.

In parallel, we also designed and tested a no campaign version of our hero component with a multivariate test. Our goal was to bring more prominence to our search box and other primary user actions and introduce better consistency and brand awareness across the board.

I also worked with designers in my team to ship multiple new UX features on the homepage. We improved the logic, placement, and representation of recent searches. We made the SEO-related links on the page less visually dense and clarified their purpose. Last but not least, we designed a generic carousel component with which we have tested many different types of content recommended by our Machine Learning algorithms.

Building the team

I worked with product managers to design a new organizational structure and recruited core and senior-level designers. During their onboarding, I’ve set up recurring one-on-ones with the designers in my area to build an open and trusting relationship to better understand their ambitions, strengths and growth areas. Doing so helped me assure that their focus area was a good fit for them.

I also worked with the designers to come up with a longer-term design vision on how to extend our use cases beyond the homepage. We turned parts of our vision into objectives and assigned each other ownership. Having both the objectives from their teams and the design objectives have allowed the designers to have crystal clear personal goals throughout the year.

Lastly, I worked on defining processes on how we collaborate as a design team. Including design critiques, weekly jam sessions, and dogfooding sessions to make sure we learn from each other while putting ourselves in the shoes of our users. I facilitated these sessions with various cadence.

Outcome

In a matter of a year, the Web Core Experience team has been able to build a modern and relevant user experience framework that is extensible to any context. We also had a very positive impact on our users and our business. We greatly improved our main customer equity metric with the following efforts:

• Our Machine Learning ranking algorithm improved the overall experience on the homepage by serving more use cases and increasing customer equity through better ranking.
• Usage of our framework and the Hero component on the Homepage through the Flash Deals, Booking.yeah and Black Friday campaigns increased campaign awareness and efficacy, and transactions greatly. Bringing in lots of revenue.
• The no campaign version of our Hero component had a big impact on primary customer actions such as search, account registrations, and cross-product navigation.
• The newly designed recent searches and SEO blocks have increased conversion and primary customer actions.

Next steps

Web Core Experience remained in my scope and continued to grow. Their scope got bigger, spreading their framework into more product areas beyond the homepage. As they extended this new way of working, the design team also found themselves in an educating position, spending a lot of time in peer design sessions, talks, and writing documentation.