News Alert
News Alert
Skip to content
Logo

Building a World-Class Automobile Manufacturing Website

Hino Motors Canada, Ltd., a Toyota Group Company, produces and distributes light and medium duty commercial trucks in Canada with corporate headquarters in Mississauga, Ontario, and assembly operations in Woodstock, Ontario.

Service is provided through Hino’s extensive coast-to-coast dealership network and is backed by their industry leading customer care protection program.

It Was Time

As a premiere truck manufacturer and distributor, Hino® already had many parts of its business firing on all cylinders, and wished to modernize their online presence and provide an elegant digital solution to consumers and their dealer network.

Some of the limitations of the previous website:

1

Design – The previous website had an easy layout for users to find the models, but could be refreshed to match modern UI/UX standards.

Hino old website

2

Content Management System (CMS) – The previous CMS platform was difficult to work with compared to the user friendly solutions that are available today.

3

Dealer Locator – Hino’s dealers were listed on a page vs. a robust search engine that would allow users to locate dealers based on area codes or geo-location features.

4

Search Engine Optimization (SEO) – As one of the market leader brands, Hino® had good search ranking overall, however, a website re-design would provide an opportunity to look for ways to improve SEO performance even further.

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.

Our strategy was to build out these products to assist with lead generation, advance the brand’s key strategic messages and to improve our ranking on Google.

The Project Was On

Hino’s marketing team, IT team, and tbk Creative set out to build a website that would be an industry leader and provide Hino® functional tools to better serve their marketplace such as effectively constructing useful modules around how users find dealers, dealer parts ordering, truck product comparing, and more.

To accomplish the foregoing, a number of key strategic decisions were to be made.

The decisions would fit under these key goals:

  • Quality –Bring the quality of the Hino® brand through every element of the website.
  • Functionality – When building out functional tools such as the dealer locator, product comparison, make the functionality seamless, practical, and intuitive.
  • Lead Generation –The website was to further act as a tool for generating more leads for the independent dealer base.

With these background goals in mind, the project began.

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.

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 an assembly plant in Woodstock, Ontario; and tbk Creative’s office is in London, Ontario.

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

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.

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.

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 – Quick navigation to all of the truck sizes, GVWR options and more for each Hino® truck.
  • Owners – Information for those that own Hino® trucks.
  • Parts & Services – For users who need quick navigation to specific parts or services for their Hino® trucks.
  • Language Options – To appeal to both French and English users and dealers.

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).

Dealer Call to Action (CTA)

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

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.

Enhanced 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 2012, first doing it with a previous North Star Windows & Doors (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.

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.

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, a goal was to reach over 600 words per page of textual content to support the pages in their rankings on major search engines like Google. The Hino® team did a great job producing and providing us content for these pages; the result was a dramatic increase in textual content that would do well on search engines but also serve their customer and dealer base with information they may be looking for.

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.

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 distributor 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
  • 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.

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

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
tbk Creative Named Top "Web Design" and "Online Marketing" Provider