Multi-city Vacation Planning

Problem

A multi-city vacation sounds exciting to almost anyone. However, the planning of it can be overwhelming.

Personas

Man by Febrian Zakaria

Ernie Gough, 43

Ernie is a chef and travels to learn from chefs all over the world. When he is in a different country, Ernie always makes it a point to see the surrounding cities.

Budget: ►►►►►

Tech Experience: ►►

Planning Experience: ►►►

Grandpa by Maria Lupan

Alfred Erickson, 67

Alfred and his wife are newly retired. Alfred has two grown children that no longer live with them but drives him everywhere.

Budget: ►►►

Tech Experience: none

Planning Experience: ►►►►

Teen by Omid Armin

Sol Snider, 18

Sol just graduated high school and will be attending college in the fall. She works part-time at a bookstore and saved up her earnings.

Budget: ►►

Tech Experience: ►►►►►

Planning Experience: ►►►

Man by Charlie Green

Amos Barrera, 23

Amos is a software engineer and just bought his first home with his girlfriend. He has never travelled out of the country and is planning on proposing.

Budget: ►►►►►

Tech Experience: ►►►►►

Planning Experience: none

Process

Plan of Action: Design a tool that helps travelers plan a multi-destination tour. Help travelers create an itinerary that connects multiple points of interest. It should consider their desired length of stay in each location and offer low-cost transportation options.

Wireframes

The goal of a vacation is doing something that excites you. Whether it be relaxing on a beach or exploring ancient ruins. Most people want spend their time experiencing and less time planning.

I want to create an app that will allow users

  • Options to travel by destination, date, or explore
  • Add multiple cities or pick from featured cities
  • Add options of things happening in timeframe selected
  • Suggest lodging, meal time and eateries
  • Ability to edit, add, or delete parts of the itinerary
  • Save, email, share itinerary

The itinerary is created on the last step. It will breakdown all selected cities and activities and suggest itinerary based on selected cities and options.

Multi-Vacation Wireframe

Color and Inspiration

Since the app's goal is to make multi-city planning easy, I wanted to be inspired by something that's relaxing in nature. The blues of the beach is reminiscent of tranquility and peace.

Multi-Vacation Wireframe

Beach Vibes

Font: Helvetica

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Colors:

Initial Designs

I chose to use the bright colors for the action buttons to lift the buttons off the page. Keeping the background white, helps with the simplistic approach when the user is trying to make decisions. The pictures are bold, but not showing too many images on a page--making it less stressful when going through the planning process.

Multi-Vacation Wireframe

User Testing

During the testing phase, I set up interviews with participants who performs tasks using the app for usability. Tasks are realistic and fit the needs of the users. Participants are asked to record their journey through the app and talk through their thought process as they navigate each step. This resulted in important feedback.

I don't want to miss out on anything happening in the city I'm in. I hoped to get do everything and it'll just fall into place. I wish there was a reset button. I have to keep hitting the back button so many times when I just want to start over.

Ernie G.

This trip has to be perfect. I couldn't find a filter on the options page. I gave up clicking 'see more' after the 3rd page.

Amos B.

I'm going on a trip with some friends and I offered to plan the entire vacation. We're on a really tight budget, so I thought I would give this a try. This would've been cool if it offered a breakdown of how much it would cost per person.

Sol S.

I don't know how to plan or where to start. My wife wants to see the world. I just want to plan a good vacation for us. There's no place for flights? I was confused. Where do I get my flights or tickets?

Alfred E.

Final Design

For the final design, I revised the initial design and took the feedback from the user testing into consideration.

I updated the following

  • Added buttons for easier cancellation to start over
  • Added filter and sort abilities to narrow down search
  • Added estimated cost of trip and breakdown per person for budeting
  • Added ability to add transportation and lodging needs

Multi-Vacation Wireframe

This portfolio was designed and developed with 🖤 by me using Next.js and Tailwind CSS.