user's avatar
Travel Website: UI UX Design - Tour Package and Deals
| UI UX Design | Website | Mobile Application | is a website and a mobile app created for travellers to buy travel packages around the world.

01 | Objective
Travel Package For Users
The objective of this desktop website and mobile app is to provide solutions for travellers who have a hard time planning and budgeting. With this service, aims to provide an unforgettable experience for users to book travel packages and hotels online. The aim of this project is to create a seamless desktop website and mobile app for travellers to purchase a travel package.

02 | Process
Design Thinking Process
03 | Research
Understand Who Are The Users
Before designing a website and mobile app, we need to know who are the users and what is their needs and goal. From there, user research is conducted.

Here are the few questions asked:
How do you usually plan for your trip? How long does the planning take?
What are the first 3 things you look for when you plan for a trip? Why?
Would you buy a travel package with an itinerary inclusive? Why?

03 | User insight
Understand What Are The Problem
Based on the results from 10 surveys that we have conducted, most users who are busy tend to buy online travel packages. Users feel more efficient and time-saving when they travel. The problem that users face when they log on to the travelling website and mobile application, is that there is too much unnecessary information inside a website. There are only a few travel companies that provide travel packages with an itinerary for the whole trip.

04 | User Persona
Study About The User​​​​​​​
From the survey result, people who don’t have time to do planning tend to buy online travel packages. Below are demographics, behaviours, needs and goals for the user persona. It gives a better understanding of what direction of website and mobile app is best for users.​​​​​​​
05 | Ideation
Ideas And Solutions
Based on the result, users with busy schedules tend to buy online travel packages more. Therefore, the website and mobile app will be designed and focus more to — travel destination, price, number of days and review. It will be a website or a mobile app for users to search for what they want and what they need on a trip.

06 | User flow​​​​​​​
The hierarchy of the desktop website, mobile website and mobile app is to focus on the travel destination, price, the number of days, travel itinerary and review.
07 | Design
Desktop Website and Mobile Application​​​​
Here is the desktop website and mobile application that I've created.

Desktop Website
Click HERE to view the prototype.
Mobile Application
Here is the mobile app that I’ve created.
To view the full prototype, you can click HERE.
09 | Design Element
How We Plan the User Interface Design

Design Grid
The website is created with 7 grids. Width 250 pixels with 27 pixels of gab. As for the desktop website, mobile website and mobile app are created in 8 grids, width 42 pixels with 7 pixels of gab.
Emotion Design: Appearances
The font that was used is Arial font. The colour mode for the website and mobile app is dark orange and black (image 08). The dark orange brings in a fresher look and feel, and the black brings in a cool and adventurous element. Icons design is used to express messages in more appealing Travel images that were used in the website and mobile app helps to make the whole layout looks more bright, adventurous and lively (Image 09).​​​​​​​
​​​​​​​Behavioral Design: Pleasure and effectiveness
Users are free to search for destination, date and budget in the website and mobile app in the search button (Image 10). Other than that, users are able to compare the price and destination in the website (Image 11).​​​​​​​
Reflective Design: Customer satisfaction
In the layout, user feedback is stated on the website and mobile app to create a trustworthy brand image. Users are able to read other users experience and feedback on the website (Image 12). Statistics of customer satisfaction are provided on the website and the mobile application too (Image 13).

Thank you for reading
Have a nice day!

Travel Website: UI UX Design

Travel Website: UI UX Design


Creative Fields