Travel Buddy

Responsive Web App

Overview

Project goal

The goal for this project was to design a responsive web app for location-based recommendations that solves a user problem.

As this was a broad project brief, I reviewed other location-based recommendation website and decided to tackle the problem of planning travel with other people.

My role

As the sole UX/UI designer, I conducted the user research, created the MVP, and built the UI for the for the first iteration of the prototype.

Why travel planning?

Planning travel with other people can be a daunting and tedious task requiring a lot of coordination.

Each person has different needs (such as budget) and different interests.
There is a lot of back and forth conversation to get everyone on the same page.
It is difficult to get everyone to agree on the plan and to track what has been agreed.
There currently isn't a tool dedicated to helping coordinate travel with others.

As someone who has experience with this problem I decided to see if this is a broad problem that others experienced

Two iphone screen mockups. One shows a list of activities and the other has a map that shows the activities on the map.

A gif showing a user logging in, creating and account, and opening the home page.

Identifying and validating the user need

Based on a competitive analysis and personal experience, I determined that there might be a need for a product that helps users plan group travel. To validate my hypothesis and learn more about how potential users plan travel, I started out conducting user interviews.

Hypothesis

Planning travel can be complicated to coordinate, especially when traveling with others who have different travel preferences. People who enjoy travel are seeking a technology solution to help coordinate travel plans with travel companions.

User Interviews

30 minute in-person & virtual interviews with potential users who have experience traveling

Interview questions included:

What do you enjoy most about travel planning? What do you enjoy least about travel planning?
Who do you usually travel with? How do you decide who to travel with?
Walk me through your process when planning traveling.

Looking for patterns

Using the information I learned from speaking to potential users, I came up with a few patterns about how travelers plan travel and how they might use an app for planning travel with others.

Dining and meal planning

Dining options came up in all the interviews as being important in the travel planning process.
Participants wanted to make sure trips included dining options, especially when they had budget and/or dietary concerns.

Limited trip planning in advance

Participants did not enjoy trip planning and so they did not do a lot of planning in advance.
Typically, participants decided on the basics: location, accommodation, and a few activities. They did not schedule out each activity.

Finding activities within budget

Participants were concerned about the cost of travel.
Everyone has a different travel style and budget to go along with their travel style.
Participants wanted to avoid awkward conversations with travel companions about budget

Planning trips with whoever is available

Participants traveled with a diverse range of people: family, romantic partners, and friends.
Participants did not seek out travel companions. Instead, travel came up spontaneously in conversations and prompted the planning process.

Defining the MVP

Using the data, I narrowed down the features for the MVP based on the problems that participants brought up as part of planning travel. I combined the patterns that all interview participants brought up to come up with some core features that would solve these problems.

‍I saw a need to have a simple way to find travel destinations and create itineraries based on pre-set lists of attractions while also allowing for some customization of travel itineraries.

I created several user flows where each of the screens can be used for multiple purposes to simplify the MVP. The user flows for the MVP were:

Create a travel itinerary
Invite other users to collaborate on the itinerary
Decline or accept activities suggested by travel companions

This resulted in several user flows:

A diagram showing several user stories and how the path that users would take to accomplish these user stories.

Sketching ideas

Now that I had a structure for the web app, I turned my attention to building out the structure of each screen by creating low fidelty wireframes using marker and paper for quick ideation.

Three design options were created for the following user flows:‍

Creating an account
Creating a new trip itinerary
Confirming a proposed activity

The images below show 3 design options for the first 4 screens for creating a new itinerary.

I wanted to make sure that users could explore ideas and create pre-made itineraries with a few taps as well as have the option to create more custom itineraries.

I experimented with a variety of search options including several searches for locations, attractions, etc. However, I decided that the most streamlined option where the user can search across cities, countries, itineraries and attractions. This created one place where users could update and customize their itineraries.

I reviewed each of the design options and choose the best design in terms of simplicity of layouts and copied them over with slightly more detail, in preparation for usability testing.

Early testing of ideas

Finally, I ran a quick usability test using prott.io to ensure that I wasn't missing anything within the structure of the app. I asked other designers to test the prototype since I was still working with low fidelity wireframes.

I found several testers from a design community I was part of with various levels of experience with travel apps. This ensured I tested that the app would cater to both audiences.

And sure enough, I found out that all of the testers were not able to figure out how to start a new itinerary. I assumed users would click on the suggestions and then see the itinerary button but that was not the case.

So, as I moved to mid-fidelity wireframes, I made sure to include a 'create new itinerary' button on the home page.

An iPhone mockup with a hand drawn home page that shows my trips and suggestions for city escapes.

Mid-Fidelity Wireframes

With the addition of the new itinerary button, I built the wireframes directly in Adobe XD.

Here is a sample of a few of the mid-fidelity wireframes.

Creating an account

Users can sign in or browse the app without an account. This helps reduce the friction of trying the app.

If they browse without an account, they will be promoted to create one once they start a new itinerary

Home page

Once users log in, they are taken to a home page that allows them to either browse locations and pre-built itineraries, or create a custom itinerary.

This allows users who do not enjoy planning to not have to worry about deciding what to do.

A mid-fidelity wireframe of the home page showing a new notification and my itineraries, and suggestions.

A mid-fidelity wireframe of the itinerary page which includes 5 day itinerary highlights.

City detail

Once users click on the city detail page, they get a brief description of the city and options of suggested itineraries they can browse. They can either create an itinerary at this point or view one of the itinerary suggestions.

Itinerary suggestion

On the itinerary suggestions page, users can see some possible activities. They can use the activities to create an itinerary.

This also makes it easier for users who don't enjoy travel planning to get started quickly

Create itinerary

The user is then prompted to invite others to their selected itinerary.

They only need to include the persons name and email, and their friend can log in and see the pre-built itinerary.

Itinerary page

The Itinerary page shows users a list of the activities they have chosen and how many of their travel companions want to join.

The top voted activities show up at the top.

A mid-fidelity wireframe of the itinerary page for Paris. The list view is selected and there are two columns of attractions with the number of buddies that have confirmed the activity.

UI Design

I began working on the UI design by creating mood boards based on the user interview information. I created two possible mood boards, where I experimented with typography, imagery, and color schemes.

A mood board with keywords modern, trendy and social

A mood board with the keywords uplifting friendly and exciting

The 'Modern & Trendy' mood board centered on the social aspects of the app while the 'Uplifting & Friendly' mood board centered on the exciting aspects of travel with friends. After reviewing the user interviews, the second mood board was a better fit. Users discussed the exciting aspects of travel and did not care as much about whether it was trendy.

Design Feedback

Preference Tests

As I was creating the style guide. I used preference testing to iterate on the designs.
‍
For example, I tested a few color options for the call to acton button.

Responses

"I think I like the red button here because it immediately draws my attention to it but I still liked the dark itinerary suggestions borders from the other screen"
‍

"The combination of orange and red in the other one looks a bit 'cheap' for me."
‍
‍
"I preferred a red CTA button but I preferred this one because the yellow-color highlights look like I selected all four itinerary suggestions and it confused me."
‍

"The red button caught more attention for me. I'd prefer a more lively color than the option on the other screen"

Based on these responses, I choose a red CTA but darkened the color so it was not as bright. I also changed the color of the borders of the itinerary suggestions to green so it did not look like they were selected.

Final Designs

A mockup of the travel buddy showing the desktop view of the map and itinerary side by side and the mobile views of the list view and map view.

Create an account

Create an account quickly to view travel destination ideas and create a new itinerary.

Start a group itinerary with a few clicks

Creating a new itinerary is easy using suggested itinerary lists.

A gif that shows the userflow of using a sample itinerary to create your own itinerary. The user clicks on tourist highlights in the city page and then clicks create itinerary.

Suggest activities

Search for activities to suggest to the group

Communicate easily with travel buddies

Include a note when suggesting or declining activities for ease of communication.

A gif of a userflow of sending a message. First clicking on the speech bubble icon, typing a message and pressing send.

Results and Next Steps

As this was a personal project, I stopped at this point in the design process. If I were to continue with this project, I would conduct another round of user testing on the final product to continue to refine the MVP design

I would also work on some onboarding flows to help users understand how TravelBuddy works.

Retrospective

Approaching the project brief

I reviewed travel apps on the market and noticed that the ability to share itineraries with users was not integrated well into existing web apps. I also know from experience and from the user interviews that coordinating travel plans with travel companions can be difficult and so I sought to create an app that solves this problem.

Roadblocks

The app idea was somewhat ambitious and I had to narrow down the core functionality so that I would have a manageable number of screens to design. I focused on creating a streamlined MVP based on the core concept and features that came up during user interviews. The MVP could then be tested quickly to validate the idea.

Additionally, when I started the UI phase, I was not sure what direction to go in. I visited Behance and other websites to come up with inspiration and used preference testing to refine my designs.

What I learned

I learned about the importance of user interviews because the information that I received helped me pair down the functionality that needed to be built in the MVP. I also learned that many people do not enjoy planning travel and so this app sought to make travel planning a more enjoyable experience.