Travel Away

Welcome to the repository for the "Travel Away". This repository houses the visual blueprints for a comprehensive travel booking website, designed to facilitate user-friendly navigation and interaction for booking and exploring travel services.

Overview

Travel away is a website that provides information to travellers about exciting travel destinations around the world. Information about attractions, local food and travel tips are provided to encourage travellers to book a place to travel with Travel Away.

It provides visually appealing travel related content so that users are encouraged to book a place to travel with the agency.

The website provides travellers with information about services offered to make their travel experience smooth and stress free if they were to travel with Travel Away. This information is useful for travellers to help them decide whether they want to travel with travel away, and to plan their trip.

User Stories

• As a user, I want information travel destinations so that I can learn about popular places to visit and decide if I want to travel there.

• As a user looking to book travel experiences, I want to be able to book guided tours, excursions, or activities directly through the website so that I can easily organize my trip.

• As a user, I want to see high-quality images of travel destinations and attractions so that I can get a better sense of what to expect.

• As a user who is preparing to travel, I want information about solo travel experiences, including safety tips and suggestions for accomodation, and flights so that I can enjoy my trip confidently.

• As a user who values a smooth user experience, I want the website to have a responsive layout and be easy to navigate on my phone, tablet, or computer so that I can access information conveniently.

Wireframes

These wireframes are intended to guide the development and design phases of the website.

Repository Structure

This repository is organized into folders corresponding to each primary section of the website. Each folder contains the wireframe files along with a brief description document for each represented page. Below is the structure of these directories:

• HomePage: Contains wireframes for the website’s homepage, which includes navigation menus, introductory content, and quick access links to major sections.

Homepage wireframe

• Destinations: Wireframes showcasing the layout for destination listings, including search and filter capabilities, featured destinations, and individual destination details. Destinations wireframe
• Services: Detailed wireframes for additional services offered, such as hotels and accomdation, tour guide, safety guide, ctaering & booking fights. Services Wireframe
• Booking: Includes wireframes for the booking process flow, from selecting a service or destination to finalizing a reservation.
  Booking wireframe
• Gallery: Visual gallery layouts displaying images and videos from various destinations, categorized for easy browsing. Gallery wireframe

  Viewing the Wireframes

  To view these wireframes, navigate to the respective folder and open the image files (PNG or JPEG) or PDFs. Each file is named according to the wireframe's content, depicting different parts of the site functionality:

  How to Use These Wireframes

  These wireframes provide a visual representation intended to assist in:

  • Understanding User Interaction: Analyze user flow and interaction across different sections of the website.
  • Guiding Web Design: Help web designers create aesthetically pleasing and functional layouts based on structured wireframes.
  • Facilitating Discussions: Aid in discussions with project stakeholders regarding feature implementations and user experience strategies.

Contributing

We encourage contributions to improve these wireframes. To contribute:

1. Fork this repository.
2. Create a branch for your updates (git checkout -b feature-enhance-wireframes).
3. Make changes or additions.
4. Commit your changes (git commit -am 'Enhance destination wireframes').
5. Push to the branch (git push origin feature-enhance-wireframes).
6. Create a new Pull Request.

Features

• Home/page: For the Homepage we tested two different layouts on the wireframes. The first a=lay out the header was too packed. So we took out some of the text. After we took out some of the text the header appeared too empty. We realised that the Icon was too big in comparison to the space we have on the header. The icon was made smaller and two lines of text were added in the header. The Footer was at first sticky then it was changed where only the navbar appeared to be sticky. The page appeared visually pleasing for user experience.

• Destinations: The destinations page was at first supposed to be a drop down that takes the user over to the link where they can view a different page. However, it was not possible due to lack of time. Therefore, we used a simpler code where when using the drop down link the user is able to select different destinations then the text would appear.

• Services: On the services.html page we tested different wireframe layouts. We started with 2 rows of 3 images and a description of each service underneath. Which appeared too busy and not user friendly. Then decided that putting the images in circles would appear visually pleasing. However after testing the wireframe we realised that it would not be the best choice as we have 6 images on our page and the images can not be displayed larger due to lack of space for text. And when the images were made smaller it wasn’t visually pleasing and the layout was not user friendly or professional. Lastly the wireframe we created had 6 cards and the images were displayed in the card and under the image in the card the text description was added. Now to create better user experience we added a Modal with a READ MORE button where the user can click that to see the rest of the information instead of putting it all in the card as it won’t be user friendly.

• Booking: The bookings page wireframe was created to provide an input interface for users to book a trip. The UX design includes an image and the form on the right for a pleasant user experience. The booking now button has a hover effect to give the user a pleasant experience. When a user submits the form, they are redirected to a confirmation page which shows a confirmation message and a button for them to return to the home page of Travel Away.

• Gallery: The bookings page wireframe was created provide an input interface for users to book a trip. The UX design includes an image and the form on the right for a pleasant user experience. The booking now button as a hover effect to give the user a pleasant experience. When a user submits the form, they are redirected to a confirmation page which shows a confirmation message and a button for them to return to the home page of Travel Away.

• Profile Management: Users can create accounts to manage bookings, save preferences, view past trips, and receive personalised recommendations.

• Notification Preferences: Options for users to customise communication preferences, including emails or text messages.

• User Feedback: Integration of user-generated reviews and ratings for destinations, accommodations, tours, and activities, to help travellers make informed decisions.

• Mobile Compatibility: Responsive design that users can access and functionality across devices, including desktops, laptops, smartphones, and tablets.

• Secure Payment in the footer
  Payment Options: Secure payment processing for bookings, with support for multiple payment methods including credit/debit cards, PayPal, and digital wallets.

• Contact: Added different methods for users to get in contact with customer service.

• Social media: Added links to different social media platforms for users to learn more about our site and view customer feedback.

• Emergency Assistance through safety guide: 24/7 support for travelers, including assistance with itinerary changes, medical emergencies, lost documents, and travel advisories.

• User Accounts and Preferences: Profile Management: Users can create accounts to manage bookings, save preferences, view past trips, and receive personalized recommendations. Notification Preferences: Options for users to customize communication preferences, including email notifications, newsletters, and special offers.

• Reviews and Ratings User Feedback: Integration of user-generated reviews and ratings for destinations, accommodations, tours, and activities, to help travelers make informed decisions.

• Responsive Design Mobile Compatibility: Responsive design that users can access and functionality across devices, including desktops, laptops, smartphones, and tablets.

• Services: The services page serves as a centralized hub where travelers can easily access all the offerings available on the website, including booking options for flights, accommodations, tour guides, catering, and travel packages.

• Swift bookings: The booking page enables users to book a trip with Travel Away. Users are able to specify their location of interest, the number of travellers they would like to bring along, the start/end dates and other details such as their name. Mobile compatibility allows users to book trips on the go.

• Gallery: the gallery showcases attractive images of travel destinations offered by Travel Away. This will be useful for the user so they can determine whether the destination is the type of place they would like to visit.

Bug

A bug occurred when the incorrect gitpod account was used after running out of hours. To address the issue, the workspace was saved to the desktop, and the code was copied to a new workspace under the CI student account.

Testing

• Validator testing: W3C markup and css validators were used to test the validity of code.

• Site performance and compatibility: page performance was tested with the lighthouse tool. The webpages loading times accessibility and search engine optimisation were analysed and given a rating. The website was tested for responsiveness and compatibility on different screen sizes in Google Chrome Development tools.

Booking Page

Gallery Page

Services Page

Deployment

• After deploying the Services.html page, there was an issue with some card images not displaying correctly. The process to resolve the issue involved deleting the problematic images from the media folder, renaming them in the gallery, and re-uploading them to the media directory. Once the image links were updated in the workspace, the card images displayed as intended.

• After deployment, the layout of the Services.html page was not displaying as expected. The issue was resolved by modifying the code in the style.css file, resulting in the page rendering correctly.

Credits

• Destinations images from pexels.com
• Services images from unsplash
• Booking form image from SA Coding