Role: Concept, Research, UX and UI
Timeline: 4 months
Tools: Figma, Miro, Marvel
Itinerant
Planning your travel itinerary made simple.
Itinerant is an app that helps travelers create travel itineraries easily and effectively. With Itinerant, users can find and choose activities to do on their trips, assign activities to each day of the trip, visualize their itinerary, and map out their activities, all in one place. Itinerant is geared towards people who are unfamiliar with the area they are visiting and like to make the most of their time when traveling.
Overview
The creation of a travel itinerary when traveling to an unknown destination is one of the most challenging activities when planning for a trip due to multiple factors they must consider. Travelers want to be efficient, prepared, and plan their activities ahead of time to avoid setbacks on their trip, but they find the task to be tedious and overwhelming.
The Question
How might we create a tool that includes all the information needed to plan for a trip that will help travelers create a travel itinerary quickly and effectively?
The Strategy
After coming up with a problem I wanted to solve, I followed the the design thinking process to create the Itinerant app. I empathized with users, defined their needs, ideated solutions, prototyped an application, validated my design decisions, and iterated on my designs based on the insights from usability testing.
The Solution
The creation of an app that helps users plan and schedule travel activities based on the traveling time between the points of interest, taking into account time spent at the activity, weather, and daily allotted time to complete different activities.
Get Suggested Recommendations
Create a new itinerary, customize recommended activities, read all about a specific activity, and add the activities that you like to your favorite's list.
Schedule Your Activities
Add the activities from your favorite's list to the day you want; use the weather as a reference point. See the traveling time between activities and make changes to your day itinerary by editing the time, moving activities to another day, or deleting activities.
Map Out Your Trip
Visualize the route of a day in the itinerary and start navigation choosing from four different modes of transportation.
✷ Empathize
Research
I conducted primary and secondary research with the objective of understanding the users' needs, desires, concerns, and the obstacles they face when planning a travel itinerary.
When conducting secondary research, I found that being unfamiliar with a travel destination is the one of the biggest challenge travelers face. Therefore, it is hard for them to identify popular points of interest, know the travel distance between them, and the average time it takes to complete the activities.
Then, I conducted primary research and surveyed 17 individuals who travel to an unknown destination at least once a year.
From the results of the survey, I found out that:
.png)
Interviews
After my screener survey, I interviewed 5 individuals who take a trip to an unknown destination at least once a year, perform multiple activities during their trip, and create a travel itinerary.
I asked them questions about:
-
The type of activities they do on their trips
-
How they come up with those activities
-
How long it takes them to create a travel itinerary
-
What tools/services they currently use to organize their itinerary
-
Their feelings towards their current way of planning a travel itinerary
User Interviews
Synthesize Research
I synthesized my research and created affinity and empathy maps to visualize common factors among users. I also created a persona who is a reliable and realistic representation of Itinerant's key audience.
.png)
Key Takeaways from User Interviews
.png)
Empathy Map
Persona
✷ Define
Andrea, my primary user persona, doesn't enjoy starting from scratch, researching for activities, reading reviews, mapping out her points of interest, or using several apps to create an itinerary. However, she really wants to make the most of her vacation and avoid setbacks because she wants to make the most of her time while in vacation. She wishes there was an easier and faster way to create an itinerary and be worry free.
So, how might we create a tool that includes all the information needed to plan for a trip that will help travelers create a travel itinerary quickly and effectively?
✷ Ideate
I began ideating possible solutions that would allow users to easily and effectively create travel itineraries and reduce the amount of tools needed by just using one single app.
To do so, I drafted user stories such as — As a traveler, I want . . .
-
to have a menu of recommendations, so that I can pick activities for my itinerary.
-
to have a calendar outlining my activities, so that I can visualize my days.
-
to see the best travel route for my activities, so that I can be efficient with my time.
Site Map and User Flows
With all these factors in mind, I created a site map and user flows based on the three most critical red routes for Itinerant:
-
creating a new trip and finding activities to do,
-
managing the itinerary by assigning activities to each day of the trip, and
-
mapping out a day’s route.
.jpg)
User Flows
Sketch, Wireframe, and Usability Test
After ideating, I sketched my solutions using pen and paper and created a simple prototype using Marvel. I conducted remote usability tests of this prototype as a way to quickly obtain user feedback and better inform my design decisions when creating the wireframes.
Then, I created Itinerant's wireframes on Figma while accounting for the insights that I gained from usability testing, including the lack of CTA buttons and the lack of legends to provide help or guidance to the user.
.png)
Sketch to Wireframe
Style Guide
After having tested my low fidelity prototypes for sketches and wireframes, I set out to create the design system for my app, making sure to incorporate changes based on the feedback and results obtained from user testing.
First, I started with its name: Itinerant, meaning traveling from place to place.
Itinerant's design conveys the brand attributes of efficiency and simplicity. It uses a relaxed and sophisticated, yet joyful color palette.
Nunito is a playful, friendly, and modern font. It is lighthearted and fun without being too bold.
Its iconography and buttons represent the brand personality of simplicity. The lines are thin and slightly curved to create a smooth and soft feel.
_edited.jpg)
✷ High Fidelity Designs and Prototypes
I created high fidelity mockups for the three critical user flows, using the style guide to ensure consistency. I then created the prototype using components, overlays, and transition effects to have it ready for usability testing.
.png)
✷ Validate and Iterate
In order to validate my designs, I conducted two moderated rounds of usability testing for Itinerant's prototype with potential users, focusing on creating a five day itinerary and to plan for their first day of the trip. After conducting my first usability round of testing, I discovered usability issues that I set out to fix.
✦ Users got confused with the bottom bar navigation in some screes.
When users where prompted to add an activity to their favorite's list or to schedule it for a specific day, users would go to the + sign in the bottom bar navigation instead of taping the heart or the activity's add symbol.
This issue was resolved by removing the bottom bar navigation in in problematic screens where adding a new trip was not needed.
.png)
Update to Recommendations Screen
After iterating my designs based on user feedback, I conducted a second round of usability testing in five other participants. Users were able to complete all prompts and no issues were encountered.
_edited.jpg)
User Feedback from Second Round of Testing