The Process Systems website

After I developed the new Ruthman Companies website I was asked to update some of the websites of the companies that Ruthman owns. Process Systems was the first one.

Visit the Process Systems website (opens in a new tab).

Developing the website

The previous website was built in 2008. It contained a lot of useful information but it was difficult to navigate and the design was not very modern. It used elements that were popular in the 2000s, such as tabs for navigation, that are now outdated. It also didn’t give a clear idea of what the company did at a glance.

The first stage, as with all websites, was to take all the information and reorganise it to make the site more useable and intuitive. That stage actually took up most of the time. I worked closely with Ruthman’s Director of Marketing to create a new structure for the website that we were happy with.

The design stage

The remit was to keep it similar to the Ruthman Companies website to create a “house style” for Ruthman companies. In developing the Ruthman website I had been locked in to a pre-existing design. With Process Systems I kept to the feel of Ruthman Companies but made some changes that I would have liked to have made with Ruthman.

I used the same font and used dividing lines between content. I had three boxes on the Home page that provided an overview of the company. Internal pages had a sidebar at the right, mostly used for brochure downloads. It felt familiar enough without being exactly the same.

In addition I moved the navigation down to use something of the previous Process Systems website. I added a full-width banner image that screamed “Industrial Pumps”. I also made the maximum width of the page much wider than the Ruthman website. The Ruthman website has a maximum of 1120px but Process Systems has a maximum width of 1600px.

Rebranding

Following the build, Process Systems decided to rebrand. I’m not sure if that was because they had a shiny new website or if it was something they had been planning for a while. The Process Systems logo was changed and they created a matching logo for the Deming line of products.

I made some changes to create the site you can see today. I redesigned the header to move the navigation up and to the right. I changed all the logos that were used on the site. I even photoshopped the sign in front of the Process Systems headquarters to use the new logo.