News Alert
News Alert
Skip to content GO TOP
Logo

Building a World Class Automobile Manufacturing Website

HMC_Chrome logo_horizontal

Hino® Motors Canada (a subsidiary in the Toyota® Group of Companies) is the country’s premiere manufacturer and distributor of light and medium duty commercial trucks. The company has over 25,000 employees globally and operates in Andean and Central American countries, with 50 independent dealers in Canada.

It Was Time

As a premiere truck manufacturer, Hino® already had many parts of its business firing on all cylinders, but had an outdated online presence. While their website was probably appropriate when it was built, it was holding them back from being a formidable leader in the online space.

Some of the limitations of the old website:

1

Older design – The previous website had an easy layout for users to find the models, but overall it lacked the magical factor that consumers are starting to rely on today.

Hino old website

2

Poor CMS – The previous CMS was difficult for marketing staff to use to keep the website up to date.

3

Outdated Dealer Areas – The Dealer Locator was one page vs. a robust engine that would allow users to locate closest dealers based on area codes or geo-location features.

Picture1

4

Poor SEO – The website was lacking in many best practices for Search Engine Optimization (SEO). A good example would be product pages.

Picture1

Product and service pages on a company’s website serve as valuable opportunities to inform Google of the company type and to display quality content with hopes of generating ranking and higher organic traffic. On the previous website, the truck (product) pages lacked a lot of content.

There was greater opportunity to build out these products to assist with lead generation, advance the brand’s key strategic messages and to rank better on Google.

The Project Was On

Hino’s marketing team, IT team, and tbk Creative set out to build something together that would be a better business tool for Hino® and would end up being considered amongst the highest quality truck manufacturing websites built to date globally.

A project of this size had a lot of key strategic decisions that needed to be hashed out and made.

The decisions would fit under these key goals:

  • Quality – Bring the quality of the Hino® brand through every element of the website.
  • Functionality – In every opportunity where the brand and the user benefit, build out world-class functionality. This could inform items like the quality of the content management system, dealer locator tools, product comparison tools, and more.
  • Lead Generation – The website needed to act as a tool for generating more leads for the independent dealer base.

With these background goals in mind, the project began.

In terms of project management the geographic points were Mississauga, Woodstock, and London, Ontario.

Hino® Motors Canada’s head office is based in Mississauga, Ontario; they have a major factory in Woodstock, Ontario; and tbk Creative’s office is in London, Ontario

Throughout the project, we’d conduct major milestone meetings in Mississauga and most of the other meetings (usually occurring once a week) were conducted via digital communications like GoToMeetingTM.

Hino Mississauga Meeting
From left to right is Amanda Tadgell, Operations & Digital Manager, tbk Creative; Edith Gerodiaz, Marketing Manager, Hino® Motors Canada; Don Cortell, IT Manager, Hino® Motors Canada; Melissa McInerney, CEO & Chief Creative Officer, tbk Creative.

When building out the new Hino® website, here is what we settled on:

WordPress CMS

When tbk Creative started in 2010, we tested the three largest open source content management systems (WordPress, Drupal, and Joomla) at the time. We selected WordPress as our corporate content management system of choice, because during our review we found WordPress the easiest to use to update site content – the primary role of a content management system.

We picked our CMS well, because today, WordPress now powers nearly 30% of the world’s web (with 2% Drupal and 2.5% Joomla).

WordPress was also one of the first CMSs to build out an extremely robust visual editor component called Visual Composer. Visual Composer goes beyond the limitation of most CMSs (which rely typically on Microsoft Word looking WYSIWYG editors) and allows more drag and drop features that can be considered simple, all the way to more complex modules for marketing staff and other page authors.

The picture above is a module within Visual Composer that allows non-technical users to pick out the layout they wish for on a subpage they are building.
The picture above is a module within Visual Composer that allows non-technical users to pick out the layout they wish for on a subpage they are building.

Remarkably, even our front end developers (who are classically trained in languages like HTML, CSS, etc.) use Visual Composer and set up almost every subpage on the Hino® Motors website using this important WordPress component.

High-Fidelity Artwork Files

Historically, websites have been built in one of three ways:

  • Right in the browser – This is where a development team builds out the website with zero design files and uses HTML and CSS to build it right in the browser; this can decrease costs on a project but often will cause the look to lack design quality potential.
  • Two design files – A growing approach in the web world is to build out two design files – one main and one standard subpage; the subpage is to be re-used on all the other pages. This often gives more design flexibility then building in a browser, however, the content pages often look very stale in design as they are standardized across the website.
  • Pre-designed themes – Certain marketplace-like websites have been created where developers will build out larger themes that may at one point have started from a larger number of design files, and then these sites license out these themes. The downside we’ve found with pre-designed themes are a few things: i. You often don’t know firsthand the quality of the team who built it; ii. It’s often difficult to find the perfect design fit for a client (your working from a design that pre-exists vs. building the design to be the exact match for the client’s goals).

Over the years, tbk Creative has predominantly opted out of the three options above, but instead builds out a larger volume of custom design files that possess a strong blend of UI/UX decisions, imagery, verbiage, and graphic design. When these four components fuse together, we call these designs: 

High-Fidelity Artwork Files

On the Hino® project, we built out a total of 14 design files for desktop and 3 design files for mobile, totalling 17 high-fidelity artwork files in total.

Here are some examples:

Avant-garde UI/UX & CTA Focus

Throughout the website we pushed for two things to permeate for users: intuitive-yet-attractive UI/UX and a strong focus on providing opportunities for users to contact the company directly or to find dealers.

Left-Hand Sticky Navigation

The first UI/UX decision we made was around a simple left-hand sticky navigation menu. We purposefully kept this navigation simple so that it didn’t get too cluttered with options. The options were simple yet very important to Hino®:

  • Trucks – Their products
  • Owners – Information for those that own Hino® trucks
  • Parts & Services
  • Language Options – To appeal to both French and English users and dealers.
Picture1

Secondary Menu

 We provided other ancillary links in a pull-out menu that were marked with a sandwich icon (the sandwich icon appears on any device size).

Picture1

Dealer Call to Action (CTA)

On the truck pages, we created a sticky top menu navigation.

Picture1

Progressive Sub-menu

A neat breakthrough we had with the UI/UX was creating a sub-menu on all the truck pages that lets users flip between the different models.

Picture1

Better Truck Pages

The previous website kept the truck content all text, usually less than 300 words and above the fold. We decided to create a high-fidelity artwork file for the truck pages alone that would combine:

  • Heavy and relevant text content
  • Great imagery
  • Strong headlines

Melissa McInerney, our Chief Creative Officer has been building these types of page layouts for clients since first doing it with a previous North Star Windows & Doors website back in 2012 (which went on to win “Outstanding Manufacturing Website” at the Web Marketing Associations 2013 IAC Awards).

The fundamental idea behind them is that we infuse the three items together: heavy text, headlines, and imagery or icons. Here’s the reason for heavy text – Google likes heavy, relevant content and certain types of users like to read in-depth on the product they are considering.

For users that don’t like heavy content, you include the headlines (e.g., see below: “Bottom Line: Driver Comfort”). And for users that may not even spend much time reading headlines, you include lots of imagery.

Hino page

A Refined Focus on SEO

We put Search Engine Optimization at the start of the project and this discipline informed aspects of the web strategy and wireframes.

The result was, many areas of this new website were greatly enhanced to index more pages and do a better job with the given pages in major search engines like Google.

1

88-Point Checklist

We deployed an 88-point checklist that tbk Creative has designed over the years for best search engine optimization practices. This checklist is comprehensive and takes into consideration each key target page items like:

  • Market Research
  • Competitor Analysis
  • Website User Behaviour
  • Wireframing
  • Moz SEO Software Optimization Analysis
  • Keyword Mapping
  • Sitemap
  • 301 Redirects
  • URL Structure
  • Heading Structure
  • Keyword Use in Content
  • Title Tag Optimization
  • Alternative Text for Images

And more.

2

Greater Content

Within the product pages, we dramatically enhanced the amount of content. While the last website’s product pages often had under 200 words, each new truck page was over 600 words (at least a 200% increase in textual content).

3

Older Model Pages

 A unique breakthrough in web design for automobile manufacturers came out of this project (it may have occurred on another manufacturer site, but not to our current knowledge). With Hino®, like many vehicle manufacturers, a model name may stay the same but there may be variants year to year with the vehicles. Variants could include different parts, warranty information etc.

If someone owns a certain model from a past year, they may desire specific information to that exact year vs. just reading about the most recent year’s model. Keeping this in mind, tbk Creative developed an “Older Model” archive whereas the years go on, Hino® can archive past pages and keep them live. Past customers will then be able to access the desired year through the Hino® website or could get to it through major search engines like Google.

Screen Shot 2017-09-13 at 10.07.21 AM

Custom Truck Comparison Tool

To assist users in their journey of selecting the best Hino® truck to meet their needs, tbk Creative built a robust truck comparison tool that displays technical feature comparisons between their models, allows users to shuffle in and out of different models to compare, and seamlessly re-sizes based on the screen size.

The video below will show you this tool in action:

Robust Dealer Module

Hino operates as a manufacturer relying on independent dealers to sell their trucks. Potential and current customers will frequently go to the Hino® Motors Canada website to find a local dealer. While the previous website only displayed all the dealer information in text format on one page, we took the time to flush out the page, adding several new modules to it:

  • High-fidelity artwork file
High-Fidelity Artwork File
  • The user can quickly find a local dealer by selecting their province or typing in their postal code
Find a Dealer
  • Some dealers offer vehicles for sale only whereas others will also offer parts and services for customers; a feature was built that allowed a user to filter the dealers based on if they were looking to buy a truck or seeking parts and services.
Hino Filter
  • Individual dealer subpages were created. This allows for more information to be provided to the website user, and these pages will now be indexed in major search engines like Google (more SERP impressions and organic search traffic as a result) which will lead to a better experience for the marketplace when they are using Google to locate truck dealers or Hino® specifically.
Screen Shot 2017-10-25 at 2.05.21 PM

Hino operates as a manufacturer relying on independent dealers to sell their trucks. Potential and current customers will frequently go to the Hino® Motors Canada website to find a local dealer. While the previous website only displayed all the dealer information in text format on one page, we took the time to flush out the page, adding several new modules to it:

  • High-fidelity artwork file
High-Fidelity Artwork File
  • The user can quickly find a local dealer by selecting their province or typing in their postal code
Find a Dealer
  • Some dealers offer vehicles for sale only whereas others will also offer parts and services for customers; a feature was built that allowed a user to filter the dealers based on if they were looking to buy a truck or seeking parts and services.
Hino Filter
  • Individual dealer subpages were created. This allows for more information to be provided to the website user, and these pages will now be indexed in major search engines like Google (more SERP impressions and organic search traffic as a result) which will lead to a better experience for the marketplace when they are using Google to locate truck dealers or Hino® specifically.
Screen Shot 2017-10-25 at 2.05.21 PM

Hino Pro

At the time of this writing, tbk Creative is building a major back-end system for the company currently called Hino® Pro. Hino® Pro is a passwordprotected enterprise level dealer “truck builder”. The system will allow dealers across their network to login to the system, manage, track, and modify product orders, and be able to facilitate other necessary functions as a member of the valued Hino® business network. 

Hino Spec login

Hino® Pro will be built on WordPress as a content management system and includes:

1. HTML5/CSS3
2. Bootstrap
3. Angular.js
4. WordPress CMS
5. PHP
6. MySQL
7. Apache
8. Cloud Hosting

Hino® Pro is scheduled to go live November, 2017. 

On May 10, 2017, the Hino® Motors Canada website went live.

Hino at tbk Creative
From left to right is Don Cortell, IT Manager, Hino® Motors Canada; Melissa McInerney, CEO & Chief Creative Officer, tbk Creative; Andre Lefort, VP Technology, tbk Creative; Kora Lajoie, Associate Front End Developer

Don Cortell, the company’s IT Manager, paid tbk Creative a visit after the launch of the website.

The Results (May 21, 2017 to August 19, 2017) 

  • May 21, 2017 – August 19, 2017. 
  • Total Sessions: +11.1% 
  • Total Users: +17.22% 
  • Organic Search Traffic (sessions): +7.8%  
  • Organic Search Traffic (users): +12.5%  
  • Via event conversion and engagement tracking, features like the dealer webpages, form submissions, truck comparison tool, and more key features are being heavily used by website users.  

What we learned

  • Andre LeFort, tbk Creative

    When setting out to build an award winning, industry changing website I'm always curious to know what we'll learn...and learn we did. From the incredibly robust, flexible and adaptable truck comparison component (it is mobile ready, accessible and thoroughly tested for usability) to the intricacies of doing a multi-language website (in 3 languages!), our team honed our skills to make this website a truly industry leading website within the truck manufactuing sector.

  • Kora Lajoie, tbk Creative

    Some of my favourite projects are when we get to transform a company's old lackluster website into something new and incredible, Hino was a great example of this. It was fun to work through the technical challenges (making sure our more intricate components we're mobile friendly and accessible) with the rest of the team, and really work together to deliver this amazing product. I'm proud to have worked on this site, and glad we got to help thrust Hino into the future with this new modern and clean design.

  • Melissa McInerney, tbk Creative

    If you own a Hino truck, you know there’s nothing else quite like it. It was critical on this project to ensure the website told a bold story, one that demonstrates the quality, durability and comfort customers have come to expect from Hino. After research, we found that there were three key links that would drive revenue, and we chose to highlight these with a daring left-hand desktop navigation alongside a customized navigation for mobile users. The result was an easy-to-navigate, beautiful experience for mobile, tablet and desktop users alike, and a digital experience unlike anything in the light and medium-duty truck space fit for the top-quality experience Hino customers expect.

News Alert
News Alert