How I Added a feature in a travel booking app within 48 hours : UX Case Study
I took part in the Ultimate 48 hours Product Design Challenge. As a part of this challenge, I had to add a “pick up from where you left off” flow in the Skyscanner app under the mentorship of The Great Anudeep Ayyagari.
The challenge began with an opening call at around 9 pm on Friday, 6th January by our mentor Anudeep and in this call, he gave instructions and the schedule of the challenge for 48 hours.
I had initially planned to sleep after the call would end. But after seeing the schedule there was no time for sleep.
Initial Plans:
After the schedule reveal:
Problem Statement
So different teams were given different travel apps and each member had a separate problem statement. Our team was given the Skyscanner app and my Problem statement was:
“To add a pick up where you left off flow in the app”
Ane we were told to stick to Hotel/hostel/stays/homestays booking funnel.
Problem Statement Brief
The challenge began with building a problem Statement Brief.
The unique part of this challenge was that we can now use Ai tools like Chatgpt to build the problem statement brief and use it to get ideas wherever we feel stuck. It is often debated How Ai will replace UX Designers but in this challenge, we used AI to our advantage.
The problem statement brief:
Company Name: Skyscanner
Feature Name: Pick Up From Where You Left Off Flow
Context: Skyscanner is a travel booking platform that helps users find and compare flights, hotels, and rental cars. Our users often begin searching for a trip but are unable to complete their booking due to various reasons, such as needing to gather more information or compare prices with other options. As a result, they may leave our platform without completing their booking.
Core Idea of the Feature: The Pick Up From Where You Left Off Flow feature aims to improve the user experience and increase bookings by allowing users to easily return to their incomplete booking and pick up where they left off. This feature will allow users to save their search criteria and preferences and will provide them with a notification or prompt to continue their booking when they return to the platform.
Impact on Business Metrics: We expect this feature to have a positive impact on our business metrics, including:
Conversion rate: By making it easier for users to return to their incomplete bookings, we expect to see an increase in the number of users who complete their bookings.
Customer satisfaction: By providing a seamless and convenient experience for users, we expect to see an improvement in overall customer satisfaction.
Revenue: As a result of the increased conversion rate and customer satisfaction, we expect to see an increase in revenue.
How It Helps Users: The Pick Up From Where You Left Off Flow feature will benefit users by:
Saving time and effort: Users will no longer have to spend time searching for their incomplete booking or inputting their search criteria and preferences again.
Providing a convenient and seamless experience: By allowing users to easily return to their incomplete bookings, we aim to provide a more convenient and seamless experience for our users.
Constraints: There are a few constraints to consider when designing this feature, including:
Technical limitations: It may be technically challenging to implement a feature that allows users to save their search criteria and preferences and seamlessly return to their incomplete bookings.
Data privacy concerns: We will need to ensure that we are transparent with users about how we are using their data and that we are complying with data privacy regulations.
Assumptions to be Taken Beforehand:
Before designing this feature, we will need to make a few assumptions, including:
- Users will find the Pick Up From Where You Left Off Flow feature useful and will opt-in to use it.
- We will be able to technically implement the feature as described.
- We will be able to collect and use the necessary data in a way that is transparent to users and complies with data privacy regulations.
The Wireframing Stage
The next task of the challenge was wireframing. We had to do wireframing to understand the current user flow and how we can add the flow for our problem statement to solve the problem.
In the wireframing Stage, I started with understanding the current user flow of the app.
Then I came up with some ideas like Add to cart option in the app or building a popup in the app that will allow the users to continue where they left off.
Then finally I decided I would build a popup that would enable the users to pick up where they left off in the app.
A rough idea of how the popup would look-
Existing Flow of the App
Building the UI
I decided to build a popup that would enable the users to continue booking the hotel from where they left off.
Popup Design-
Iteration of the Popup-
The problem with the previous design was that User won’t be able to cancel the booking from the popup and it would frustrate the user. So I decided to add a cancel button in the popup.
I added the popup at 3 places-
- Hotel Details Page (User comes to this page after canceling the booking or tapping on the back button of the final booking page)
2. Hotel Explore Screen
But in this Screen, there was a constraint, the sort and filters button and history button were at the bottom of the page so I had to shift their position to the top right to accommodate the popup.
3. Home Screen
The user will come to this page either by tapping on the back icon of the hotel explore screen or when the user leaves the app and again comes back.
Prototyping
I used the Smart animate feature in Figma to do prototyping of the screens.
Prototype Flow 1
Prototype Flow 2
Feedback
I showed these 2 screens to the users to get their feedback-
Feedback for the First Screen
Iterations for the First Screen
Iteration 1:
Changes made in Iteration 1:
- Changed the color of complete your booking text to blue as the text was not visible mostly due to the light grey color and also change the font weight to medium from regular.
- Changed the text of the book button to book now and also changed the color of the book now button to make it consistent with the home page.
Further Iterations:
After doing all these iterations I decided to go with the first one😂
Final Popup
Feedback for the Second Screen
Iteration for the Second Screen
So instead of a popup, I decided to go for a center overlay for this screen so that sort and filter, and history buttons can be placed in their initial positions.
Prototype for the Second Screen
Final Solution
- A popup that will enable the users to continue from where they left off.
The popup would appear from the bottom and would enable the users to pick up from wherever they left.
Comparison between Initial and Final Screen
2. A center overlay for the Hotels explore screen that would remind the user to continue his booking. The popup can’t be displayed on this screen at the bottom as there is already an option of sort and filter at the bottom.
Comparison between Initial and Final Screen
3. A similar popup for the Home Screen as well
Comparison between Initial and Final Screen
Final Prototyping
After the final solution, I did final prototyping in Figma.
Prototype Flow 1
When the users taps on the back icon of the final booking page they are redirected to the previous hotel details page where a popup would appear from below to enable the users to complete the booking and again on tapping the back icon the users are redirected to the hotel search results screen where an overlay appears which would again enable the users to complete the booking.
Prototype Flow 2
When the users come back after leaving the app a popup shows up at the homepage and when the users tap on the hotel’s icon they are redirected to the hotels explore screen where a center overlay will be displayed which will remind the users to continue booking.
Finally, after 48 hours of rigorous work, I submitted the Solution on Sunday 8th January, at 9 pm.
It was a great learning experience for me to participate in this challenge.
Thank You :)
