Landing Page Optimization – Mobile

iDriveSafely.com

This is Part 2 of iDriveSafely Landing Page Optimization which focuses on the mobile redesign. Please view desktop and tablet designs: here.

To recap, the issue with the original landing page is visitors were overwhelmed by the abundance of information and had difficulty finding their products. There are too many services to choose from and the heavy content on the body made the page hard to scan. This problem is amplified on smaller screens causing a high bounce rate.

New Design Mockup


The new version of this page guides visitors to quickly narrow down their products. The body content is reformatted for better legibility and still contains the original SEO search terms.

Product Selector


With less screen real estate, visitors have to spend more time scrolling. Presenting them with the “Search Our Products” dropdown at the very beginning, will lead them to self-select the service they’re looking for. The product finder works the same way as the desktop version: the “Find your State” field only appears when visitors choose a product. If they are using an iOS device, the picker will be triggered.

Other design details are applied to optimize mobile view. The opacity of the hero image is lowered to 80% to make content more legible. Headlines are center aligned. The “Features and Benefits” icons are stacked into 2 rows.

Popular Products


The “Popular Products” section is moved into a single product row, displaying the most popular items first. When visitors click on “Learn More”, the State selector popover helps funneling them to the correct product page.

Show All Products


Visitors can choose to view a list of the available products and services by toggling “Show all products”. Although this section can be a bit long in terms of scrolling, it’s straight forward to show them the entire list without having to “load more”.

Selling Points and Featured Product

The selling points section becomes one row with an image on top of the content. Featured product stacks the same way except the image appeared after the content. Having graphics placed in between SEO content is visually less overwhelming.

Recommended Reading


Similar to the layout for tablet device, displaying only 2 current posts is appropriate.

The mobile layout of iDriveSafely is now optimized to be more efficient in helping customers to find their products. The overall page is user friendly and professional in terms of organization and whitespace. The content is formatted for easy scanning while obtaining SEO requirements. The graphics add a touch of fun and completes the brand experience.