Airbnb Discovers A Better Calendar Picker Component From This UI Experiment

Leak #43 from   |   Feb 3, 2020 Product

This was a simple calendar picker experiment that Aribnb recently ran and eventually rolled out. The A/B test contains at least 4 simple UI changes which might have contributed to a positive outcome. And so this also shows us what a slightly better UI component looks like.

A - Oct 31, 2019 Screenshot
IMPLEMENTED Confirmed Feb 3, 2020
B - Oct 31, 2019 Screenshot

Highlighted UI Changes From This Leak

  1. Bordered Month Slider Buttons

    One visible change is of the arrow icons gaining more of a defined border, making them more of a button style.

    This is very similar to Pattern #116: Links Or Buttons

  2. Disabled Background Fill For Unavailable Dates

    Secondly, we also see that the B variation had a greyish background fill on the dates that were not available. Interestingly, the disabled style also used a hatched texture as an additional cue to further differentiate the style.

  3. Green Background Fill For Available Dates

    Similarly, the available dates gained a stronger green background fill for the available dates. Perhaps these two styles made it a little more easier to compare and see which dates were available and which weren't.

    This is very similar to Pattern #107: Contrast Links & Buttons

  4. Wider Component

    Finally, notice how the component in version B is a little wider by filling the full column. The date buttons are therefore slightly bigger, or perhaps have a bit more padding.

    This is very similar to Pattern #97: Bigger Form Fields