This post 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 page design was visitors were overwhelmed by the abundance of information and had difficulty finding their products. There were too many services to choose from and the heavy content on the body made the page hard to scan. This problem was amplified on smaller screens causing a high bounce rate.
The new version of this page will guide visitors to quickly narrow down their products. The body content is reformatted for better legibility and still contains the original SEO search terms.
With less 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, then using the native picker will be appropriate.
Other smaller details are applied to optimize mobile view. The opacity of the hero image is lowered to 80% to make content more legible. Headlines are now center aligned. The “Features and Benefits” icons are now stacked into 2 rows.
The “Popular Products” section now stacks 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 more 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 appears after the content. Having graphics placed in between SEO content is visually less overwhelming.
Similar to the layout for tablet device, displaying 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.