“Flyto” Travel Site Design

Identity Design · UX · Web Design

I created Flyto as part of a self-directed, interface design project. I began with the idea of site that allowed users to choose a flight based on the amount of money they currently had to spend. You put in an amount and the it tells you how far you can expect to travel departing from your current location.

Due to the somewhat time sensitive nature of airline flight pricing, I wanted a way for the user to make an informed decision on a location without having to collect information from multiple sites.

The social aspect of the site allows the user to import contacts from several social media sites. Once the user selects a possible destination, information is displayed from several sources, but the most important source being people from within their social circle. A mention on Twitter or tagged photos from Instagram/Facebook will allow the user to have trusted info about the chosen destination.

The Flyto logo. It was created to recall flight, clouds, and skywriting.

The landing page for Flyto. The user is greeted with a general view of their region when they initially load the website. They will see a very minimal interface that is only showing what needs to be seen at that moment.

As the user enters more information, in this case their location, the bottom interface will automatically update. Here, the map updates to show their current location of New York City.

The initial amount entered was $400, but is somewhat limiting where they can go, lets try a little more.

Doubling the budget opens up Europe and Northern Africa for this user.

Since Europe is always a good idea, the user zooms in to see their options. The larger circle shows how many flight options there are. The smaller number shows how many friends have documented being in that locale.

When one of the "dots" are hovered over, it expands to show avatars of friends that have visited and documented their trips on your connected social media sites. In this case the user can see the three friends that have visited England but glancing around they see that one friend has been to Paris and two friends have been to Belgium. Hovering over the "dots" also show the airports and base prices for the flights. The base prices shown are a + / - range of their inputted budget.

(Detailed destination view). When a "dot" is clicked the user will see a more detailed view of the region they are interested in. The left box shows the name of the city, the selected airport, the weather within a few days of the travel date, a description of the historic weather for the time entered, and flight options. Available transportation options are shown and finally flight price and option to buy. The right box shows experiences from within your social network to aid in the decision. The user can click on the various logged experiences from their group.

(Detailed destination view). When a "dot" is clicked the user will see a more detailed view of the region they are interested in. The left box shows the name of the city, the selected airport, the weather within a few days of the travel date, a description of the historic weather for the time entered, and flight options. Available transportation options are shown and finally flight price and option to buy. The right box shows experiences from within your social network to aid in the decision. The user can click on the various logged experiences from their group.

Experience log. If the user sees something they like from a friend's experience, they can save it for later.

Experience log map view.

(Experience log) Saved for later. Along the way, the user can save experiences to their itinerary to aid in making plans for their upcoming adventure.

The receipt shows flight details, destination itinerary, and saved activities. The user can also share their trip to spur input from others.