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