A Leisure travel website platform that offers safari tour guides services for safari holidays in Kenya. The design is inspired by the (bootstrap4 starter template)https://startbootstrap.com

1.Who we are

2.Approach

3.Objectives

4.Approaches

5.Project goals

6.UX

7.Feature or the website designs

8.User stories

9.Wireframes

10.Technology

11.Troubleshooting

12.Deployment

13.Testing

14.Credits

15.Acknowledgement

• We are a privately owned travel agency company that does personalised safari travel packages in Kenya.
• The project Strategy and Intent is to personalise the tours according to the clients desires.
• Guiding Principles is the brand to connect with the communities back in Kenya in both historical and cultural values.
• The Functionality and Subjectibility by providing the feel and look for clarity of the safaris in Kenya that will satisfy the need of the customer.

a) Properties b) Linear properties c) The ease in and ease out of the pages to be visible and easy to navigate through the pages and to have a smoth transition in and ou of the pages.

• An experienced mapping.
• Collabotration packed with data
• Time intense
• Reliable data *

• is to implement features that will enable the client to select different options in the travel platforms.
• Updating the products and services of travel packages
• Share and innovating producyts and services.

• Enabling the websiteto have current travel designs and product services that are customer friendly and easily access of the webpage

• Typography that has a good feel and friendly to clients.

• Enabling features that will sell the product and services. Making it easy to convey the story to the client.

• Developers and Business Goals-

  1. Functionality: Does the product work the way it’s supposed to?
  2. Reliability: The product readily available for use?
  3. Usability: Can the user navigate the product without difficulty?
  4. Convenience: Is the product intuitive?
  5. Pleasurable: Is the user experience enjoyable enough to recommend to others?
  6. Meaningful: Does the product hold personal significance for users?

  To view the product in differnt angle such as:

  • Wireframing
  • Prototyping.
  • Visual Communication. at will enable us to understand what their audiences want and how they view the world. how it looks. By Wireframing the elements that need to be present from page to page. Including all the interface needed for all possible interactions using the design.

Users Goals:

The design needs to be competent in visual language. Proficiency in visual communication includes an understanding of concepts like: • Easy and simple Layout • Color : The mail color that i choose is yellow that represents happiness, optimistic, and cheerful. • Typography: Content that is visually pleasing and easily read • Safari tours Images that conveys that safari message • Design theory that guides a consumer to the result you expect.

• Images

• Contents

• Social pages

• Social links

• Mapping

• Emailing process

• Booking forms

  • Code used CSS HTML Javascript and Jquery
  • Landing page with a page drop image container.
  • cards
  • Images
  • Table
  • feildset
  • Controlgroup
  • Social links
  • Font awesome icons
  • Materialised link - I was inspired by the look and feel of the Link that made the site look better feel about it.
  • Bootstrap snippets that enabled meto have different designs
  • CDNJS site enabled me to get the tags and JS scripts that are used to create the website.
  • Jquery CDN uncompressed min script
  • Leaflet link and tags for js google mapping
  • Emailjs used for the interactive email
  • One of the users suggested that the images covered a lot of space on the computer and it meant that the user has to scroll p and down to view one image. I deciced to change that layout to that will allow the user to view ll the images without scrolling upand down.
  • The navigation bar was not user friendly. I managed to simplify the color and typography to font-family: Verdana, Geneva, Tahoma, sans-serif;

• The Navigation bar was not easily accessible . I have to try diffent designs that will anablethe client to press the home button to access other pages.
• The packages had no value , soi added up the value and uploaded images to show the product.
• The carousel in the gallery page was not working so i decided to have static images all in one page.
• The client asked to have different options of products . I added in the safari packages and different locations of the Safaris, and activities that can be done during the holidays.
• The reservation page had a lot of information icons that made the page look messy . I ended up reducing the content and be short ad precise of the contents.

• Web Design. I did a lot of reserch in youtube and i was inspired by three main developres
  • Sayar flight booking example
  • One of the users suggested that the images covered a lot of space on the computer and it meant that the user has to scroll p and down to view one image. I deciced to change that layout to that will allow the user to view ll the images without scrolling upand down.

The xascapade wireframe is create using balsamic and downloaded it in the ide platform under documents as a pdf. See attached below a copy of the wireframe. 1.drafted

2.xascapade.pdf. after receiving my feedback from my accessors i realised that the layout does not work with my design and i ended up changing the wireframe to suit the user. Below is the new wireframe. What i tried to do is to simlify the styke and design that will suite the user and easy accessible. XASCAPADE .pdf] (https://github.com/SNmcdarby1/Xascapade-Travel/files/6087100/XASCAPADE.pdf)

3.Below is a Multiple devices Mockup generator image that shows you how the landing page looks in different devices. The Mockup generator page of Xascapade Travel.

After a few trials i changed the images and design. Below is the new design

• For clarity that all content and typography are clear for users.

• Familiarity that allows users to experience while navigating from page to page.

• Consistency to users to recognize the usage pattern of the website.

• Githubgithub used for storying and accessing data.
• Gitpodgitpod IDE platform for creating website.
• While doing my reasearch i came across materializes platform.This site inspired me by the endlook and feel of the website, It resonates with a suitable ux friendly look and feel that embodies a lot of the features.
• Used w3school for snippets. I am inspire withthe look and feel of the navigation bar, and inputs examples in the w3school page.
• Youtube tutorial
• Multiple device mockup genarator. I sed this site to create a mockup image of the websites landing page. Thissight can be accessed in google webpage. once you access the page you will need to copy your deployed link to the in the multiple device generator that is on the top left top nav. Then click the genarator button to genarate the image of the website.
• Google Mapping - used (Map Quest)[https://developer.mapquest.com/documentation/tools/latitude-longitude-finder/]. To find accurate locations. But unfortunatly it was not responding . I trie the Leaflet mapping.
• Emailjs - I created an accout with Google emailjs that will enable the emails to be interactive.
• I created the 404v folder to direct error responses.that will collect data from error messages.
• There were different tuturial that i watched in youtube. Below are a few that reall inspired byhthe style and design of the page.
• ECMA scripts reasearch page

• During my reasearch i came across a youtube tutorial that was talking about Materialize platform (Materialise)[https://materializecss.com/media.html]for creating websites and snippets by (Traversy Media)[https://www.youtube.com/watch?v=MaP3vO-vEsg]. I used the tutorial to create the index page . I aslo used snippets from -W3school, Bootstrap, and Materialisecss, that helped me to come up with different designs of the webpage.

[https://www.youtube.com/watch?v=Zxf1mnP5zcw]

• I also added Adam live server to checking live open source for the pages while coding
• Using console to rectify the 404 Error
• youtube tutorial hamberger menu (web dev simplified)[https://www.youtube.com/watch?v=At4B7A4GOPg].(Better dev)[https://www.youtube.com/watch?v=_Ue9_rLIMAQ] [https://www.youtube.com/watch?v=uZNWak44SI8]

• Decide to change the li element to lo because the ux appearance was not suitable to the and user friendly 6 Testing
• While i was updating the git status i entered a git commit that change the changes that i had made . Resulted into doing a git reset command to using the SHA number f68f166.
• The navigation bar is glitching the dropdown links are not visible in the mobile devise. I decided to change and delete the dropdown in the navigation bar and decided to add a button that has etra pages.
• I encountered problems with the sidenav. Some of the content were not visible so i decided to change the design and use the navigation button that is displayed in w3school site.
• The navigation link was not working on small devices . I decided to use the button (xascapade) that has a collapsible id when clicked, to access the menu bar.
• My google maps was not responsive , . With 404 and uncoaught syntax error. where i was able to get intouch with the support team and we managed to fix the bug.
• Email js was not responsive as well. The support team help me find where the problem was and tried to fix it.
• The footer in the place was not working. I noticed that some of the tags were not closed once i did that the footer was visible to the user.
• I deleted the safari and booking page. Reason being i wnted to merge the form group with the contact placeholder. this makes makes it easier for the user to select and fill in the details without moving frompage to page. In the contact page i ditted text area and added input, i added collipsibles in the about page.According to the feedback that i received fromthe accessors one of the comments was that i needed specify the usage of the site. The collisible gives the user different ideas of the tours.

I deployed the page in Github page under settings. In order to deploy the project, you need to push it to a remote branch and start a fresh workspace from that branch. Every gitpod configuration is versioned in the root of your git repository. Once you have committed the changes made in your files. Next the git push command is used to transfer or push the commit, which is made on a local branch in your computer to a remote repository like GitHub. The command used for pushing to GitHub as given below. git push 'remote_name' 'branch_name. Once you have succeeded you access the settings page in github. Select the desired repository. Click on the settings link on the top right side of your github navigation bar. In the settings page scroll down to the Github pages. Select the main-branch under the source. Once selected clickthe save button. A link will be enabled,once you receive the link you select it copy the link on your search engine. This will lead you to your public page. Ad that is how you deploy your repository to a public site.

Differrent types of Testing

1.validation testing by 3wschool validator. To verify that the code is clean. By scanning pages using W3C HTML/JS validator and W3C CSS Validator. 2.Git pod Unit testing and Usability System testing 3.Browser compatibility testing cross-browser testing is an integral part of system testing. 4.Responsive mobe testing. Check the mobile responsiveness of your website. By focusing on mobile-first indexing 70% of users prefer to browse the internet over mobile these days. By making sure the website should be as functional and pleasing on mobile as it is on desktops. 5.User acceptance testing –users test the application to make sure This activity is carried out either by the organization or by the client. The site was deployed in github and i shared the link to family and other users through whats app platform that made it easier to access the links on their phones. I also shared the using emailing process for desktop users and other devices as ipads,tablets, etc. 6. The lighthouse test results of the pge was as follows, Performances is at 72, Accessibility at 82, Best performance at 86 and the SEO at 92. as it shows in the attached pdf.

• In the developers tool i accessed the the inspect the DOM by right clicking the mouse right button and select the inspect property. and i could edit different properties such as Appearance, Sources,Elements, Network,performance, Console and the lighthouse settings. as shown in the image below.
• Validated the website pages in using the 3wc HTML CSS JS vaidator. Some of the errors we npt resolve. My plan is to revisit the pages and fix the errors. Most of the errors read that the <!DOCTYPE html is a parse, needs to be fixed.

I) Media * Google search free comercialised images*\ II) (unsplashed)[https://unsplash.com/] III) Pixabay

I. Photographers

• Image by Christine Sponchia from Pixabay

• Image by Kirsi Kataniemi from Pixabay

• Image by PatternPictures from Pixabay

• Image by Herbert Aust from Pixabay

• Image by Michael Siebert from Pixabay

• Image by ArtTower from Pixabay

• Image by Jakub Petrymusz from Pixabay

• Image by Christo Ras from Pixabay

• Image by Sofie Zbořilová from Pixabay

• Image by bottlein from Pixabay

• Image by Tati Halabi from Pixabay

• Image by Angie Göttling from Pixabay

• Image by James Wheeler from Pixabay

• Photo by Kensuke Saito Surf Photography on Unsplash

• Photo by Yuriy MLCN on Unsplash

• Photo by Joshua Earle on Unsplash

• Photo by redcharlie on Unsplash

• Photo by Ron Ansell on Unsplash

• Photo by Pop & Zebra on Unsplash

• Photo by Uriel Soberanes on Unsplash

• Photo by jean wimmerlin on Unsplash

• Photo by Emma Louisa on Unsplash

• Photo by Filios Sazeides on Unsplash

• Photo by Rio Lecatompessy on Unsplash

• Photo by Matthieu Pétiard on Unsplash

• Photo by David Clode on Unsplash

• Photo by Louis Hansel @shotsoflouis

• I was inspired by the followimng youtube tutorials by (DevEd)[https:////www.youtube.com/watch?v=8x1mO1d6-4w] , (Traversy Media)[https://www.youtube.com/watch?v=MaP3vO-vEsg],

• Easy tutorila

• [Github]community platform

• Sayar

• Code Insitute student care for the support and responding to my calls and chat messages.
• Google search and wikipedia sites for some of the Contents used in the site.
• Stack Overflow website that i used to access information when i got stack.
• W3school, Bootstrap, Materialised, platform.
• I was inspared by this developers . I did most of my reserach but was not easy to understad how to do travel bookings and i came across this developer https://res.perfectibe.com/scripts/pibe.js // to guide me through my project.
• A big thank you to the bootstrap4 starter template. For the free templates. (davidtmiller)The design that suited my needs and desihn is the heroic feature design.https://startbootstrap.com

I would like to thank

• My mentor Can Sucullu For all the advise and encouraging me to keep on striving and challenging me to do better.
• The code institute slack community for the other set of eyes and responding to my queries.
• The Code Institute lectures, developers and the team behind the code institute platform .
• gitpod ide platform.
• stackoverflow platform. I used to access coding problem solving when i got stack.