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 issues with the original page design are that visitors seem to get overwhelmed by the abundance of information and have difficulty finding their product. There are too many services to choose from and the heavy content on the body makes the page hard to scan. These problems are 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 so it’s easier to glance but at the same time retains the original SEO search terms.
Landing Page on Mobile
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 stacks into one row with the image on top of the content. Featured product stacks the same way except the image appears after the content. Having graphics in this layout breaks the content(SEO) apart for a less overwhelming experience.
Like the layout for tablet, 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 more user friendly and professional in terms of organization and whitespace. The content is formatted for scanning while obtaining SEO requirements. The graphics add a touch of fun and completes the brand experience.