Design System, not just UI

I co-created a scalable Design System used across multiple B2B SaaS platforms. My work focused on accessibility, consistency, and design-dev alignment - resulting in 70+ documented components and significantly fewer accessibility issues reported by developers and stakeholders.

Kreatywnych ludzi burzy mózgów w spotkaniu

About this project

This project aimed to build a Design System for a growing B2B SaaS company with several product teams working independently, often leading to inconsistencies, duplicated effort, and accessibility gaps. The system was created in Figma and used across multiple teams to support faster delivery and a more unified user experience.

🚀 I joined the project after its initial phase and worked on it for 1.5 years. My role evolved from supporting documentation to owning key aspects of the system’s structure, accessibility, and developer handoff. I collaborated closely with developers and designers, working iteratively to improve the design and implementation over time.

Context & Team

The Problem

The Goal

🏢 Company: B2B SaaS (confidential)
🧑‍🤝‍🧑 Team: 6 Designers, 6 Developers, 1 Scrum Master
⏳ Timeline: 15 months (I joined the team 1.5 years into the project and worked on it until completion)
🧩 Role: UX Designer → Design System co-owner, responsible for concept structure, documentation, and accessibility improvements
💡 Scope: Led key initiatives including accessibility compliance, theming logic, component structure, and system-wide documentation standards

Designers and developers lacked a unified resource for building accessible and consistent interfaces. This caused:

Misaligned expectations between design and development
Frequent rework due to inconsistent component behavior
Delays from having to recreate or clarify patterns without guidance

User needs:

A reliable, centralized Figma library with predictable behavior
Built-in accessibility features and well-defined component states
Clear documentation to support implementation and encourage adoption

The main objective was to align distributed product teams around a shared visual language and workflow. This would:

Increase design and development efficiency
Improve consistency across UIs
Reduce implementation errors
High-quality components with quality build-in

Business challenge: Before the Design System, teams designed and built components independently, resulting in inconsistent visuals, interactions, and performance. Accessibility compliance was low, and there was no single source of truth for patterns, documentation, or specs.

My Contributions

🔍 Accessibility & UX Specs

Audited over 70 components for WCAG 2.1 compliance, focusing on color contrast, focus indicators, keyboard support, and interactive clarity
Documented usage scenarios, edge cases, and best practices to reduce ambiguity and guide implementation

🎨 Figma Design Library

Migrated the component library from Adobe XD to Figma with Variants, Auto Layout, and token-based styling
Built flexible components with full interaction states (hover, focus, error, disabled), naming conventions, and usage guidelines
Created templates and annotated “do & don’t” examples to support designers and developers

🌒 Dark Mode Logic

Wrote the concept for the system's dark theme
Ensured parity across UI layers, including complex interactive components

🤝 Developer Collaboration

Co-created contribution rules and internal documentation to ensure maintainability and adoption
Participated in demos and design reviews to validate logic, edge cases, and implementation feasibility

🧩 UX Patterns & Content Design

Designed consistent UX patterns for forms, filters, navigation, and notifications
Defined reusable form behavior (e.g. validation logic, input states, success/error feedback, microcopy)
Helped shape tone of voice and wrote product microcopy for core components (e.g. labels, buttons, tooltips)

📚 Documentation & System Structure

Co-developed a documentation website for DS users to preview components, view anatomy, specs, and usage rules
Authored structured docs on design principles, UI hierarchy, page layout, theming logic, accessibility guidelines, and interaction behavior
Contributed to the "Company Manifesto" defining shared design principles and system-wide language

Outcomes & Impact

✅ 70+ accessible, documented components in a shared Figma library adopted across product teams
🌗 Full Light and Dark Mode support, built with WCAG-compliant theming logic
⚙️ Improved developer efficiency thanks to reusable specs and consistent interaction logic
🧠 Greater team alignment through centralized documentation and shared design principles
🧩 Increased developer autonomy - engineers could implement components without constant design clarification
💬 Positive feedback from developers and product managers, noting smoother handoffs and faster delivery

What I Learned

How to translate abstract accessibility guidelines into concrete, testable interface logic
How to scale and maintain a Design System without a QA team by embedding quality and clarity directly into design specs
How to structure token-based Figma libraries for long-term usability, performance, and cross-team handoff
How to advocate for accessibility and systems thinking while collaborating with both developers and designers in real sprint cycles

🚀 What’s Next

I’m excited to bring this experience into a product team where I can:

Co-create or evolve inclusive design systems from the ground up
Drive accessibility from day one—beyond checklists and into real behavior
Support better collaboration between design, development, and product