Gallivant Travel Companion App
Project Overview
The Problem
Traveling can be a fulfilling, rewarding, and even life-changing adventure for vacationers. However, the stress surrounding the vacation experience can lead to people getting less enjoyment out of their vacations, or in a worst-case scenario even forgo taking a vacation entirely. This was a challenging project from a design standpoint, as there are a plethora of potential factors and stressors that each individual experiences. It was necessary to find common threads in vacationers’ pain points that I could use to shape the basis of Gallivant.
The Solution
With the problem in mind, my goal in creating Gallivant was to create an app that helps people simplify travel planning and allows users to focus on planning the vacation they want, eliminating some of that stress. Gallivant is a user-friendly app accessible to a wide range of consumers that allows them to not only create and manage a vacation itinerary, but also discover unique activities and experiences.
My Role
For this project I worked from end-to-end, focusing on everything from the UX, UI, prototyping, branding, and research. I crafted the visual design of the app, from sketches to high fidelity designs, which included establishing a consistent brand identity for Gallivant. I composed the user flow, look, and use of the app - from feature ideation through complete wireflows - and performed research to identify common pain points and travel stressors, as well as usability testing.
Research
User Interviews
As someone who enjoys traveling, I’ve experienced a wide variety of stress factors when it comes to planning and taking a vacation. Thus, I wanted to see if the stress I have experienced was common amongst other people, and at the same time investigate what other unique stresses others might have experienced. To begin my primary research, I conducted five user interviews with people who had filled out my screener survey. Throughout the process I had a few key questions that I wanted to answer:
What aspects of vacation planning cause them stress, specifically what are their pain points when planning for or going on a vacation?
What brings them joy and excitement when planning for or going on a vacation?
What tools do they currently use to help manage their vacations?
What would an ideal vacation for them look like?
After completing the interviews, I synthesized the data, extracting the most important pieces of information which I organized into an empathy map so I could highlight any potential patterns that were consistent across interviewees.
What I found was that everyone I spoke to had experienced some form of vacation-related stress, whether it was from something out of their control such as flight delays to something in their control such as feeling overwhelmed with deciding on things to do. Multiple interviewees expressed they wanted an easier way to share and collaborate on plans with their fellow travelers. Others felt that there were some obstacles getting in the way of making better plans for their vacations, whether it be from information overload, not having the right tools at their disposal, or something internal.
“I probably do wish I did more planning all around”
These key findings helped shape my goals for the project: I wanted to create a platform where people can collaborate on plans, eliminate common obstacles so users can confidently and successfully make vacation plans, and simplify the process of planning a travel itinerary.
Secondary Research
As I began my secondary research I was curious as to whether there was sufficient research available on the topic of vacation stress - and luckily there was. I found that around two thirds of vacationers feel stress attributed to information overload during the planning of a trip, and nearly half feel stress when scheduling things to do for their itineraries. I also discovered that a poorly planned and stressful vacation can eliminate the positive benefits of taking a vacation in the first place. In other words, there is a direct correlation between the amount of stress - or lack of - stress one experiences before or during a vacation and the positive or negative impact of that vacation. Verification of this information like this during the initial stages of my research helped to act as a building block for the project, and led me to realize vacation stress is indeed a real and common phenomenon that is experienced by people from all walks of life.
Heuristic Analysis
I referenced three apps on the market advertised as travel companion apps - Wanderlog, TripIt, and Lambus. I examined each app with Nielsen Norman Group’s usability heuristics in mind to assess each app’s strengths, what could be taken as inspiration, as well as potential room for improvement and differentiation when creating my own app. All three apps came with both strengths and weaknesses in regards to these heuristics: Wanderlog performed well concerning the heuristic of “recognition rather than recall”, TripIt did well in regards to “help users recognize, diagnose, and recover from errors”, and Lambus had an excellent “aesthetic and minimal design”.
Wanderlog uses helpful tooltips to help new users navigate through the app
The Lambus app's homescreen features a well laid out, minimal design that is easy to use and navigate through
TripIt has clear warning messages to help users realize what the effect of certain actions would be
Ideation
Personas
Based on my user interviews I established two personas, representing the types of users who may be inclined to use Gallivant. While each would go about taking their vacations differently and have different objectives, both experience stress from the vacation experience. For both of these personas, their vacation experience would be enhanced by a more streamlined approach to planning as well as an easier way of discovering activities and adding unique experiences to their itineraries. These personas allowed me to enter the minds of consumers who would benefit from using the app, feel the stress that they feel and see the vacation experience through a different lens.
Tina is an engineer who is happy to take around one big vacation per year. She sometimes goes on trips with her partner, or other times with a group of friends from college. She is motivated by having new experiences and creating lasting memories from her vacations. Tina is a detailed planner and wants to make sure that the activities and experiences she plans will be enjoyed by everyone she is traveling with. Although she creates detailed plans, she gets stressed out by the travel portion of her vacation and worries about something unexpected that will derail her plans.
Gavin is a freelancer who has a lot of opportunities for traveling due to the nature of his work. He likes vacationing with his friends but doesn’t mind taking trips by himself either. He is motivated by his desire to become a more worldly person, and wants to experience “off-the-beaten-path” things on his vacations and avoid tourist traps. Gavin likes to spend time reading about new potential vacation destinations but doesn’t put as much effort into the actual planning of his vacation.
Ideation and Sketching
After speaking in-depth with users and completing research on the topic of vacation stress, it became time for me to develop the look and feel of my companion travel app while envisioning what sort of features I might include to satisfy the needs of as many users as possible. I sketched each screen that users would encounter when working through the main red routes I envisioned, keeping them low-fidelity at this time to allow more time for ideation. As the ideas flowed from mind to paper I could see the app beginning to blossom. I saw what would become Gallivant coming to life and the positive benefits this app could provide to users. Multiple interviewees voiced their desire for an easier way to collaborate on plans with others, so I knew I needed to include an easy to use share option that would allow them to send it to others they travel with. Another common complaint was the difficulty of planning an itinerary, which led me to include a user-friendly way they can add and delete items to and from their itineraries.
Wireframes and Wireflows
Upon completion, the sketches were then transformed into wireframes using Figma. These low-fidelity wireframes became the skeletal framework of the app, allowing me to really hone in on the information architecture and get a better feeling of what the finished product might look like. After completion of the wireframes, I then linked them together in Figma via red-route flows to create wireflows - illustrating the paths that users might take when they navigate through the app.
Design and Branding
Color and Typography
Deciding on a color palette was challenging, as I wanted to select colors that represented Gallivant’s brand attributes but also ensure it would be accessible to all types of users, including colorblind users. I used the WebAIM color contrast checker to ensure an AA conformance level, at a minimum, and went through a number of iterations before I landed on the final colors I would use.
Gallivant’s primary color, Deep Blue (#233D4D), evokes a calming, approachable, and inclusive feeling. Off-Cyan (#619B8A) represents Gallivant’s resourcefulness and intuitive nature. Bold Blue (#2D68FE) represents the app’s usefulness and utility, and the tertiary Bright Purple (#7A2CB7) represents Gallivant’s playful and adventurous spirit.
San Francisco Pro Display is the primary font used throughout the app. SF Pro Display is legible, consistent, and inviting in nature while at the same time distinguished and recognizable. It is also easy to implement and adjust for future iterations if necessary.
Brand Attributes
Since Gallivant was only just created and did not have predefined visuals or brand direction, I created a brand identity for the app that encapsulates both how I want Gallivant to come across to users as well as the voice and tone that would be found in the copy. I decided on the following set of characteristics:
Useful
Resourceful
Intuitive
Inclusive
Approachable
Style Guide
As I wanted users to have a consistent experience throughout Gallivant while using the app, I created a style guide to have a set of guidelines which would help me in accomplishing this. The Gallivant style guide contains use cases for the logo, color palette, fonts, grid pattern, iconography, UI elements, and imagery.
Prototype, Testing, and Iterations
Prototype and Testing
Upon completion of transforming the low fidelity wireframes into high fidelity mockups, I then built a functional prototype for Gallivant with InVision. The clickable prototype allows users to complete a set of tasks which would be given to them during usability testing. I tested the prototype with five participants, then compiled the feedback they gave me and organized that feedback into a priority list. Iterations were done for the most pressing and problematic issues and usability testing was performed again with five new participants to test the new, iterated upon version. This testing was critical in my understanding of how the users would view the app, and helped me to uncover some important usability issues that needed to be reworked.
Feedback and Iterations
After the first round of usability testing it was clear to me that there were a few parts of the flow that caused issues for the users.
Right away, in my first round of testing it became apparent to me that the language used on the home screen was not clear enough that users could intuitively figure out how to begin using the app. When prompted to start planning their itinerary for a trip, all but one participant first clicked on the “plan an itinerary” section. Upon iteration I changed the language on the home screen CTA buttons and did not have the same issue with the second round of tests.
The notes section was also a problem area uncovered in user testing. It did not make sense to users that there were separate actions for adding either a text note or a photo note, and they became stuck and frustrated at this point. These two actions were combined into one upon revision, which made things more clear to them in the second round of testing.
In the section where users select filters it was not clear enough which tags were active, and some users did not recognize there were already some pre-selected filters on the screen they were shown. To remedy this I removed pre-selected filters as they felt unnecessary and more likely to cause confusion than to be beneficial, and also edited the bar where users click to open the filters menu to be more explicit and show when tags had been applied.
Results
Validation
Upon completion of the iterations and the second round of testing I felt a sense of validation. The feedback I got was extremely useful and the changes I made helped improve usability for users. In the second round of testing, every user was able to figure out where to begin the task without much hesitation, engaging with the notes section was much smoother and users had an easier time navigating the filters section.
At this point there is still work that could be done or changes that could be made, but as an MVP it has reached a stage where, as it is, I do feel like Gallivant is ready to help people remove some of the stress from their vacation experience which is what I had set out to do.
