BoliviAround

BoliviAround is the website of a travel agency organizing travels in Bolivia. The aim is to create an online space for them to make clients discover their travels' offers, and eventually to contact the travel agency. Different experiences, with locations displayed, are described to the user - focusing on adventure, party or food interests. To highlight the efficency of the travel agency, testimonies from users are also presented.

UX

This website is for users to discover Bolivia and his wonders while inspiring users to travel with the agency BoliviAround.

External users goals

As a user, I want to:

1. understand why Bolivia could be my next travel destination
2. discover what travels' offers this agency proposes, especially regarding my own interests
3. read customers' testimonies and feedbacks regarding the agency performance/efficency
4. contact the agency directly to discuss about my project and eventually get a customized offer
5. easily navigate through BoliviAround website
6. easily follow BoliviAround’s social networks if I am interested

Internal users goals

As a site owner, I want to:

1. convince users that Bolivia is the best place for their next holidays
2. describe my current offers and what points of interests we are focusing in (adventures, parties or foods)
3. increase users' confidence by sharing my clients' feedbacks
4. permit the users to directly contact me so as I can contact them back and discuss their projects
5. build a list of customers/interested users

User experiences

As a customer, I want to navigate easily throught BoliviAround

A navigation on the top right of the screen synthesis the main sections of the website : Why Bolivia, What to do, What they say, Contact. Clicking on the title of the website "BoliviAround" will bring back the user to the BoliviAround website.

As a customer, I want to easily follow BoliviAround’s social networks if I am interested

The customer can click into one of the social network icons inside the footer of each pages. Clicking on one of the icon will load another page in the customer browser leading directly to each social network concerned.

As a customer, I want to be able to understand quickly the goals of the web

In Why Bolivia section, I can quickly understand the aim of the website by reading the description.

As a customer, I want to discover what travels' offers this agency proposes, especially regarding my own interests

The What to do section provides detailled informations toward activities BoliviAround proposes. These activities are listed by interests (food, party, adventure) to simplify the navigation. For each activity selected, a map is displayed for the activity to be easily located and for the user to easily interact with the website.

As a customer, I want to read customers' testimonies and feedbacks regarding the agency performance/efficency

The What they say section displays customers' feedbacks and testimonies of their own experience with BoliviAround.

As a customer, I want to contact the agency directly to discuss about my project and eventually get a customized offer

A contact form appears in the Contact section, allowing the customer to join BoliviAround after sending his name/surname/email and, if he wants, his own current project of travel. The email has to be provided under the format "[email protected]" otherwise, it won't be accepted and submitted. A submit button is at the end of the form. By clicking on it, the customer submits her/his information.

I especially tested twice the following features to be sure they work properly :

• Responsive versions of the website :

Phone: Moto G4, Galaxy S5, Pixel 2, Pixel 2 XL, Iphone 5/SE, Iphone 6/7/8, Iphone 6/7/8 Plus, Iphone X

Tablet: Ipad, Ipad Pro, Surface Duo

• Website tested throught Microsoft Edge and Chrome browsers
• Logo text in navigation bar to be sure it brings the customer back to BoliviAround website (i.e. index.html)
• Why Bolivia, What to do, What they say and Contact in navigation bar to make sure links work properly and brings to the correct sections of the page
• Social Media icons in Footer to be sure they were correct links and open in another page
• Contact Us link inside the Why Bolivia section to be sure the link works properly
• Buttons (food/party/adventure and for each activity) in the What to do Section to ensure they were displaying the correct activity's description
• Map locations to be sure they exactly situate the specific activity concerned
• Emails sent to [email protected] mailbox when a user tries to contact BoliviAround using the contact form

Wireframes

I used Balsamic to build my wireframe prior to the website coding.

The idea was to get an idea of what sections I would build and what design I would roughly create. Wireframes were built regarding desktop, tablet and phone versions:

• Balsamic Wireframes (desktop, tablet, phone)

While I was building the project, I decided to add a section where customers share their feedbacks/testimonies regarding BoliviAround - which is the reason why this section doesn't appear in the initial wireframes.

Features

1. Existing Features

Navigation :

• I use the simple and clear navigation code suggests in Bootstrap. All sections are presented to ease the user experience and direct to relevant links when clicked.
• I then used Javascript to make the navbar collapses in responsive version after clicking on a nav-link.

What to do : In this section, I used :

• JQuery to make different sections appear after clicking on the relevant buttons.
• Google Maps Platform and Javascript so as a map displays directly the location of the activity described.

Form :

• I use a simple form template provided by Bootstrap in the Contact us section.`
• This form was then connected, using Javascript, to EmailJS. EmailJS itself connects to a mailbox ([email protected]) and send an email to this emailaddress whenever a user tries to contact BoliviAround.`

2. Features left to implement

Pricing : I would like to add a Pricing section where, according to:

• the different offers selected (which he would be able to mix, i.e. Salar d'Uyuni with partying in Diesel Nacional, etc.),
• the lenght of the holidays,
• the type of travel he wants to have (backpacker, average or luxurious) : An average price would be directly displayed in the screen.

It would allow the user to have a rough idea of what price he could expect to pay for the activities and experiences he is looking to get.

Technologies used

• HTML: The project uses HTML to create the content of the website and his structure.
• CSS: The project uses CSS for the design of the website
• Javascript: The project uses Javascript to add interactivity with the user - especially to connect with API (Google Maps, EmailJS).
• JQuery: The project uses JQuery to manipulate the DOM.
• Bootstrap: The project uses Bootstrap in the overall design. Grid, navbar, form, and many other features described in the Features' section were coded from Bootstrap interface.
• Fontawesome: The project uses Fontawesome in the footer to refer to 2 social networks (Youtube, Instagram)
• Hover.css: The project uses Hover.css to produce the zoom effect while hovering on the footer's icons.
• Googlefonts: The project uses GoogleFonts to choose the two fonts family used for the design of this website (Padauk and Montserrat)
• Google Maps Platform The project uses Google Maps Platform to permit the user to access directly to the locations of the activities described in the What to do Section.
• EmailJS: The project uses EmailJS to connect the contact form to a mailbox ([email protected]) so as an email is sent to this mailbox whenever a user tries to contact BoliviAround.

Tools used

• Bootstrap
• Google Maps Platform
• EmailJS
• W3C HTML Validator
• W3C CSS Validator

Testing

1. Tests W3C Validators

W3C HTML Validator - I run my codes through the validator :

• index.html : no erros identified

W3C CSS Validator

• css.style : no errors identified

2. Test UX

Details of the full test performed (with screenshots) on this project can be found here.

Deployment

My website was deployed as bellow :

• From my GitHub account I went to my repository Boliviaround
• I clicked on the settings icon
• From the GitHub Pages section, I selected 'Master branch' in the dropdown
• My project is then deployed there : BoliviAround

Credit

Content All texts were written by myself to fit with this website's goals.

Images

• Personal pictures: form, testimony1 and testimony3
• Pixabay: All other images used in this website

Acknowledgements

Thank you to my mentor, Aaron, who gave me advices and support this project.

Eventually I received help for my code by reading answers from questions on the websites:

• W3schools.com
• MdBootstrap - especially : to make the navbar collapses in responsive version after clicking on a nav-link, I used the code from this post
• Stack Overflow - especially : to customize my map, I followed the code guidelines from the following post
• Web-eau : especially : to customize my images with CSS effects (zoom, color), I followed the code guidelines from the following post