Redesigning a site for an interview
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
- Most Popular
- What's New
- Local Team
- Take a Class
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.