Scaling a B2B SaaS Design System (Web + Mobile) — Kärcher / soniq IQ

My role

‍

Lead Product Designer (9-month project)
Collaborated directly with CPO, Product Owners, and engineers to redesign the platform and build a scalable design system.

• Led UX & UI redesign across web and mobile
• Built token-based design system (Figma + Token Studio)
• Facilitated cross-functional workshops & validation sessions
• Introduced AI-assisted workflows for faster UI iteration and system scaling

‍

The Challenge

• Fragmented UI across 20+ files and multiple component libraries
• Inconsistent UX patterns across web and mobile
• Low scalability for new features
• Poor collaboration between design and engineering
  ‍

The Approach

• Conducted UX audit and stakeholder interviews
• Mapped user flows and operational workflows
• Introduced modular architecture for UI components
• Established design–dev alignment through structured reviews

AI Integration

• Used AI tools to accelerate UI pattern exploration and layout variations
• Supported rapid prototyping and iteration of component structures
• Enhanced consistency by generating scalable UI patterns aligned with system logic

The Solution

• Built unified design system with tokens and reusable components
• Reduced complexity across design files and variables
• Improved navigation, layouts, and interaction patterns
• Enabled faster feature development and product scalability

‍

‍

User Segmentation & UX Insights:

‍

Collaboration & Validation
‍

• Worked closely with CPO and engineering team
• Introduced structured feedback loops and design reviews
• Validated solutions through iterative testing and internal stakeholders
• Improved communication between design and development

‍

‍

‍

Design System Foundations: Tokens & Brand Integration
‍

Defined a scalable token-based system to ensure a consistent and recognisable brand experience across the product.

• Translated soniq brand values (modularity, clarity, digital-first) into UI foundations
• Maintained a strong and independent product identity alongside Kärcher
• Ensured consistency across components, interactions, and visual language
• Strengthened product perception as a reliable and scalable industry solution

‍

‍

‍

‍

The KPI oriented result

+90.48% Figma performance
(libraries reduced from 21 → 2)

–82.31% style variables
(605 → 107)

–66.67% component variables
(3000 → 1000)

Faster design-to-dev handoff through system standardization

Reduced design inconsistencies across teams

Increased scalability for future features

Restructure the navigation and UI/UX improvements: