sureUI Design System
Strategic Operationalization of Design at Scale
Date: 2021 - 2026
Role: Director of Design
Role: Director of Design
Executive Summary
Problem: In 2021, Sureify’s product ecosystem lacked a unified design framework, resulting in massive design debt, fragmented user experiences across B2B/B2C, and significant engineering rework.
Action: I spearheaded the creation of sureUI, a holistic design and code system. I formed a cross-functional task force, transitioned the organization from Sketch to Figma, and negotiated the reprioritization of the project in 2024, after the project was deprioritized in 2023 due to a diminished economic outlook.
Action: I spearheaded the creation of sureUI, a holistic design and code system. I formed a cross-functional task force, transitioned the organization from Sketch to Figma, and negotiated the reprioritization of the project in 2024, after the project was deprioritized in 2023 due to a diminished economic outlook.
Results
• Efficiency: >25% improvement in product design turnaround time; whitelabeling speed doubled.
• Engineering Impact: 25%–50% reduction in UI development time.
• Quality Control: Increased design-to-code parity from <50% to >75% consistency.
• Engineering Impact: 25%–50% reduction in UI development time.
• Quality Control: Increased design-to-code parity from <50% to >75% consistency.
Context & Strategic Objective
When I joined, Sureify’s rapid growth had outpaced its infrastructure. Designers were building "bespoke" interactions from scratch, leading to intra-product discrepancies and mobile web capabilities that were unintentionally degraded compared to desktop web.
Business Case: I authored and socialized a comprehensive whitepaper for the Executive Leadership Team. Rather than focusing on "aesthetics," I framed the design system as a financial lever. I quantified the time lost to QA and rework and highlighted how the lack of a shared glossary was slowing down both the Sales and Customer Success teams in their conversations with perspectives and whitelabeling work with customers respectively.
Business Case: I authored and socialized a comprehensive whitepaper for the Executive Leadership Team. Rather than focusing on "aesthetics," I framed the design system as a financial lever. I quantified the time lost to QA and rework and highlighted how the lack of a shared glossary was slowing down both the Sales and Customer Success teams in their conversations with perspectives and whitelabeling work with customers respectively.
Strategic Mandate
1. Standardize UI/UX Design: Use a third-party framework (MUI/Material Design*) and expand it to avoid the "build vs. buy" costs of a fully bespoke system.
2. Global Scale: Enable seamless "whitelabeling" of B2B and B2C enterprise software solutions for insurance and annuity carriers.
3. Tooling Modernization: The new design system should speed up our time to market when building new features and products
4. Product Development Velocity: Speed up our time to market when building new features and products and white labeling existing products for customers.
5. Resource Preservation: Increasing white labeling quality while reducing overhead required to execute customer UI white labeling.
* We evaluated Ant Design (among others) but rejected it because it was too heavily optimized for B2B and logographic type (Chinese), which would have required expensive rework for our B2C and Western markets.
5. Resource Preservation: Increasing white labeling quality while reducing overhead required to execute customer UI white labeling.
* We evaluated Ant Design (among others) but rejected it because it was too heavily optimized for B2B and logographic type (Chinese), which would have required expensive rework for our B2C and Western markets.
An example of quality control issues before sureUI.
Design Output (left) vs. Dev Output (right)
Solution Architecture
As Director, my role was to build an engine that would sustain the design system across departments and time.
Cross-Functional Governance: I established a "Design System Task Force" comprising design, engineering, and product leadership to ensure the system wasn't just a "design project" but a piece of core product infrastructure.
Atomic Repository Strategy: We moved beyond a simple, singular Figma library to a tiered repository structure consisting of a foundational "Atomic" library for all, with domain-specific libraries for individual product groups and products on top.
Single Source of Truth: I mandated the use of Storybook and the Storybook Figma plugin to maintain a direct, 1:1 relationship between code and design assets, ensuring developers were treating our designs as blueprints rather than inspiration.
Guild Structure: As I didn’t have the budget to bring on a multidisciplinary design system team, I opted for a “guild structure”; gathering like-minded practitioners across relevant disciplines within Sureify to carry this project forward.
Cross-Functional Governance: I established a "Design System Task Force" comprising design, engineering, and product leadership to ensure the system wasn't just a "design project" but a piece of core product infrastructure.
Atomic Repository Strategy: We moved beyond a simple, singular Figma library to a tiered repository structure consisting of a foundational "Atomic" library for all, with domain-specific libraries for individual product groups and products on top.
Single Source of Truth: I mandated the use of Storybook and the Storybook Figma plugin to maintain a direct, 1:1 relationship between code and design assets, ensuring developers were treating our designs as blueprints rather than inspiration.
Guild Structure: As I didn’t have the budget to bring on a multidisciplinary design system team, I opted for a “guild structure”; gathering like-minded practitioners across relevant disciplines within Sureify to carry this project forward.
The Messy Middle
A leadership journey is rarely linear. In 2023, the design system was deprioritized due to resource constraints as a result of a diminished economic outlook.
Change is Hard: While my design team was excited to migrate from Sketch to Figma, one of our most senior product designers was skeptical and openly critical. I was able to address his concerns through conversations and “show & tells”.
Stagnation & Distractions: After the initial setup in Figma and Storybook was complete in early 2023, I handed ownership over to others in order to focus on other pressing projects. In hindsight, this was a mistake. Asset development stagnated and came eventually to a halt. This was partly due to mistaking “nice-to-haves” for “must-haves”, and partly due to the new project owners working in isolation, resulting in us having to discard a lot of work.
Deprioritization: As was the case for many SaaS companies, Sureify too had to go through a series of layoffs in 2022 & 2023. As a consequence the sureUI design system project was deprioritized in Q3 2023 in favor of other roadmap priorities.
Leadership Intervention: After staffing turnover and a 6 month-long hiatus, I led the effort to reprioritize the project in Q1 2024. I formed a small task force to conduct a comprehensive audit of all existing assets across Figma and Storybook and recommended "Upgrade, Move, or Delete" actions to clean up the debt accumulated during the pause. We chose to implement Chromatic to enable automated visual testing, providing the Executive Team with higher confidence in the system's stability.
Reselling the Project: Similar to how I initially pitched the design system project to executive leadership, I put the proverbial pen to paper and build out a business case detailing what gains we had already achieved with a partially built design system, and what technical debt we were currently incurring due to our underdeveloped engineering assets.
Change is Hard: While my design team was excited to migrate from Sketch to Figma, one of our most senior product designers was skeptical and openly critical. I was able to address his concerns through conversations and “show & tells”.
Stagnation & Distractions: After the initial setup in Figma and Storybook was complete in early 2023, I handed ownership over to others in order to focus on other pressing projects. In hindsight, this was a mistake. Asset development stagnated and came eventually to a halt. This was partly due to mistaking “nice-to-haves” for “must-haves”, and partly due to the new project owners working in isolation, resulting in us having to discard a lot of work.
Deprioritization: As was the case for many SaaS companies, Sureify too had to go through a series of layoffs in 2022 & 2023. As a consequence the sureUI design system project was deprioritized in Q3 2023 in favor of other roadmap priorities.
Leadership Intervention: After staffing turnover and a 6 month-long hiatus, I led the effort to reprioritize the project in Q1 2024. I formed a small task force to conduct a comprehensive audit of all existing assets across Figma and Storybook and recommended "Upgrade, Move, or Delete" actions to clean up the debt accumulated during the pause. We chose to implement Chromatic to enable automated visual testing, providing the Executive Team with higher confidence in the system's stability.
Reselling the Project: Similar to how I initially pitched the design system project to executive leadership, I put the proverbial pen to paper and build out a business case detailing what gains we had already achieved with a partially built design system, and what technical debt we were currently incurring due to our underdeveloped engineering assets.
Quantitative & Qualitative Impact
The success of sureUI is measured by the increased velocity of Product and Customer Success orgs.
Design Velocity: Product design turnaround decreased by >25%. Whitelabeling projects (previously a manual burden) saw turnaround times cut in half.
Engineering Efficiency: Front-end development time was reduced by 25%–50% depending on complexity.
Alignment: Sales and Customer Success now use the shared design glossary to communicate product UI/UX abilities to prospects, reducing friction in the sales cycle.
Proving & Proofing: We designed and built our LifetimeAGENT product from scratch to customer implementation (1 customer with 2 sub-brands) in 24 months. Our sureUI design system was pivotal in ensuring a scalable and customizable frontend.
Design Velocity: Product design turnaround decreased by >25%. Whitelabeling projects (previously a manual burden) saw turnaround times cut in half.
Engineering Efficiency: Front-end development time was reduced by 25%–50% depending on complexity.
Alignment: Sales and Customer Success now use the shared design glossary to communicate product UI/UX abilities to prospects, reducing friction in the sales cycle.
Proving & Proofing: We designed and built our LifetimeAGENT product from scratch to customer implementation (1 customer with 2 sub-brands) in 24 months. Our sureUI design system was pivotal in ensuring a scalable and customizable frontend.
Retrospective & Next Horizon
As of December 2025, we are on track to complete a full refactoring of our Storybook repositories by Q2 2026.
Key Learnings
1. I’ve learned that a design system is an "invisible product"; people only notice when the UI/UX isn’t functioning or aligning with business goals. If it all functions properly, it becomes expected and therefore invisible.
2. Because the benefits of a design system are felt "tomorrow" but the costs of building it out are paid "today," it requires constant advocacy to keep it resourced.
3. Deciding what to do, and doing it, is the difference between movement and change, and all change is difficult.
Next Horizon
Our immediate next phase will be to educate our engineering teams on working with Chromatic & Storybook and put a governance system in place guarding the quality and robustness of our system. Our “further out, but not too far out” horizon is integrating AI into our product pipeline. By having a highly structured, token-based design system, we are well positioned to leverage AI to automate even more of the UI implementation phase. Our primary objective for the latter half of 2026 is to create a design system MCP server enabling faster turnaround times in both product design ideation as well as building and enabling our technical sales professionals to tailor and demonstrate features on the fly during sales calls, while maintaining our UI/UX.
