Design Summary
The UI frame presents a functional layout with clear sectioning, but suffers from significant issues in visual hierarchy, text readability, and color contrast. The prominent red card creates an alarming emotional tone and contains critical accessibility barriers due to unreadable text. Numerous smaller text elements and interactive icons are difficult to perceive and interact with, leading to a poor overall user experience and a low design quality score.
Design Frame
Run Your Own Audit in Figma
Install Yo for FigmaAvailable Credit text on the red card
The 'Available Credit' text on the red card is extremely small and has very poor contrast against the red background, rendering it unreadable.
💡 Recommendation:
Significantly increase the font size and ensure sufficient contrast (e.g., white text) to make this critical financial information easily legible.
Red card in 'Your Cards' section
The large red card in the 'Your Cards' section dominates the screen, potentially overshadowing other important information and creating an imbalanced visual hierarchy.
💡 Recommendation:
Re-evaluate the size and prominence of the card to ensure it aligns with its importance relative to other screen elements. Consider a less aggressive color or a more balanced layout.
Review Suspicious Activity text on the red card
The 'Review Suspicious Activity' text on the red card is very small and has poor contrast, making it difficult to read and understand its purpose.
💡 Recommendation:
Increase the font size and improve the color contrast to ensure this important security call-to-action is clearly visible and readable.
Red card in 'Your Cards' section
The large red card for 'Your Cards' feels aggressive and creates an alarming emotional tone, which might not be ideal for a financial application where users expect a sense of security and calm.
💡 Recommendation:
Consider using a more neutral or calming color palette for financial information to evoke trust and stability, reserving red for critical alerts only.
Review Suspicious Activity text on the red card
The 'Review Suspicious Activity' text on the red card is very small and has poor contrast, making it difficult to identify as an interactive element or a call-to-action.
💡 Recommendation:
Increase the visual prominence of this interactive element through larger text, better contrast, or by making it a distinct button to ensure users can easily identify and tap it.
Top navigation bar (time, welcome message, profile icons)
The 'Welcome back, Alex Thompson' text and the notification/profile icons are very close to the top edge, making the top bar feel cramped and lacking sufficient padding.
💡 Recommendation:
Increase padding around elements in the top bar to provide more breathing room and improve visual comfort.
Quick Actions icons and labels (e.g., 'Pay Bills', 'Transactions')
The 'Quick Actions' icons and their corresponding labels are very small, making them difficult to tap accurately and read, especially for users with motor or visual impairments.
💡 Recommendation:
Increase the size of the icons and text labels, and ensure sufficient tap targets and spacing between each action.
Bottom navigation bar icons and labels
The icons and labels in the bottom navigation bar are very small and lack sufficient padding, making them feel cramped and potentially difficult to interact with.
💡 Recommendation:
Enlarge the icons and text, and add more vertical and horizontal padding to improve readability and tap accuracy.
CVV- *** text on the red card
The 'CVV- ***' text on the red card is small and could be larger for better readability, especially for sensitive information.
💡 Recommendation:
Increase the font size of the CVV placeholder for improved readability.
Welcome back text
The 'Welcome back,' text is very light and small, almost blending into the white background, reducing its visibility.
💡 Recommendation:
Increase the font weight or darken the color of the 'Welcome back,' text to improve its contrast and readability.
Labels under Quick Actions icons
The labels under the 'Quick Actions' icons (e.g., 'Pay Bills', 'Transactions') are very small, making them hard to read at a glance.
💡 Recommendation:
Increase the font size of the quick action labels to enhance readability.
Labels in bottom navigation bar
The labels in the bottom navigation bar ('Home', 'Transactions', 'Rewards', 'Profile') are very small, impacting their readability.
💡 Recommendation:
Increase the font size of the bottom navigation labels for better legibility.
Saved 10% This month text in Spend Analysis card
The 'Saved 10% This month' text in the 'Spend Analysis' card is small and has low contrast against its background, making it difficult to read.
💡 Recommendation:
Increase the font size and improve the contrast of this text to ensure it's easily readable.
ACTIVE label on the red card
The 'ACTIVE' label on the red card has low contrast with its background, making it difficult to read.
💡 Recommendation:
Adjust the color of the 'ACTIVE' text or its background to ensure sufficient contrast for readability.
Green dot next to ACTIVE label
The green dot next to the 'ACTIVE' label appears to be the sole indicator of status, which is not accessible for color-blind users.
💡 Recommendation:
Supplement the color indicator with a text label or an icon that conveys the status for users with color vision deficiencies.
Due Nov 22 text in bill due card
The 'Due Nov 22' text in the bill due card is light grey on a light yellow background, resulting in low contrast and reduced readability.
💡 Recommendation:
Darken the text color or adjust the background color to achieve better contrast for this date information.
Icons across the interface (Quick Actions, Bottom Navigation)
The mix of different icon styles (outline for quick actions, filled for bottom navigation, specific brand logos) creates a slight inconsistency in the overall visual style.
💡 Recommendation:
Establish a consistent iconography style (e.g., all outline or all filled) across the application to enhance visual cohesion.
Bill due card
The 'Bill due' card uses a light yellow background with an orange warning icon and text, which, while attention-grabbing, could be perceived as overly alarming rather than simply informative.
💡 Recommendation:
Refine the color scheme and iconography for informational alerts to be clear and attention-grabbing without causing undue alarm.
See All text next to Recent Transactions heading
The 'See All' text for 'Recent Transactions' is small and could be more prominent to encourage users to explore their transaction history.
💡 Recommendation:
Increase the font size or use a more distinct visual style for the 'See All' link to make it more noticeable and clickable.
Information 'i' icons
The 'i' icons for information (e.g., next to 'Earn more rewards by paying your bills') are very small and might be hard to tap accurately.
💡 Recommendation:
Enlarge the 'i' icons and ensure they have a sufficient tap target area to improve usability.
... icon in Your Cards section
The '...' icon in the 'Your Cards' section is generic and doesn't clearly communicate its function without tapping, potentially leading to user hesitation.
💡 Recommendation:
Replace the generic '...' icon with a more descriptive icon or a text label that clearly indicates the available actions (e.g., 'More Options', 'Card Settings').