Overview
Vantage DX originally relied on static mockups created in Adobe Illustrator, which made iteration slow and communication unclear. As the product expanded into Microsoft Teams, CQD, and MSP tooling, a modern, reusable design foundation became essential for consistent UI and rapid prototyping.
The Figma Design Library project was an internal initiative to modernize Martello’s design workflow and streamline how UI patterns were created, shared, and prototyped. As the sole Product Designer, I built a full component library for Vantage DX from scratch, enabling faster iteration, clearer communication, and high-fidelity prototyping for new features such as the MSP customer management system.
My contribution
As the Senior Product Designer and Product Owner, I created a full Figma Design Library, developed reusable UI components, and introduced prototype-driven workflows to accelerate feature development. I also built interactive prototypes for the MSP customer management feature, enabling early stakeholder feedback and validating critical user flows before development.
The team
1 × Product Owner & Designer (me)
1 × Product Manager
10 × Engineers
Year
Early 2025 - Present
Process
Learning Figma & establishing the foundation
Coming from years of Illustrator, my first challenge was climbing the Figma learning curve while still delivering features. I dedicated time to formal training, completed a full Udemy program, and transitioned our design workflow into Figma with a modern mindset: components, constraints, autolayout, variants, and reusable patterns.
Building the design library from scratch
Once grounded in Figma, I designed an internal UI library containing all foundational components used across Vantage DX: navigation patterns, form controls, tables, dialogs, colors, spacing scales, typography, and icon sets. This library was purpose-built for prototyping future VDX features and helped standardize interactions across multiple legacy codebases (iQ, Gizmo, and network diagnostics).
Prototyping the MSP customer management experience
Figma’s prototyping features allowed me to model complex MSP workflows such as customer onboarding, configuration, and multi-tenant management. These prototypes made it easy for engineers to grasp full user journeys, significantly reducing miscommunication during implementation.
I also used these prototypes to demo early concepts to real MSP partners, validating our assumptions long before coding began. Their excitement and alignment confirmed we were solving the right problems.
Driving collaboration & velocity
With Figma in place, collaboration across engineering and product improved dramatically. Workflows that previously required long explanations became intuitive through visual interaction. The team quickly adopted the system, and the design library became the foundation for delivering MSP features faster and more consistently.
Outcome
The Figma Design Library transformed how Vantage DX features were designed, reviewed, and implemented. Engineers gained clarity through interactive prototypes, product managers could validate ideas earlier, and MSP partners confirmed that the new customer management concepts matched their real operational needs. The design system continues to serve as the foundation for future VDX UX improvements, accelerating delivery and improving consistency across the platform.
