top of page
DYNAMIC
PRICE CALENDAR
"Your gateway to lowest prices to plan your journey with
ease and joy."
PROJECT OVERVIEW
The primary objective of this project was to enhance the user experience within the flight booking flow by redesigning the calendar interface by integrating a dynamic price calendar feature.
A key addition to the revamped interface is the interactive calendar, which dynamically presents real-time pricing details. This feature shows users up-to-date information, encouraging them to make informed decisions regarding their travel arrangements.
THE CONTENTS
-
Previous calendar view
-
Design Process
-
Research & Survey
-
Ideation & Design
-
Usability testing overview
-
Final Designs
PREVIOUS CALENDAR VIEW IN BOOKING FLOW
Limitations in the above design
Lack of pricing information
Include the pricing information displayed on the calendar view, ensuring that users can easily compare prices across different dates. Clear labeling and intuitive visual cues can help users quickly identify the best pricing options.
Address Accessibility
Take into account users' feedback on enhancing accessibility features for the calendar view. This could involve improving colour contrast for better readability.
DESIGN PROCESS
EMPATHISE
Understand user needs and feelings through research
DEFINE
Clearly state problem based on insights
IDEATE
Generate creative solutions to the defined problem
DESIGN
Create visual designs and interactive models of solutions
TEST
Collect user feedback to imporve and refine designs
RESEARCH & SURVEY
To gain a better understanding of our existing price calendar on booking flow, we conducted surveys. The information we gathered from these surveys has given us important data.
What is the primary factor you consider when booking travel services through a travel app?
How do you use pricing information in the calendar interface?
UX Conclusion
Based on the survey where 41% of users prioritize the lowest fares when booking their trip, it is recommended to display prices and lowest fares on the calendar during the booking flow. This aligns with users' primary considerations, facilitating transparent decision-making and enhancing the overall user experience.
Integrating real-time pricing updates and features like price comparison tools will empower users to make informed decisions and capitalize on the best deals, driving user satisfaction and conversion rates.
IDEATION & DESIGN
Our design process began with brainstorming sessions to generate ideas for integrating real-time pricing into the calendar. We then created wireframes and prototypes to visualize the new design concepts.
Option 1
Before Selection
After Selection
Option 2
Before Selection
After Selection
​
Prices will be displayed directly on the calendar interface.
​
The lowest fares will stand out with a downward arrow and blue highlight, while selection will be indicated by a circular marker.
​
Dates without prices will be indicated by three dots, ensuring users are aware that there are no flights available on that day.
Design Considerations
​
Prices will be displayed on the calendar interface, with the lowest fare highlighted in a yellow ticker if it's the lowest price across the month.
​
When selected, the price will be indicated by a square box with a yellow ticker, remaining at the top if it represents the lowest fare.
​
Dates without prices will be indicated by two dashes, alerting users that there are no flights available on that particular day.
Design Considerations
USABILITY TESTING OVERVIEW
Tools Used : Maze
Total Participants : 30 Users
-
Moderated Test : 10 Users
-
Unmoderated Test : 20 Users
Access ease of locating the lowest price
-
Evaluate users understanding of calendar prices
-
Examine accessibility and price readability
-
Do users still value the flexibility of the calendar feature despite price visibility?
Goal
I've conducted A/B Testing
Mission Outcomes
Design A outcomes
95.2% of the users successfully clicked on the lowest price with yellow tag
85% of the users rated 5 if feature is useful in finding lowest fares across dates.
User Comments
-
The yellow ticker is only available for the lowest fare (9 users)
-
it's pretty straightforward (10 users)
Open Question
What do you think yellow ticker refers to?
26 Users answered as “Lowest price”
Follow up Questions
Multiple choice Question
Both departure and return dates are selected, what does the price in the calendar mean to you?
90% Users answered as “Round Trip”
Open Question
How can we improve the experience of searching for lowest fares in the app?
The lowest price can appear in colour for easier viewing (10 Users)
Design B outcomes
65.1% of the users successfully clicked on the lowest price with down arrow.
83% of the users rated 5 if feature is useful in finding lowest fares across dates.
User Comments
-
some may not notice the dropdown button (5 users)
-
The lowest fare is displayed in a different colour (6 users)
Open Question
What do you think yellow triangle refers to?
26 Users answered as “Lowest price”
Follow up Questions
Multiple choice Question
Both departure and return dates are selected, what does the price in the calendar mean to you?
88% Users answered as “Round Trip”
Open Question
How can we improve the experience of searching for lowest fares in the app?
Perhaps the lowest fare can be highlighted further so that it stands out more as it currently might be missed out (6 Users)
The lowest price can appear in colour for easier viewing (3 Users)
DESIGN RECOMMENDATIONS
UX Recommendation
Reason
To proceed with Design A- the yellow tag represents the lowest price.
Though most of the users were able to identify lowest price in both designs. In design B, some users pointed some may not notice the arrows. Hence to proceed with Design A to show lowest price.
To review tech limitations for price shown in various scenarios (i.e. when user selects both departure and return date)
User's perception of the price shown after selecting are clear and accurate.
To include a note that prices in calendar are not updated in real time
Given the technical limitations, it's important to prominently display a message indicating that prices are not updated in real-time.
FINAL DESIGNS
bottom of page