Ossama Ali
Product Designer

The Weekend Getaway

A UX case study on traveling 3 days at a time, on a budget :)

Project Brief 

I personally love to travel, and look for opportunities to travel as much as I can, even if it is for a short amount of time. The idea of "Weekend Getaway" came from me wanting to go on a short vacation after my semester had ended, but not knowing where to go. This app gives users locations, dates, prices, and excursions for travel destinations for all the weekends in the month. This project was a way for me to demonstrate my design strategies though different methods of work, such as wireframes, surveys and personas. 

Design Strategy:   

  • Surveys
  • Personas
  • Wireframes
  • UX/UI Design

Tools: 

Figma, Google Forms, draw.io

Role: 

UX designer/Researcher

Duration: 

2 weeks

"Work, travel, save, repeat."

Surveys

Example

To get a better idea of what travelers look for when they're booking their next trips, I sent out a short survey to 5 of my close family members and friends. The questions on the survey served the purpose of being able to craft a user persona to base the design of the application off of, making sure to put the user first.

Questions: 

  • What do you look for when traveling for short periods of time?
  • How do you find your travel deals?
  • What do you do when you travel for short periods of time?
  • On a scale of 1 to 5 (5 being the highest) how helpful would an app be that shows you all the weekend flights for the month?
  • How would you use this app?
  • What would you like included in the app? 

Personas

Persona 1

Anthony

Based off of the surveys, I made two personas. The first persona is of Anthony, a young professional working in New York. Anthony is passionate about traveling to exciting and new destinations and immersing himself within the culture. Having a busy life only allows him to travel on certain days, and weekend trips have sort of become his thing. Anthony finds it hard to find new destinations to travel to regularly while trying to keep his trip expenses low. With only being able to travel on weekends, he is always looking for the best flight and hotel deals, but they're hard to come by.  He also has a difficult time trying to put together a list of fun things to do while he is away on his trip. 

Weekend Getaway

Persona 2

Elizabeth

Elizabeth lives a busy lifestyle working as an accountant in the greater Los Angeles area. She finds traveling to new destinations a way to escape her day to day lifestyle and get away for a brief moment in time. She has used booking apps before, but finds them too cluttered and would rather find ways to find the cheapest deals throughout the month. She lives in a high cost of living area, so any way to save money on vacations is a huge help to her.  She prefers to travel on the weekends as it allows her to not use her personal days, while at the same time enjoying a short little adventure away from home. 

Weekend Getaway

Wireframes

Weekend Getaway

Wireframes

Explore Page

On the explore page there will be cities displayed, with their prices and dates next to them. Users can scroll horizontally to see the cities for certain dates, and can scroll down the page to see more dates in the month. 

Key Features

  • Change displayed months up top to whichever month they would like to travel in.
  • See dates and cities they can travel to for each of the weekends within the selected month.
  • Scroll horizontally to view more cities for the selected date
  • Scroll vertically to see more dates and cites for the selected month. 
  • Click on a city to get more details, flights, hotels, and excursions for the city. 

Weekend Getaway

Wireframes

Selected City page

User will see this page once they select a city they would like to travel to. The city page will give the user a short excerpt about the city, it will reiterate the cheapest flight for the city, and the weekend that the flight is for. Down below the users will be able to click on the excursions to get more details about them and book them if they would like.

Key Features

  • More information about the city to see if they would be interested in traveling there. 
  • Date and time of the cheapest flight to the city. 
  • List of excursions they can do while traveling to that city
  • Options to book flight and hotels to the city.

Weekend Getaway

Wireframes

Excursion pop-up

The excursions pop-up gives the users more information about the excursion and lets them add it to their cart, so they can pay for it while checking out.

Key Features

  • More information about the excursion, date time, price etc.
  • An option to book the excursion if they would like to. 

UI Designs

Weekend Getaway

UI Design

Content Strategy

The goal for the UI design was to present as much information to the users as possible, without making the content on the screen seem too cluttered. With the original idea I was aiming for dates, locations and pricing for trips to be easily identifiable. 

UI Guide:

  • A tile layout was ideal way to show the location and price of a trip. This allowed the UI design to be heavily image focused, while at the same time providing enough information for users to understand pricing and dates.
  • I used vertical dates on the side to allow the tiles to stay relatively clean. Placing them on the left hand side made it so the flow of the content is consistent through the horizontal plane.
  • Each of the dates feature a horizontal slider for trips. This was done for two reasons. First, this format allows users to see multiple trips for the selected dates, and secondly, it allows users to see trips for multiple dates throughout the month.

Why this design wasn't the best

After making the first iteration of the project, I realized that there were many faults with my design. I was designing from the thought that I was the user, when in reality, the users for this would probably want more options such as a search function, some filters, and more options to sort the list of potential travel destinations. This led to me going back to the drawing board and adding some more UI features to the app that would help the users fine tune their search to their own specific needs. 

One of the challenges was trying to figure out what kind of filters they would want to apply to their search. I tackled this problem by asking a few individuals on what they look for when they travel and how they would search for destinations to travel to when they would like to go on a short vacation. This allowed me to figure out an idea of what kind of filters could be added to a travel app like this one. 

"Wow, this looks really good!"

-My mom