TRIPLY APP
December 2024
Dec. 2024
AT-A-GLANCE
This project was completed as part of the Interaction Design master's course at the School of Information, University of Michigan. The primary focus was to explore and address the following question: "How might we design an intuitive app experience that simplifies the trip-planning process?"
Timeline
3 months
Project Type
Individual
My Role
UX/UI Designer
Tools
Figma, Lucidchart, Canva
This project was completed as part of the Interaction Design master's course at the School of Information, University of Michigan. The primary focus was to explore and address the following question: "How might we design an intuitive app experience that simplifies the trip-planning process?"
Timeline
September - December
Project Type
Individual
My Role
UX/UI Designer
Tools
Figma, Lucidchart, Canva
This project was completed as part of the Interaction Design master's course at the School of Information, University of Michigan. The primary focus was to explore and address the following question: "How might we design an intuitive app experience that simplifies the trip-planning process?"
Timeline
3 months
Project Type
Individual
My Role
UX/UI Designer
Tools
Figma, Lucidchart, Canva
This project was completed as part of the Interaction Design master's course at the School of Information, University of Michigan. The primary focus was to explore and address the following question: "How might we design an intuitive app experience that simplifies the trip-planning process?"
Timeline
3 months
Project Type
Individual
My Role
UX/UI Designer
Tools
Figma, Lucidchart, Canva
PROBLEM
Many people love traveling— but the key to a successful trip lies in effective planning. Factors like budget, time, and logistics can make planning stressful and often lead to trips falling through. Therefore, a common challenge for travelers is managing this stress to create a well-organized trip.
PROBLEM
Many people love traveling— but the key to a successful trip lies in effective planning. Factors like budget, time, and logistics can make planning stressful and often lead to trips falling through. Therefore, a common challenge for travelers is managing this stress to create a well-organized trip.
PROBLEM
Many people love traveling— but the key to a successful trip lies in effective planning. Factors like budget, time, and logistics can make planning stressful and often lead to trips falling through. Therefore, a common challenge for travelers is managing this stress to create a well-organized trip.
OUTCOME
I followed a thorough design process, starting with a low-fidelity paper prototype and progressing to a high-fidelity Figma prototype. By applying QOC methods, I refined design decisions and ensured a user-centered approach. I also conducted a competitive analysis, developed user personas, and performed usability testing, resulting in a generative AI-powered travel app.
OUTCOME
I followed a thorough design process, starting with a low-fidelity paper prototype and progressing to a high-fidelity Figma prototype. By applying QOC methods, I refined design decisions and ensured a user-centered approach. I also conducted a competitive analysis, developed user personas, and performed usability testing, resulting in a generative AI-powered travel app.
OUTCOME
I followed a thorough design process, starting with a low-fidelity paper prototype and progressing to a high-fidelity Figma prototype. By applying QOC methods, I refined design decisions and ensured a user-centered approach. I also conducted a competitive analysis, developed user personas, and performed usability testing, resulting in a generative AI-powered travel app.
BACKGROUND RESEARCH
71%
Nearly three-quarters of U.S. adults who plan their own travel find the process to be at least moderately stressful.
71%
Nearly three-quarters of U.S. adults who plan their own travel find the process to be at least moderately stressful.
71%
Nearly three-quarters of U.S. adults who plan their own travel find the process to be at least moderately stressful.
12 hrs
Travelers typically dedicate an average of two full workdays to planning and booking trips.
12 hrs
Travelers typically dedicate an average of two full workdays to planning and booking trips.
12 hrs
Travelers typically dedicate an average of two full workdays to planning and booking trips.
97%
The percentage of travelers who feel happier when they have a trip fully planned.
97%
The percentage of travelers who feel happier when they have a trip fully planned.
97%
The percentage of travelers who feel happier when they have a trip fully planned.
COMPETITIVE ANALYSIS
COMPETITIVE ANALYSIS
COMPETITIVE ANALYSIS
After defining my problem statement, I conducted a competitive analysis of four products addressing similar challenges. Among them, I chose to focus on Tripadvisor and Wanderlog, as they align most closely with the app I envisioned of designing to address the problem. Here are my findings from the analysis:
After defining my problem statement, I conducted a competitive analysis of four products addressing similar challenges. Among them, I chose to focus on Tripadvisor and Wanderlog, as they align most closely with the app I envisioned of designing to address the problem. Here are my findings from the analysis:
After defining my problem statement, I conducted a competitive analysis of four products addressing similar challenges. Among them, I chose to focus on Tripadvisor and Wanderlog, as they align most closely with the app I envisioned of designing to address the problem. Here are my findings from the analysis:
Findings for Tripadvisor
Findings for Tripadvisor
Findings for Tripadvisor
Overwhelms users with excessive options
Overwhelms users with excessive options
Overwhelms users with excessive options
Lacks effective itinerary-building features
Lacks effective itinerary-building features
Lacks effective itinerary-building features
Requires too much time to compare reviews
Requires too much time to compare reviews
Requires too much time to compare reviews
AI suggestions overlook users' budgets
AI suggestions overlook users' budgets
AI suggestions overlook users' budgets
Findings for Wanderlog
Findings for Wanderlog
Findings for Wanderlog
Lacks robust cost filtering and budget optimization
Lacks robust cost filtering and budget optimization
Lacks robust cost filtering and budget optimization
AI features are Pro-only, limiting free access
AI features are Pro-only, limiting free access
AI features are Pro-only, limiting free access
Recommendations often miss niche preferences
Recommendations often miss niche preferences
Recommendations often miss niche preferences
Requires significant manual user input
Requires significant manual user input
Requires significant manual user input
DESIGN PROCESS
PERSONAS
PERSONAS
PERSONAS
With background data supporting the problem statement in hand, I moved on to developing user personas for my product. Below are 2 of the 4 personas (click to view) that align closely with my proposed solution of an AI-powered travel app.
With background data supporting the problem statement in hand, I moved on to developing user personas for my product. Below are 2 of the 4 personas (click to view) that align closely with my proposed solution of an AI-powered travel app.
With background data supporting the problem statement in hand, I moved on to developing user personas for my product. Below are 2 of the 4 personas that align closely with my proposed solution of an AI-powered travel app.
(Personas designed on Canva, images generated via ChatGPT)
(Personas designed on Canva, images generated via ChatGPT)
LO-FI PROTOTYPE
LO-FI PROTOTYPE
LO-FI PROTOTYPE
The next step in my design process was bringing my idea to life. After identifying the target user group, gathering supporting data to highlight the importance of the problem, and conducting a competitive analysis to help me formulate my own idea, I used the personas I had created to guide my initial design.
So, I began to craft a low-fidelity prototype of the travel app. The paper prototype shown here visualizes the app’s interactions and tasks, providing a clear demonstration of the user journey and functionality.
After testing my paper prototype, I applied the QOC method (Questions, Options, and Criteria) to further explore the design space for my app. I began by formulating different approaches to creating the key features of my travel app, starting with how the app would identify the user's primary travel interests.
(Click video to play)
(Click video to play)
The next step in my design process was bringing my idea to life. After identifying the target user group, gathering supporting data to highlight the importance of the problem, and conducting a competitive analysis to help me formulate my own idea, I used the personas I had created to guide my initial design.
So, I began to craft a low-fidelity prototype of the travel app. The paper prototype shown here visualizes the app’s interactions and tasks, providing a clear demonstration of the user journey and functionality.
After testing my paper prototype, I applied the QOC method (Questions, Options, and Criteria) to further explore the design space for my app. I began by formulating different approaches to creating the key features of my travel app, starting with how the app would identify the user's primary travel interests.
The next step in my design process was bringing my idea to life. After identifying the target user group, gathering supporting data to highlight the importance of the problem, and conducting a competitive analysis to help me formulate my own idea, I used the personas I had created to guide my initial design.
So, I began to craft a low-fidelity prototype of the travel app. The paper prototype shown here visualizes the app’s interactions and tasks, providing a clear demonstration of the user journey and functionality.
After testing my paper prototype, I applied the QOC method (Questions, Options, and Criteria) to further explore the design space for my app. I began by formulating different approaches to creating the key features of my travel app, starting with how the app would identify the user's primary travel interests.
QOC METHOD
QOC METHOD
QOC METHOD
Figure 1
Figure 1
Figure 1
The rationale behind the options I chose to offer users (see Figure 1) was to ensure that the onboarding process results would be personalized, require minimal effort, be easy to use, and provide flexibility. Similarly, I used this rationale to evaluate two additional approaches, as shown in Figures 2 & 3 below.
The rationale behind the options I chose to offer users (see Figure 1) was to ensure that the onboarding process results would be personalized, require minimal effort, be easy to use, and provide flexibility. Similarly, I used this rationale to evaluate two additional approaches, as shown in Figures 2 & 3 below.
The rationale behind the options I chose to offer users (see Figure 1) was to ensure that the onboarding process results would be personalized, require minimal effort, be easy to use, and provide flexibility. Similarly, I used this rationale to evaluate two additional approaches, as shown in Figures 2 & 3 below.
Figure 2
Figure 3
(Visuals made using Lucidchart)
Figure 2
Figure 2
Figure 3
Figure 3
(Visuals made using Lucidchart)
USABILITY TESTING
USABILITY TESTING
USABILITY TESTING
Once I completed my paper prototype, I conducted usability testing with three users who aligned with my persona groups. Here’s what they shared after testing the prototype:
Once I completed my paper prototype, I conducted usability testing with three users who aligned with my persona groups. Here’s what they shared after testing the prototype:
Once I completed my paper prototype, I conducted usability testing with three users who aligned with my persona groups. Here’s what they shared after testing the prototype:
"I would've liked the profile tab to be on the nav bar for quicker access."
"I would've liked the profile tab to be on the nav bar for quicker access."
"I think showing the best-matched itinerary bigger on the home screen would've grabbed my attention better."
"I think showing the best-matched itinerary bigger on the home screen would've grabbed my attention better."
"I wish there was an option to include a specific location for the trip along with the preferred destination options."
"I wish there was an option to include a specific location for the trip along with the preferred destination options."
"I would've liked the profile tab to be on the nav bar for quicker access."
"I think showing the best-matched itinerary bigger on the home screen would've grabbed my attention better."
"I wish there was an option to include a specific location for the trip along with the preferred destination options."
Key takeaways from the usability testing include several areas for improvement. First, the onboarding/AI feature needs to include more personalized questions to create better, user-specific itineraries. Additionally, after observing participants interact with the low-fidelity prototype, I realized the importance of providing an exit option on every screen, such as an 'X' or a general exit button, to enhance usability.
I also found that some questions in the itinerary builder need better options. For example, the 'preferred destination' question should allow users to type in their specific destination instead of being limited to preset choices— a suggestion directly from participant feedback. Lastly, small details like removing the unnecessary birthdate question during onboarding and rethinking the structure & layout of the home page will need further consideration before designing the final high-fidelity prototype.
Key takeaways from the usability testing include several areas for improvement. First, the onboarding/AI feature needs to include more personalized questions to create better, user-specific itineraries. Additionally, after observing participants interact with the low-fidelity prototype, I realized the importance of providing an exit option on every screen, such as an 'X' or a general exit button, to enhance usability.
I also found that some questions in the itinerary builder need better options. For example, the 'preferred destination' question should allow users to type in their specific destination instead of being limited to preset choices— a suggestion directly from participant feedback. Lastly, small details like removing the unnecessary birthdate question during onboarding and rethinking the structure & layout of the home page will need further consideration before designing the final high-fidelity prototype.
Key takeaways from the usability testing include several areas for improvement. First, the onboarding/AI feature needs to include more personalized questions to create better, user-specific itineraries. Additionally, after observing participants interact with the low-fidelity prototype, I realized the importance of providing an exit option on every screen, such as an 'X' or a general exit button, to enhance usability.
I also found that some questions in the itinerary builder need better options. For example, the 'preferred destination' question should allow users to type in their specific destination instead of being limited to preset choices— a suggestion directly from participant feedback. Lastly, small details like removing the unnecessary birthdate question during onboarding and rethinking the structure & layout of the home page will need further consideration before designing the final high-fidelity prototype.
RESULTS
HI-FI PROTOTYPE
HI-FI PROTOTYPE
HI-FI PROTOTYPE
The final high-fidelity prototype features over 15 user tasks and 30+ interactive elements. To start, I’d like to highlight the introduction and onboarding screens, which guide users in getting familiarized with the Triply app.
The final high-fidelity prototype features over 15 user tasks and 30+ interactive elements. To start, I’d like to highlight the introduction and onboarding screens, which guide users in getting familiarized with the Triply app.
The final high-fidelity prototype features over 15 user tasks and 30+ interactive elements. To start, I’d like to highlight the introduction and onboarding screens, which guide users in getting familiarized with the Triply app.
Introduction
When users open the Triply app, they are greeted with a landing screen where they can choose to either create an account or log in. To enhance the user experience and establish a strong brand identity, I designed a custom animation for the loading screen featuring a paper airplane.
This design choice was intentional for two key reasons:
Symbolizing Travel: The airplane represents the core purpose of the app— helping users plan their travels.
Emphasizing Simplicity: A paper airplane conveys simplicity and ease, aligning with the app's goal to make trip planning effortless.
The app's name, Triply, reflects this concept as a blend of "trip" and "simply." To reinforce this message, I created a tagline: "Let us help you plan trips, simply." This tagline complements the animation and name, creating a cohesive narrative that communicates the app's purpose and values at a glance.
When users open the Triply app, they are greeted with a landing screen where they can choose to either create an account or log in. To enhance the user experience and establish a strong brand identity, I designed a custom animation for the loading screen featuring a paper airplane.
This design choice was intentional for two key reasons:
Symbolizing Travel: The airplane represents the core purpose of the app— helping users plan their travels.
Emphasizing Simplicity: A paper airplane conveys simplicity and ease, aligning with the app's goal to make trip planning effortless.
The app's name, Triply, reflects this concept as a blend of "trip" and "simply." To reinforce this message, I created a tagline: "Let us help you plan trips, simply." This tagline complements the animation and name, creating a cohesive narrative that communicates the app's purpose and values at a glance.
When users open the Triply app, they are greeted with a landing screen where they can choose to either create an account or log in. To enhance the user experience and establish a strong brand identity, I designed a custom animation for the loading screen featuring a paper airplane.
This design choice was intentional for two key reasons:
Symbolizing Travel: The airplane represents the core purpose of the app— helping users plan their travels.
Emphasizing Simplicity: A paper airplane conveys simplicity and ease, aligning with the app's goal to make trip planning effortless.
The app's name, Triply, reflects this concept as a blend of "trip" and "simply." To reinforce this message, I created a tagline: "Let us help you plan trips, simply." This tagline complements the animation and name, creating a cohesive narrative that communicates the app's purpose and values at a glance.
Onboarding
Now, once users click on the "Begin" prompt, they are guided to the onboarding process, facilitated by Triply's AI assistant. To make this process both simple and effective, I incorporated feedback from usability testing and designed the onboarding experience around 7 carefully crafted questions.
For example, questions about travel type and preferred destinations provide Triply AI with a broad understanding of what the user is seeking. This approach simplifies the process compared to writing a long prompt for a generative AI chatbot, offering a more visual and user-friendly interface.
Now, key questions like “Who’s traveling with you?” ensure the itinerary is tailored to the group dynamics, while “What’s your trip budget?” plays a central role in delivering practical suggestions. Likewise, the budget question is designed in two parts: first, users select a budget tier (e.g., low, moderate, or high), and then they can adjust it further using a slider to specify an exact amount. My rationale for this design was to give users flexibility and control. They can keep it simple by selecting a category or get more precise with the slider. This balance ensures that the AI can create itineraries that feel personalized yet easy to set up.
Now, once users click on the "Begin" prompt, they are guided to the onboarding process, facilitated by Triply's AI assistant. To make this process both simple and effective, I incorporated feedback from usability testing and designed the onboarding experience around 7 carefully crafted questions. These questions help Triply AI gather key insights into the user’s likes, needs, and travel-related preferences.
For example, questions about travel type and preferred destinations provide Triply AI with a broad understanding of what the user is seeking. This approach simplifies the process compared to writing a long prompt for a generative AI chatbot, offering a more visual and user-friendly interface.
Now, key questions like “Who’s traveling with you?” ensure the itinerary is tailored to the group dynamics, while “What’s your trip budget?” plays a central role in delivering practical suggestions. Likewise, the budget question is designed in two parts: first, users select a budget tier (e.g., low, moderate, or high), and then they can adjust it further using a slider to specify an exact amount. My rationale for this design was to give users flexibility and control. They can keep it simple by selecting a category or get more precise with the slider. This balance ensures that the AI can create itineraries that feel personalized yet easy to set up.
Now, once users click on the "Begin" prompt, they are guided to the onboarding process, facilitated by Triply's AI assistant. To make this process both simple and effective, I incorporated feedback from usability testing and designed the onboarding experience around 7 carefully crafted questions. These questions help Triply AI gather key insights into the user’s likes, needs, and travel-related preferences.
For example, questions about travel type and preferred destinations provide Triply AI with a broad understanding of what the user is seeking. This approach simplifies the process compared to writing a long prompt for a generative AI chatbot, offering a more visual and user-friendly interface.
Now, key questions like “Who’s traveling with you?” ensure the itinerary is tailored to the group dynamics, while “What’s your trip budget?” plays a central role in delivering practical suggestions. Likewise, the budget question is designed in two parts: first, users select a budget tier (e.g., low, moderate, or high), and then they can adjust it further using a slider to specify an exact amount. My rationale for this design was to give users flexibility and control. They can keep it simple by selecting a category or get more precise with the slider. This balance ensures that the AI can create itineraries that feel personalized yet easy to set up.
Navigation
The navigation system in my app is designed with simplicity in mind, featuring a straightforward 3-tab layout: 'Home,' 'Triply AI,' and 'Account,' arranged from left to right. This minimalist approach aligns with my design philosophy of keeping the interface clean and easy to use. By limiting the number of options, users can navigate the app more confidently and efficiently, reducing cognitive load— a principle supported by Hick's Law, which emphasizes simplifying choices to remove barriers in decision-making.
For the visual design of the navigation bar, I incorporated a red gradient line theme, consistent with the onboarding process. This gradient line visually indicates the active page by hovering over the selected tab, providing users with a clear and visually cohesive way to identify their current location within the app.
For the visual design of the navigation bar, I incorporated a red gradient line theme, consistent with the onboarding process. This gradient line visually indicates the active page by hovering over the selected tab, providing users with a clear and visually cohesive way to identify their current location within the app.
For the visual design of the navigation bar, I incorporated a red gradient line theme, consistent with the onboarding process. This gradient line visually indicates the active page by hovering over the selected tab, providing users with a clear and visually cohesive way to identify their current location within the app.
The navigation system in my app is designed with simplicity in mind, featuring a straightforward 3-tab layout: 'Home,' 'Triply AI,' and 'Account,' arranged from left to right. This minimalist approach aligns with my design philosophy of keeping the interface clean and easy to use. By limiting the number of options, users can navigate the app more confidently and efficiently, reducing cognitive load— a principle supported by Hick's Law, which emphasizes simplifying choices to remove barriers in decision-making.
The navigation system in my app is designed with simplicity in mind, featuring a straightforward 3-tab layout: 'Home,' 'Triply AI,' and 'Account,' arranged from left to right. This minimalist approach aligns with my design philosophy of keeping the interface clean and easy to use. By limiting the number of options, users can navigate the app more confidently and efficiently, reducing cognitive load— a principle supported by Hick's Law, which emphasizes simplifying choices to remove barriers in decision-making.
Home Page
The Home Page has undergone significant changes from my initial low-fidelity prototype. Based on user feedback, I shifted the primary focus of the home screen to the main itinerary card, labeled "Your Perfect Vacation." This adjustment ensures that users immediately see the most relevant content. Additionally, I swapped the positions of the search and account icons, recognizing that users are more likely to interact with the account tab in this app.
I also removed the "Continue Customizing" section from the lo-fi prototype and replaced it with a "More Itineraries" section. This new section showcases other matched itineraries for the user. It is designed to be smaller than the main itinerary card and features a swipeable layout, allowing users to preview multiple itinerary options at a glance.
For the main itinerary card, my design rationale was to emphasize it clearly and present information that is most useful to the user. Drawing from the rationale outlined in my QOC charts, I included key details such as the destination name, itinerary price, a brief trip description, and logistics like the number of nights and travelers. This ensures users have all the information they need before opening the full itinerary.
The Home Page has undergone significant changes from my initial low-fidelity prototype. Based on user feedback, I shifted the primary focus of the home screen to the main itinerary card, labeled "Your Perfect Vacation." This adjustment ensures that users immediately see the most relevant content. Additionally, I swapped the positions of the search and account icons, recognizing that users are more likely to interact with the account tab in this app.
I also removed the "Continue Customizing" section from the lo-fi prototype and replaced it with a "More Itineraries" section. This new section showcases other matched itineraries for the user. It is designed to be smaller than the main itinerary card and features a swipeable layout, allowing users to preview multiple itinerary options at a glance.
For the main itinerary card, my design rationale was to emphasize it clearly and present information that is most useful to the user. Drawing from the rationale outlined in my QOC charts, I included key details such as the destination name, itinerary price, a brief trip description, and logistics like the number of nights and travelers. This ensures users have all the information they need before opening the full itinerary.
The Home Page has undergone significant changes from my initial low-fidelity prototype. Based on user feedback, I shifted the primary focus of the home screen to the main itinerary card, labeled "Your Perfect Vacation." This adjustment ensures that users immediately see the most relevant content. Additionally, I swapped the positions of the search and account icons, recognizing that users are more likely to interact with the account tab in this app.
I also removed the "Continue Customizing" section from the lo-fi prototype and replaced it with a "More Itineraries" section. This new section showcases other matched itineraries for the user. It is designed to be smaller than the main itinerary card and features a swipeable layout, allowing users to preview multiple itinerary options at a glance.
For the main itinerary card, my design rationale was to emphasize it clearly and present information that is most useful to the user. Drawing from the rationale outlined in my QOC charts, I included key details such as the destination name, itinerary price, a brief trip description, and logistics like the number of nights and travelers. This ensures users have all the information they need before opening the full itinerary.
Personalized Itinerary
The itinerary page is divided into three sections: Overview, Itinerary, and Cost. Drawing from the QOC method (referenced earlier in Figure 3), I combined key options to organize the trip details in a clear and effective way:
Overview: This section provides a summary of the trip, including essential details like trip duration, total cost, number of travelers, and a map of the destination. It also features the purchase button for booking the custom travel package.
Cost: This section offers a detailed breakdown of expenses, covering categories like food, tickets, etc. I included this for full transparency, so users know exactly what they’re paying for.
Itinerary: This section provides a day-by-day breakdown of the trip, organized by phases of the day (morning, afternoon, evening). My design rationale for this section was to present the information generated by Triply AI in a visually engaging way, rather than displaying it as plain text in a chat format.
The overall design ensures the page is not only informative but also appealing and easy to navigate, aligning with the app's goal of simplifying travel planning.
The itinerary page is divided into three sections: Overview, Itinerary, and Cost. Drawing from the QOC method (referenced earlier in Figure 3), I combined key options to organize the trip details in a clear and effective way:
Overview: This section provides a summary of the trip, including essential details like trip duration, total cost, number of travelers, and a map of the destination. It also features the purchase button for booking the custom travel package.
Cost: This section offers a detailed breakdown of expenses, covering categories like food, tickets, etc. I included this for full transparency, so users know exactly what they’re paying for.
Itinerary: This section provides a day-by-day breakdown of the trip, organized by phases of the day (morning, afternoon, evening). My design rationale for this section was to present the information generated by Triply AI in a visually engaging way, rather than displaying it as plain text in a chat format.
The overall design ensures the page is not only informative but also appealing and easy to navigate, aligning with the app's goal of simplifying travel planning.
The itinerary page is divided into three sections: Overview, Itinerary, and Cost. Drawing from the QOC method (referenced earlier in Figure 3), I combined key options to organize the trip details in a clear and effective way:
Overview: This section provides a summary of the trip, including essential details like trip duration, total cost, number of travelers, and a map of the destination. It also features the purchase button for booking the custom travel package.
Cost: This section offers a detailed breakdown of expenses, covering categories like food, tickets, etc. I included this for full transparency, so users know exactly what they’re paying for.
Itinerary: This section provides a day-by-day breakdown of the trip, organized by phases of the day (morning, afternoon, evening). My design rationale for this section was to present the information generated by Triply AI in a visually engaging way, rather than displaying it as plain text in a chat format.
The overall design ensures the page is not only informative but also appealing and easy to navigate, aligning with the app's goal of simplifying travel planning.
CONCLUSION
REFLECTION
REFLECTION
REFLECTION
