Summary
Designing for Scale: Building an Accessible, Modular Design System at Credit One Bank
Objective / Challenge
Credit One Bank’s internal payment processing tools for customer service agents were fragmented, outdated, and inefficient. Without a centralized design system, teams faced inconsistent UI patterns, increased technical debt, and time-consuming workflows. The challenge was to design a scalable, accessible design system that would streamline operations, support cross-functional teams, and ensure long-term maintainability.
Role and Collaboration
As Lead UX/UI Designer, I led the design system initiative within a cross-functional product team. I collaborated with four designers, front-end engineers, solution architects, and business stakeholders to architect and implement a unified design framework. My responsibilities spanned system architecture, accessibility compliance, documentation, and Figma library management.
Process Snapshots
Wireframes & Iterations: Created high-fidelity wireframes and prototypes for key payment workflows, validating structure and usability across multiple sprints.
Research & Collaboration: Conducted internal interviews and usability reviews to identify friction points in legacy tools and define agent needs.
Design System Build: Applied Atomic Design principles to construct modular components and define a visual style guide, iteratively reviewed with engineering for feasibility and alignment.
Solution Highlights
Built a centralized Figma library with 2,700+ reusable components and 80+ shared styles
Ensured full WCAG 2.1 and Section 508 compliance across all design artifacts
Documented usage, structure, and interaction logic in Microsoft Loop, supporting both design and dev teams
Introduced canonical data modeling to optimize developer handoff and reduce ambiguity
Integrated design tokens and collaborated closely with front-end developers for pixel-perfect implementation
Key Skills Demonstrated
40% increase in agent efficiency through consistent, intuitive UI and reduced training time
Streamlined development cycles by enabling engineers to rapidly pull from pre-approved design assets
Future-proofed product design by laying the foundation for reusable patterns across digital tools
Improved accessibility for agents using assistive technologies, aligning with federal compliance requirements
Site Flow
This is one of several site flows developed for the CASH Management platform at Credit One Bank.
Desktop users: Hover over the image to zoom in and move your cursor to explore the full flow.
Tablet and mobile users: Pinch to zoom and swipe to navigate the complete layout.
