New Cannon Site

March 4, 2019
A modern website, long overdue. Cannon needed a more informative website by describing in more detail what they do as well as who we do it for.
new cannon website accreditations ansul
321 live 1
new cannon website suppression
cannon sectors

Process Overview

Content Improvement

The old website had 700 words across 7 pages. The new website has over 25k lots of detailed information about the services  Cannon provide. 

Website Build

Using the improved content and design, started building the pages and testing them on various devices to ensure the site looked great on all devices.

User Testing

I conducted an experiment where i asked users to the company services, on the old website it took a few minutes on the new website it only took a few seconds. 

Website Features

A page showing our accreditations, the services we provide as well as the sectors/markets we provide services too, this section contextualizes the information and gives a reader an idea of the type of system we would recommend (environment depending).


Minimal Design

Responsive Design

cannon responsive
ipad cannon transparent

User Experience Improved

The new website improved legibility and hierarchy ensuring that users could see the page as well as find the page that they needed.

Branding elements

Graphical elements were created to compliment the new website these have since been adopted in print being used on business cards and other items.

cannon sprinklers page
cannon extinguishers page
cannon contact page
cannon suppression page
cannon sectors page
cannnon macbook

The new site is much more user-friendly.


Old website 

If it is hard to read then it is hard to sell. The old websites black background and small white text resulting in a very contrast webpage that difficult to read. 

In addition, all page content was counter-intuitively forced into the bottom right corner of any given page.

As westerners we read from left to right, the previous website placed the contact form and twitter feed as the left-most objects making it, so these were seen first, this breaks the visual hierarchy,