Google Flights Mobile Datepicker
Developed a standardized date selection component that became the Material Design standard, handling complex travel booking scenarios while improving conversion rates.
Background
When Google was unifying its design language through Material Design, date selection remained inconsistent across products, even between Google Flights and Hotels.
In the realm of travel booking, there are only 2 critical user decisions: when & where.
With dates being half of the core decision criteria, we needed to get this fundamental interaction right.
Key challenges
- add_circleInconsistent date selection across Google products
- add_circleComplex multi-city booking requirements
- add_circleScattered user experiences and duplicated engineering effort
- add_circleAlmost every travel booking site had developed their own unique approach
Outcomes
- add_circleAdopted as the official Material Design standard across Google products
- add_circleSelected by Material UI (MUI) open-source React library, benefitting billions of users worldwide
- add_circlePrototypes for interactions and motion design reduced engineering implementation time by >50%
Business Impact
Standardization & Improved Operational Efficiency
- add_circleAdopted as official Material Design standard
- add_circleCreated consistency across Google's product ecosystem
- add_circleDeduplicated engineering efforts
Improved Conversion
- add_circleContributed to a +50% conversion rate increase with several partners
- add_circleThe animated transitions and improved interaction design led to significant increases in user engagement
Industry Influence
- add_circleSelected by Material UI (MUI) library
- add_circleExtended impact to broader design community
Datepicker demo
This is a fairly faithful recreation of the original that resulted from several rounds of research. The original had some additional optimizations (using pseudo-elements for performance, implementing view recycling, etc.) and features (like storing the selected dates as search params, highlighting especially low prices, etc.), but from an interaction point-of-view, this is accurate.
S
M
T
W
T
F
S
April
April
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
May
May
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
June
June
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
July
July
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
August
August
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
September
September
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
October
October
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
November
November
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
December
December
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
January
January
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
February
February
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
March
March
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Selection Logic
Price Display
Solution
Starting with Google Flights' specific needs but designing for broader applicability, created a datepicker component that balanced three key requirements.
Intuitive Interaction
Created a framework that supported both casual users booking weekend getaways and power users planning multi-leg business trips
- add_circleDeveloped a natural date selection flow that worked equally well for single dates, ranges, and complex multi-city itineraries
- add_circleSolved for complex multi-city booking first to create flexible framework
Smooth Motion Design
Improved user experience and made implementation more efficient across teams
- add_circleCreated precise motion specifications for transitions and animations that enhanced user understanding
- add_circleAs noted by Senior Engineer Kevin Fox: 'Perfecting the itinerary selection/deselection animations took me over a week of work, and each iteration saved me at least 50% of that time'
Cross-Platform Consistency
Consistent experience across web and mobile platforms
- add_circleDesigned a flexible system that maintained visual and interaction consistency across web and mobile platforms
- add_circleRespected platform-specific conventions while maintaining core interaction model
Component Specification
The component consists of several key elements that work together to provide a seamless date selection experience. This implementation was used as the reference for the Material Design guidelines. This design standard was then extended to the MUI open source React project, which is used by thousands of developers.
1
Title - Displays "SELECTED RANGE" header2
Selected date range display (Nov 17 - Nov 26)3
Switch to keyboard input mode button4
Month/year selection dropdown (November 2018)5
Month navigation controls6
Start of selected range (November 17)7
End of selected range (November 26)
Process
Initial Analysis
- add_circleConducted competitive analysis of travel booking sites
- add_circleIdentified key pain points and scattered landscape
Design Development
- add_circleCreated framework for complex multi-city bookings
- add_circleDeveloped precise motion specifications
- add_circleDesigned cross-platform consistency
Implementation
- add_circleWorked with engineering teams
- add_circleIterated on animations and interactions
- add_circleValidated across different platforms
Role
UX Engineer
Tools
Sketch, Sublime Text, Google Cloud
Tech
App Engine, HTML, CSS, JavaScript