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.
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:
Design – The previous website had an easy layout for users to find the models, but could be refreshed to match modern UI/UX standards.
Content Management System (CMS) – The previous CMS platform was difficult to work with compared to the user friendly solutions that are available today.
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.
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.
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:
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 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:
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.
Historically, websites have been built in one of three ways:
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:
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.
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®:
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).
On the truck pages, we created a sticky top menu navigation.
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.
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:
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.
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.
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:
And more.
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.
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.
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:
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:
Hino Motors Canada has a network of dealers across Canada that sell their trucks and on this project, I have learned the importance of strong digital strategy for the corporate website to assist with the sales of their trucks. The truck pages are where the users are going to and on these pages, we gave them everything they needed to learn about the Hino trucks. From the truck features, downloading the specifications sheets to comparing their trucks side by side, then pushing them right to their local dealer. We've seen great success in pushing more traffic to their dealers and that traffic has consumed content on the website. Everywhere I go now, I now notice all of the Hino Trucks driving around, I am very proud to have been the Account Manager and Digital Strategist on this account.
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.
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.
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.