How Booking.com Uses Framer X To Design with Data

In this video case study, the Booking.com design team shares how they use the Team Store to design with data and work with development.

by Ashanya Indralingam

Ashanya Indralingam

Content Strategist at Framer.

Booking.com is entering a transformational phase. The data-driven travel platform is exploring new products and features at an accelerated pace, and they’re discovering it’s impossible to leave A/B testing to the last stage. With over 29 million listings covering 227 countries, data is at the center of everything. And as the 17,500-person company expands into experience-based and transportation products, leadership is looking to invest in a scalable design solution.

Challenge

As design leaders at Booking.com have found, data and content need to be considered during the design phase, ideally well before any development costs have been incurred. But for this, they needed a robust design tool that would enable product teams to easily design with data, while still ensuring parity with development, and consistency across their global organization.

Solution

Design standardization

Standardization

With Framer X, any designer, across teams and timezones, can download, drag and drop in the same brand components from Booking.com’s own design system. Hosted as packages in the Framer X Team Store, the ease of accessing prebuilt components helps ensure standardized design output across all products.

“Having one place to access pre-approved components, which are also connected to your production components, provides designers with a solid foundation. So you’re not spending time redoing UI elements or wondering if you’re using the latest version, but actually designing with data or expressing your most creative ideas.”

— Duncan Crozier, Senior UX Designer at Booking.com

Use real data

Framer X also makes it easy for designers to easily utilize real data in their designs by connecting components directly to the Booking API. Whether its designing with maps, pulling in local hotel listings during user testing or validating UX copy on the fly, every product person at Booking.com, (regardless of technical ability) is empowered to use data in their everyday work.

Real data

“Before Framer X, I would have to use plugins to fill my designs with data, but it wasn’t dynamic and not really close to real life. With Framer X, I can easily connect to our API and use components with native interactions baked in.”

— Miranda Slayter, Senior UX Designer at Booking.com

Bridge between design and development

By utilizing Framer Bridge, Booking.com developers can also import production components into Framer X and automate updating, ensuring everyone is always working off a single source of truth

Development

“By using Framer X and using React components to lay out our designs, collaboration between designers and developers has been closer than ever. Simply because designers start to think more about APIs, constraints and states when designing. It really helps speaking the same language.”

— Eduardo Shiota, Senior Engineer at Booking.com

Company

Founded in 1996 in Amsterdam, Booking.com has grown from a small Dutch startup to one of the world’s leading digital travel companies. With a mission to empower people to experience the world, Booking.com seamlessly connects millions of travelers with memorable experiences, convenient transportation options, and incredible places to stay—from homes to hotels and so much more. The company is made up of a diverse community of employees, all connected by a love of travel and a passion for innovation.