Travel Bug App Case Study
About Travel Bug
The idea of taking a vacation sounds wonderful for a minute then after the dust settles from imagining yourself relaxing on a beach, you start to think about how this is vacation even going to happen. Where am I going to go? What am I going to do while I’m there? How do I maximize my vacation? It takes people from a few days of intense research to a couple of months to plan their travel.
UX Researcher, UX Designer, UI Designer
My Role
Deliverables
- User Interviews
- Competitive Analysis
- Secondary Research
- Affinity Diagramming
- Personas
- User Flows
- Information Architecture
- Mood Boards
- Style Guide
- Sketching
- High Fidelity Mock-Ups
- Prototyping
- Usability Testing
SECONDARY RESEARCH
Researched different sources such as:
-
Google
-
Journals
-
Trade Publications
-
U.S. Travel Website
-
Travel Blogs
“The results of this study suggest that mobile technology using the location-based systems offer the potential to substantially affect the way travelers plan trips and, as such, have the opportunity to help travelers make “better” choices of restaurants and shopping stores by offering personalized information, based upon the tendency to preserve high flexibility for these decisions.”
​
Park, Sangwon & Fesenmaier, D.R.. (2014). Travel Decision Flexibility. Tourism Analysis. 19. 10.3727/108354214X13927625340154.
PRIMARY RESEARCH
I interviewed 6 different users after screening them to make sure they’re frequent travelers and are somewhat technology savy. I talked to each interviewee for about 30 minutes asking them questions about their past vacations and how they typically plan their vacation to better understand the motivations and processes in travel planning.
After the interviews, I did some empathy mapping, affinity diagramming and user story-making to find a common theme in the user’s travel planning process.
​
TOP INSIGHTS
-
100% of interviewees said travel planning is time-consuming
-
Interviewees plan vacations for holidays specifically
-
Having an upcoming vacation brings happiness
-
Knowing the general overview of the destination and what it has to offer was helpful and most found necessary.
PERSONAS
-
Young professional, career driven, looking to make the most of vacation days
-
First time traveler, travel curious
-
Established, confident traveler, decisive and has a specific taste
HOW MIGHT WE
Make travel planning less stressful, time-consuming and daunting and more enjoyable, easy and quick.
USER STORIES - MINIMUM VIABLE PRODUCTS
I created a list of features users would like to see in the app and started to prioritize which feature would achieve the core service to the users. Most of the features that were prioritized were because they were tied directly to planning travel. Travel Bug would benefit from the other features as well but wouldn’t be important enough for the prototype.
USER FLOW
From here on, I looked at this app from a returning user’s perspective meaning the user already filled out their profile compiling of their preferences and calendar. I then came up with the main user flows, as a returning user, to achieve the user’s main objectives of having a customizable trip planning service including suggested trip planning and sharing an itinerary.
INITIAL SKETCHES
I focused on creating space for imagery as users have said how seeing photos and videos of destinations inspires them to travel and vacation. I used cards as a means to display these trips because cards are familiar, allows space for imagery and differentiates other trips. I played with different navigation ideas with the hamburger menu navigation, static header and tab bottom. I also initially thought about doing a horizontal feed like how dating apps are set up but ultimately felt that it’d be better to do a vertical feed as it allows for bigger visuals and focuses on the suggested trips more. The suggested trips are the main functionality of this app so let’s make that feature the biggest.
ROUND TWO OF SKETCHES
After some refinement from the previous round of sketches, we made the suggested trips into a scrollable card feed as it’s familiar to many users. We also incorporated more imagery and destination visuals as users expressed being inspired by travel through photos and videos. I added icons to add to the visual playfulness on each of the pages.
WIREFRAMES
It’s time to put these sketches into Sketch! Shown is the wireframe in production.
MOOD BOARD
After wireframing, it was time to establish the look and feel. Using Milanote, I focused on creating a fun and exciting vibe to contribute to the inspiring feeling users get when envisioning travel. Vacation gives people something to look forward to so I went with a vibrant color palette. For the typeface, I wanted something clean but with flair and Farro had a little bit of playfulness without looking too thematic. The imagery is at the forefront and almost want to let those images speak for themselves.
I went for a muted blue and gold for the main colors as they’re contrasting colors so they “pop” against each other and fit with the exciting and playful mood. We have some neutral colors to supplement the brighter colors as well. Farro is only used as the title font as I wanted the other text to be simple and clean so Avenir is used throughout the app with different weights. I chose rounded rectangles for the containers because curves are the current trend and give a modern feel. It’s important for this app to feel current and modern but again...with flair!
ITERATING AND PROTOTYPING
After deciding on a style guide, I brought the app to life. The header and navigation are at the top. The main user flow is from the suggested trips but if you’d like to access your itineraries, there’s a button at the top. I added a search bar as well because I found during guerilla testing when users were asked to plan a trip for July 4th, they commented on how they would use a search bar. The filter button allows users to refine their search by categories like destination types, price ranges and time of the year. Users may not know exactly where they want to go but they may have an idea.
The cards are comprised of the destination title, a poster image, and three overview icons. The images have a blue overlay to create a more cohesive front page look. When experimenting with photos in full color and no filter, the page looked busy and overwhelming which is the opposite of how we want users to feel when travel planning. Users can also swipe within the card to view more photos and those photos will be without any overlays. The icons give context to what atmosphere the destination provides, how costly it may be and the best times of the year to go.
Users are able to get a bite-sized overview of these destinations with a video, brief description and map and other user photos. When the user selects “customize your trip”, they’re taken to the four-page customization process. Users are able to select items that interest them in four different categories of activities, sites, food and drink.
When all is selected they’re given a custom itinerary based on their input and other variations such as proximities, hours of operations and so forth.
USABILITY TESTING
I did 2 rounds of usability testing with 5 different participants each round. The first image below was an idea we had for users to move on to the next step of customizing their trip. I thought maybe the “Next” button may be more intuitive for iOS users but I found the “customize your trip” button gave users more excitement and curiosity.
Initially, for the customizing process, I had users click “next” to proceed to the next steps but during testing, users were unclear in what “next” really meant and didn’t want to commit to an unknown step. I added a progress bar to the top and labeled the navigation arrows so it’s more clear to users and communicates the customization process visually. After testing the iterated version, users would have more of an “a-ha!” moment and get more excited to complete the steps.
After users clicked on "Customize Your Trip", some users hesitated to click "Next" because they didn't know what was next. I realized they also didn't know what customizing your trip meant so I added a status bar that shows the steps clearly and where they are in the process. I also replaced "Next" with whatever category was next. This allows for a clearer understanding of what goes into customizing their trip and what to expect.
THE FINAL PRODUCT
CONCLUSION
Travel bug is my favorite project as I created this concept from scratch and enjoyed envisioning a better way to plan travel. Travel Bug introduced me to the world of user experience and taught me how the process constantly flows from broad big-picture thinking to narrowing and filing down the details to produce a better product. Throughout the process, I kept the users in mind from research and what their pain points were and what they'd ultimately like to accomplish.
The most challenging part was learning to move on and not let the little details prevent you from moving forward to the next big item that needs to be tackled. I would get caught up in perfecting a function or design if it wasn't what I pictured but it still working like it was supposed to so I learned to move on so we can test and validate. If there was an issue with the function/design, we can better understand how to tackle it.