Part 2 - Itinerary Building
MY ROLE : UX designer leading TravelGenie’s app design.
RESPONSIBILITIES :
Conducting research, interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs.
PROJECT DURATION : 8 weeks; May 2024 - June 2024
Background
This case study is second part of TravelGenie. In the first part, I explained in detail the Discovery phase - How users, along with their travel buddies, discover travel destinations and activities. In this case study i will be talking about Itinerary building - How users collaboratively build their travel itinerary.
Since you have already read the research process in part 1 of this case study, let’s jump directly into design.
STARTING THE DESIGN
A quick recap of TravelGenie app product features
These features address common user pain points and also incorporate insights from the competitive analysis, ensuring TravelGenie provides a balanced and user-centric travel planning experience.
AI-Powered Personalization
Personalized destination and activity suggestions based on user preferences and past behaviours.
Collaborative Planning Tools
Enable users to plan their trip together with friends and family and also collaborate on itinerary planning.
AI-Powered Itinerary Building and Editing Tools
Automatically generated itineraries based on user inputs and intelligent tools for modifying itinerary.
Interactive Map Integration
Displays destinations and attractions on an interactive map and allows users to visualize their itinerary and plan their route efficiently.
User-Generated Reviews
Community reviews and tips from other travelers and option for users to share their own travel experiences.
Updated Information
Latest photos of landscapes and attractions, up-to-date information on attractions and current visa requirements and travel documentation guidance.
Accessible and Intuitive Design
User-friendly interface with clear navigation and accessibility features for users with disabilities.
Visual Design and Content
Clean, modern aesthetics with engaging visuals and high-quality images and videos for destinations and activities.
Budget Management
Budget estimation and tracking tools.
Visa and Documentation Assistance
Step-by-step guidance for visa requirements and applications.
Information Architecture
Saved
Itinerary
Visa
Home screen
Account
Explore
Search
Search experience
Search
List of destinations / activities
Travel dates
Create new trip
Travel style
Save
Trips
Add companions
Trips list
List of cities / activities
Itinerary
Itinerary list
Edit
Trip budget
Trip list
Passport
Visa required/no
Destination
Visa overview
Residence
More info
No. of days ?
Itinerary
Road map
Day wise list
Local transport
Map
Weather
Safety
Mode of payment
Mobile network
Apps to download
Search
Where/when to apply
Budget
Docs required
Other info
Generate itinerary
Companion
Itinerary building task flow
Wireframing
USABILITY STUDY
Usability study parameters
Study type - Moderated
Location - Singapore, India - remote (each participant will complete the study in their own home)
Participants - 4
Length - 45 to 60 minutes
Key performance indicators
Task Completion Rate - The percentage of tasks users could complete successfully without assistance.
Time on Task - The average time it took for users to complete specific tasks, such as creating an itinerary or finding visa information.
Error Rate - The number of errors users encountered while navigating the app and completing tasks.
User Satisfaction - Measured through post-test surveys and ratings to gauge overall satisfaction with the app’s usability and features.
Navigation Efficiency - The number of clicks or steps users took to complete a task, indicating the ease of finding information and using features.
These are the observations gathered from Usability Study for Itinerary building phase. I created an Affinity map by organising the data into groups with common themes.
Now that I have all the observations from usability study, let's look at the key insights and define the actual problems that a designer can solve.
Unfamiliar Itinerary Format
Users experienced a disconnect between day-wise itineraries due to horizontal scrolling. Replace horizontal scrolling with a long vertical scroll, similar to a traditional travel agent's itinerary.
P1
Visually Indistinguishable Info
Users struggle to differentiate between “Recommended Stays” and the “Itinerary”. To improve clarity, add a background or boundary box to the “Recommended Stays”.
P1
Misleading Affordance
The visual presentation of lunch in the itinerary suggests it is clickable, similar to other activity cards. It should be visually distinguished from other activity cards.
P0
Hidden Itinerary Editing Tools
The swipe gesture to add, delete, or replace activities in the itinerary is often overlooked by users. Introduce a small animation for new users to demonstrate the swipe gesture
P1
Based on priority of insights, I made changes to design. Lets have a look at some screenshots of new design.
INTRODUCING FINAL DESIGN
Part 2 - Itinerary Building
Throughout the process, my design decisions were guided by key UX principles and Design Laws to enhance usability and provide an engaging, intuitive user experience.
Building itinerary with the help of AI
I designed an AI-powered itinerary builder that effortlessly transforms activities and attractions saved by users into a customized itinerary.
In designing the itinerary screen, I created a clear interface that allows users to easily access essential day wise trip details at a glance.
I applied the Common Region principle by grouping details about attractions and activities in individual cards, which organized and visually separated elements while maintaining proximity.
I also used the Similarity principle, giving all cards a consistent style to clarify their relationships and enhance user comprehension.
The itinerary is presented in a vertical scroll similar to traditional travel itineraries, providing a natural and familiar user experience. This design made the itinerary both easy to navigate and visually appealing.
Delete / Replace / Move an activity
from the itinerary
Making changes to itinerary
I designed the itinerary interface to allow users to effortlessly modify their plans. By simply swiping on an activity card, users can delete, replace, or move activities, providing flexibility in tailoring their day-to-day schedule.
I also integrated a drag-and-drop feature, enabling users to effortlessly rearrange the sequence of their activities. Whether it is moving a morning hike to the evening or adjusting meal times around planned excursions, users can adapt their schedule on the fly, ensuring their day unfolded exactly as they envisioned.
These seamless interactions ensured that users can adapt their travel plans to any changes or new preferences as their trip evolved.
Drag and drop feature
Easily modify itinerary with Travelgenie AI
Leveraging the app's AI capabilities, users can effortlessly adjust their itineraries as their preferences change. Whether suggesting alternative experiences or accommodating spontaneous decisions, TravelGenie AI seamlessly integrates these adjustments into the existing schedule, ensuring users have an optimal and flexible travel plan tailored to their needs.
I strategically placed the AI Floating Action Button (FAB) at the bottom of the screen, ensuring it was easily accessible yet unobtrusive, preserving valuable screen space. When users tap this button, it elegantly expands into a full search bar, providing a seamless transition for deeper interaction. This design choice not only enhanced the user interface by keeping the screen clutter-free but also ensured that the AI’s capabilities were just a tap away, ready to assist whenever needed.
ACCESSIBILITY CONSIDERATIONS
When choosing a color palette, I made sure there is a high contrast between text and background colors and they met WCAG AA Compliance
Contrast
I have used only one typeface: Geist, because of its clean aesthetics and high legibility.
Typeface
T
I implemented a text hierarchy throughout the app. This helps users to distinguish different sections and information on screen.
Hierarchy
TT
All buttons and interactive elements are clearly labeled for easy identification and use by those with cognitive disabilities
Clear Labeling
THE IMPACT AND SUCCESS OF APP
Since TravelGenie is in the prototype phase and not yet launched, I focused on measuring the impact and success of the app through a combination of user testing, feedback collection, and simulated scenarios.
Current trip planning process
Destination
research
Activity
research
Itinerary
creation
Travel
blogs
Task completion rate
All the users completed the task of exploring destinations and Itinerary creation successfully within the time frame.
User satisfaction survey
Average user satisfaction and ease of use score was 4.2 out of 5.
STICKER SHEET
The TravelGenie app features a distinctive color scheme with white as neutral color, deep blue as complimentary color and vibrant pink as the accent color. This palette boosts the app's appeal, with blue conveying trust and pink adding a lively touch, ensuring an engaging and navigable interface. I have used 60 - 30 - 10 rule for color. White makes up 60%, blue is 30% and pink accent color makes up 10% of the palette to highlight CTA buttons.
EPILOGUE
In parts 1 and 2 of the TravelGenie app case study, I concentrated on two key functionalities: Destination Discovery and Itinerary Building. Additionally, TravelGenie, an AI-powered collaborative travel planning app, includes budget planning and visa information features that are still under refinement based on insights from user testing. You can review these to understand how TravelGenie offers a comprehensive solution to travel planning challenges.
Budget planning
Other trip related information
Budget planning & other trip related information
Visa information
TAKE AWAYS
The project deeply resonated with my own love for travel, enriching my appreciation for UX design and its impact on enhancing travel experiences. Designing the TravelGenie app offered several key insights that were particularly meaningful to me as a travel enthusiast:
User-Centered Design: Emphasizing user needs in the design process ensured the app was intuitive and effective, mirroring the needs of travelers.
AI Integration: Utilizing AI to enhance functionality, such as personalized recommendations and automated itinerary adjustments, showcased how technology can significantly enhance travel experiences.
Iterative Design and Testing: Regular user testing and iterative design refinements based on real feedback were essential in addressing issues and improving the app’s functionality and user experience.
Business goals : If I had to design this app differently, i would take business goals into consideration along with user goals.
NEXT STEPS
Obtain UX/UI feedback from designers with more experience in the field to improve the overall design and functionality.
1
When I have documented all feedback that was provided, I will make the necessary design updates in order to improve the app’s overall experience and conduct further Usability study
2
Enhance app features such as Budget planning and Visa information services.
3
Thank you for reading Part 2 of this case study.
A mobile app that diagnoses issues
and recommends treatments for houseplants.
© 2024 Prachi Thakare. All rights reserved.