Welcome to Part Two: Wireframe to Website. In part one we discussed strategy and wireframing — now we are moving on to design and development.

Design

American-Auto-Version-OneAfter our initial meeting with American Auto Distributing, we received brand assets. The brand assets included logos, font styles and a color palette. Our game plan going into the project was to maintain brand colors and suggested fonts for headlines and text.

Most of our design time was spent making sure everything was aligned for brand consistency and conversion.

Conversion, conversion, conversion was the name of the game for this project. It was clear from the beginning that the conversion rate would dictate the success of the site.

WordPress Theme Selection
Due to budget constraints and an aggressive timeline, we opted to work with the Studiopress Genesis child theme – Executive Pro.

Development

The Executive Pro theme took us about 50% of the way for the design/development implementation for the site. To make the site reflect the strategy in the wireframe, we removed a couple of widget areas from the site and changed the widths of various containers.

After analyzing the position of the quote form, we decided that making it a center piece on the homepage and moving it from it’s originally planned position. This made the form more prominent and lets the visitors know subtly what’s expected of them.

Strategically, there is no navigation on the site with the exception in the footer. Marketing Press wanted to keep the user on the homepage (where all the paid traffic is being sent) as much as possible. This forces the user to submit information for a quote of use the secondary call to action (contact method) for more information.

Each page has it’s own individual image header. Marketing Press accomplished this by using a combination of text widgets and widget logic. For the backend, each widget is labeled by page in the widget title, but the title is suppressed by using the Remove Widget Titles plugin. (This plugin is great when you handoff a complex site to your client.)

All internal pages have content regarding American Auto Distributing and their services. The sidebars have a combination of quote form and nav menus. This allows the user to submit a quote from any page. Although we’re concentrating on conversion, we still need to pay close attention to the overall user experience. This is always a fine line to walk as a developer, but not impossible whatsoever.

The quote forms are powered by Gravity forms — possibly the best WordPress contact form available.

Responsive Design

All sites Marketing Press develop are mobile responsive. The mobile experience of the new AAD site allows for higher conversion rates from tablets and mobile phones. To enhance the small screen experience and increase mobile conversion, the home page main image does not display. This lets the mobile user get to the quote form uninterrupted.

American-Auto-Version-One

The first version of the site presented to AAD had the blue background. After review, we decided the blue gave the site too cold of a feel, so we made some changes, opted for the branded red and we were approved to launch.