iDriveSafely Landing Page Part 1

There are areas the homepage can improve to increase conversion. Some of the main issues include: too many product offerings, the lack of hierarchy, and heavy SEO content flooding the page. Visitors leave after having a difficult time finding their product.

The objective of this project is to create a new page design which tackles these problems. The optimized page will lead customers to take action right away. The body content is reformatted for quick scanning. And, the overall page will be clean and professional to reflect the iDriveSafely brand.

In this post, I will mostly talk about design elements for desktop and tablet layouts. iDriveSafely Landing Page Optimization Part 2 will focus on mobile design.

Home Page on Desktop

The new layout is reorganized into 5 block-style sections for easier information absorption and fluidity. Here’s a breakdown of each section:

Product Finder

Placing a “Product Finder” element at the top of the page (above the fold) will direct visitors to take action when they arrive. It funnels them to the appropriate page by letting them self-select the product they’re looking for and the State they are from.

To demonstrate credibility, the TrustPilot ratings widget is implemented underneath the action area. The iconic features and benefits also add more customer confidence.

Popular Products

SEO content is reformatted into more legible product titles and short descriptions. With a generous amount of white space, each item is easy to understand. Visitors can browse through a list of services by toggling “Show All Products” and “Show Less Products”. This is a more user friendly way to implement SEO keywords without displaying a sea of text.

The stacking order of products.

Selling Points and Featured Product

Next part of the page houses the rest of SEO content. Instead of the wordiness of the previous design (view here), content is broken down into bullet points and shortened paragraphs for quick scanning.

Recommended Reading

Finally, the last part of the page adds credibility to the iDriveSafely brand by recommending visitors to acknowledge the company’s active leadership role though their blog.

Tablet Layout

The tablet layout of this page mostly functions the same way as desktop except some elements are stacked into 2 columns.

Product Finder

The background image repositioned closer to content.

Popular Products

State selector popover is also consistent with desktop.

The 3 column layout now becomes 2.

View All Products

View all product stacks in the same model as popular products.

Selling Points and Featured Product

This portion of the page becomes single column. The graphic of the selling points block reorders to the top of content while the graphic of featured product is at the bottom.

Recommended Reading

Finally, this section is now 2 columns to stay consistent with the popular products layout. Only two most recent posts are needed to serve it’s purpose.

Please continue to iDriveSafely Landing Page Optimization Part 2 for mobile design details.