Hyundai Construction

  • Role
    UI, UX
  • Client
    Hyundai CEA
  • Industry
    Heavy Equipment
  • Category
  • Year
    2016 (2.5 mo)

Hyundai Construction Equipment Americas needed to increase their presence in the heavy equipment industry in an effort to take over more market share. They lacked an effective communication outlet which meant that both functional and emotional components had to be addressed to produce a new website that would position the brand as a top contender for construction and forklift equipment.

  1. Take the burden off the end user when looking for info.

  2. Create an emotional connection that visitors can relate to.

  3. Provide a resource to aid dealers and sales teams.

  4. Move from supplier-focus to value and benefit-focus.

  5. Reinforce the brands' stability, reliability and value.

Meet the Users

Customers: Purchasers
  • Name:

    Jason Wales

  • Age:


  • Occupation:

    Construction Business Owner

“I want equipment that proves its value and is backed by a reputable company and warranty. I need to feel confident that the equipment I’m purchasing will represent my business well.”
Customers: Influencers
  • Name:

    Clarence McMahon

  • Age:


  • Occupation:

    Heavy Equipment Operator

“I want to feel like I know what I’m doing. Once you win my loyalty, I will fight to keep you around, but I need to see it to believe it. How will you make my job easier?”
Dealers: Sales Managers/Owners
  • Name:

    Mike Roberts

  • Age:


  • Occupation:

    Sales Manager

“I believe in the Hyundai Construction Equipment brand. The value it provides customers is unmatchable, but I need the tools to help me communicate that to my customers.”

Checking Out The Competition

While conducting this research, Volvo and Toyota had recently redesigned their website, with Caterpillar on the verge of doing so as well. This emphasized the need for a modernized experience for buyers in the market. While Komatsu’s website wasn’t visually appealing, the user experience was seamless enough for any novice to find what they needed.

The biggest differentiator lied between customer-centric versus product-focused. We were able to pinpoint areas where Hyundai could improve their self-image as customer centric.

New Site Architecture Overview

Extracting Brand Attributes

At the time, I only knew “Hyundai” as a car dealership. This project revealed the many more industries in which they operate, which in turn, led me to focus on their logo mark.

Similar to their multi-layered operations, their mark followed suit. I then started to think of ways I could implement this idea into the experience of the site.

Dividing One Brand into Two

Without creating two sites, the client wanted separate points of entry for their construction equipment versus their forklifts, as they represent two different markets.. I used the layering element to create an interactive experience that would capture the attention of visitors on their initial visit.

Building a Visual Nav

This is my initial exploration of a visual navigation system where I tried again to implement the layering attribute in an effort to alleviate the layout problems.

We opted for the top navigation, which created the challenge of the amount of product info being displayed. We decided to have all the information fully visible only for the currently selected tab. 

Challenge 1

Everything in One Place

To lessen the burden for the user, each product page header is a focal point for the most relevant information related to the viewed product. Using interaction design, I could compile 4 layers of information into this hub—allowing users to quickly find what they are looking for without excessive scrolling. This also created the opportunity to capitalize on the remaining screen real estate.

Challenge 2

Creating An Emotional Connection

Like many of our emotional attachments to our cars and trucks, so is the connection between operators and their machines. Our research yielded that the “Purchasers” would opt for the equipment suggested by the “Operators”. As a result, I wanted to push a relatable human connection between the brand and its’ audience. I did this using photography and the headline copy to invoke an emotional response. Other design considerations involved applying brand colors and typography that represented stability and power with a clean aesthetic that made surfing content easy.

Challenge 3 & 4

Share Beyond Product Specs

To move from supplier-focused to value/benefit-focused, PDF brochures and specs proved insufficient. We needed to “show off” the equipment while being educational and providing resources to aid sales teams.

Presenting media such as videos to show machinery at work was vital. With so many brands on the market, features of the Hyundai Construction Equipment were also a big differentiator - instead of simply writing about them, I wanted to boost their impact with the use of visuals where possible.

Challenge 5

Telling the HHI Story

The customer wanted HCE to tell more of their story. While Hyundai Construction Equipment may be perceived to be a tiny company, there's more to the story behind Hyundai Heavy Industries(HHI).

In addition to securing the popular vote for having the best warranty programs in the industry, HHI boasts of a wide portfolio of large ships, oil rigs, industrial plants and more. Telling this story would help to reassure customers that Hyundai CE is among the strongest players and is fully capable of providing the most reliable machinery and equipment.

Designed Responsively

Prior to the redesign, the site was not responsive. Although we scaled down some functionality to account for load time, it was still difficult to consume content without extensive scrolling. I saw this as an opportunity to take advantage of horizontal scrolling and sub menus to make the experience feel more native to tablet and mobile devices.

Style Guide

Created for hand-off to development.

scroll across to see more >