African Explorers

UX
Testing
Bugs
Finished site
Deployment
Credit

UX

Project Goals

The goal of this project is to provide a clear & concise online presence to the fictional business African Explorers. African Explorers are a tour operator who specialise in guided safari tours in search of the famous big 5 (Lion, Elephant, Rhino, Leopard, Buffalo) in the authentic wilderness of the Okavango Delta in Southern Africa.

With the busy modern lives of customers and a high amount of business competition in this area the site needs to be simple to navigate with the information on the company & tours provided with as little mouse clicks and scrolling as possible.

User Goals

To be able to access the site via various devices (responsive) and to be able too quickly and efficiently find out who African Explorers are and what they provide as a service.
To be able to easily navigate between pages with clearly defined navigation links.
To be able to read text on the website clearly and without difficulty.
To have a clear call to action for further detailed information.
To be able to contact the business via either various communication methods such as contact form, telephone, email address and social media.
To be able to see testimonials from previous customers.
To be able to see images (proof) of what can be seen on the tours.
To have an update of recent wildlife sightings.
To have social media links to see further images and ratings.

User Stories

As a user I want to be able to access the site either at home on a desktop or on the go with mobile/tablet.
As a user I want to be able to leave the site with a solid understanding of African Explorers and what they provide.
As a user I want to be able to find information quickly, clearly and with easy to follow navigation.
As a user I want to be able to see images and testimonials of the tours.
As a user I want to see contact information for the business with telephone, email and a dedicated contact form.
As a user I want to have links to the companies social media presence to see further images, videos and ratings.

Site Owner Goals

As a site owner in this busy modern world I want the site to be straight to the point with information easy to find.
As a site owner I want clearly labelled navigation links and as little clicking and scrolling as possible for the user to stand out from the competition and give the impression that African Explorers are an efficient and professional company.
As a site owner I want to provide a pleasing to the eye site so the user leaves with a good feeling.
As a site owner I want to provide images of the tours/animals to fire the users imagination and give them a taste of the wilderness.
As a site owner I want to have a scrolling testimonials section of our tours and a recent sightings section to add to user excitement of what could be expected on a tour.
As a site owner I want the user to be able to contact us via their preferred communication channel.

User Requirements and Expectations

Requirements

Navigable website with a navigation bar/links.
To be provided with information on African Explorers and services.
Content is clean, clear, visually appealing and easy to find.
Contact details and dedicated contact form is provided with a submit button and placeholders.
To be able to scroll through the testimonials section, created with a bootstrap carousel.

Expectations

Content is visually clear, concise and appealing.
Site can be viewed on any device.
Navigation links work correctly and go to the correct parts of the site.
Navigation links open in a separate tab.
Email links works.
Content form is clearly labelled (including placeholders), and submit button works.

Design Choices

The average age of a buying customer for safari travel is 50 years old (actually a drop from 70 over the last 20 years) showing that it is a form of travel most popular with working middle aged professionals.

This was very much on my mind when designing the site. People of this age are more likely to be busy with work, commutes, and family commitments meaning time is more precious. Because of this I want the site to be of minimalist design, straight to the point and with key information easily findable with little searching. I didn't feel the need for alternative street style fonts & colours which would appeal to a younger audience for example.

People of this age group are also likely to be on the move a lot due work & family travel commitments so I have a decided to go with a mobile first design with Bootstrap.

Fonts

Considering the likely age user group of the website I decided to us Roboto regular 400 as my font as it is "safe", very easy to read, and neutral. I did not think it would be right to go too creative in this case. An interesting article on safe web fonts

Icons

Icons will be used alongside the text of navigation links to provide further usability. They will be taken from font awesome and chosen to be self explanatory.

Colours

The colour scheme was chose on the basis that I wanted a simple, clean and visually appealing site that was emotive of colours associated with an African safari.

For the navigation bar I will be using 41B45A Green Pantone which is a nice friendly colour and I thought green is the colour most associated with nature.
Background colour of site will be FAFAFA white to keep it clean and easy to contrast against.
When user scroll over navigation links the shade of green will change to 15795B a darker shade of green (Spanish Viridian) to show the highlight to the user which link they will be pressing.
For the testimonial and latest sighting sections of the site the background colour will be F2E7CF Champagne which will give the area a subtle highlight to draw attention and is a shade of brown/yellow found on the African plains.
Text colour through the site will be black. This was chosen as it easy to read on all colours chosen.

Wireframes

To create my wireframes I uses a software called Balsamiq to create low fidelity frames of the site. I chose Balsamiq as it is user friendly and allows you to add graphical images which I find very helpful for visualising the site. For example the graphics with the navigation links and the scrolling testimonials really allowed me to get an idea of how the site could look.

I did find a slight issue with Balsamiq and that was when the desktop wireframes were exported the line under the navigation links was extended to look messy. It should be noted this is not an intentional design.

As I am building this site to be responsive it was very important for me to produce wireframes of desktop, mobile, and tablet. Click on the link below to see in more detail.

Wireframes

Features

Features on the site:

Navigation bar
Jumbotron with background image on landing page
Call to action find out more button
Scrolling testimonials (carousel) on landing page
Footer with social media links and email link
Image gallery section
About us page
Images on about us section
Call to action buttons to view images or contact on about us section
Recent sightings article
Contact form

Features that could be implemented in the future

Some of these features would require additional technologies not part of this module.

Scrolling background images on landing page so the user does not only have one background image via a carousel
An lightbox image gallery instead of opening in a new tab
Google maps location

Technologies Used

Languages Used

HTML
CSS

Tools and Libaries

Testing

For testing the site I used the following tools/methods.

Chrome DevTools

This proved very useful in the production of the site as it allowed me to not only fix bugs whilst creating the site but I could also play around with what styling worked best on different screen sizes. It has an inbuilt features to view my site in responsive and handheld devices.

W3C HTML validator

This was used to check my HTML for errors. It found the below errors which I fixed by removing type="button" which was not necessary. I was also able to remove an redundant id="nav-image" which if used should have actually been a class as it was used more than once for styling. After fixing these issues the results returned as no errors.

HTML Validator check

Now no errors after fix

W3C CSS Jigsaw validator

Pheww no errors first time!!

Autoprefixer

I used Autoprefixer to analyse the sites compatibility with different browsers. By running by CSS code through autoprefixer it automatically shows me where I need to add webkit and moz to render with Safari and Chrome. An example is below:

Manual Testing

I first tested the site on different browser to see the results. As you can see from below my only issues being with Internet Explorer.

Responsiveness

Next I tested the site on different devices (small, medium, and large) and bootstrap media breakpoints using Chrome Developer tools. Below are my results:

Speed

I tested the speed of the site using Pingdom a free website. It returned the below result.

It returned a grade C so could be better but it still loads in under a second which is a good load speed.

Contact form

With the contact form the main two things I wanted to check was that if information was not filled in a required field it would display an error message which it did. The second aspect being that once filled in and the send button hit it returned a message saying "this is just a sample form and your data has not been sent anywhere, which it did.

Bugs

This are issues I encountered during the building of the site that I was able to fix as I went along.

Jumbotron

The issue I had with the jumbotron was that the background image and text were not fully responsive on handheld devices. It seems it is a common problem with Bootstrap jumbotrons and there are a few methods to fix it.

The best solution for the text was to use media queries to alter the size and placement (via margin) depending on screen size.

For the background image could have used the same approach but it would take a lot of time tweaking the size and positioning of the element and may still not look great. In the end I decided to switch the background image for another one which had better proportions for smaller devices using media queries.

Carousel

I had a similar issue with the carousel testimonial section on the landing page in that the slider and next/previous buttons would overlap either on the side or below on smaller devices. From a design point of view I decided to remove them on mobile devices as I felt it would be fiddly to use the buttons on smaller screens away. It automatic moves through the quotes so not essential to have them.

About us section

Due to the design layout of the about us section it caused a lot of difficulties in different screen sizes. The elements would often lose spacing between them and the bottom image would not stretch.

I tried to fix this issue with different media queries at various sizes but the elements moved so much that it was easier to redesign the look of the site. I still had to add a media query for tablet/laptop size as large white space appeared on the right hand side when the recent sightings section would disappear as planned.

Anchor links

Another bug I had was with the anchor links to navigate around the site. Due to having a fixed navbar it would cut out the top 100px of each section when navigating. I had to add to the html document in the css file scroll-padding-top: 100px to fix this.

Footer

I noticed with my footer that on some smaller devices the footer would float up the page. I had to fix this using media queries and changing the height to 100%.

Finished site

Additonal fonts used in finished site

In the finished site I also used a font called Pangolin, cursive as I wanted to give a different style to the title in the navbar to give more of a logo look and feel to it. I felt this font suited the African theme and it is even named after a rare nocturnal animal found in Southern Africa. This font was also used for the title on the recent sightings section and within the jumbotron.

I also used a second additional font in the recent sightings section called Patrick Hand cursive as this is a handwritten style of font which I thought suited the section as it is meant to be like a recent sightings posting they have in national parks.

Additonal colour used in finished site

An additional colour of 91D18B which is a light green was added as a background colour to the image gallery section of the site. This is because the site was changed to a single page layout on advise from one of my mentors and I needed to signify a new section. The colour visually matched well with the rest of the site and suits the theme (safari).

Design changes

There has been a few design changes made from original UX designs that should be noted below:

NavBar

As I was using Bootstrap I decided to go with a bootstrap navbar rather than my custom made one as it more time effective and has built in responsiveness with a hamburger icon in smaller devices. I was still able to fully customise to my font and colour schemes with CSS so it was an effective decision.

Full page background image

I decided to go with a full page background image rather than a banner and additional images. I think this provided a much cleaner and grabbing look to the site and it allowed me to be creative and change the background image with different devices.

Redesign of about us section

As explained in the bugs section due to responsiveness issues it proved more efficient to redesign to a simpler layout.

Additional call to action button

I added a click to contact us button on the about us section as well to provide an additional click to see images button for easier navigation.

Change to single page site

After discuss with one of my mentors it was advised that due to this being a simple site with not a lot of content it was recommended I switch to a single page site.

Deployment

African Explorers was developed on GitPod, using git and GitHub to host the repository.

To deploy African Explorers on GitHub Pages I had to make the follow the steps below:

Opened up GitHub in my browser
Signed in using my username and password
Selected my African Explorers repositories
Navigated to https://github.com/TobyGreet/African-Explorers
Click on setting in the top right of the navigation bar
Scrolled down to the GitHub Pages area
Selected 'Master Branch' from the 'Source' dropdown menu
Clicked save to confirm my selection.
African Explorers is now live on GitHub Pages: https://tobygreet.github.io/African-Explorers/

How to run/clone locally:

Running African Explorers Locally Cloning African Explorers from GitHub:

Navigate to https://github.com/TobyGreet/African-Explorers
Click the green code button
Copy the url in the dropdown box that will appear
Using your favourite IDE open up your preferred terminal
Navigate to your desired file location
Copy the following code and input it into your terminal to clone African Explorers: https://github.com/TobyGreet/African-Explorers.git

Credits

Coolors.co
Article written by Dennis Pinto from Travel + Lesisure about the age of safari travellers
Code Institue and the very helpful tutors
My mentors for this project Simen Daehlin and Mark Railton. Should be noted that Mark provided the JavaScript code for contact form to display "this is just a sample form".
Images
- Elephant banner image for Readme provided by Greg Montani at Pixabay
- Rhino background image for large devices provided by Lucas Alexander at Unsplash
- Elephant background image on handheld devices provided by Geran de Klerk at Unsplash
- Aerial view image of okavango Delta on about section provided by Wynand Uys at Unsplash
- Vehical driving at sunset image on about section provided by Hu Chen at Unsplash
- Leopard in tree image provided by Colin Watts at Unsplash
- Male Lion image provided by Dan Horn at Unsplash
- Elephant close up image provided by Sam Bayle at Unsplash
- Rhino at waterhole image provided by Jame Bloor Griffiths at Shutterstock
- Buffalo and Wild dogs image provided by Martin Mecnarowski at Shutterstock
- Landscape view of delta image provided by Evenfh at shutterstock
- Canoe on the river image provided by Gil.K at Shutterstock
- Leopard spotted from safari vehicle image provided by Sirtravelalot at Shutterstock
- Wildebeest at sunset image provide by Jonathan Pledger

code-institute-submissions / african-explorers Goto Github PK