Company
Vertafore
Business Model
B2B SaaS
Industry
InsurTech
Objective
To create a unified design system, Alloy, that would drive consistency, scalability, and collaboration across Vertafore's suite of products in the insurance technology space. Empower designers and engineer with a cohesive, accessible library of components and guidelines, enabling faster development and ensuring a consistent user experience.
My Role
I worked as a contributing product designer, in collaboration with other designers and our lead front-end developer.
Typography
h1
Font Family: "MarkPro"
Font Size: 2rem
Font Weight: Bold
Color: #364043
h2
Font Family: "MarkPro"
Font Size: 1.375rem
Font Weight: Bold
Color: #505A5D
h3
Font Family: "Source Sans"
Font Size: 1.25rem
Font Weight: 600
Color: #364043
h4
Font Family: "MarkPro"
Font Size: 1rem
Font Weight: Bold
Color: #505A5D
h5
Font Family: "Source Sans 3"
Font Size: 1rem
Font Weight: 600
Color: #364043
SUBHEADER
Font Family: "Source Sans 3"
Font Size: 1rem
Font Weight: 400
Color: #838D90
body
Font Family: "Source Sans 3"
Font Size: 1rem
Font Weight: 400
Color: #364043
bodysm
Font Family: "Source Sans 3"
Font Size: 0.875rem
Font Weight: 400
Color: #364043
bodytiny
Font Family: "Source Sans 3"
Font Size: 0.75rem
Font Weight: 400
Color: #364043
cta
Font Family: "Source Sans 3"
Font Size: 1rem
Font Weight: 600
Color: #0167FF
ctasm
Font Family: "Source Sans 3"
Font Size: 0.875rem
Font Weight: 600
Color: #0167FF
disclaimer
Font Family: "Source Sans 3"
Font Size: 0.875rem
Font Weight: 400
Color: #364043
Brand Colors
Grayscale Colors
System Colors
Buttons
Primary Button
Secondary Button
Tertiary Button
Disabled Button
Key Contributions
Led efforts to define component usage guidelines and ensure that components aligned with user and business needs
Transitioned design system from Sketch, to Adobe XD, and finally to Figma.
Worked closely with lead front-end engineer to maintain components in Storybook.
Integrated the design system into new products and adapted it for legacy products, to create a unified look and feel across all products.
Led and participated in critique sessions, to optimize, add, and remove components on a regular basis.
Challenges
Vertafore’s portfolio of products lacked a unified design language, leading to inconsistent experiences, higher maintenance costs, and development delays.
We Addressed:
Scalability: Supporting a range of applications with differing functionalities.
Consistency: Establishing a consistent look and feel across products while enabling flexibility for unique product needs.
Efficiency: Reducing redundancy in design and development to speed up the product lifecycle.
Discovery and Research
Conducted interviews and workshops with designers, developers to understand pain points related to UI consistency and efficiency.
Analyzed product usage data to identify core patterns and design requirements essential for the most common use cases.
Studied similar industry design systems to benchmark best practices and gather insights into structure, organization, and documentation.
Design & Development
Defining Component Standards
Worked with the team to establish guidelines for colors, typography, spacing, and iconography to ensure a cohesive foundation.
Component Creation and Documentation
Collaborated with the engineering team to implement components in Storybook, where each element was documented with clear usage guidelines, best practices, and code snippets for developers.
The Impact
Increased Consistency: Alloy provided a “single source of truth” for design.
Faster Development: Developers could easily access pre-built components.
Improved Collaboration: Designers and engineers shared a common language, improving communication and streamlining product development.
UX Improvement: The unified component library made the product experience more intuitive and recognizable, improving user satisfaction and retention.
Challenges and Learnings
Flexibility: Balancing consistency with the flexibility needed by different products required careful consideration, especially when dealing with unique workflows and legacy products.
Design Tokens: Introducing design tokens to streamline theme changes and increase scalability across products.
Continued Collaboration: Ongoing efforts to gather feedback and maintain alignment with the engineering and product teams, ensuring Alloy evolves with Vertafore’s business needs.
Maintaining Engagement: Keeping all stakeholders aligned and engaged was critical to the system’s success. Regular check-ins and showcases helped maintain momentum and adoption.
Conclusion
The Alloy Design System became a cornerstone for Vertafore, empowering a more efficient product experience through a shared design language.
Alloy not only strengthened Vertafore’s design consistency but also demonstrated the impact of structured design practices in creating meaningful user experiences across a complex product ecosystem.