Homepage Redesign – Mobile


This is Part 2 of iDriveSafely Landing Page Optimization, which focuses on 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 narrow down their products quickly. 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 is triggered.

Other design details are applied to optimize the 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. 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 straightforward 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. The 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 a tablet device, displaying only 2 current posts is appropriate.

The mobile layout of iDriveSafely is now optimized to be more efficient in helping customers 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.