Fast & Reliable Travel Itinerary App
Travel Faster, Easier, Now
The Seattle's best City Guide Today
Most people might experience similar challenges with travel. To maximize the enjoyment of the trip, getting useful travel information quickly and efficiently is a prerequisite. However, it is not easy to achieve this goal with limited time. Especially people who have many chances a lot of travel opportunities like me always want to solve this inconvenience.
I tried to solve this problem with a user-centered approach empathizing with the user through a process of research and analysis, defining and ideating solutions, and validating the theories with prototypes and testing.
For my first capstone project, I developed UX/UI design for a travel guide mobile iOS app to plan accessible itineraries for busy city travelers. I walked through the entire UX process from beginning to end by conducting user interviews, persona, wireframing, low and high-fidelity design, and usability testing.
I have the privilege to live in various cities as a military family. As I have often moved and traveled to new cities, I met many people. (I have lived in five different states in my five years living in the U.S.A., and I recently moved to Seattle!) I found that most of the people I met had common challenges in travel. Travelers want the city's unique experiences when they travel. To maximize the quality of travel within a limited time and itinerary, searching for information effort is required. However, time and schedule are not always enough for us. Is there any guaranteed, quick, and convenient travel guide for a good travel experience? This capstone project was started to solve this problem encountered in life.
I conducted background research for current travel trend, and how way of smartphone searching impact user’s travel patterns. Social media plays a significant role in several aspects of tourism. Millennials are using social media and mobile devices for their travel activities. They have always loved sharing photos and videos of their travels online. Opinions, recommendations, reviews, and comments among social media influencers and peers on social platforms affect potential customers making travel decisions. Millennials prefer more authentic experiences and a new culture rather than using traditional travel ways.
• Millennials are looking for more authentic travel experiences.
• Travelers are no longer dependent on brochures or destination.
• Travelers use their phones while searching for travel inspiration
I found that the most frequent habits of people getting inspiration and information for their travel happen via smartphones. This circumstance impacts the pattern of travel, unlike the traditional way of trips.
Empathy and the User
Based on secondary research, I thought that a mobile travel app for offering qualified travel information needs to people. A survey was conducted to investigate people's travel patterns and their smartphone usage habits for travel.
With results from the screener survey, I conducted five user interviews, including in-person and remotely. The interview questions focused on identifying users' needs, frustrations, and goals from their past travel experiences.
A few of the survey questions include:
Please explain your steps for planning for a travel.
Where do you get useful information for your trip usually?
What are the crucial experiences when you travel?
Please share your most memorable travel experience.
Please share your most challengeable travel experience.
During the interview process, I learned that people need fast and reliable travel information. They don't want to ruin their travel due to wrong information.
Affinity & Empathy Map
I synthesized the research I conducted and created an affinity map, empathy maps. I used voice recordings and the notes I gathered from my participant interviews. Also, I looked up them to these interviews to refresh my memory and write insights down onto post-it notes for making affinity map.
Next, I made an empathy mapping to organize insights, observations, and quotes I’ve collected from a user interview. The map led me to get a better understanding of my user’s pain points, goals, feelings, thoughts, and behaviors.
These outputs helped me to create personas for my users and bridge the gap between those personas and my design concepts.
Personas help me align on strategies for moving forward and identify goals that need to be met to provide a good user experience. I created a persona of potential users to treat them as actual individuals who will be using the product.
To understand the competitors of the current travel app trend, I downloaded three apps and detailed the strengths and weaknesses of each. I looked at the aesthetic, function, and efficiency of use for each of them.
• Many apps considered personalization information features.
• More apps focus on one purpose.
• Image-oriented apps with few explanations have limited information delivery.
After that, I analyzed extra 6 apps to identify current landscape of travel app. I conducted nine different travel apps for the project competitors’ analysis by using heuristic technic. This analysis focused on the current trend of travel apps that shows whether users can easily organize the information for themselves and the amount of useful travel information provided.
The graph shows that people prefer features that provide a variety of travel information and that can use as a personal itinerary. I planned my capstone project app to locate where to maximize these advantages.
Make high-impact design decision
How Might We
I used How Might We questions to articulate possible solutions for the last step of the research phase. During this process, I tried to link the following questions to find suitable solutions.
How Might We...
offer reliable local travel information that is proven by residents?
introduce unique experiences that only regions have?
guide cost-effective or reasonable price travel information?
introduce Instagramable local places?
suggest trip plans that families can satisfy not only kids but also parents too?
After HMW question, several ideas came up for solutions. It guided me to categorize essential factors that users need.
Design & Ideate
I pushed past or expand initial ideas I may have to find the best possible solution for my users. Using the brainstorming technique from Design Thinking, I generated solution ideas that solve my How Might We problem statements. I draw up images with labels of generated ideas on the sticky notes.
I selected 12 keywords of my users to want to experience in their travel. Lastly, the core 3 HMW questions narrowed down via this process.
People want local attraction which has proven by local people and history.
People need reliable, non-exaggerated information
People want to experience local food.
For the next step, I created User Stories to identify the functional needs of my project. To articulate this, I used to follow a basic frame of “As a (user), I want to (do some goal/task) so that I can (achieve some outcome)"with the collected users’ core needs. After I categorized them by epic, user journey, and smaller stories by ordering of importance, MVP was validated.
Sitemap & User Flows
After I created user stories, I transferred them to the app sitemap. This step is the beginning of developing the project app visually. All screens are designed based on a hierarchy system from top-level pages to subpages. I determined to create an app for offering useful travel guides and let users use conveniently. I sketched my initial thoughts on the paper and converted them to a digital sitemap.
I could map out the user flow for a red route that a user might take through my app to achieve their goal based on the digital sitemap. As integrations and lists are the two most crucial user tasks, I could decide to design flow for the onboarding process, which can let future users can add and edit conveniently for their purposes.
There were many unexpected things to consider for creating the sitemap and user flow based on crucial factors that I found from the research phase. The menus that I generated seemed to be something missing and uncompleted. I referred to other apps’ sitemaps for my design. There was a lot of confusion in the process because the user flows of existing apps were not perfectly applied to my app. Since this is my first UX project, I iterated redesigning for this flow to overcome the confusionI tried to go back to basics and focused on the customers' core needs and pain points. I eliminated unnecessary content and centered on the flow that future users can use the content practically and conveniently.
Sketches & Guerrilla Usability Testing
Creating low fidelity design sketches was the first step bringing my capstone project ideas to life. Using the red routes, I created sketches of the screens that make up the critical user flows that future users will follow when they use the app. I used the Marvel pop templets for the frame of iPhone X. Based on my mentor’s feedback (from Springboard), several rounds of sketching were attempted for better results.
I created a low-fidelity design of three red routes. I printed four different variations of sketches for each of the three red routes and used them for a guerrilla usability test. I then ran a test to get initial feedback on the designs I’ve made. It was an effective and useful process to clear my confusion on my sketches. I asked the guerrilla usability test for my friends and family in person and remote. I could get practical and direct feedbacks. It let me flag certain aspects of my work that need to be adjusted.
wireframes. Converting my sketches to digital versions enables me to identify critical design decisions that I missed from the paper works. I produced every screen and tried to build out the complete sequence of screens for my red routes from user flows. As the design progressed, I felt closer to high fidelity mockups.With the useful feedbacks from the guerilla usability test, I digitized my sketches to create
style guide to keep my designs maintain consistency of design decisions to build mockups. The color palette, typography, and basic UI components such as buttons used as essential elements for the style guide. I used true black, pure white, and grey to let users concentrate pictures and content on the app. Occasionally, live red was used for point color. For the typography, I chose P22 Underground as the main typeface. I used Avenir font on buttons and captions to increase readability. I set the
High Fidelity Mockup
high fidelity mockup, I choose the landing screen that I think represent the core of my product. Wireframes and a style guide to help me navigate how do I start. The goal of the high-fidelity mockup is making a simple and clear interface. Icons are placed at the top area to help users quickly search for content they frequently need in their travels. Recommended local destinations placed in the center with large pictures. I designed the category at the bottom of the screen according to the previous user interview that if they could see the search category at once.To create
My next step involved hi-fidelity mockup and red routes then translating these directly into prototype. Since I was working with many existing design patterns, it was relatively easy to move straight into prototype designs.
Trabot is a travel guide app that offers pre-selected travel itinerary rigorously for busy city travelers. With this new benefit, I hope people can reach out to credible travel information about what they use conveniently.
Using InVision, I created clickable prototypes for usability test. I conducted two usability tests with set tasks and scenarios.
With five participants, I conducted moderated and unmoderated usability tests two times. Many useful feedbacks from the tests was incorporated into my prototype. I synthesized my findings, iterate on my prototype designs.
1. The Edit feature of itinerary needs to show at once.
Redesign the edit features more clear.
Relocated buttons on the edit page.
2. Want to see pre-curated itineraries first
Redesign the main page to show recommended itineraries.
3. Want to see hierarchy design on a user’s selection.
Give a level distinction between the items selected in the checkboxes and not.
What I Learned
The customer's view of the design is more conservative than I expected. They prefer the familiar style of UI they've used. My prototype needed to be modified a few times based on their feedback.
Throughout this project, I observed how bias‐for‐action mutated into a bias‐for‐delivery. However, I learned that the more I went through user tests, the purpose of the design was getting closer. It was not easy to conduct the first capstone project. But the whole process was very productive and valuable to learn the progress of the prototype through continuous validation of it.