Helping travelers plan trips with ease using crowdsourced itineraries — UI/UX Case Study

This case study explores the journey of users browsing through other travelers itineraries and creating their own itinerary tailored to their needs and preferences.

The idea of this project was inspired by one of the trips that I had taken earlier this year.

In the month of march 2021, I had been on a trip to Udupi, Karnataka with two friends of mine.We had intended to visit the famed hanging bridge in Udupi on the last day of our trip, and this was the first location on our list to visit on that particular day. We arrived at the location around 11:00 a.m. Explored and enjoyed the area for a while before deciding to head towards our next destination for the day.

Hanging bridge, Udupi

But, to our dismay, there was no means of transportation accessible to take us back into Udupi’s main city, where all our further destinations to visit were located. When we inquired about transportation, locals informed us that we would not be able to find any means of transportation for the next 3 to 4 hours. As a result, we missed practically all of the places we had planned to see that day. We could have avoided this situation if someone who had already visited this spot could have assisted us or if we had enough information about this location. That’s when the concept of using itineraries created and implemented by other travelers came up as a solution to the problem we faced.

The experience was one of its kind, who knew that it could be the problem statement of my case study😅.

Documentation and Iterations:

Most of my insights on this project have been stemmed from the wonderful conversations I had with people who travel frequently and others by researching on Google. The constant loop of conversations/googling-> documentation-> extracting insights has been a major contributor to my project.
Here is a snapshot of my documentation and iterations

A big thank you to Chethan KVS for his mentorship, continuous feedback, and helping me evolve as a Product Designer.

Understanding the problem statement:

Traveling has always been a great experience for me, but planning a trip from beginning to end and creating effective itineraries has always been a challenge because the process of creating an itinerary consumes a significant amount of time and energy. And, no matter how hard I try, I always fail to put my planned itineraries into action due to a lack of self-exploration and adequate knowledge.

I spoke to other friends and family members of mine who frequently travel to understand if they too face similar problems when creating itineraries, travelling and this is what they had to say

Based on the discussion with my friends and family, here are a few things that they find difficult to tackle while planning for their trips.

• Time-consuming and inconvenient process: The process of planning an itinerary takes a lot of time and work, and even if users enjoy it, they can’t afford to spend so much time on it.
• Fragmented way of planning: To create an itinerary we usually fetch information from different sources and the whole process of collecting bits of information and assimilating it is cumbersome.
• A plethora of generic options: Choosing the best location or choosing the right ingredients for your trip like places to stay, explore, eat, travel is so difficult when you have uncountable options to choose from.
• Non-trust worthy places: Every person who plans his trip has a question in mind about the places he wants to travel, is this a genuine or a safe location?

Competitive analysis:

To gain a better understanding of other apps that solve the existing problems and to ensure that I don’t miss out on key aspects of the solutions implemented by them.

I ran a side-by-side comparison of the most popular trip-planning apps.

Introducing Trip Inspire:

Trip Inspire is a crowdsourced travel planning app that enables users to:

• Identify the ideal location for their next vacation.
• Browse through itineraries created and shared by other travelers.
• Create custom itineraries to share with the world.

Target Users

Group 1: This category includes solo travelers, functional travelers, backpackers and adventurers.

All of these users have their own set of constraints, such as backpackers looking to see a new place on a tight budget. As a result, they want itineraries that are less scripted, tailored to their needs, and customizable.

Group 2: This category includes all forms of travel influencers or users who travel frequently and share their travel experiences on social media.

This group of users does not have a dedicated platform where they may share their itineraries and educate or inform other users about their travel experiences.

Why did I decide Trip Inspire to be crowdsourced?

While interacting with target users of our app one of the things that was highlighted was that people are more trustworthy of any travel information recommended by other people who have been through those travel experiences all by themselves.

User Categories

1) Viewers: These are the users who are searching for itineraries that fit their plans and interests.

2) Creators: These are people who have visited a specific location and are willing to share their travel experiences.

Every user on this app can be both a viewer and a creator as he can create his itinerary by browsing through other people’s itineraries.

Assumptions

In order to work on this app, I felt it was necessary to make a few assumptions and set a few constraints.

• Trips Inspire currently is active for locations only in India.
• The Trips Inspire team has engaged a group of travel influencers to cover practically all of India’s vacation destinations, therefore all of the locations on this app have itineraries.

We will go over the assumptions that I have made in this case study as and when required.

Without any further ado let’s get started with the design

The Design System:

When I started the project, I knew that I would have to iterate on a lot of elements such as different cards like location cards, itinerary cards, accommodation cards, etc. And so to help me to iterate faster and make changes faster across the app, I decide to create a design system.

Login/Sign up Screen

Trip Inspire can be explored without requiring the user’s credentials, as there are only a few features in our app that need the user’s credentials.

As a result, I have given the users the option to join the app as a guest.

However, specific features of this app do require the user’s credentials, such as:

• The user is attempting to save any information on this app.
• The user wishes to build a travel itinerary.
• The user wants to provide information for his profile.

For using these features users need to Sign In to the app either by using their Gmail Id or Apple Id.

Enabling users to find their ideal location for their next vacation — Home screen

The home screen’s primary purpose was to show users several scenarios in which they might choose a vacation destination as this would be the first step before choosing from a list of itineraries.

It was difficult for me to decide on what categories to include on the home screen. I needed to understand various user behaviors.

• How do users think while choosing a travel destination? - It could be about a specific experience they’re seeking, such as an adventurous activity, cultural exploration, or attending a specific event.
• What are the circumstances that could arise when deciding on a destination? - It could be a weekend or their children’s vacation time, for example.

Sections on the homescreen:

• Most visited destinations section was more of inducing the existing mental modal to the users by introducing them to the most popular cities in India.
• Choose your destination based on your specific interests section, I will talk about this section separately later in the case study, as it has a subsequent flow of screens after users taps on it.
• Trending destinations section is for those that plan their journeys in real-time and are constantly on the move. This section contains recommendations for the most popular and best places to visit right now.
• Explore nearby section is for users looking for weekend getaways or short trips surrounding their current location.
• Explore by season section is for users who are planning to have their vacation based on the upcoming or any particular season.
  Events section recommends places based on any major events happening in India.
• Explore by theme section is for those set of users who travel based on the theme of the location.
• Explore by Itineraries section displays all of the most recent itineraries added to the app, giving you a taste of the extensive library of itineraries available on this app.

Itinerary and Location Card

The itinerary card should visually present to the user the contents of the itinerary.

Let’s have a look at the several iterations I’ve done on this card and go over the design decisions I’ve made during each iteration.

The location card should visually describe the location and give the users an idea about the things that particular location has to offer.

The most challenging aspect of designing these cards was determining which information is essential and which is not, as well as the hierarchy of importance between each data point and how to make these cards easy to follow for the users.

Helping users narrow down their choices of destinations based on their interests and preferences.

The optimal location recommendations are minimized in this section to let the user make a quicker and better decision based on his interests and preferences.
I introduced several filters based on the user’s needs and interests like the theme of the vacation, activities to experience, time of travel, etc. Using which the user can find options of destinations that match his interests.

Let us now focus our attention on the itineraries, which is the crux of this app.

Browsing through different categories of itineraries:

Once the user selects a location he will be taken to a screen with different categories of itineraries on it focused on different interests of the user like budget-friendly itinerary, adventure-packed itinerary, luxurious itineraries, etc.

Filtering within the category of itineraries:

Once the user chooses his itinerary category all the itineraries in that category are displayed to him and within the category, he can sort and filter them based on tags, dates, and other factors.

Saving itineraries under the collection tab:

Now that the user has browsed through different itineraries under various categories, he may want to save a few of them for future reference. He can do this by saving his itineraries as bookmarks under his collections tab.

But before that the user can bookmark any item on this app, he must first create a user account or log in on this app using either his Gmail or Apple ID.

Itinerary details screen:

To design the view of the itinerary screen, I had to understand what exactly did I want this screen to communicate to the users:

• List of all the information required from an itinerary perspective.
• Introduce hierarchy within the list of information — as in which information is most important or what comes first, etc.
• Actions the users can perform on this screen.

To summarise all of the above points, I created the itinerary screen, which visually displays all of the elements of the itinerary, such as travel information, day-to-day activities that the user has completed on his trip, accommodations, and so on.

The most crucial part was presenting all of these data points on the screen in a way that was easy to understand and allowed the user to navigate effortlessly between different elements of the itinerary.

I will take you through various iterations of the itinerary screen to help you understand the various design decisions I took while creating the screen

Discussing the major pain points of the iteration 1:

• Cumbersome navigation: The user will have to perform a lot of back and forth within the screen to go between different sections of the itinerary. Also, they’ll have to deal with a long vertical scroll to read the complete itinerary. This is not the type of experience I want the user to have.
• Multiple essential data related to the itinerary is hidden under generic options: There is no division of the itinerary into distinct sections that should be presented to the user. For example, If a viewer of this itinerary wants to learn about the accommodations where the creator stayed, they will have to go through all of the days present in the itinerary to learn about all of the accommodations.

I needed to come up with a solution that would address both of the pain points discussed and could provide the user with a clear sight of all of the itinerary’s categories, as well as the ability to easily navigate through them.

Discussing the major pain points of the iteration 2:

• Hierarchy within the navigation tab: Elements in the navigation tab begin with the days of the itinerary, which is okay, but what if the user wants to know about the accommodations or travel details included in this itinerary? He will have to go all the way to the end of the tab to find these parts. This isn’t the most effective way of presenting the data.

After working on all the above pain points discussed, this is how the final design of the itinerary screen looks.

Let us discuss about the location cards on the itinerary screen.

The location card on the itinerary screen should visually display all the necessary details about the location to the user. The gist of what the place is about, any money involved in visiting this site, a brief about the user’s experience at this place, etc.

To make it easier for the user to understand and to help them make quick decisions. I built a few categories using icons to categorize the places to visit to display them on each location card of the itinerary screen.

Now, let me walk you through the iterations of the location cards on the itinerary screen.

Map-view functionality:

The idea of introducing the map view was to make the user aware of the routes of the complete itinerary and to make each location on the itinerary more accessible and easy to reach for the user who is viewing this itinerary.

Saving favorite locations from different itineraries :

One of the prime functionalities of this app is that users can either create their itineraries from scratch or build their itineraries using various itineraries of other users. So I had to design a space for users where they could save items from multiple trip ideas.

This is how the flow looks like when the user who is already logged in the app saves a particular location to his collections.

Creating an itinerary:

This flow was one of the most stimulating and challenging flows in the whole project it involved multiple iterations of screens and flows in between the screens, various assumptions, understanding user behavior to design the flow in the best possible way.

Things that I have taken into consideration while designing the screens for this flow:

• How much information do we take from the user while creating the itinerary? To be honest, I didn’t have an exact answer to this question, but one thing I kept in mind while designing the screens was that we needed to gather information in such a way that the viewer could get a general idea of the itinerary, while also making it easy for the creator to provide information.
• Keeping the entire process of filling up the information in the itinerary quick and crisp, because if the procedure is extensive and detailed, users may lose interest.

For your convenience, I’ve divided this entire flow into portions and will explain each section individually. So, with that said, let’s get started with our flow.

Users can start creating their itineraries from the itinerary tab in the tab bar.

If a new user or a user who has logged out of this app attempts to create an itinerary, he will be asked to Sign up or Sign in first and then be proceeded to the create itinerary screens.

Now that the user has provided us with the essential basic details of his itinerary, it’s time for us to get him into the details.

The main sections of the itinerary include information about travel, accommodation, and a day-wise list of places to visit and eat.

Travel tab:

The primary purpose of this screen is to provide the viewer with a general overview of the creator’s journey and the travel involved in it. I have included the multiple destinations involved in the creator’s journey and also the different modes of transportation used by the creator.

The reason I have included modes of transportation in the travel screen is that travel accounts for a large portion of any trip’s budget, the viewer must be informed of all travel sources utilized by the creator to gain a comprehensive justification for the trip’s budget offered by the creator.

Adding accommodations, places to visit, and eateries to the itinerary:

Let me walk you through the remaining sections of the itinerary, which are the accommodation, day-by-day events and eateries tabs. The flow involved is simple where the user can add locations either by searching them from google or from their collections, where they have saved their favorite locations from other user’s itineraries.

Itinerary card for multiple destinations:

Enabling users to add flavor to their itinerary by sharing their experiences — Location details screen.

When it comes to customizing the itinerary’s experience, what adds up is the user’s experience to each location on the itinerary. Now that we’ve finished adding items to the itinerary, let’s move on to adding specifics to it.

While designing this screen I had to keep two specific ideas constantly active in my head throughout the design process and they were:

• To keep the input fields open and non-constrictive for the user, like not restricting the user on what information they are prepared to share.
• To layout the input fields in such a way that even a novice itinerary creator can figure out what information to include in this forum

Location details screen:

This screen displays input fields for the creator to fill up to share information about their accommodation or place of a visit or the eatery. The user can also choose tags that are most suited for their location from the tags list, or create new ones.

The details screen of places to visit and eateries are almost the same with a different set of questions asked at the input fields.

Profile screen:

This screen displays general details of the user and shows them the list of itineraries that they have created.

Challenges and takeaways:

This was my first UI/UX project and so there are many challenges and takeaways that I had during the project but I will be talking about only a few important ones that emerged for me as game-changers.

• Most of my findings and assumptions in this project come from user interviews and understanding the ‘Why’ behind every problem that the user has faced was more important.
• Iterations — Forget about the number of iterations, but learning how to create different iterations itself was an important skill to learn.
• Great design is just not about visuals but a comprehensive mixture of logical user behavior and visuals and so much of thinking and iterating on your thought process goes into the design.
• Always question yourself, be prepared to be wrong. By the time I started this project I knew that I did not know the complete design process and what goes into it etc, but I had the urge to fight for my design decisions initially, but trying to understand diverse opinions on my design was the one that helped me come up with better design solutions and expand my horizons.
• I made tons and tons of mistakes and I am happy about this fact because I did not fail but found n different ways that did not work for my designs.
• Coming to the designs I learned many things like understanding typography, hierarchy within Ui elements, creating the color pallet, iterating and fixing your design decisions, and many more.
• Figuring out what works for you, personally one thing that really helped me throughout the project was documentation to shape up my design decision and coming up with all the possible solutions for the design challenges that I encountered during the project.
• The power of copy, I was challenged several times throughout the project to write better copy, and in the process of looking for better copy examples from other apps, I realized how a better copy can always greatly impact your designs.

That’s it, folks!

I appreciate your efforts for sticking till the end✨

If you enjoyed reading this case study then long-press on the clap icon, drop a few claps & shower your support.

👩🏽‍💻I am looking out for opportunities as a Product Designer. If you think I can add value to your team and your company, or if you have feedback on my work then do reach out to me on Linkedin or Twitter.