Pricing Comparison on Desktop

In (Pricing Comparison on Mobile, we took a mobile-first approach to redesign’s Bundles Comparison landing page. Now, we implement similar design principles 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.

View previous design

Mockup and Wireframe of New Design

Return Policy Popover

More Detail Popover

Special Feature Popovers

Mandated Requirements Popover

In-Car Availability Search

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 are now simplified to just 3 simple lines for easy scanning. White space surrounds the layout to help visitors focus on the content.

Displaying Bundles

Each bundle is now clearly displayed across the layout 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. The “More Details” link opens up like a popover instead of expanding all the content from the 3 bundles at the same time. To be consistent, each link with additional information will be displayed as a popover.

Consistent CTA Location

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