Redesigning a site for an interview

October 28, 2016

Hunter Engineering, based in St. Louis, MO is a company that, “designs, manufactures and sells a wide range of passenger car and truck service equipment.” They became an established force during a time when print was king, and the web was just a young after-thought in the marketing scheme of things.

Now, they are looking to up-the-ante and provide an online experience that is up-to-date, and reaches their lofty online goals. With that said, I decided to create a mockup of what the site could look like, and I presented this during my interview process. *gasp* Bold.

What I did first

First, I organized the information that was currently on the website into buckets. Doing this helped me see what the entire home page included so that I could better understanding what items were important, and what items could be redistributed. These buckets included the following:

  • Top Bar Menu
  • Logo
  • Menu
  • Slider
  • Welcome
  • Most Popular
  • What's New
  • Local Team
  • Take a Class
  • Footer

The above buckets were sections of information organized in a manner that could be more easily digestible. My initial thoughts were that the original design was too cramped, and I received feedback from an insider that the company didn’t like the amount of buttons the site had (I agreed).

Using sections and cards to combine important information, and tackle the information hierarchy issue from a mobile first approach would greatly improve the web design. Therefore, these two points were my first design items to attack.

With that in mind, I decided to start from the top , literally— decide on the font-family, and design the navigation.

Font of choice

There were a few factors when it came to the font: I needed to find a font that was free (it’s a free mockup, c’mon), contained a good number of font weights, and that was clean, but sturdy enough to be legible on mobile devices. Those restraints lead me to use Google’s Roboto font.

The Roboto font is a new set of sans-serif font created by Google for the Android 4.0 Ice-Cream Sandwich platform. It is a nice and elegant font that renders well on high resolution screens such as your Android phones and tablets. It contains the full set of font weight (includes regular, bold, italic, and bold italic weights) and is used mainly for system apps and all Google apps.

With a solid font base, I was now ready to tackle the meat-and-potatoes.

My goal was to make the navigation more simple, but not to have the actions become so vanilla that a person couldn’t decipher important items.

Making the navigation more simple

In the original design, there are a total of three navigation bars at the top of the site, and the hierarchy between those three bars are slightly blurred as the fonts aren’t too different in size. My goal was to make the navigation more simple, but not to have the actions become so vanilla that a person couldn’t decipher important items.

Therefore, to make the navigation more simple, I reduced it to two navigation bars (main and sub nav), with differentiating font sizes, contrast, and font weight.

Removing the buttons

Next, I wanted to tackle the number of buttons throughout the home page. The excessive number of buttons made it difficult for users to differentiate which Call To Action items (CTA) were most important.

As you may have noticed, I completely removed the buttons from the sub navigation, and then decided to only have buttons available for important CTAs within sections. This design decision would help reduce the number of buttons, and provide some information hierarchy.

 

And, within important sections where the CTA won’t necessarily lead to a quick return on investment — I placed the information within a card that contained an available text link, instead of a button.

Huge Improvement!

The original layout made it difficult to disseminate what information was important. Therefore, I placed the important items into sections.

With the new mockup I increased the white space between sections for the benefit of increased legibility. Now, the sections would increase attention, and have higher comprehension rates.