Pricing Tables – Desktop

In Bundles Comparison on Mobile, we took a mobile-first approach to redesign the DriversEd.com’s Bundles Comparison landing page. Now, we implement similar design principals to the desktop version. This includes: replacing the stark blue hero area with an image, cleaning up content, featuring the top selling bundle, downplaying drastic price differences between the bundles, and highlighting the Call-to-Action button. Reference to previous design.

New Design

Overall Design Changes

Beginning at the top of the page, the same hero image used in mobile design is applied at full width to the desktop layout. Header content is center aligned. Layers of text from the original design is now reduced to just 3 lines for easy scanning. White space surrounds the layout to help visitors focus on the content.

Displaying Bundles

Bundles are now clearly displayed across with only the Smart Bundle being highlighted with a darker shade of blue. Features from each bundle are simplified and listed side by side for easy comparison. “More Details” link opens up as a popover instead of an accordion expanding all 3 bundles at the same time. Each link with additional information opens up a popup.

Consistent CTA Location

The Call-to-Action buttons are moved to the top of the bundles, underneath the pricing elements. The neon green buttons stand out from the rest of the design. Visitors will know where to click when they are ready.

New Design Wireframe

Details of “Return Policy” Popover

“Return Policy” Popover Wireframe

Function of “More Details” Popover

“More Details” Popover Wireframe

Details of Special Feature Popovers

Special Feature Popovers Wireframe

In-Car Availability Search Functionality

In-Car Availability Search Wireframes