Product Design
Redesigning The Zebra's Carrier Cards for a More Intuitive and Developer-Friendly Experience
Optimized the structure and usability of carrier cards to improve accessibility for both users and internal teams.
Overview
The Zebra's carrier cards are pivotal UI elements that present insurance options and essential details to users. Over time, these cards became cluttered and inconsistent, complicating the comparison process for users and increasing maintenance challenges for engineers. In 2024, I led the redesign of these carrier cards to develop a cohesive, flexible system that enhances user experience and streamlines development.
Role
As the Lead Designer, I spearheaded the end-to-end redesign process. My responsibilities included conducting a comprehensive audit of existing designs, collaborating with product managers and engineers, creating and iterating on design prototypes, and ensuring seamless integration into The Zebra's platform.
Challenge
Users seeking insurance need to compare quotes swiftly and confidently. However, the existing carrier cards were cluttered, visually inconsistent, and difficult to navigate due to fragmented designs across different insurance verticals. This disjointed interface negatively impacted user engagement and conversion rates. Additionally, engineers faced challenges with minimal reusability and complex maintenance, leading to slower development cycles and limited A/B testing capabilities.
Solution
To address these challenges, I implemented a comprehensive redesign focusing on usability, clarity, and scalability:
Comprehensive Audit: Collaborated with product managers to map out all existing carrier card variants, identifying essential elements and redundancies.
Collaborative Ideation: Developed rough design concepts and conducted feedback sessions to uncover constraints and additional use cases, fostering alignment across teams.
Iterative Design: Refined designs through multiple iterations, focusing on layouts that effectively presented pricing, coverage details, and call-to-action placements.
Scalable Template: Established a universal carrier card template adaptable across various insurance types, user states, and devices, including future features like policy management within a wallet-style interface.
Detailed Handoff: Provided engineering with a comprehensive handoff package, including component breakdowns, variant libraries, and design system updates to ensure seamless implementation.
The redesigned carrier cards resulted in a unified, user-friendly interface that streamlined the comparison process for users and enhanced development efficiency. This project reinforced The Zebra's commitment to delivering a seamless and intuitive insurance shopping experience.
