Web Design

Keysystems South Africa is a company that specializes in Security asses managers and a wide range of other Security equipment. The initial design work was based on the American site, duplicating the content and hosting locally rather than internationally. Content is fully custom without using any form of page-builder. Making it much cleaner and more trustworthy in the future. Making use of a CMS for only for setup and navigation. This also formed part of a logo design viewable here: Keysystems Logo Design.

key systems website design introduction image

The build is very simple and straight to the point. The landing page uses section anchors that turn it into a one-page scroller with the products housed on each separate page. This allows quick navigation, only leaving the page if users would like more information.

This simple to use navigation gets users straight to your most valuable information, showing what the site offers and available products. In regards to budget, there wasn't much to work with, however, I prefer to do some technical SEO adjustments wherever possible.

Behind the scenes

Wordpress is a fantastic tool. When used properly, it can make a site stand out far above the rest. Not all companies have funding for a completely custom front-end build. An easy way to build high-end sites that deliver an above-average result. I personally prefer not to make use of pre-built templates but fully customize the design. This means much more control over what code goes into the back-end.


The website is set up for easy navigation, getting users straight to the section that speaks to them. Accompanied by beautiful images, professionally shot, showing off both the venue and the awesome food they offer.

Landing Page

key systems website design pages home example

The main landing page consists set up as a single page scroller. With contact information and product displays right at your fingertips. Simple to navigate and far from overbearing. Both the banner and the individual product images act as a click through to relevant information. This is the first page viewers are most likely to end up at, so having all the most vital information displayed here is much more likely to increase UX satisfaction.


key systems website design pages electronic cabinet example

There are roughly 8 individual catalogue pages. Each showcasing all relevant product information as well as downloadable product-specific content. The site makes use of breadcrumb navigation on the main product feed to create a flow on the site leading from one page to the other. This is a simple build with all back-end coding done in the rawest form of HTML I could muster. Easy to use and take across to any future builds.


Optimizing for handheld devices is a feature that can not be overlooked. With the majority of visitors coming from mobile. With good in-depth analytics tracking on plenty of sites, I have seen a massive increase in mobile users, and these numbers keep increasing drastically. Not having responsive sites will likely give you a visitor loss of way over half compared to desktop.

key systems website seo responsive tablet

The site is fully optimized for tablets, making sure all padding is set up correctly to re-size to relevant screens. Tablets are a close competitor to mobile sites and get a massive amount of traffic.

key systems website seo responsive mobile

The site is also fully optimized for mobile. Keeping in mind the mass amount of different screen sizes and how the site goes across to each. There is no question about it. If a website is not mobile responsive, it will lose out massively on a great deal of site visits.

Technical SEO - Page Speed

Often overlooked and treated as not-so-important factors. Website speed and site compression is a massive factor in SEO. Having a website that loads quickly decreases your potential visitor loss massively. With studies showing the average consumer likely close your site if it has a load time of 7 seconds.

key systems website seo mobile page speed

The conclusion here is that technical SEO and compressed site are not just paramount for good SEO but also an unparalleled necessity in keeping users on your site while they wait for it to load. The mobile test was done on a tool supplied by Google, so naturally optimizing for Google and seeing how you score on the tools that Google supplies would be good for Google search engine rankings.

Getting a 5 second load time is something spectacular. Not only making your site SEO ready, but also giving your audience the best possible experience. Not irritating them with site loading time and pauses between click-throughs.

key systems website seo google page speed
key systems website seo gtmetrix page speed
key systems website seo pingdom page speed

Website speed is a combination of back-end optimization and server response time. Naturally, the slower the server speed, the slower the load. The above tests were done using three tools namely: Google page speed score, GTMetrix and Pingdom. Showing great results with minimal errors and site-fixes.

The website is greatly affected by a slow server though. This is visible on the google test. a response time of 2.1 seconds for the server to deliver the website is an undesired outcome. With good hosting or implementing a CDN, this would likely up the load time by triple what it currently sits at.

Related Projects

  • ICCS