Ziegler SuperSystems was founded in the early 80’s and is one of the most recognized sales consulting and training firms in the automotive industry. In January I was asked to give the website a complete overhaul.

Planning the Website

The existing site was running on the Joomla! CMS platform so the easiest solution would have been to create a new responsive Joomla! theme and call it a day… but I wanted the client to have a site that was contemporary, unique… and deserving of the brand.

The mission was to create a brochure-style website that focused on user experience and showcased the brand, (the company founder is the brand), as well as products and services.

I experimented with several layout ideas and created three sets of wireframes before finally deciding on a fluid one-page website broken up into primary and secondary sections. Clicking on a link in the toggled navigation bar would slide the user down to the appropriate primary section of the page, then on to secondary sections. I created three fluid layouts for the sections, each of which stacked into a single-column layout on smaller devices. I sketched out wireframes for each section layout to arrange the basic elements and to provide me with some blueprints to work from.



I wanted sharp, clean typography and used the sans-serif ‘Open Sans’ font for paragraphs and sans-serif ‘Helvetica’ for headlines. The color palette consists of the primary colors used in existing marketing collateral and product packaging.

The sitemap was designed to ensure that visitors could navigate through the primary and secondary sections quickly and easily.

The homepage features a full-page slider containing three rotating slides and a large ‘Learn more’ button that leads to the ‘Services’ section. A navigation toggle button is in the right-hand corner of the header and it opens the main navigation bar.

The top right-hand corner of each section contains a ‘Back’ button which navigates to the previous section and a ‘Scroll top’ button in the bottom right-hand corner.


Designing the visuals

Now it was time to push some pixels around in Photoshop. I wanted the aesthetic to be clean and focus on the founder and typography. Much of the hard work had already been done creating the wireframes. It was time to experiment with colors and layout and to begin creating image assets. All images were optimized to the smallest file size possible via TinyPNG.



Ziegler SuperSystems now has a contemporary, cross-browser compatible responsive website that provides an excellent user experience. I have a great deal of respect for the client and it was an honor to build this site.