End-to-end design: User research to high-fidelity prototypes for a smart travel planning app
Making it easier for friends and families to plan and coordinate trips.
MY ROLE
UI/UX Designer, sole designer responsible for the app’s design.
PROJECT DURATION
May 2024 - June 2024 (8 Weeks)
RESPONSIBILITIES
Conducting user research, Wireframing, Prototyping, Usability studies, Iterating on designs, Motion Design, Creating Design system, Accounting for accessibility
INTRODUCTION
TravelGenie is an AI-powered travel planning app that helps users discover ideal destinations based on their desired experiences—even if they don’t have a specific country in mind. It removes the hassle of planning and coordinating group trips by making decision-making fun, real-time, and interactive for all travel buddies.
Being a travel enthusiast, this is my personal as well as passion project. I designed the end-to-end UX/UI, from research to prototyping.
PROBLEM
# 1
Limited personalization
Most of the travel planning apps rely on generic recommendations or pre-designed itineraries, requiring users to either know their destination in advance or manually filter through vast, one-size-fits-all options, lacking true personalization.
# 2
Coordination challenges
Planning trips with multiple people is complex due to differing preferences.
None of the existing travel planning apps/website provide collaboration features.
# 3
Overwhelming and fragmented information
Users face difficulty navigating the vast amount of travel information available, often spread across multiple platforms.
This makes travel planning process time consuming and often frustrating.
Defining problem statement
“
How might we create a collaborative travel planning app that enables personalized destination discovery and streamlines group coordination into a seamless, user-friendly experience?
Goals
# 1
Facilitate group planning
# 2
Effortless integration of AI to personalize destination discovery
# 3
Save users from information overload
PROCESS
STEP 1
Research
Empathise with users to understand their needs and pain points.
This included conducting user interviews, creating personas, user journey map and conducting competitive analysis.
STEP 2
Ideate
Create potential solutions.
This included creating information architecture and paper sketches.
STEP 3
Prototype
Create wireframes and prototypes of promising design ideas.
STEP 4
Test
Test the designs with users to get feedback and reiterate the designs based on it.
This included conducting moderated user testing with 5 potential users. I also presented my design to senior product designers to get their feedback on UX and UI.
IMPACT AND SUCCESS OF APP
USERS
My goal was to identify the primary users of this product, gain insights to understand how users plan their trips, what challenges they face and what factors decide their travel destination.
PRIMARY USER
Young professional
Amy is 26 yrs old and works as a data analyst in a bank. She has a busy work life and always looks for an opportunity to go on a travel break with her friends and parents.
Travel companions
Parents
Friends
Do you always know where you want to Travel?
No
No. of leaves
Type of experience
Weather
Travel time
Destination deciding factors
PRIMARY USER
Parent of a kid
Rachel is 33 yrs old and is a new mom. She and her husband are travel enthusiast and now takes young kid along with them.
Travel companions
Partner
Partner + kid
Do you always know where you want to Travel?
No
Travel companion
Safety
Weather
Type of experience
Destination deciding factors
PRIMARY USER
Student
Ziva is 20 yrs old and is a university student. She is a budget-conscious traveler who loves adventure and exploring off-the-beaten-path locations.
Travel companions
Solo
Friends
Do you always know where you want to Travel?
No
Budget
Public transportation
Safety
Type of experience
Destination deciding factors
After identifying the primary users, I created a User Journey Map to analysis their typical trip planning process, uncover challenges, and identify opportunities for improvement.
I then conducted a Competitive Analysis of direct and indirect competitors to assess their strengths, gaps, and untapped opportunities, comparing the trip planning experience for both new and returning users.
Key issues highlighted in user journey map and competitive analysis
OVERWHELMING
INFO
leading to decision fatigue.
Limited
personalization
leading to generic travel recommendations.
Collaboration
challenges
leading to difficulty in coordinating and sharing plans with travel companions.
Booking
focused
Heavy focus on booking over planning, with planning tools buried under menus.
IDEATE
I created a site map to define the structure and information hierarchy of the app
Sketches
List of attractions
Home screen
Gathering user preferences
Search result screen
Early designs
Home tab
Destination search result
Attraction details
Saved list
USABILITY TESTING
After creating prototype from low-fidelity wireframes, I conducted usability study to identify if there are any usability issues and gather feedback on the overall user experience. My goals were to ensure that users could navigate the app intuitively, efficiently complete their travel planning tasks, and find the app's features valuable and user-friendly.
Usability study parameters
Study type - Moderated
Location - Singapore, India - remote (each participant will complete the study in their own home)
Participants - 5
Length - 45 to 60 minutes
Key performance indicators
#1
Task completion rate
The percentage of tasks users could complete successfully without assistance.
#2
Time on task
The average time it took for users to complete specific tasks, such as creating a new trip and saving go to attractions.
#3
Error rate
The number of errors users encountered while navigating the app and completing tasks.
#4
User satisfaction
Measured through post-test surveys and ratings to gauge overall satisfaction with the app’s usability and features
#5
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. 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 problems identified and design changes made to overcome that problem.
The app's key USP—group trip planning—isn't clear on the home screen.
Interactive map is not noticeable
Its unclear if the card is clickable
Hard to tell where one is due to similar layouts
No clear next step
after saving
I presented my design to industry mentors and senior designers for feedback, then refined the app's visual design based on their input.
FINAL DESIGNS
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.
# 1
Personalized destination discovery
Home screen
When designing the home screen, I prioritized simplicity and clarity, drawing on the Aesthetic Usability Effect to create a clean, uncluttered, and visually appealing interface.
The primary task of exploring travel destinations is central, with the prominent AI search bar serving as the Focal Point to immediately capture user’s attention.
I adhered to Fitt's Law by placing large, easily accessible CTA button at the bottom of the screen, ensuring users can quickly initiate trip planning.
The welcoming message, "Explore the World with your Best Travel Mates," reinforces the app's social aspect, encouraging collaborative travel planning.
Too many things moving. Lacks clear focus
BEFORE
Non uniform icon style
Radial gradient makes the UI look outdated
User preferences
To provide personalized recommendations for destinations and activities, I crafted a questionnaire to gather insights into users' travel preferences and interests.
Destination card list
By applying Miller's Law, I designed the destination cards to display information in digestible segments.
In alignment with Hick’s law, I limited the search results to no more than ten, which simplified decision-making by reducing cognitive load.
BEFORE
Too much of content in card
Only 1 card visible at a time on screen, excessive scrolling
Saving the attractions
I used Progressive Disclosure, initially presenting only essential information and revealing more details as users expressed interest in learning more about an attraction.
# 2
Collaborative trip planning
Adding travel buddies
In designing the collaborative feature of TravelGenie, I introduced a simple "+ Add people" button at the top of the trip interface, allowing users to invite their travel buddies to join in and collectively build a wishlist.
Trip vote - Easy decision making through group reactions
I introduced a voting feature where group members can vote on their preferred attractions, ensuring that everyone’s preferences are considered in the final itinerary. This engaging and interactive process not only made trip planning more collaborative but also more enjoyable, as each member can contribute their ideas and preferences seamlessly.
BEFORE
The voting button lacks prominence and requires multiple clicks.
DESIGN SYSTEM
Color
Primary
#214ECF
Secondary
#EA9835
Text
#000000
Grey
#575757
Background
#FFFFFF
Gradient
Shade
#D8E2FF
Shade
#FEF9F3
Typography
Nunito Sans
Headline 1
H1 36pt
Headline 2
H2 24pt
Headline 3
H3 16pt
Headline 4
H4 14pt
Body text
B1 12pt
Body text
B2 10pt
ACCESSIBILITY CONSIDERATIONS
Text
Text
# 1
Colour contrast
When choosing a colour palette, I made sure there is a high contrast between text and background colour and they met WCAG AA Compliance.
# 2
Typeface
I have used only one typeface - Nunito Sans, because of its clean aesthetics and high legibility.
# 3
Hierarchy
I implemented a text hierarchy throughout the app. This helps users to distinguish different sections and information on screen.
KEY LEARNINGS
Working on TravelGenie was personally rewarding because it combined my passion for travel with my interest in UX design. Here are some practical insights I gained
# 1
Always put users first
By keeping travelers' actual needs at the heart of the design, I ensured the app was intuitive and genuinely helpful for users. Good design comes from genuinely understanding who you're designing for.
# 2
Continuous improvement is key
Regular testing with real users and updating the design based on their feedback helped fix issues quickly and significantly improved the app’s usability.
# 3
Balance user and business goals
Looking back, I realize it’s important to balance user satisfaction with clear business objectives.
If i had to design this app differently, i would take business goals into consideration along with user goals.
Thank you for reading the case study!
More to explore
© 2024 Prachi Thakare. All rights reserved.