Landing Page Implementation & Design Decisions

Compared to my mockup, major design decisions have been made to the landing page.

(Above are my initial mockups for the landing page, own images)

The final landing page:

As you can see, there were a lot of design decisions that were made that were not included or were modified on the original mockup. 

1) Header

The second header image was replaced after feedback was received in tutorials. Both tutors agreed that the second image did not 'fit' with the other images I had chosen. They mentioned that it looked 'stocky'/false due to the number of people around the computer as this was not realistic for a training session and that the image could give a false representation of the company size.

Therefore, this image was changed to a man presenting to a group as this was more appropriate for the header message, "Bespoke Training Programmes tailored to your companies risk". The initial image implied an informal meeting whereas the final image implied a man training a group of people.

(Screenshots of mockup header and final header, own image, 2019)

The fourth header image was replaced as the client did not feel that this was a true representation of visiting a client or was suitable for the header message. Although tutors liked the colour palette used in this image (e.g. blue in the sky accented with the yellow of the crane that contrasted with the logo, I felt that a different would give more of an impact to the audience visiting the website. 

I initially picked the first image because I was focusing on the HSE visit part of the header message, "HSE Visit? We can help with corrective actions" however the client mainly helps with corrective actions and doesn't perform the HSE visits and therefore this image was giving the wrong message to the audience. Therefore the final image chosen is more appropriate.

(Screenshots of mockup header and final header, own image, 2019)

Below displays all four final headers, own images.

2) Navigation Bar
Initially, the navigation bar was transparent and when the user scrolled the bar's background became white and the navigation text turned to grey.

The problem with the bar being transparent is that sometimes the white text was lost depending on the header image or the logo didn't contrast well with the background (shown below in the mockup and final design).

(Screenshot of mockup navigation bar, own image)

(Screenshot of final design, own image)

Therefore the client suggested that we should keep the navigation bar's background colour white and text grey continuously to avoid these problems and make it easier to read. I decided that this was a good idea and made these changes.

(Screenshot of modified navigation bar, own image)

2a) Logo
Initially, I had chosen to use the full horizontal logo for the left corner on the navigation bar.
I decided to use the other version of the logo as the grey bar "Simplifying Health and Safety compliance" was not readable and looked messy. Using the final logo meant that the title, "Ramsay Safety Solutions" was slightly bigger and more readable which was more important.

(Ramsay Safety Solutions logo, provided by the company)

(Ramsay Safety Solutions logo, provided by the company)

3) Buttons
Initially, the buttons on the header were solid #04A8D4 (blue) to fit with Ramsay Safety Solutions' colour palette.

(Buttons from mockup, own image)

The phone button stayed the same, however the e-mail button was changed for some variation and so that it would stand out. The word "e-mail" was written onto the button so that it was more obvious what the button was for and for consistency. The symbols for the e-mail and phone buttons changed slightly for clarity.

(Button from the website, own image)

All other buttons found on the website are solid blue #04A8D4 for consistency and made them bigger so that they would be easier to click in mobile and tablet view.

I decided to add a "Contact Us" button underneath the Services section so that the audience can easily travel to the contact us page. I decided to add the button after this section in case the user is scrolling through the page and sees a service that they need - they can easily contact the company and make an enquiry.

4) Testimonials

I removed the title as this added additional space in this section. As the section was very short, I felt that the user would understand the purpose of this section without the title. Initially, there was an image of the client performing a training session however this image wasn't recent and wasn't as high resolution as the rest of the website. Therefore I decided to replace this with a simple solid blue colour from Ramsay Safety Solutions' colour palette and added the star from their logo to increase the amount of branding on the website.

(Previous Testimonial design, own image)

This was successful as the final result is clear, simple and the testimonials can be easily read against the blue background. Additionally, the parallax feature was more prominent as the design was simple.

(Final Testimonial design, own image)

5) Client Logos

Initially, the client's logos were going to be their original brand colours. 

After speaking with the client, he suggested that the logos may look more professional in black and white. I agreed as the client's logo colours weren't consistent with Ramsay Safety Solutions' brand colours and therefore turned their saturation down to 0%.

(Original client logos, own image)

(Final client logos, own image)

6) Team

Initially, the team images were going to be hover over images which would display the team member's name, position and contact details however when testing this on tablet and mobile the hover over wasn't practical and didn't seem to work well when using these devices. Therefore I removed the hover o and added these details underneath each image.

(Team images use the hover over effect (left), final designs (right), own images)

New photography needed to be taken of Calogero and Alfonsina as these images weren't as high quality as the rest of the website. Once these photos were taken I decided to edit the images using Photoshop so that they were clear and had the correct amount of contrast, saturation and brightness. I erased the backgrounds on each image which were replaced with the light blue #b7e0f3 on Ramsay Safety Solutions' colour palette. This was to add branding consistency throughout this page.

7) Latest News

Previously, the images for the latest news section were the original images downloaded without any modifications or enhancements. However, after discussing this with tutors, it was suggested that I use the company branding to unify this part of the website. Therefore I decided to add a blue tint using Ramsay Safety Solutions' colour palette and added a blue (#04A8D4) circle that included the day and month the post was published. Adding this made the latest news section fit well with the rest of the website.

I decided to change the risk assessment image after speaking with the client, as this came across as more of an infographic flow chart which tutors mentioned didn't fit with the section and that I should find an image that used more photography.

8) Contact Form

After a discussion with the client, they mentioned that they wouldn't need the subject box for the contact form because the user would mention the services/training they would require in the message box. Therefore, I removed this box and added the name of the user to the subject of the e-mail instead.

(Original contact form (left), final contact form (right), own image)

9) Map

The map at the bottom of every webpage was removed because I felt as though this was only required on the contact page.

10) Footer
Initially, Ramsay Safety Solutions' footer just include the companies social media channels.

(Footer mockup, own image)

I decided that I could include more information about the company on the footer and therefore added:

• Information about the company including the companies address and social media channels.
• Recent Posts section - added important latest news posts that relate to every company.
• Twitter Feed widget which would automatically update if Ramsay Safety Solutions' posted any new tweets on their twitter page.
• Useful links section - as this was originally on the original website for Ramsay Safety Solutions' and included useful links to the HSE website.

(Final Footer design, own image)

I decided add this information to add structure and for extra navigation to social media channels, the HSE website and latest news posts. 

11) Loading Image

Originally my loading symbol for the website were two blue (blues from Ramsay Safety Solutions' colour palette) bouncing circles that increased and decreased in size as the page was loading. I wanted to make this more personal to the company because this animated loading screen originally came with Bootstrap Template. I decided to add the star of Ramsay Safety Solutions' logo as the loading image instead with this bouncing effect.

(Video of loading symbol, own video)