Pneumatic Solutions Website Redesign

Amber Lahav

Web Designer
Researcher
Web Developer
Elementor
Figma
WordPress

Overview

Humphrey Automation is a leading provider of automation, pneumatic solutions, electrical motion, and machine vision systems in Canada.
I worked closely with the general manager at Humphrey Automation to strategize, plan and implement the full redesign and rebuild of their marketing site.

Process

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

1) Enhance website UX to boost sales. 2) Establish tech authority, highlighting expertise. Also, promote premium services: customized solutions, 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:
Keep the existing branded red as the primary colour
Clean - not too much colour, lots of white
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

For the website, I opted for Wordpress and Elementor for ease of use and familiarity. Astra theme was chosen for compatibility, flexibility, and support.

Phase 4: Website Design

Next, I crafted mockups for key pages, like the homepage and custom solutions, using Figma. Emphasis was on strategic use of imagery, colors, and white space, complemented by enhanced client copy. Clear calls-to-action (primary: shop, secondary: contact) were integrated. After client approval, remaining pages were built with Elementor, maintaining design consistency.

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 and for each of the template pages.

Outcome

Overall, the process of planning, strategizing, designing and building the new Humphrey Automation website was a great experience. The client was left with a new and improved website, designed with their goals in mind - establish trust with customers, convey expertise and promote their products and services. The polished brand styles and well-organized site structure further helped to advance those goals.
While a few challenges did arise, such as having to quickly iterate on the designs ad-hoc or figure out technical workarounds within the page builder, I learned to overcome them, adapt and communicate efficiently.
Partner With Amber
View Services

More Projects by Amber