Creating an AI-powered travel planning website for any traveler.
Creating an AI-powered travel planning website for any traveler.
Creating an AI-powered travel planning website for any traveler.
Role
Role
Role
Product Designer
Product Designer
Product Designer
Timeline
Timeline
Timeline
May - Jun 2023
May - Jun 2023
May - Jun 2023
Team
Team
Team
1 Product Manager
1 Product Manager
1 Product Manager
1 Designer
1 Designer
1 Designer
2 Developers
2 Developers
2 Developers
Tools
Tools
Tools
Figma
Figma
Figma
Google Suite
Google Suite
Google Suite
Discord
Discord
Discord
Deliverables
Deliverables
Deliverables
Minimum viable product (MVP)
Minimum viable product (MVP)
Minimum viable product (MVP)
Overview
Overview
Overview
A minimum viable product (MVP) of an AI-powered travel planning website within an 8 week timeline.
A minimum viable product (MVP) of an AI-powered travel planning website within an 8 week timeline.
A minimum viable product (MVP) of an AI-powered travel planning website within an 8 week timeline.
Co.Lab is an educational 8 week program where participants can gain real-world, practical experience alongside a cross-functional team. Teams have the freedom to decide what to build, and my team utilized the rising popularity of AI to create an AI-powered travel planning web app.
Co.Lab is an educational 8 week program where participants can gain real-world, practical experience alongside a cross-functional team. Teams have the freedom to decide what to build, and my team utilized the rising popularity of AI to create an AI-powered travel planning web app.
Co.Lab is an educational 8 week program where participants can gain real-world, practical experience alongside a cross-functional team. Teams have the freedom to decide what to build, and my team utilized the rising popularity of AI to create an AI-powered travel planning web app.
Problem Statement
Problem Statement
Problem Statement
How might we utilize AI to simplify the trip planning process?
How might we utilize AI to simplify the trip planning process?
How might we utilize AI to simplify the trip planning process?
In today's digital era, the abundance of travel opportunities has made trip planning a time-consuming and overwhelming task for many travelers. The sheer volume of travel information available online often leads to information overload, making it challenging to find relevant and reliable details for travel planning.
In today's digital era, the abundance of travel opportunities has made trip planning a time-consuming and overwhelming task for many travelers. The sheer volume of travel information available online often leads to information overload, making it challenging to find relevant and reliable details for travel planning.
In today's digital era, the abundance of travel opportunities has made trip planning a time-consuming and overwhelming task for many travelers. The sheer volume of travel information available online often leads to information overload, making it challenging to find relevant and reliable details for travel planning.
Solution
Solution
Solution
Develop an intuitive AI-powered web application that generates itineraries and provides recommendations.
Develop an intuitive AI-powered web application that generates itineraries and provides recommendations.
Develop an intuitive AI-powered web application that generates itineraries and provides recommendations.
By generating a detailed day-wise itinerary customized to each user's preferences, the app eliminates the need for users to spend countless hours conducting online research and planning. It will automatically curate a selection of attractions, activities, and dining options that align with the user's interests, budget, and travel style.
By generating a detailed day-wise itinerary customized to each user's preferences, the app eliminates the need for users to spend countless hours conducting online research and planning. It will automatically curate a selection of attractions, activities, and dining options that align with the user's interests, budget, and travel style.
By generating a detailed day-wise itinerary customized to each user's preferences, the app eliminates the need for users to spend countless hours conducting online research and planning. It will automatically curate a selection of attractions, activities, and dining options that align with the user's interests, budget, and travel style.
Automatically create itineraries
Automatically create itineraries
Automatically create itineraries
Personalized itineraries for users based on their specified destination and preferences for trip length, pace, and the type of trip they desire.
Personalized itineraries for users based on their specified destination and preferences for trip length, pace, and the type of trip they desire.
Personalized itineraries for users based on their specified destination and preferences for trip length, pace, and the type of trip they desire.
Suggest potential destinations
Suggest potential destinations
Suggest potential destinations
Suggest unique and lesser-known vacation destinations for users based on their preferences to foster a sense of adventure and discovery.
Suggest unique and lesser-known vacation destinations for users based on their preferences to foster a sense of adventure and discovery.
Suggest unique and lesser-known vacation destinations for users based on their preferences to foster a sense of adventure and discovery.
Save and customize auto-suggested itinerary
Save and customize auto-suggested itinerary
Save and customize auto-suggested itinerary
Users will have the ability to save the auto-generated itinerary and customize it according to their preferences.
Users will have the ability to save the auto-generated itinerary and customize it according to their preferences.
Users will have the ability to save the auto-generated itinerary and customize it according to their preferences.
Research
Research
Research
There are no offerings from our closest competitors that reduce the burden of travel planning by automating itinerary generation.
There are no offerings from our closest competitors that reduce the burden of travel planning by automating itinerary generation.
There are no offerings from our closest competitors that reduce the burden of travel planning by automating itinerary generation.
I collaborated with the product manager and utilized multiple research methods. We began with some preliminary analysis of the competitive landscape to understand how crowded the solution space for this product is, and to get an idea for what features our closest competitors have or lack.
I collaborated with the product manager and utilized multiple research methods. We began with some preliminary analysis of the competitive landscape to understand how crowded the solution space for this product is, and to get an idea for what features our closest competitors have or lack.
I collaborated with the product manager and utilized multiple research methods. We began with some preliminary analysis of the competitive landscape to understand how crowded the solution space for this product is, and to get an idea for what features our closest competitors have or lack.
Our existing competitor’s solutions only allow users to manually create an itinerary and save it for future reference.
Moreover, these existing products fail to provide another useful feature: suggesting potential travel destinations based on specific constraints set by users, such as the month of travel or the number of vacation days available.
Our existing competitor’s solutions only allow users to manually create an itinerary and save it for future reference.
Moreover, these existing products fail to provide another useful feature: suggesting potential travel destinations based on specific constraints set by users, such as the month of travel or the number of vacation days available.
Our existing competitor’s solutions only allow users to manually create an itinerary and save it for future reference.
Moreover, these existing products fail to provide another useful feature: suggesting potential travel destinations based on specific constraints set by users, such as the month of travel or the number of vacation days available.
Users highlighted the time-consuming nature of trip planning and the various desires for an ideal travel app.
Users highlighted the time-consuming nature of trip planning and the various desires for an ideal travel app.
Users highlighted the time-consuming nature of trip planning and the various desires for an ideal travel app.
We conducted interviews and surveys with approximately 20 users to gain deeper insights into the trip planning process and validate the problem. The generative research revealed valuable information about how travelers plan their trips and shed light on the pain points they experience:
We conducted interviews and surveys with approximately 20 users to gain deeper insights into the trip planning process and validate the problem. The generative research revealed valuable information about how travelers plan their trips and shed light on the pain points they experience:
We conducted interviews and surveys with approximately 20 users to gain deeper insights into the trip planning process and validate the problem. The generative research revealed valuable information about how travelers plan their trips and shed light on the pain points they experience:
90% of surveyed users spend upwards of 15 hours going through multiple sources (blogs, vlogs, social media, travel websites) to create a high-level plan for their desired destination.
80% of surveyed users responded that having a ready-made detailed itinerary to be the most valuable feature in a travel planning app.
50% of users prefer a detailed itinerary, which takes them multiple days to create after extensive online research.
90% of surveyed users spend upwards of 15 hours going through multiple sources (blogs, vlogs, social media, travel websites) to create a high-level plan for their desired destination.
80% of surveyed users responded that having a ready-made detailed itinerary to be the most valuable feature in a travel planning app.
50% of users prefer a detailed itinerary, which takes them multiple days to create after extensive online research.
90% of surveyed users spend upwards of 15 hours going through multiple sources (blogs, vlogs, social media, travel websites) to create a high-level plan for their desired destination.
80% of surveyed users responded that having a ready-made detailed itinerary to be the most valuable feature in a travel planning app.
50% of users prefer a detailed itinerary, which takes them multiple days to create after extensive online research.
40% of users would appreciate an app that suggests vacation ideas based on their preferences.
40% of users want to explore new and unique destinations beyond popular tourist hotspots but struggle to find them due to lack of time and means.
40% of users would appreciate an app that suggests vacation ideas based on their preferences.
40% of users want to explore new and unique destinations beyond popular tourist hotspots but struggle to find them due to lack of time and means.
40% of users would appreciate an app that suggests vacation ideas based on their preferences.
40% of users want to explore new and unique destinations beyond popular tourist hotspots but struggle to find them due to lack of time and means.
These insights highlight the time-consuming nature of trip planning, the desire for both high-level and detailed itineraries, the need for discovering unique destinations, and the value users place on ready-made itineraries and personalized vacation suggestions.
These insights highlight the time-consuming nature of trip planning, the desire for both high-level and detailed itineraries, the need for discovering unique destinations, and the value users place on ready-made itineraries and personalized vacation suggestions.
These insights highlight the time-consuming nature of trip planning, the desire for both high-level and detailed itineraries, the need for discovering unique destinations, and the value users place on ready-made itineraries and personalized vacation suggestions.
Design Phases
Design Phases
Design Phases
Let's take a closer look at each feature throughout the design phases.
Let's take a closer look at each feature throughout the design phases.
Let's take a closer look at each feature throughout the design phases.
The low fidelity wireframes are based on our research findings from the competitor analysis, survey responses, and interviews.
For the first iteration, I elaborated on the wireframes to prepare for usability testing with a color scheme that we haven't officially settled on yet.
The final iteration is the result of our five user testing sessions between the product manager and myself. The final colors were also chosen, which represent the feeling of relaxing and friendliness that traveling is associated with.
The low fidelity wireframes are based on our research findings from the competitor analysis, survey responses, and interviews.
For the first iteration, I elaborated on the wireframes to prepare for usability testing with a color scheme that we haven't officially settled on yet.
The final iteration is the result of our five user testing sessions between the product manager and myself. The final colors were also chosen, which represent the feeling of relaxing and friendliness that traveling is associated with.
The low fidelity wireframes are based on our research findings from the competitor analysis, survey responses, and interviews.
For the first iteration, I elaborated on the wireframes to prepare for usability testing with a color scheme that we haven't officially settled on yet.
The final iteration is the result of our five user testing sessions between the product manager and myself. The final colors were also chosen, which represent the feeling of relaxing and friendliness that traveling is associated with.
Wireframes — Trip Planner
Wireframes — Trip Planner
Wireframes — Trip Planner
Iteration — Trip Planner
Iteration — Trip Planner
Iteration — Trip Planner
I implemented some changes based on feedback from the team, including:
1. Adding a button carousel at the top for users to easily switch between days.
2. Adjusting the sizes of the description and photo so users can see more destinations on the screen at once.
I implemented some changes based on feedback from the team, including:
1. Adding a button carousel at the top for users to easily switch between days.
2. Adjusting the sizes of the description and photo so users can see more destinations on the screen at once.
I implemented some changes based on feedback from the team, including:
1. Adding a button carousel at the top for users to easily switch between days.
2. Adjusting the sizes of the description and photo so users can see more destinations on the screen at once.
Final Screens — Trip Planner
Final Screens — Trip Planner
Final Screens — Trip Planner
After settling on the final colors of the app, I cleaned up the navigation bar as well as the segmented controls.
After settling on the final colors of the app, I cleaned up the navigation bar as well as the segmented controls.
After settling on the final colors of the app, I cleaned up the navigation bar as well as the segmented controls.
Besides cleaning up the designs, I implemented changes based on user feedback:
"I'd like to customize my itinerary before saving it."
I included the necessary UI elements on the Trip Planner page to provide users with more customization options (add, delete and move places).
Besides cleaning up the designs, I implemented changes based on user feedback:
"I'd like to customize my itinerary before saving it."
I included the necessary UI elements on the Trip Planner page to provide users with more customization options (add, delete and move places).
Besides cleaning up the designs, I implemented changes based on user feedback:
"I'd like to customize my itinerary before saving it."
I included the necessary UI elements on the Trip Planner page to provide users with more customization options (add, delete and move places).
"What does the number between two suggested attractions mean?"
I added dotted lines and some additional text to indicate the driving / walking distance between two points.
"What if I want to add places to visit?"
I added an additional button for users to manually add an attraction point to their day.
"What does the number between two suggested attractions mean?"
I added dotted lines and some additional text to indicate the driving / walking distance between two points.
"What if I want to add places to visit?"
I added an additional button for users to manually add an attraction point to their day.
"What does the number between two suggested attractions mean?"
I added dotted lines and some additional text to indicate the driving / walking distance between two points.
"What if I want to add places to visit?"
I added an additional button for users to manually add an attraction point to their day.
Wireframes — Explore
Wireframes — Explore
Wireframes — Explore
Iteration — Explore
Iteration — Explore
Iteration — Explore
While updating the wireframes for user testing, there were no major changes from the team.
While updating the wireframes for user testing, there were no major changes from the team.
While updating the wireframes for user testing, there were no major changes from the team.
Final Screens — Explore
Final Screens — Explore
Final Screens — Explore
"Can I select multiple options when selecting certain preferences on the input pages?"
I created multi-select options on input pages for certain preferences (Domestic / International).
"Can I select multiple options when selecting certain preferences on the input pages?"
I created multi-select options on input pages for certain preferences (Domestic / International).
"Can I select multiple options when selecting certain preferences on the input pages?"
I created multi-select options on input pages for certain preferences (Domestic / International).
Following additional feedback, I included a preview of text to give the user more context to help them decide if they want to see more.
Following additional feedback, I included a preview of text to give the user more context to help them decide if they want to see more.
Following additional feedback, I included a preview of text to give the user more context to help them decide if they want to see more.
Rather than display a block of images, I removed a row to create a photo carousel for users to scroll through if they wish to see more.
Rather than display a block of images, I removed a row to create a photo carousel for users to scroll through if they wish to see more.
Rather than display a block of images, I removed a row to create a photo carousel for users to scroll through if they wish to see more.
Wireframes — Saved Trips
Wireframes — Saved Trips
Wireframes — Saved Trips
Iteration — Saved Trips
Iteration — Saved Trips
Iteration — Saved Trips
After receiving clarification from the PM, we removed the saved suggestions section. This change ensures that if a user saves a suggestion, it will be included in their saved trips instead.
After receiving clarification from the PM, we removed the saved suggestions section. This change ensures that if a user saves a suggestion, it will be included in their saved trips instead.
After receiving clarification from the PM, we removed the saved suggestions section. This change ensures that if a user saves a suggestion, it will be included in their saved trips instead.
Final Screen — Saved Trip
Final Screen — Saved Trip
Final Screen — Saved Trip
I changed style from two columns to one column for consistency with the other screens.
Missing features: I added icons for users to either edit or delete their saved trips.
I changed style from two columns to one column for consistency with the other screens.
Missing features: I added icons for users to either edit or delete their saved trips.
I changed style from two columns to one column for consistency with the other screens.
Missing features: I added icons for users to either edit or delete their saved trips.
Insights & Takeaways
Insights & Takeaways
Insights & Takeaways
I became more confident in my skills after collaborating in a fast-paced and time-limited environment.
I became more confident in my skills after collaborating in a fast-paced and time-limited environment.
I became more confident in my skills after collaborating in a fast-paced and time-limited environment.
Through this experience, I had the opportunity to collaborate with a diverse team of experts from different disciplines. This not only allowed me to contribute my own skills, but also gave me valuable insights into the roles of product managers and developers, and their unique perspectives during the design process.
Some of my key takeaways from this opportunity include:
Consistent communication during all stages generates ongoing feedback and better understanding among team members.
Maintaining a well-organized Figma file is essential for a seamless design handoff process.
Recognizing and making informed decisions about necessary tradeoffs is essential for meeting project timelines and delivering results.
Through this experience, I had the opportunity to collaborate with a diverse team of experts from different disciplines. This not only allowed me to contribute my own skills, but also gave me valuable insights into the roles of product managers and developers, and their unique perspectives during the design process.
Some of my key takeaways from this opportunity include:
Consistent communication during all stages generates ongoing feedback and better understanding among team members.
Maintaining a well-organized Figma file is essential for a seamless design handoff process.
Recognizing and making informed decisions about necessary tradeoffs is essential for meeting project timelines and delivering results.
Through this experience, I had the opportunity to collaborate with a diverse team of experts from different disciplines. This not only allowed me to contribute my own skills, but also gave me valuable insights into the roles of product managers and developers, and their unique perspectives during the design process.
Some of my key takeaways from this opportunity include:
Consistent communication during all stages generates ongoing feedback and better understanding among team members.
Maintaining a well-organized Figma file is essential for a seamless design handoff process.
Recognizing and making informed decisions about necessary tradeoffs is essential for meeting project timelines and delivering results.