UX Case Study: TraveLog - Plan your trip easier

I love traveling and explore the world, and also love making travel plans ahead. When I chat with my friends, I found that most of us use Notes and Excel, because we haven’t found an app the cater to our needs to help us make the perfect travel plans. So I decided to design a travel planning app, to help users solve their problems, and help them improve the planning process.

Opportunities and pain points:

To understand the opportunities and pain points users experience, it’s important to actually hear what they say. So I create several open-ended questions to understand users’ experiences and pain points better:

1. When was your last leisure travel? How was that like?
2. How often do you travel?
3. Where do you find inspiration for leisure travel?
4. How do you decide your destination?
5. Do you make plans ahead of the trips?
6. If yes, what aspect of the travel plan do you care about most? (e.g. weather, routes)
7. Which app/software do you usually use to make a traveling plan? Why do you choose this app/software?
8. Do you encounter any challenges when you make travel plans?
9. How many people usually travel with you? Do you encounter any challenges when you make travel plans with your friends?

Key takeaways from interviews:

I conducted 5 interviews through Zoom. Based on the interview results, I found that people usually decide the destination depends on the budget, time duration, and distance. And get inspiration from friends, movies, and social media. Most people prefer small group traveling (about 2–4 people, except the family, traveling). All of the interviewers make plans ahead of the trips. And most of them make a general plan instead of a detailed plan.

Besides, I find that people prefer apps that can provide them visual ideas of the plan, for example, some of the interviewers use Google Maps to pin the places they want to go to have a general idea, as well as a record after the trip. Besides, they prefer apps that can give them enough space to record that following their own writing habits. But the disadvantage is that for the travel planning purpose, Notes kinds of lack of playfulness, and it is not convenient to combine all the transportation and lodging information. Also, it is likely the current situation is different from the plan, so people need to fine-tune according to the situation. If people need to collaborate with their friends, it is likely that they have different opinions about the schedule. Therefore, it would be better if the travel plan app can help people collaborate. According to apps, people get inspiration for leisure travel, I find most of the people will choose the app/social media from their own country, which more cater to their dietary habit and travel habit.

User journey map

After conducting the interview, I create a journey map to represent the journey that people go through, which includes:

Trigger event: what is it that begins the journey? Why do they even start down this path?

Stages of the process: what are they doing? What are the primary events that occur before, during, and after their journey?

Emotional/intellectual response: what are they thinking and feeling at each stage?

Takeaways: What opportunities are there in this journey for improvement? How might this journey be simplified or made easier for a user?

And through analyzing the user journey map, I identified the opportunities that can help improve the user journey.

Competitive Analysis

To better understanding the market and how other apps/websites solve the problem, and I did the competitive teardown, to see what is the job of the main page of the app/website, what works and what doesn’t work, and How I can adopt any of these features.

1. Wanderlog

App description: Build, organize, and map itinerary

Primary user: Users who loves traveling and need to make a plan before travel

User goals: Get inspiration for the travel and arrange the travel schedule well

2. Expedia

App description: As Expedia’s slogan: “Your whole trip in one app”

Primary user: Users who want to reserve flight tickets, hotels, rental cars, or cruises, and find things to do during their trips.

User goal: To find the best deals for booking their flights and accommodations.

What are the common elements?

In summary, the common elements of these four apps/sites are the recommendations for users, the attractive visual design, the collaboration with friends, and the fascinating images. First, all the sites make recommendations for users when they don’t have any plans. When users open the app/website to make their travel plan without any thoughts, all the apps/websites give them inspirations and recommendations about their trips. In this way, it is easier to make users stay longer on the app/website and start to make their travel itineraries. Second, all four apps/websites have attractive visual designs. Some apps have a simple, clean, and accessible style, which keeps the app/websites organized and orderly. And some apps use stylized illustrations, which attract users’ attention upon they open the app. Either way, they all give users a great first impression and make them have to desire to continue to use the app/website. Third, most of them have the feature that users can collaborate with their friends to make the travel plan. This feature is quite important because it is likely that there are more than 1 person on the trip, the collaboration feature helps them make the travel plan better in a more professional way instead of the chatbox. Last, all of the apps/websites have a fascinating image. Choosing fascinating images is essential because it’s often the first visual element a user encounters on the app/website. A great image can attract users to keep explore the app/website.

What are the priorities of those elements?

Among all the elements I mentioned above, I would give priority to attractive visual design. Despite that all the other elements are also essential, the visual design of the app/website is more like an “entrance ticket” of the user experiences. A good design and layout can catch users’ attention immediately upon they open the app/website, and also make the product stand out from all the competitors. When users use the app/website, a great design and layout that cater to users’ aesthetics can give them a sense of joy.

What are the major themes that I might consider emulating?

I might consider emulating the recommendation feature in Expedia, the detailed trip planner in Wanderlog, the visuals and layout of the map in Roadtrippers, and the quick quiz feature in Walkup. I want to emulate the recommendation feature in Expedia because it gives users inspiration when they don’t have any thoughts about their trips yet. When users open the app/website, it is easier to make users stay longer on the app/website and start to make their travel itineraries. Second, the detailed trip planner in Wanderlog gives users a professional tool to make their plans more effective. On the planning page, users can combine all the confirmation information from other websites, like flight tickets, hotels, and they can also invite their friends to collaborate. This will make their planning process smoother and more comprehensive. Third, the visuals and layout of the map in Roadtrippers can help users convert the abstract to concrete and have a general idea of their trips. Also, after the travel, the map can use as a tracker to mark where the users have been, which can give them a sense of satisfaction, can encourage them to continue using the app/website. Last, the quick quiz feature is a great tool to help users prepare for their trip before they start. Through the quick quiz section, users can have a basic acknowledgment of their destination, and better prepare for their upcoming trip.

User Flowchart

So, according to the insights I get from the competitive teardown and the user journey map, I generated a user flowchart to show how people will navigate and move through my app.

Users can get inspirations from the traveling reviews posted by other users, to decide the destination or plan their trips. Also, the app will provide several professional functions to help users plan their trips more efficiently.

Sketching

Identifying the flowchart of my app, it helps me create the low-fidelity sketching. So in this stage, I sketch 3 versions of what the core pages might look like.

Get Inspirations:

Make a travel plan:

View your itinerary:

Wireframes

Based on the sketching, I have a better idea of the functionality, content elements, and hierarchies of my app, as well as a range of possible design solutions. Each version includes four main pages with different functions: Explore and find the next travel destination, check ongoing and past trips, making itineraries, and check the map.

Version A

Version B

Site map

The site map indicates all of the main screens and how they are connected

Usability testing

To help me improve the user experience of my app, I conduct usability tests with real users. I wrote a research plan, which includes my study goals, research questions, methodology, participant profiles, tasks, and script. I create a digital prototype in Figma with my wireframe and add some images to make users understand the functionality more easily. I run the usability test with 3 users, and each session was around 30 min. There are 19 questions in total including the initial questions. I held the study through Zoom so that I could observe users’ interactions with the app and interview them at the same time. To test the usability, I created a scenario with 3 tasks.

Based on the usability test, I find users might feel confused about the following aspects, so I make corresponding adjustments and changes:

1. In the “Explore”, “Nearby” and “Popular city” page, some users feel confused about the filter, and they cannot get each category clearly at the first glance. I back to the user interview, improving it according to users’ conventions.
2. On the city result page, users feel confused about some information, like the exact meaning of “Rainy”, does it mean the weather today, or the general weather of the whole year? They feel like this information is not helpful with their trip planning because it has no connection with the information of their trip. But at the same time, they need more information about the city’s culture, demography, recommendations, etc. In this case, I would make the info part larger and include more information in it.
3. When it comes to the trip planning page, users think the two demonstration ways is great because it provides choices for users who have different preferences. While the list pattern would be more convenient since all the information would be more straightforward. Almost all of the users feel confused about the chat icon, they cannot tell what functionality would be if they don’t click on it. So, I would change the chat icon to a more reasonable place, and adjust the priority of the demonstration mode.
4. For the map page, users think it’s great to have a separate page because it can help them to check the route and make the plan at the same time. Besides, it would be more convenient if it has a shortcut with the functionality. For example, for the daily plan map page, turning it into visualization helps users have a general idea about what their plan would be on the map. However, having a separate session makes users feel that their experiences are interrupted, and they need to switch back and forth to complete the task. Therefore, I would add the shortcuts of the map into each section, to enable users a consistent experience.

Here is the final prototype of my app: TraveLog Prototype

Final Thoughts

Through the whole design process, I learned a lot from each step, and at the same time, knowing the importance of the user experience behind the app design. Hope the TraveLog can give you some inspiration during your learning process and solve some of the pain points of your travel planning process.