Background
Quadient AP, part of the Quadient group, specializes in accounts payable automation. What began as a project to design a Fraud Alert feature quickly evolved into a larger effort to address design inconsistencies and technical debt across the platform.
During my initial investigation, I uncovered significant issues with the existing interface: poor visual hierarchy, inconsistent layouts, and numerous hardcoded elements. To tackle these challenges, I proposed creating a reusable card component that would improve both design consistency and scalability.
My Deliverables
As the product designer responsible for the design system at Quadient AP, I led the design efforts for this project, balancing both product-level and system-level responsibilities. Collaborating closely with my PM, VP, and front-end developers, I was responsible for:
Investigating existing design inconsistencies and identifying opportunities for improvement.
Proposing a reusable card component to replace hardcoded elements.
Auditing existing patterns to ensure the new component addressed common use cases.
Creating mockups and presenting options to stakeholders, highlighting the benefits of a component-based approach.
Collaborating with developers to align on technical feasibility and implementation details.
Throughout this project, I acted as the bridge between design and development, ensuring alignment on goals while advocating for scalable, consistent solutions.
Challenges & Goals
The existing implementation relied heavily on hardcoded elements with inconsistent layouts across the same panel. This approach created significant technical debt and made it difficult for developers to maintain consistency across the platform.
Key Issues:
Poor visual hierarchy in existing elements.
Inconsistent card layouts within the same panel.
Multiple hardcoded variations of similar components.
Goals: The primary goal was to create a reusable card component that would improve design consistency while reducing technical debt. This solution would establish a more efficient development workflow and ensure a cohesive user experience.
Research
My research focused on understanding both technical constraints and design patterns to ensure a comprehensive solution.
Investigation Methods:
Held stakeholder discussions to understand feature limitations and requirements.
Consulted with developers about implementation constraints.
Conducted an audit of existing card components and layouts.
Analyzed recurring elements and patterns across implementations.
Key Findings:
Identified more than four different card layouts in the same panel.
Documented frequently used elements across various implementations.
Uncovered technical constraints affecting component structure.
Mapped common patterns to inform new component requirements.
Design
The design phase centered on creating a reusable card component using MUI’s atomic components. Starting with audit findings, I identified core elements and variations before refining the layout through iterative testing with real data to ensure responsiveness across scenarios.
Challenges and Solutions:
Incorrect Component Usage: A developer flagged an incorrect component used for status display, prompting layout adjustments during testing.
Iterative Refinement: The layout underwent four iterations based on team feedback, improving usability and technical feasibility.
Key Deliverables:
Component handoff documentation aligned with developer needs.
Responsive behavior guidelines for seamless adaptability across devices.
API references and usage examples for smooth integration.
Implementation
The implementation phase focused on creating clear documentation and handoff processes:
Developed comprehensive documentation using Specs that covered subcomponents, tokens, API references, and variations.
Added team-specific documentation tailored to front-end limitations and requirements.
Refined documentation through feedback from developers and the UX Lead.
Included responsive behavior guidelines alongside implementation examples.
While creating Specs ensured clarity, ongoing collaboration with developers helped refine details further during implementation.
Results
The project's impact extended beyond its initial scope, delivering significant improvements to Quadient AP's design system and development processes.
Key Achievements:
Established a new company-wide standard for component documentation and handoff processes.
Received recognition from developers for comprehensive documentation quality.
Gained QA team's approval for improved review efficiency.
Earned VP's confidence in adopting component-based solutions.
Impact: This project strengthened support for structured, component-based approaches across teams, setting a new precedent for future development work at Quadient AP. The improved documentation process has already shown promise by reducing QA review time while enhancing development efficiency overall.
