Background

Quadient, a global leader in business communications, relied on its ICA Design System to support multiple software teams. However, the system’s growing complexity and inconsistency were stifling productivity and frustrating users across various products. Designers faced daily challenges navigating the system, which hindered their ability to deliver high-quality work efficiently.

My Deliverables

As a key member of the ICA Design System refactoring project team, I took on several responsibilities:

• Co-developed a new component architecture framework, leading design efforts to simplify the system structure.

• Refactored multiple complex components, improving usability and efficiency.

• Designed a documentation framework that became the standard template for all component guidelines.

• Co-led quality assurance processes, including peer reviews and optimized handoffs to development teams.

• Mentored team members, including onboarding and training a new designer to ensure consistent high-quality output.

Problems & Goals

The ICA Design System faced several critical challenges:

1. Overwhelming Component Complexity: Some components contained up to 12,000 layers, causing frequent Figma crashes that disrupted workflows.

2. Inconsistent Interface: Variations in shapes, borders, and styles created visual inconsistencies across products.

3. Poor Component Architecture: Designers struggled to use and modify components effectively due to disorganized structures.

4. Design-Code Discrepancies: Misaligned naming conventions and values between design and code caused confusion during handoffs.

5. Low Adoption Rates: A lack of clear documentation compounded these issues, making adoption across teams an ongoing struggle.

Research

To tackle these challenges, we conducted thorough research throughout the project:

• Talking to Users: We interviewed designers and developers to understand their struggles with the current system, uncovering pain points like frequent crashes and inconsistent usage patterns. These conversations also revealed creative workarounds they had developed to address gaps in the system.

• Performance Audit: We measured file sizes, load times, and component usage within Figma. Some components had thousands of layers, leading to 4-5 crashes daily and making even simple tasks like copying components difficult.

• Structure Audit: We analyzed component organization and naming conventions across design and code. This audit revealed widespread inconsistencies that made collaboration between designers and developers inefficient.

• Accessibility Audit: Contrast checks showed that many color combinations failed accessibility standards. These findings informed improvements to our color tokens for future iterations.

This research provided us with clear priorities: simplify components, standardize naming conventions, align design with code, improve system performance, and create clearer guidelines

Design

Rather than jumping straight into redesigning components, we started by building a solid foundation with clear guidelines:

1. Developed structured checklists and standardized naming conventions for consistency across teams.

2. Created decision trees to guide complex choices during refactoring efforts.

3. Implemented a peer review system with checkpoints throughout the process.

The core of this phase focused on refactoring components in three key areas:

• Cleaning up component architecture for better usability.

• Establishing clear naming conventions for consistency across teams.

• Aligning designs more closely with code for smoother handoffs.

This process wasn’t without its challenges—our team dynamics shifted as two designers left mid-project while a new designer joined. I stepped into a leadership role during this transition, mentoring the new designer while continuing to drive refactoring efforts forward.

Throughout this phase, we balanced improving individual components with ensuring system-wide consistency.

Implementation

During implementation, we focused on creating robust documentation and preparing for seamless handoffs:

• Maintained peer reviews for each component’s documentation to ensure quality control at every stage.

• Developed an AI-assisted workflow structure to streamline content creation while allowing flexibility for adjustments as needed.

• Engaged a professional copywriter for final reviews to ensure language consistency, conciseness, and adherence to our tone of voice.

While AI tools accelerated our process by generating initial drafts quickly, human oversight was critical for refining content into something truly usable by all teams.

Results

Although code implementation is still ongoing, early results have already demonstrated significant improvements:

1. Dramatic Simplification: Reduced component complexity by 90%, cutting some patterns from 12,000 layers to just 800—a game-changer for performance and usability.

2. Enhanced Productivity: Designers now complete tasks 2-3 times faster than before thanks to streamlined components and clearer guidelines.

3. Improved Consistency: A unified look across products has strengthened brand cohesion significantly while reducing discrepancies between designs.

4. Increased User Satisfaction: Designers report that the new system is much easier to use and customize, enhancing both creativity and workflow efficiency.

One designer shared their experience:

“Before this refactor, I dreaded opening Figma because it would crash constantly—now everything just works.”

These results underscore how our approach has transformed ICA into a streamlined tool that empowers both designers and developers alike.