If you’re into auto restoration or know someone in the business, there’s a good chance you’ve heard of The Eastwood Company. I know them very well because I managed their creative department and brand development for 5 years. The brand is big, bold and unafraid, starting with their tagline Do The Job Right. They have been developing and selling innovative restoration products online for DIY auto enthusiasts like Chassis Black for over 35 years, and expanding retail operations to a town near you.

Chassis Black is one of the first landing pages I had designed and developed about 4 years ago, and after going through a few back end Magento updates, it’s been shaken up by some code instability. The desktop version needed the most help—padding and margins are slightly off, and the CSS div block commands are not floating as designed. The mobile version was actually not too bad, although it lacked some necessary user interface(UI) components. With all of this in consideration, I decided to take another shot at redeveloping the design and user interface. Here is a screenshot of the live desktop version as it stands today:

originaldesigned_eastwoodchassisblack_pg

Magento can be finicky with css stylesheets, as it tends to cause unexpected results in different browsers on different operating systems, particularly with margin and padding. Taking that into consideration, I decided to design the page as it’s own experience separate from the eCommerce anchor store. This allows me to build in a more stable, controlled environment with the freedom to create my desired user experience while remaining tied into the existing Magento store.

The overall design is simple and contemporary, focusing exclusively on the product line—this includes an animated product slider, convenient selectable tabbed product specifications with videos, star-rated customer reviews (these are FPOs), and a product comparison chart. Note: It’s vitally important to define the differences of each Chassis Black product for these buyers, as there are clear differences in price and protection. If your Designer and/or Marketing Manager does not understand the product you are marketing, you will be sure to destroy any chance of having a good first user experience! Customers notice these details, especially after purchase when it’s too late and the negative reviews start rolling in.

The newly designed user experience starts with the main top navigation bar which is “pinned” to the top browser, and remains constant when scrolling in the desktop version. This is the main navigation, which I have designed to connect to other Eastwood product landing page that will be redeveloped in the near future. It’s not necessarily something I would have done for a live version, but works for my portfolio audience accessibility.

There is plenty of product information clearly accessible through the tabbed product selector. I also developed a unique data-controlled product comparison chart—By simply making a change to the original Excel document, I can easily update the chart as you would using xml. Look, it’s not ‘sexy’ and visibly noticeable on the front end, but it’s extremely powerful to anyone looking to make a quick update or addition from the backend.

Of course, it’s responsive designed for phone, tablet and desktop as shown in the example above. The smartphone version is especially unique because I’ve incorporated a menu of thumb-sized buttons to navigate from section to section with ease. You can see this in the example below:

I hope you enjoyed this presentation and welcome feedback or questions. The link to this landing page is hidden from public viewing, as it’s not a sanctioned product page and would not want to confuse customers or misrepresent Eastwood branded products without their permission. This is my re-interpretation of a landing page that I had developed as an employee of Eastwood and is being used explicitly for portfolio use only. If you would like to see the page in action, please send me an InMail message request through LinkedIn.

Stay tuned…my next redevelopment project will be the Eastwood Tri-Flow Radiator Landing page.

Jeff Behrenhauser is an accomplished Creative Director with over 15 years of experience in designing and developing email and web creative marketing strategies. He has held lead creative rolls in agencies and in-house marketing departments with successes in the Pharmaceuticals, Financial Services, Healthcare, Automotive, Energy, Technology, Communications, and Retail Services industries. Click here to find out more about how Jeff’s accomplishments in marketing and advertising can help your business.

 

Leave a comment