In (Pricing Comparison on Mobile, we took a mobile-first approach to redesign DriversEd.com’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.
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.
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.