+44 (0) 141 308 10 29

Health Checker 2.0: A Visual Upgrade

My name is Matthew Lynch and I am currently an intern at My Server Guy. Over the past few weeks, I was challenged to take on the current My Server Guy Health Checker and improve it by upgrading the look and feel of the website.

What is the Look and Feel of a Website & Why is it Important?

My challenge was updating the current look and feel of the website. By improving the sites look and feel this would portray a more professional and user-friendly look.

The websites ‘Look’ mainly consists of the:

  • Colour Palette
  • Images
  • Layout
  • Typography

The websites ‘Feel’ mainly consists of the responsiveness of dynamic elements:

  • Menus
  • buttons
  • Forms
  • Website Speed

The look and feel are important to make sure that you convey your brand to your customers. Visitors may lose interest or get confused if they are not expecting the look and feel for that business or industry. The My Server Guy Health Checker was redesigned to be easy to use, approachable and friendly.

 

Before

health-myserverguy-old

 

health-myserverguy-report-old

After

health-myserverguy-new

 

my-server-guy-web-report

 

Making the Website Look More Professional & Upgrading the Look and Feel

Firstly to start, we looked at the other pages of the My Server Guy website to inspire us. This helped us to think up some ideas for the colour palette for the site. Following from this, we chose to go with a main blue accent colour that ran throughout the site, with a green that was also a consistent colour.

health-myserverguy-colour-palette

My Server Guy Health Checker Colour Palette

The previous website layout felt compacted in one area and was not spaced out. To further improve this we added white space around the elements and buttons. The footer’s elements were all on the left-hand side, giving the impression of unbalance. Therefore we changed it to make sure the footer looked and felt more balanced. We then made elements spaced across the footer rather than just in one place. This gave the layout a more user-friendly and visually appealing look.

Improving the images on the website was done for the purpose of again improving the brand of the website, look and feel. The main idea for the background was to make a 3D report effect. This was to illustrate to users what they would be presented with, when they got to the web report page. The other updated image was the logo which was provided, and was simply replaced with the old one along with the navigation bar.

The Typography used in the website was called ‘Montserrat Ultra-Light’ as a result this font helped to portray a clean simplify look. This typeface helps to convey a professional and legible look to the website. We intergraded SEO (Search Engine Optimisation) into the website to be sure that we looked professional if visitors shared their report on social media. We therefore included the use of meta tags and keywords. Lastly, users were always using mobiles to search and be productive on the go. We wanted to make sure that the web report was responsive from large screens, to tablets and mobiles phones.

 

Web Report Page

The web report page received the same treatment, keeping to the same consistent design. We again added white space around the elements to make it legible and easy to use. We added information to the report to inform users about how they can use the My Server Guy Health Checker to obtain insight into their websites overall health, performance and security over the last 72 hours. The individual website flaws were re-designed to make it easier to understand and with icons added this gives the report an overall visual appeal.

 

reCAPTCHA v3

The newly updated site comes with Google’s reCAPTCHA v3, instead of reCAPTCHA v2. This was an important update as it allows for a less obtrusive interface and interaction. In this latest update, version 3, will remove the interactive challenge and will give users a score to determine if they are a human or bot. This is done by a JavaScript API that returns a score giving you the ability to take action in the context of your site. Some examples, for instance, requiring additional factors of authentication, sending a post to moderation, or throttling bots that may be scraping content.

 

Technology

The Health checker website uses the CodeIgniter Web Framework, which is used to build dynamic websites with PHP. The site is structured around the Model View Controller development pattern. This approach separates application logic from the presentation and in practice is allows your web pages to contain minimal scripting since the presentation is separate from the PHP script.

The websites main page uses a parallax effect which is done with JavaScript. The effect works when the user moves their mouse or finger on the screen. The background will move in the opposite direction. This effect gives the website more interactivity and makes it more interesting to use.

 

Visit the My Server Guy Health Checker Tool and see what score your website will receive?