Premier Electrical

Custom WordPress Theme

Overview

Premier Electrical is an Electrical Contracting service that needed a web presence that represents them in a professional manner to their target audience whilst also standing out as providing a top quality customer service. Specialising in customer service means they wanted a high attention to detail and design aesthetic for the website to present a polished approachable image.

My Role

  • Web Design
  • SVG Animation
  • Custom WordPress Theme Development

Tools/Technologies used

  • SCSS
  • SVG
  • Javascript
  • Anime.js
  • TinySlider.js
  • Gulp
  • PHP
  • Advanced Custom Fields
  • Underscores Starter Theme

Existing Branding

As an established company Premier Electrical already had existing branding and vehicles decals. So it was important to incorporate this into the design of the website. The brand colours have been used throughout and I created an SVG version of the van to use in several places that will help create familiarity and further establish confidence when the vans arrive on site.

#fc611f
#4f636e
#ffffff

Target Audience

The target audience is Property Managers, Strata Managers and Commercial Premises Managers. So it was important to clarify this as early as possible and tailor a few unique aspects to serve them specifically.

Intro Animation

This motion graphic is built with SVG and Anime.js so it has a very minimal file size (under 30kb) and only plays once when first visiting the site and immediately sets their website apart from the competitors. The animation won't play again until the window is closed and opened again. This is so that it can be a neat feature without becoming annoying or interrupting the user.

Interactive Savings Calculator

Premier Electrical wanted to promote the cost savings of LED upgrades to existing lighting fixures. They found in the past clients would always see the benefit after having the cost over time explained to them. So we created a special interactive calculator that would guve potential customers the tools to see the savings themselves as well as easily communicate that to their boss or expenses department. It was important to represent the data visually to make it instantly readable with little effort required. As well as provide it in a graphical format that would be familiar and relatable. This component is currently in the development stage and not included in the website yet.

Call Back Modal

Call back requests are a great first point of contact for new customers because they generate a feeling of reliability and confidence when they receive a call back. This component includes a fun animation as a added detail and is integrated with the Contact Form 7 WordPress plugin.