Company:
Pipekit Inc.
Duration:
2022 (2 months)
Team:
Overview
Project: Spearheaded the creation of a comprehensive design system to unify UI patterns, accelerate feature development, and support rapid scaling across a globally distributed team.
Problem: As the product expanded to serve a growing customer base, fragmented design assets, inconsistent UI patterns, and accessibility gaps hindered team efficiency and compromised user experience.
Goal: Develop a modular, accessible design system to establish a single source of truth, enabling seamless collaboration between design and engineering while ensuring brand and interaction consistency.
Success Metrics: 40% reduction in design-to-development handoff time, achieve a WCAG 2.1 AA compliance across core components.
Deliverables:
Fully documented component library with usage guidelines.
Customizable Figma-based design system integrated with engineering workflows.
Challenge
As the team scaled from 2 to 14 members across six time zones, inconsistent branding, redundant components, and accessibility oversights created friction in cross-functional collaboration.
The system needed to serve dual purposes: empowering designers to prototype rapidly while giving engineers reusable, production-ready code.
Balancing scalability with the immediate needs of marketing, onboarding, and core product features required strategic prioritization of foundational elements.
Discovery and Iteration
A comprehensive audit revealed critical inconsistencies in typography hierarchies, button states, and color contrast ratios. Competitive analysis highlighted best practices for dark mode, data-dense interfaces, and responsive behaviors, while stakeholder interviews exposed engineering pain points in component reuse.
Collaborating with Blocksfabrik’s no-code platform allowed us to prototype and test atomic structures (typography scales, adaptive grids, and tokenized color palettes) without overburdening developers. Weekly design sprints focused on stress-testing components like dynamic forms and tabular data modules, ensuring flexibility for edge cases.
Solution and Impact
The final system featured a WCAG-compliant color palette, responsive layout grids, and a unified icon library, all documented in a living Figma library synced with engineering repositories. Key components like navigation menus and data cards were designed with dark mode variants and accessibility states baked in.
Post-launch, the team reduced design debt by retiring redundant patterns, while engineers reported faster implementation cycles. The system became foundational for onboarding new hires and supporting high-priority features, contributing to a 22% improvement in user task completion rates during usability tests.
