Humphrey Automation

Phase 1: Defining the Problems & Goals

Problems

Before starting on the website redesign, I asked the client what the main problems of the existing site were so we know what to prioritize in the new version. These were the main problems they were facing:

• Lack of customer trust
• Outdated look - they didn’t look premium/big/innovative enough
• Customers were unable to shop online from them
• Customers can’t find the right information - staff was wasting time answering questions that could be answered on the website
• Website was hard to maintain (lack of intuitive CMS or page builder tool)

‍

Old website:

Goals

The client's first priority was to increase sales, by improving the user experience of the website. The second priority was to become a technical authority in their field, showcasing their abundance of knowledge and expertise. Along with getting more sales through the website, they wanted to promote the company's available premium services: customized solution, design capabilities, and product design.

Phase 2: Defining the Target Audience

Audience characteristics: 

• Age: 30 - 65
• Gender: 95% male
• Location: Canada
• Profession: Design engineer, mechanical engineer, product engineer, automation technician
• Level of education: Bachelors+
• Main purchasing values/motivators (speed, price, quality, friendly customer service, etc.): Distributors: Price, speed, customer service, Design engineers: Quality, price, customer service
• Main purchasing deterrents/fears: Lack of trust, not enough information that this is really the right solution for them
• Other related products in the industry they might purchase or look at: Festo, SMC, Parker

Phase 3: Research & Planning

Competitive Research

I researched the competitive landscape extensively to make sure Humphrey Automation's new website will have a good balance of standing out while meeting familiar industry standards.

Direct Competitors: Wainbee , Proax , BDIExpress , Shelley , DJ Industrial.

Overall, most of these competitors had outdated and unintuitive websites, which was also a big opportunity for Humphrey Automation to fill the gap.

I also researched a few indirect competitors - manufacturers and vendors' websites who were successful players in the industry for inspiration: Vention , Festo , Inspekto.

Visual Identity (Look & Feel):

I worked with the client to define what direction he was envisioning for the website's look & feel. The notes he gave me were:

1. Keep the existing branded red as the primary colour
2. Clean - not too much colour, lots of white
3. Lots of images - take inspiration from Festo + Inspekto

I took his input, conducted research from various design inspiration sites and consolidated everything to create a mood board that would guide the branding and web design:

I took the current company branding (the red colour), and created a new palette around it, with some secondary and neutral colours. I then added updated fonts and imagery to create a style guide for ease of use in designing the new website.

Site Structure

I took all of the research and the outlined goals to create a new website architecture.

Planning the Build

When it came to building the website, I wanted to choose a CMS and site builder that were both easy and quick to use, and that would be intuitive for my client to use and maintain in the future. I decided on Wordpress (CMS) and Elementor (page builder), since both my client and I were familiar and comfortable with it.

The next step was picking a theme that would be compatible with the page builder, and flexible enough that I could build the pages as close to my designs as possible with as little limitations. The theme I picked was Astra, as it was customizable, fast, and was widely used (with lots of support if needed).

Phase 4: Website Design

The next step was designing the pages. I started out by designing mockups of the homepage and custom solutions page, as well as some template pages for industry and vendor pages (using Figma). The focus was on using imagery, colours and white space strategically alongside new and improved copy from the client. The other emphasis while creating the designs was to have a clear call to action (CTA) throughout the pages - (primary CTA: shop products, secondary CTA: contact us).

Once these initial pages were approved by the client and good to go, the rest of the pages were then designed using the Elementor page builder (using the styles and components I took from these first designs).

Phase 5: Website Build

Finally, it was time to bring the pages to life and start building on Elementor. Many of the original designs went through a few rounds of iterations based on client requests (mainly new information blocks that were important to be added). I used custom CSS whenever I ran into issues where the theme was limited, to match the original design styles. I worked together with the client to fill in the information and content for both the standalone pages (such as homepage, contact, solutions, etc.) and for each of the template pages (vendors, industries, product lists, etc.).