.svg)
End to end UX/UI app designed to connect like minded travellers to gain the most out of their travel experience
Planning a trip is an exciting process with a lot to consider including, budgeting, accommodation, transportation and activities. I started this project with the goal of finding a solution for planning a group trip with regards to deciding about itinerary preferences, coordinating budgets and schedules. However, after completing my user research I discovered a different pain point: deciding on a travel destination.
Seasoned travelers as well as occasional travelers share the same problem, deciding on a destination and ensuring that it offers the right things to do according to their travel preferences is time consuming and requires a lot of research. Reading reviews online or using social media to learn about a destination often runs the risk of providing irrelevant information and being subjected to “overhyped” destinations that don’t meet the travelers’ expectations. To navigate this problem, users often turn to friends and family to support them in the trip planning process.
Competitive Analysis
User Interviews
Affinity Mapping
POVs, HMWs and Brainstorming
Personas
Task flows
Low Fidelity Wireframes
Mid Fidelity Wireframes
Branding
High Fidelity Designs
Interactive Prototype
Usability Testing
Feedback Prioritization
Iterations
How do travelers go about planning trips when it comes to making decisions about their itinerary?
I completed a SWOT analysis on three websites that are involved in the trip planning process and two apps that are specifically dedicated to organizing a users’ itinerary and having all trip information in one place.
Analysis Highlights:
Based on this research, I decided to focus on the social aspect behind travel in terms of planning a group trip or how social media plays a role in a users’ trip planning process. I interviewed 6 users between the ages of 20-30 who have planned a group trip in the past. The interviews were a turning point in my research because I shifted my focus from the collaborative trip planning space to how users decide on and research a particular travel destination.
Findings:
1. Users get inspiration for places to visit from people they know have been there
“Family and friends play the biggest role in the trip planning process, exposure to new ideas for trips and the desire to visit a destination 90% depends on knowing someone who has been there.”
2. Users have increased confidence in their itinerary when they receive recommendations and an overall impression of a destination from people they know
“Family and friends play a huge role [in planning a trip] because I’ll trust if they enjoyed the activity or not, it's different from hearing it from someone you know personally than someone you don’t know.”
After completing my user interviews, I created an affinity map with 5 themes that helped me uncover deeper insights regarding user needs when it comes to planning a trip and the desire for authentic and personalized recommendations that will ensure they would have a good time on their trip. Based on these insights, I was able to narrow down my focus to helping users find the right travel destination and address the pain points pertaining to that.
To address user pain points and narrow down the focus of my solution, I created POV statements and HMW questions focused on helping users find the right travel destination and make the most out of their trip. Below is an example of one of the key insights I made note of. Another notable insight: being able to plan an efficient itinerary that accommodates all activities is a main priority for users.
Being able to verify whether a destination/attraction
/landmark is worth visiting (after deciding on a destination) is one of the most important priorities for travelers
Users need to feel that destination reviews are authentic and worth visiting rather than overhyped
As a user I want to be able to trust the reviews that I am reading and ensure that a particular activity is suited for me and my travel needs
How might we make attraction reviews feel more authentic?
How might we capitalize on the travel experiences of family and friends to provide users with authentic destination reviews?
I used the HMW statements as the basis for brainstorming solutions. I put a 30 minute time limit for my ideas to flow so as to not get carried away and spend too much time on this part of the process. This helped me think about the parameters I should consider for the app I want to create, and which features would be the most useful in solving the user pain points of:
To better guide my design decisions and keep travelers at the forefront of my designs, I created a persona based on my interviewees. I focused on the users’ need for finding the right travel destination and how that can be facilitated through the help of friends and family, which appeared to be the most trusted source when it comes to planning a trip.
By mapping out two core tasks, I was able to brainstorm the core features that I would like to include in the app. I combined signing up and creating a post in the first task flow. For the second task flow of finding a new destination, I demonstrated two ways that users can do that which is either through manual search or through using an "interactive map."
Taking my persona’s goals of finding the right travel destination, accessing authentic reviews and increasing collaboration with friends and family when planning a trip, I began creating low fidelity wireframes for my end to end app. I used Figma to create my low-fi wireframes just to get my ideas flowing.
This was my first time creating an end to end app design, and moving from low fidelity to mid fidelity screens, I had to consider how many screens I would need to design in order to mimic a fully functioning app. I spent some time narrowing down the features I would be incorporating and decided on having a home feed, an itinerary breakdown screen, an interactive map, a search screen and a profile screen. I considered different layouts at this stage as well and deliberated with my mentor to receive some feedback about the ideas I generated.
Because I am the sole designer of this app, I also had to come up with the branding materials I would be using in my high fidelity designs. I spent some time narrowing down the typography I would be using and generating a variety of logos which I finalized based on feedback from my mentor. For the color palette, I wanted to derive colors from nature, more specifically sunsets, and colors of the sky, because of the association they have with travel, and the role of color psychology and how it impacts the user. I also narrowed down the types of icons I would be using to be rounded, filled and simple. With regards to imagery, I debated the use of illustrations, however given that finding new destinations and deciding on them is heavily influenced by real pictures and videos, I decided to avoid using illustrations altogether.
For my app, I used two typefaces. The goal was to use an easily readable typeface for the bulk of my text, and for my titles, the goal was to reflect the branding and the mood of the app
Lora, Bold, 16 px (H1 Text)
The quick brown fox jumps over the lazy dog.
Nunito, Semibold, 16 px (Subheader and Paragraph Text)
The quick brown fox jumps over the lazy dog.
Nunito, Semibold, 12 px (Line Text)
The quick brown fox jumps over the lazy dog.
Keeping in mind color psychology, I wanted to use colors that were reminiscent of travel, while also providing a unique visual impression. Below are two color palette options I dabbled with to experiment with in my high fidelity designs,
For the icons, I wanted to use rounded, filled and simple shapes. For my imagery, I explored the idea of using illustrations, however upon conferring with my mentor, I felt that since I would be using real images of the destinations, it did not make sense to incorporate illustrations.
With my branding toolkit put together, I moved forward with my high fidelity designs. After deliberating with my mentor, I added a few more screens and improved the UI design of my end to end app before launching it for testing.
In this iteration, I changed the secondary turquoise color to a dark blue to improve the accessibility of the icons and elements the color was being applied to. I also increased white space to improve the overall visual aesthetic of the homepage.
On the search screen, I added filters to help users narrow down recommended destinations and improve their overall search experience by providing more accurate and relevant recommendations.
To improve readability, I changed the color of the text so users can scan through the page easily. To increase the utility of this screen, I also added "Top Sights" so users do not have to resort to a third party search engine to figure out what they can do at a destination.
In the first iteration, I wanted to make the profile page appear more unique by adding color to the background and adding the cloud icons to the story highlights. However, after deliberating with my mentor, we concluded that this interfered with the overall quality of the UI and that it was best to keep it simple. I also removed the arrow in the top right of the itinerary card as all the cards are clickable making the arrow derivative and lacking purpose.
To put my end to end app to the test and to ensure that my design solves the problem that I uncovered through my research, I created my prototype. To reiterate, the key pain points I identified in the travel planning space were:
And the key user needs were:
I tested my designs with 4 users, three of which were tested in a remote moderated setting and one in person moderated test. In my first usability test, I instructed the user to plan a trip for their first task and create a post for their second task. After the first test, I realized that the first task is unclear and misleading because users cannot plan a trip through the app, however they can get inspiration for one. This became clear to me as the user was looking to build an itinerary rather than search for a destination or look at what others have to say about a destination. Because of that, I adjusted the task to “get inspiration for a trip,” rather than “plan a trip,” for the remaining tests. After the first two usability tests, I noticed some glaring issues with my designs that I wanted to adjust, the main issue being that the way in which a user can view another user's’ itinerary is not clear or easy to find. However, I deliberated with my mentor about making changes at this stage before completing the remainder of my tests, and decided for consistency's’ sake and to confirm my suspicions about the issues present in the designs, I would not make any changes at this stage. I made sure to ask each user a thorough set of questions so that I can receive high quality feedback for changes and improvements to make to my designs.
Because it would be difficult for me to implement any and all changes that were suggested by my testers, I wanted to prioritize the feedback I received and decide which changes would have the most impact on my designs and how much effort would be involved in making these changes. I also wrote out a justification as to why I put each item in its respective category.
After prioritizing which iterations to work on, I spent 4 more hours making changes to my designs before submitting them to my mentor for feedback.
In the final version, I made changes to the logo and the color palette. To avoid clashing colors and a non-cohesive UI, I decided to make the color palette monochromatic, and derived all my secondary colors from different hues of the primary purple I was using. This helped me improve the accessibility and visual aesthetic of my designs.
In addition to changing the colors, I changed the shape of the stories to be circular so that it is visually appealing and predictable for the user. I also removed the breakpoint line because it did not fit with the rest of the UI. Additionally, I increased the whitespace to avoid tension between elements.
In this iteration of the itinerary page, I removed the images from the original post in the itinerary screen to shift focus onto the itinerary. I also removed the trip rating because it was confusing for 3/5 users. I changed the icons to be filled so that they are visible and to be more in line with the style of the icons used in the rest of the app. To improve the overall information architecture, I moved the star rating to below the title making it easier for users to scan the page and not be overwhelmed be the amount of information in one line. I also added the feature of attaching images to each itinerary item, so users can benefit from the visual reinforcement.
I expanded the images because 4/5 users stated that it was the most important part of search results. I reduced the amount of text because 4/5 users stated that they would not read about a destination but would jump to viewing the activities and the images, improving the overall information hierarchy. I also made changes to the icons, whitespace and removed the drop shadow from the search bar.
In the usability test, 5/5 users went to the discover page to start, and were disappointed when they could not find an interactive component in this screen. To communicate the utility of this screen, I added a location pin drop where a users' friends would have visited, and users can access their itinerary from there. This makes it easier for the user to access itineraries and does not require them to remember where each friend went if they want to revisit an itinerary or have a quick glance at who to message to ask about a particular destination.
While I completed this project for self-practice, some of the success metrics I would pay attention to measure how my designs improved the user problem at hand would be:
