Pricing Comparison on Mobile

The DriversEd.com Bundles landing page showcases the different online driver’s educational packages offered by the company. The existing design can be optimized to achieve better performance by addressing the following problems: the majority of customers are ignoring the higher price bundles; the “Expert” plan is especially difficult to understand with a drastic price difference, and the Call-to-action button is buried underneath the content.

This project is broken down into 2 phases. This post will focus on mobile improvements.

Prototype of New Design

Overall Design Changes

The new design is professional and easy to understand. An appealing hero image replaces the stark blue background in the original layout. Showing visitors an image of someone driving relates to their ultimate goal of getting on the road.

The main headline is simplified to send a clearer message. Only important information is available. This includes: the course is licensed and approved by State, the title of the course, age it’s for, type of devices it works on, and the return policy. The same is applied to the rest of the page. Less marketing content and more actual information so visitors can scan quickly.

Displaying Bundles

To improve the mobile experience, tabs are used to display the bundles. Users no longer have to scroll down to discover there are 3 different types of offers. Instead, they can simply click on each tab to compare the details. Tabs also allow marketing to select a plan to be featured. Since the “Smart” bundle is the most profitable, it should be seen first.

The “Expert” plan now offers online drivers ed for free when visitors sign up for in-car driving lessons. If visitors are ignoring the higher price,  “free” will draw to learn that they are only paying for the portion of the in-car lesson of the package.

Consistent CTA Location

In the original design, the Call-To-Action button is pushed all the way to the bottom when “Show Details” is toggled. It should be more prominent and consistent. By moving it higher (below pricing), visitors are being prepared to take action. When they are ready to purchase, they can click forward to the next step.

If visitors wish to learn more about each bundle, they can click on “More Details”. Replacing the expanded text with a popover will help them focus on the information. There will be no CTA inside the popover because its purpose is to educate customers and not to push sales. When they exit the popover, the CTA is at the same location where they have last seen it.

While “Sign Up” on the CTA is direct, it’s boring to use on every button. An action-driven tone like “Get Smart Bundle” would encourage customers to respond.

Full Mockup and Wireframe


de-ca-bundle-wireframes

Smart Bundle


de-ca-bundle-wireframes-smart

Basic and Expert Bundle

de-ca-bundle-mockup-basic-expert
de-ca-bundle-wireframes-basic-expert