Framer
Blog
  • Latest
  • Product
  • Editorial
  • Customers
  • Guides
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support
Blog
  • Latest
  • Product
  • Editorial
  • Customers
  • Guides

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.

Ashanya Indralingam

AI

by Ashanya Indralingam

Ashanya Indralingam

AI

Twitter

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.

Duncan Crozier

DC

“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
Miranda Slayter

MS

“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
Eduardo Shiota

ES

“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.

Booking Logo

Servicing 43 languages

  • Offering 29 million listings across 227 countries
  • Over 1.5 million room nights booked daily
  • 17,000 employees across 200+ global offices

Featured Team

  • Erin Weigel (Principal Designer)
  • Duncan Crozier (Senior Designer)
  • Miranda Slayter (Senior UX Designer)
  • Melody David (Senior UX Copywriter)
  • Eduardo Shiota (Senior Front End Developer)
  • Michel Elings (Principal Product Manager)
Try Framer

Collaborate as a team.

Get started today
Pivot: Try Framer

Share this article

TwitterFacebookLinkedIn

Bring your best ideas to life

Subscribe to get fresh prototyping stories, tips, and resources delivered straight to your inbox.

Visual

Guides

Framer Team Handbook

December 22, 2020

Visual

Customers

Replai Cuts Product Development Time from Weeks to Days

December 10, 2020

Visual

Guides

Switching from Sketch to Framer

November 19, 2020

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement