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
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.
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.
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.