Personal Debt Tracker
The interface uses color-coding and clear typographic hierarchy effectively to highlight payment statuses and key information, enhancing quick readability. However, the design could improve by providing more visible affordances for interactive elements and clearer differentiation between actionable and static components.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast1
Content Readability & Clarity3
Visual Consistency, Imagery & Media1
Navigation & Structure1
Conversion & Actions2
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics2
Efficiency & Cognitive Load3
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
3Major
15Moderate
6Minor
Overdue and status pill text contrast is low
Major
Color & Contrast
The Problem
Status labels such as "Overdue" in red, "Reminded" in blue, and "Pending" in yellow have low contrast against their pastel backgrounds, making the text hard to read for users with visual impairments.
Why it Matters
Important status information is less discernible, causing confusion or missed payment reminders.
How to Fix
Use darker text colors or stronger color combinations to meet at least WCAG AA contrast ratios on these pill backgrounds.
Issue Highlights
No clear active state indication in bottom navigation
Major
Orientation Missing (Environment/Role/Location)
The Problem
The bottom navigation bar has three icons labeled Home, History, and Profile, but only the Home icon uses a color highlight. The other icons lack a clear active or inactive state distinction, making navigation state unclear.
Why it Matters
Users may be confused about which section they are currently viewing, reducing their confidence and ease of navigation within the app.
How to Fix
Add distinct visual active states (such as color changes or underlines) to all bottom navigation icons to clearly indicate the current section.
Issue Highlights
No empty state guidance for debts list
Major
Flow & States Completeness
The Problem
If the 'Waiting to be Paid' list is empty, the current UI does not show any message or guidance on what to do next.
Why it Matters
Users who have no debts waiting will see an empty screen area without guidance or encouragement, which can cause confusion or imply a broken interface.
How to Fix
Include an empty state message and suggested actions, such as 'No debts are currently waiting to be paid. Tap '+' to add a new debt or reminder.'
Issue Highlights
Low contrast for 'Good morning' greeting text
Moderate
Color & Contrast
The Problem
"Good morning" text uses a light purple color on a medium purple background, resulting in low contrast likely below WCAG AA standards for normal text.
Why it Matters
Users with low vision or in bright environments may find this text hard to read, reducing clarity of the greeting.
How to Fix
Increase contrast by using a lighter text color closer to white or a darker background behind this text area.
Issue Highlights
Inconsistent badge colors for repayment status
Moderate
Visual Consistency, Imagery & Media
The Problem
The repayment status badges use different colors (red for Overdue, blue for Reminded, yellow for Pending) which do not appear consistent with the card border highlights that show only red and orange shades.
Why it Matters
Inconsistent use of colors for similar statuses may confuse users about status meanings and hinder quick comprehension.
How to Fix
Harmonize the color scheme for status badges and card border highlights to use a consistent palette with clear visual grouping for each status type.
Issue Highlights
Low contrast for secondary text under main names
Moderate
Color & Contrast
The Problem
Secondary descriptive text such as "Dinner sa Jollibee · 3 days..." and "Palawan trip share" is rendered in light gray on a white background, resulting in low contrast likely below WCAG AA requirements.
Why it Matters
Users with visual impairments or in poor lighting conditions may struggle to read these details.
How to Fix
Darken the secondary text color to improve contrast against the white background.
Issue Highlights
Ambiguous relative date references in transaction list
Moderate
Ambiguous Date/Time/Timezone
The Problem
Relative dates like '3 days...', 'yesterday', and '5 days ago' are used without a clear reference point or exact dates, which could confuse users about when payments were due or made.
Why it Matters
Users may misinterpret the timing of payments or reminders, leading to confusion about urgency or payment status.
How to Fix
Include exact dates alongside or instead of relative time descriptions, or clarify the reference point (e.g., “as of [date]”).
Issue Highlights
Floating plus button icon unlabeled
Moderate
Visual Consistency, Imagery & Media
The Problem
The purple floating action button with a plus (+) icon does not have a text label or tooltip visible, which may be unclear for first-time users regarding its exact function.
Why it Matters
Unlabeled icons increase cognitive load and may reduce discoverability, especially for less familiar users.
How to Fix
Add a visible text label, tooltip, or onboarding hint to clarify the action triggered by the plus button.
Issue Highlights
Floating Plus Button Lacks Clear Purpose
Moderate
Conversion & Actions
The Problem
The floating '+' button in the lower-right corner does not indicate its specific action or destination (e.g., add new debt, create reminder). It uses only an icon without a label or tooltip.
Why it Matters
Users may hesitate to tap the button because its function is unclear, reducing engagement and potential conversions.
How to Fix
Add a tooltip, label, or use a descriptive icon/button with text to clarify the action before tap.
Issue Highlights
Lack of reassurance in overdue payment alerts
Moderate
Tone, Friendliness & Delight
The Problem
The app shows 'Overdue' statuses in red next to debt amounts without any message reassuring the user about next steps or privacy. This can create anxiety about debt collection or relationship impact.
Why it Matters
Users seeing overdue statuses on money owed may feel stressed or uncertain without clear guidance or reassurance, potentially reducing trust in the app.
How to Fix
Add empathetic, reassuring text near overdue statuses clarifying that reminders are sent discreetly, and no automatic penalties occur. Use friendly tone to ease concerns.
Issue Highlights
Floating Action Button Smaller Than Recommended Touch Size
Moderate
Accessibility & Input Ergonomics
The Problem
The purple floating action button in the lower right corner appears to be around 40x40 pixels, which is smaller than the recommended minimum touch target size of 48x48 pixels.
Why it Matters
Smaller tap targets can cause users to miss the button, leading to frustration or repeated taps, especially on touch screens.
How to Fix
Increase the size of the floating action button to at least 48x48 pixels and add sufficient padding around it to ensure easy tap.
Issue Highlights
Multiple status indicators per entry increase cognitive load
Moderate
Efficiency & Cognitive Load
The Problem
Each entry in the 'Waiting to Be Paid' list shows multiple status indicators (e.g., 'Overdue', 'Reminded', 'Pending') along with small supporting text, increasing the number of micro-decisions users must process.
Why it Matters
Users may find it harder to quickly scan and understand the status of owed payments, increasing mental effort and slowing task completion.
How to Fix
Consolidate status information into a single clear indicator or icon and remove redundant explanatory text to simplify the UI.
Issue Highlights
Unclear action after tapping on debt details
Moderate
Flow & States Completeness
The Problem
The list items show 'tap for details' but there is no visible indication of what happens next or confirmation that tapping leads to a detailed view or next actionable step.
Why it Matters
Users may be confused about what will happen when tapping the debt items and may hesitate to proceed or feel uncertain if their tap will allow them to act.
How to Fix
Provide a clearer affordance or preview of what tapping a debt item will do, such as an arrow icon, or a subtle tooltip or animation indicating navigation, and ensure a detailed screen or action follows.
Issue Highlights
Insufficient hierarchy between person name and payment note
Moderate
Content Readability & Clarity
The Problem
The person names (e.g., Marco Reyes) and their corresponding notes (e.g., 'Dinner sa Jollibee · 3 days...') appear visually similar in font size and weight, making it harder to scan and distinguish key information quickly.
Why it Matters
Poor hierarchy reduces quick comprehension of who owes money and what it is for, impacting usability and user satisfaction.
How to Fix
Use a larger or bolder font for names and smaller or lighter text for the description notes to create clear differentiation.
Issue Highlights
Dense touch targets in 'Waiting to be Paid' list
Moderate
Navigation & Structure
The Problem
The payment reminder list items contain multiple interactive areas including names, status labels, payment amounts, and the floating action button overlaps some list items, potentially causing mis-taps.
Why it Matters
Users may accidentally tap the wrong element or struggle to interact with specific details due to closely spaced interactive areas and overlaying elements.
How to Fix
Increase spacing between touch targets and ensure the floating action button does not overlap interactive list items.
Issue Highlights
Bottom Navigation Icons Too Close to Each Other
Moderate
Accessibility & Input Ergonomics
The Problem
The Home, History, and Profile icons and their labels in the bottom navigation bar appear visually close with limited horizontal spacing between touch targets, likely smaller than 48x48 pixels each, increasing risk of mis-tap.
Why it Matters
Users might tap the wrong navigation item, causing errors or frustration, especially on smaller screens or for users with limited dexterity.
How to Fix
Increase horizontal spacing between navigation items or increase the individual tap target size to at least 48x48 pixels.
Issue Highlights
Overdue and Pending Status Badges Lack Strong Visual Contrast
Moderate
Strategic Design
The Problem
The 'Overdue' badges have a pale orange background with orange text, and 'Pending' badges have a pale yellow background with yellow text, which appear to have low visual contrast and may be difficult for users to quickly differentiate status at a glance.
Why it Matters
Users may overlook important status information like overdue payments due to insufficient contrast and subtle color differences, increasing the risk of missed reminders or actions.
How to Fix
Increase the contrast of the status badges by using darker colors for the text or backgrounds. Consider using red or a stronger shade for 'Overdue' and a more distinct color for 'Pending' to improve immediate recognition.
Issue Highlights
No loading or success feedback when adding new debt
Moderate
Flow & States Completeness
The Problem
There is a prominent '+' button for adding an item, but the UI does not show any loading state or confirmation/success message after tapping it or completing adding a debt.
Why it Matters
Users might be uncertain if their input was received or if the app is processing their request, potentially causing frustration or repeated actions.
How to Fix
Implement and display a loading indicator after tapping '+' and a success message or confirmation screen after successfully adding a new debt or reminder.
Issue Highlights
Left border accent bars misaligned with circular initials
Minor
Visual Consistency, Imagery & Media
The Problem
The vertical colored accent bars on the left edge of each debtor card do not perfectly align vertically with the circular initials to their right; some appear slightly offset.
Why it Matters
Subtle misalignment detracts from the polished and professional look of the UI, potentially reducing user confidence.
How to Fix
Adjust vertical spacing and placement of the accent bars to align flush with the circular initials in each list item.
Issue Highlights
Use of playful pastel colors for overdue warnings
Minor
Tone, Friendliness & Delight
The Problem
The overdue badges use soft pastel red and orange hues that may soften the seriousness of the overdue status. This may lead to confusion about urgency or importance.
Why it Matters
Colors that do not clearly convey the seriousness of overdue payments may cause users to under-prioritize or misunderstand the reminders.
How to Fix
Use stronger, more contrasting red tones for overdue status labels to clearly communicate urgency, aligned with common design conventions for warnings.
Issue Highlights
No location or role context in header area
Minor
Orientation Missing (Environment/Role/Location)
The Problem
The header greets the user by name and shows summary stats but does not provide context indicating current app section or user role explicitly.
Why it Matters
Users might not be certain about the app section they are in or their current role/environment without additional orientation cues, especially if the interface is complex.
How to Fix
Add a clear title or breadcrumb showing the current screen or user role in the header area for immediate orientation.
Issue Highlights
Overdue and Status Labels May Be Hard to Tap
Minor
Accessibility & Input Ergonomics
The Problem
The 'Overdue', 'Reminded', and 'Pending' status labels on each list item are small and may require precise taps, as the text and background area appear smaller than recommended touch size.
Why it Matters
If these labels are interactive, small tap areas can cause missed taps or frustration.
How to Fix
Ensure these status indicators have a minimum touch target size of 48x48 pixels by increasing padding or tap area, or combine their function into the whole list item tap area.
Issue Highlights
Ambiguous action prompts below status tags cause minor decision friction
Minor
Efficiency & Cognitive Load
The Problem
The phrase 'tap for details' under each status label invites interaction but appears identically for all entries without differentiation, forcing users to consider if all require the same next action.
Why it Matters
Users may waste time verifying if an action or next step differs per entry, adding unnecessary cognitive load and slowing down task completion.
How to Fix
Replace repetitive 'tap for details' with progressive disclosure or context-aware action buttons to guide users more intuitively.
Issue Highlights
Inconsistent Use of Accent Colors for User Initials Circles
Minor
Strategic Design
The Problem
The circular initials use muted pastel colors without clear meaning or consistent pattern, potentially limiting their effectiveness as visual differentiators among entries.
Why it Matters
This lack of meaningful color coding may reduce quick user recognition of contacts and cause a more monotonous or less engaging visual experience.
How to Fix
Adopt a consistent color-coding scheme that aligns colors with user categories or status, or use a more vibrant color palette to make each contact visually distinct.
Issue Highlights