🔍 Project Overview

As the lead designer for Spend/card management squad, I led the redesign of our card management experience, a critical touchpoint in our digital banking ecosystem. Working closely with cross-functional teams including engineers, product managers, compliance officers, and security specialists, I transformed a fragmented, complex card management system into an intuitive, secure, and highly functional interface that balances stringent financial security requirements with contemporary user expectations.

🎯 The Challenge

📊 Business Context

Card management represented a significant pain point with measurable business impact:

• High support call volume related to card operations (freezing, activation, viewing details)

• Lower-than-expected digital engagement with card features

• Negative feedback in app store reviews specifically mentioning card functionality

• Decreased customer confidence when security features were difficult to access

Our primary stakeholders included the Digital Banking leadership, Security & Compliance teams, and the Customer Support department—each with unique priorities and constraints.

👥 User Needs

Through extensive user research (interviews, historical data, support ticket analysis, and behavioral analytics from RMs), we identified core user needs:

1. Confidence in security actions: Users needed absolute clarity when performing security-related card actions (freezing, blocking)

2. Seamless access to card information: Card details needed to be easily accessible while maintaining appropriate security controls

3. Status clarity: Users needed to immediately understand their card's current state and limitations

4. Recovery paths: Clear paths to resolution when cards were blocked, inactive, or experiencing issues

🔌 Technical Ecosystem

Our solution needed to integrate with several interconnected systems:

• GPS (Thredd) card issuing platform

• Saascada ledger service for wallet management

• MEAwallet secure card details service

• BCA (Business Current Account Service) for account management

• 3DS authentication infrastructure

🧭 Strategic Approach

I approached this redesign with three core design principles:

1. State-driven interfaces: Card interfaces would adapt completely to the current state of the card

2. Progressive security: Authentication requirements would scale with the sensitivity of operations

3. Contextual recovery: Error states would include clear recovery paths specific to the error context

🔬 Research & Discovery

🧠 Expert Stakeholder Interviews

I conducted deep-dive sessions with subject matter experts across the organization:

• Payments team leadership: To understand technical card lifecycle constraints

• Fraud & security specialists: To identify risk models and compliance requirements

• Customer support management: To map common failure patterns and resolution paths

• Technical architects and system engineers: To understand system integration points and limitations

🔎 Competitive Analysis

I performed a systematic competitive analysis focusing on:

• Traditional banks: Examining established security patterns and mental models

• Challenger banks: Analyzing innovative approaches to card management

• Payment platforms: Understanding emerging card experience expectations

Key insights from this analysis revealed a market-wide struggle to balance security and usability, with emerging patterns around visual card state representation and contextual controls.

🛠️ Technical Deep Dive

Working closely with engineering leadership and backend developers, I mapped the complete technical card lifecycle, documenting:

• All possible card states and transitions (INACTIVE, ACTIVE, FROZEN, PIN_BLOCKED, etc.)

• System-imposed constraints on state transitions

• Authentication requirements for different operations

• API dependencies and potential failure points

This technical foundation, developed in collaboration with our DevOps and API teams, was crucial for designing a solution that was both user-friendly and technically feasible.

🏗️ Design Framework Development

🔄 Card State Model

I developed a comprehensive card state model that mapped technical states to user-facing states:

• Technical state "INACTIVE" → User-facing state "Needs activation"

• Technical state "FROZEN" → User-facing state "Temporarily paused"

• Technical states "PIN_BLOCKED"/"RESTRICTED"/"STOLEN" → User-facing state "Card blocked"

This translation layer was essential for creating a coherent mental model for users while accommodating complex backend states.

🎨 Visual Language for Card States

In collaboration with our Brand Design team and UI designers, I designed a visual system for representing card states that balanced clarity with brand aesthetics:

• Active cards: Standard card presentation with full-color treatment

• Frozen cards: Blue overlay with snowflake icon and appropriate messaging

• Blocked cards: Restricted presentation with lock icon and support pathways

• Inactive cards: Subdued presentation with clear activation CTA

🔒 Security Layer Architecture

Working alongside our Security team and UX researcher, I created a tiered security architecture that balanced protection with usability:

• Tier 1 (Low sensitivity): View masked card details, freeze/unfreeze

• Tier 2 (Medium sensitivity): View full card number, update preferences

• Tier 3 (High sensitivity): View PIN, order replacement, change critical settings

This approach, validated through collaborative security workshops with compliance stakeholders, allowed us to implement appropriate friction only when necessary, improving overall usability while maintaining security.

💡 Design Execution

🛣️ Core User Journeys

I designed comprehensive flows for critical user journeys:

1. Card Activation

   • Streamlined verification process

   • Clear confirmation of successful activation

   • Immediate display of newly available actions

2. Security Management (Freeze/Unfreeze)

   • One-tap freeze with clear state change feedback

   • Explicit explanation of freeze implications

   • Simple unfreeze flow with appropriate verification

3. Card Details Access

   • Progressive disclosure of sensitive information

   • Appropriate authentication challenges

   • Clear expiration and validity information

4. Issue Resolution

   • Contextual troubleshooting for different card states

   • Direct support access from error states

   • Educational content about card state implications

⚠️ Error State Design System

In collaboration with our Content Design team and Customer Support representatives, I developed a comprehensive error handling framework:

• API/Loading Errors: Clear retry mechanisms with explanatory context

• Action-Specific Errors: Contextual messaging for freeze, unfreeze, and view details failures

• Authentication Failures: Recovery paths with appropriate security preservation

• System Unavailability: Offline capabilities and queuing of operations where appropriate

Each error state was designed to provide:

• Clear explanation of what happened

• Specific next steps the user could take

• Alternative paths to accomplish their goal where applicable

• Access to support when self-service recovery wasn't possible

🔄 Interaction Design

I crafted detailed interaction specifications for key moments:

• State transitions: Appropriate animations and feedback when card states change

• Authentication experiences: Smooth, contextual authentication challenges

• Confirmation patterns: Clear confirmation of significant security actions

• Progressive disclosure: Elegant reveal of sensitive information

⚖️ Design Challenges & Trade-offs

🔐 Security vs. Accessibility

Challenge: Balancing stringent financial security requirements with usability.

Approach: Rather than implementing uniform security across all operations, I designed a contextual security model that adapted to:

• The sensitivity of the operation being performed

• The current authentication state of the user

• The risk profile of the specific card and account

Trade-off: Some operations required additional authentication steps, but these were implemented only where truly necessary and with clear explanations.

🧩 Technical Complexity

Challenge: The underlying card systems had complex state models that didn't align with user mental models.

Approach: I created an abstraction layer that translated technical states into user-meaningful states, while preserving necessary technical accuracy.

Trade-off: Some technical nuance was intentionally simplified in the interface, with complex edge cases handled through more detailed help content and support paths.

📱 Cross-Platform Consistency

Challenge: Delivering consistent card experiences across mobile apps and web platforms with different technical capabilities.

Approach: I developed a platform-agnostic interaction model with platform-specific implementations that preserved core functionality and mental models.

🤝 Implementation & Collaboration

👨‍💻 Engineering Partnership

I established a close working relationship with engineering through:

• Joint mapping of technical constraints and user needs

• Collaborative problem-solving for complex security implementations

• Regular design reviews focused on technical feasibility

• Shared ownership of the end-to-end user experience

🧰 Design System Integration

Working with our Design System team and collaborating with other product designers, I evolved our product design system to accommodate:

• Card state representations across platforms

• Authentication patterns specific to financial operations

• Standardized error handling components

• Secure information display patterns

These components were documented in our design system with clear usage guidelines and technical specifications, created in partnership with our Front-end Development team.

🧪 Testing & Validation

The design underwent rigorous validation through:

• Usability testing of progressive prototypes coordinated (Askable and in-house)

• Security review by compliance specialists and security officers

• Technical validation sessions with engineering leads

• Accessibility evaluation conducted in partnership with our Accessibility team

Each round of testing led to targeted refinements that improved both usability and technical implementation, with key insights shared across teams to ensure alignment.

📊 Results & Impact

😊 User Experience Outcomes

The redesigned card management experience delivered significant improvements:

• Reduced time to complete key card management tasks

• Improved success rates for self-service card operations

• Higher user confidence in security features

• More positive qualitative feedback about card management

💰 Business Outcomes

The business impact projected were:

• Reduction in card-related support calls

• Increased digital engagement with card features

• Improved app store ratings

• Higher customer satisfaction scores for digital banking

🏗️ Technical Foundation

Beyond immediate metrics, the project established:

• A scalable architecture for adding new card types and features

• Consistent patterns for handling complex financial product states

• Reusable security and authentication components

• Documented best practices for financial product design

💭 Reflection & Learnings

💡 Key Insights

This project reinforced several critical product design principles:

1. Technical understanding drives better design: Deep knowledge of backend systems enabled more elegant user experiences despite complex constraints

2. Security and usability aren't opposing forces: Thoughtful security design can enhance perceived usability by building confidence

3. State-driven design creates clarity: Adapting interfaces completely to context eliminates confusion

4. Error states are core experiences: Well-designed error handling can transform potential frustration into moments of confidence

🔮 Future Opportunities

The foundation established through this redesign opens several future opportunities:

• Enhanced transaction insights integrated with card management

• Proactive security features based on usage patterns

• Expanded virtual card capabilities for specific use cases

• More granular card controls for specialized user needs

🏁 Conclusion

The card management redesign exemplifies how sophisticated product design can transform complex financial operations into intuitive user experiences. By deeply understanding the technical, security, and user dimensions of the problem space, our cross-functional team created a solution that balanced competing needs while delivering a cohesive, confidence-inspiring experience.

The project's success came from the thoughtful translation of technical complexity into user-centered design, proving that even in highly regulated, technically complex environments, exceptional user experiences are achievable with the right approach and strong collaboration across disciplines.

I want to acknowledge the incredible contributions from our engineering team, product management, UX research, content design, and the security team. This truly was a collaborative effort that showcased the power of cross-functional teamwork.