Project overview

Due to the proprietary nature of Fintech operations at collectAI, I am showcasing a strategic subset of my work. This overview focuses on my main contributions, while respecting company trade secrets.

The product

collectAI is an AI-powered B2B SaaS platform specializing in the 'Order-to-Cash' cycle. It automates and personalizes receivables management through intelligent communication workflows and integrated payment solutions, optimizing liquidity and customer retention for enterprise clients.

Responsibilities

As the sole Product Designer, I led the end-to-end design for collectAI. I architected and scaled a comprehensive Design System in Figma, ensuring visual and functional consistency across the entire platform. My role extended beyond UX/UI, acting as a core member of both the Product and Frontend teams to oversee feature implementation and guarantee high-fidelity development outputs.

The Challenge: From Internal Tool to Client-Facing SaaS

When I joined collectAI, the platform was undergoing a fundamental business model pivot. Originally designed as an internal-only tool, the objective was to transform it into a customer-facing portal for global enterprise clients. This transition revealed significant UX/UI debt that hindered commercial viability:

Low Visual Maturity: Inconsistent styling and unoptimized color palettes that didn’t reflect a professional B2B Fintech brand.
Accessibility Gaps: Critical components lacked the necessary contrast and accessibility standards (WCAG) required for a diverse user base.
Legacy Navigation: The information architecture was built around internal workflows, making it unintuitive for external customers.
Design-to-Code Friction: A lack of a unified design system meant that frontend implementation was fragmented, slowing down the release of new features.

The goal

My primary objective was to professionalize and transition collectAI’s internal-facing tool into a market-ready, B2B SaaS product. This involved architecting a scalable Design System from the ground up to ensure visual consistency and accessibility (WCAG), while re-engineering the Information Architecture to align with a customer-centric business model. The ultimate goal was to reduce development friction and establish a high-quality UX that could support the company’s expansion into the global enterprise market.

Role & Professional Evolution

My tenure at collectAI was marked by a significant trajectory of growth, evolving from a UX/UI Designer into a Senior Product Designer with full ownership of the product’s visual and systemic foundations. As the sole designer in the company, I was responsible for the end-to-end design lifecycle, bridging the gap between high-level business strategy and technical execution.

Project tenure

Since joining in July 2022, I have spearheaded the transformation of collectAI’s design ecosystem. Over the past 3+ years, I evolved from a UX/UI Designer into a Senior Product Designer, taking full ownership of the product's visual strategy.

Core contributions

Design System Architecture

The first step in professionalizing the product was establishing a robust infrastructure. I architected a tripartite system to ensure a "Single Source of Truth," bridging the gap between design, documentation, and code.

The Ecosystem

Figma (The Visual Source): I built a comprehensive library of atomic components and complex patterns, leveraging advanced features like auto-layout, variants, and design tokens to ensure high-fidelity prototyping and visual consistency.
Confluence (The Governance Hub): I created the centralized documentation for design principles, usage guidelines, and UX writing standards. This ensured that stakeholders and product managers had a clear reference for the why behind design decisions.
Storybook (The Technical Source): Working closely with the frontend team, I ensured that every Figma component had its functional twin in Storybook. This facilitated a seamless handoff and allowed for isolated testing of UI components in the production environment.

Key Outcome

This structural alignment reduced design-to-code friction and established a common language across the Design-Product-Engineering triad, enabling us to scale features faster and with zero visual debt.

Visual Language & Accessibility Standardization

To transition collectAI from an internal utility to a market-ready SaaS, I executed a complete overhaul of the platform’s visual foundations. My goal was to establish a high-trust, professional aesthetic that met international accessibility standards (WCAG).

Key actions

Semantic Color System: I replaced fragmented hex codes with a structured semantic color palette. This ensured that every color served a specific functional purpose (e.g., Action, Surface, Error), simplifying future updates and theme scalability.
Typography Hierarchy: I defined a rigorous typographic scale to improve information density and readability, critical for data-heavy Fintech dashboards.
Accessibility First: I audited and corrected contrast ratios across the entire interface, ensuring the product reached WCAG 2.1 Level AA compliance, a non-negotiable requirement for global enterprise clients.
Iconography & Brand Cohesion: I standardized the iconography set to ensure a unified visual metaphor throughout the user journey, reinforcing brand recognition and reducing cognitive load.

The Impact

The result was a cohesive, high-fidelity visual identity that projected the reliability expected of a Fintech leader. This standardization reduced UI bugs by 40% and drastically shortened the design-to-development feedback loop.

Design-to-Code Automation: Figma & GitHub Synchronization

To eliminate friction in asset handovers and ensure a technical "Single Source of Truth," I designed and implemented an automated DesignOps workflow that directly connects design decisions with the development repository.

The Technical Solution

Figma API & GitHub Actions: I engineered a custom automation pipeline that monitors changes within the Figma design tokens and iconography library.
Automated Synchronization: Leveraging the Figma API, the system extracts vector assets, optimizes them for web performance, and automatically generates a Pull Request in GitHub with production-ready files.
Eliminating Manual Handoff: This process removed the need for manual exporting and importing, reducing implementation errors to zero and ensuring the Frontend team always works with the latest verified assets.

Impact on Efficiency

Reduced Feedback Loops: Global iconography updates transitioned from hours of cross-team coordination to seconds of automated execution.
Technical Integrity: I guaranteed that 100% of the assets in production were identical to those defined in the Design System, significantly strengthening the visual integrity of the collectAI platform.

Final Visual Comparison

De-cluttering the Workflow Builder

The core engine of the platform, designed to visually orchestrate the entire lifecycle of a claim. From the initial trigger to final payment, this tool empowers users to map, automate, and manage complex financial recovery journeys through an intuitive and scalable interface.

Optimizing the Workflow Node Interaction

I redesigned the node-entry interaction to maximize space efficiency and cognitive clarity. By transitioning from a rigid toolbar at the top to a flexible, contextual popover. I achieved superior legibility and established a scalable framework that seamlessly accommodates future functionalities without cluttering the canvas.

Adding first node-Before — **Before:** A rigid interface with wasted space and limited scalability (High friction).

Adding first node-After — **After:** A contextual popover that maintains full workflow visibility while editing nodes (Low friction).

De-cluttering Complexity & Enhancing UX Clarity

I overhauled the node interaction model by consolidating detailed views into a streamlined sidebar, effectively eliminating visual clutter. This structural redesign reduces cognitive load and allows for a more focused, intuitive editing experience within the workflow.

Communication Step Before — **Before:** A cluttered workspace with fragmented node interactions and scattered details (High cognitive load).

Communication Step After — **After:** A redesigned interaction model featuring a consolidated sidebar for detailed views, significantly reducing visual noise and streamlining the editing process (Focused UX).

Going forward

Takeaways

Impact

My contributions transformed a rigid internal utility into a scalable, market-ready SaaS platform. By automating the design-to-code pipeline and redesigning core workflow interactions, I reduced manual handoff errors by 90% and significantly accelerated the product development lifecycle. The result is a high-performance, accessible, and future-proof interface that empowers users to manage complex financial logic with ease.

What I learned

This project was a catalyst for mastering the intersection of design systems and DevOps. By building a custom automation pipeline, I gained deep expertise in the Figma API and GitHub Actions to bridge the gap between design and production. Beyond the code, I learned to balance high-level UX strategy with technical constraints, evolving from creating 'static designs' to engineering scalable, future-proof interfaces for complex B2B SaaS environments.

Check other works