2024 | Credit Card Management App - UI/UX Design Challenge

Introduction

In a fast-paced digital economy, financial management applications must be intuitive, efficient, and visually engaging. As part of a UI/UX design challenge, I took on the task of designing a Credit Card Management Application. The challenge was to create a user-friendly mobile interface that simplifies credit tracking, payments, and financial insights—all within an hour and a half.

Design Approach

Understanding that finance can sometimes be overwhelming, I focused on crafting a visually appealing yet highly functional interface that would make managing credit cards effortless for users. Below are the key considerations that shaped my design decisions:

1. Color Palette & Aesthetic

• Primary colors: #114040, #2F9D9D
• Inspired by money (green symbolizes financial growth and stability)
• Gradient elements to mimic the glossy, metallic feel of credit cards

2. Typography

• Font Used: Poppins
• Chosen for its modern, clean, and highly legible characteristics, ensuring a seamless reading experience.

3. Information Architecture

To create a structured and logical flow, I built an Information Architecture using FigJam, which helped me visualize the various elements and screens, such as:

• Settings Page (Security settings, Notifications, Preferences)
• Credit History Page (Detailed transaction breakdowns, Categorized expenses)
• Profile Settings (User details, Payment preferences)
• Dashboard & Insights (Credit overview, AI-powered financial advice)

Mapping out the hierarchy and relationships between these components in FigJam provided a clearer picture of how users would navigate the app efficiently.

Designed Screens

To provide a holistic user experience, I designed seven screens, ensuring that every crucial aspect of credit management was covered.

1. Sign-In & Sign-Up Screens

• Simple, clutter-free UI for effortless onboarding.
• Minimal fields to reduce cognitive load.
• A welcoming tone to enhance user engagement.

2. Dashboard (Credit Overview)

• Card-based design for quick insights.
• Progress bar indicating available vs. utilized credit.
• Call-to-Action (CTA) for users to make payments.
• Pending transactions indicator to inform users about unsettled dues.

3. Transaction History

• Chronological display of recent transactions.
• Clear categorization of expenses.
• Search and filter options for easy navigation.

4. Settings Page

• Essential security and preference options.
• Profile & biometric settings for added security.

5. Credit Score Tracking

• Score gauge with color indicators (Red - Poor, Yellow - Average, Green - Excellent).
• Trend graph showcasing monthly credit score fluctuations.
• Utilization vs. Score scatter plot to help users understand their credit behavior.

6. AI-Powered Insights

• AI Floating Action Button (AI FAB) that provides:
• Personalized credit advice
• Credit utilization tips
• Score improvement suggestions
• Explanations for credit score factors

Key UX Enhancements

1. Card-Based Design for Readability

• The entire UI adopts a card-based structure, ensuring information is easy to digest.

2. Financial Transparency with Visual Aids

• Graphs & progress bars eliminate the need for users to manually interpret numbers.

3. Action-Oriented UI

• Users are guided toward essential actions (e.g., Pay Now, View Transactions) with well-placed CTAs.

Time Challenge & Execution

• Completed in approximately 2-3 hours.
• Prioritized usability and clarity while maintaining an aesthetic appeal.
• Ensured a balance between speed and design precision.
• Given more time, I would conduct usability testing to refine micro-interactions and optimize the user journey further.

Learning Takeaways

While working on this project, I gained deeper insights into how credit card management systems operate, including:

• The importance of credit utilization ratios and their impact on credit scores.
• How pending transactions affect available credit.
• The significance of progressive disclosure in financial apps to reduce information overload.
• The role of AI-driven insights in helping users manage their financial health better.

Final Thoughts

I thoroughly enjoyed working on this challenge! It was an exciting opportunity to push my design thinking under a tight deadline while ensuring usability and functionality. This project reinforced the importance of user-friendly financial designs and how even complex information can be presented in a clear and engaging manner.