Personal Finance Dashboard
The dashboard uses a clear, consistent dark theme with well-structured sections and effective use of color for highlighting key financial metrics, making it visually appealing and easy to scan. However, the interface could improve by enhancing contrast for better accessibility and simplifying navigation to reduce cognitive load for new users.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
4
Color & Contrast2
Content Readability & Clarity4
Visual Consistency, Imagery & Media2
Navigation & Structure0
Conversion & Actions1
Tone, Friendliness & Delight5
Accessibility & Input Ergonomics4
Efficiency & Cognitive Load3
Flow & States Completeness0
Strategic DesignRecommended Fixes by Impact
0Critical
1Major
18Moderate
8Minor
Misaligned currency symbol in Financial trends
Major
Visual Consistency, Imagery & Media
The Problem
The dollar sign ($) in the 'Saved This Week' metric overlaps the numeric value (50.00) slightly, causing a misalignment and visual clutter.
Why it Matters
Misalignment reduces readability and can confuse users about the monetary value being displayed.
How to Fix
Adjust the spacing or position of the dollar sign so it does not overlap with the numeric value, ensuring clear separation.
Issue Highlights
Low contrast for secondary sidebar menu items
Moderate
Color & Contrast
The Problem
Sidebar menu items like 'Expenses', 'Debt', 'Income', and others use muted gray text on a dark background, likely below WCAG AA contrast ratio for normal text.
Why it Matters
Users with low vision or certain color deficiencies may struggle to read these important navigation options, reducing usability.
How to Fix
Increase text contrast by lightening the text color or darkening the background behind these menu items to meet minimum 4.5:1 contrast ratio for normal text.
Issue Highlights
Insufficient contrast for menu section labels in sidebar
Moderate
Color & Contrast
The Problem
Labels like 'Menu' and 'Household' use small uppercase text in a faint gray over dark background, likely not meeting 3:1 contrast required for UI components.
Why it Matters
Users could miss important structural cues in navigation, impacting orientation and comprehension.
How to Fix
Darken the label text color or increase font weight to improve contrast and legibility.
Issue Highlights
Poor contrast for small light gray text under financial metrics
Moderate
Color & Contrast
The Problem
Small detail text such as 'Budget Goal' under '100%' and 'Saved This Week' under '$50.00' is light gray on dark background with insufficient contrast.
Why it Matters
Users with vision impairments may miss key context information that supports understanding financial data.
How to Fix
Use a lighter text color or increase font weight to enhance contrast and meet WCAG standards for readability.
Issue Highlights
Unclear time period for 'March 2026' spending data
Moderate
Ambiguous Date/Time/Timezone
The Problem
'March 2026' is shown as a general label for spending but it is unclear if it refers to the entire month, a specific week, or a partial period. The exact date range or time context is ambiguous.
Why it Matters
Users may misinterpret the spending amounts or budget progress if they are not sure what exact period the data applies to.
How to Fix
Add clear labeling that defines the date or time range the spending and budgeting numbers cover, e.g., 'March 1-31, 2026' or 'March monthly total'.
Issue Highlights
Tabs under Dashboard heading misaligned
Moderate
Visual Consistency, Imagery & Media
The Problem
The 'Zach', 'Cailyn', and 'Combined' tabs below 'Dashboard' heading are not perfectly aligned vertically or horizontally with the heading text or with each other.
Why it Matters
Misalignment makes the UI feel less polished and harder to scan quickly.
How to Fix
Adjust padding and margins to ensure consistent spacing and alignment with the Dashboard heading and between each tab.
Issue Highlights
Sidebar navigation lacks clear active states for sub-items
Moderate
Navigation & Structure
The Problem
The sidebar menu highlights 'Dashboard' but does not clearly indicate active states for nested items under 'Expenses' or other categories, making it unclear where the user is within the app.
Why it Matters
Users may become confused about their current location in the app and may have difficulty navigating efficiently.
How to Fix
Add clear active or expanded states for nested menu items to communicate the current page or section effectively.
Issue Highlights
Small small toggle buttons in secondary tabs
Moderate
Accessibility & Input Ergonomics
The Problem
The tab selector controls beneath 'Dashboard' (Zach, Cailyn, Combined) appear small and compact, likely less than the recommended 44x44 pixels touch target size.
Why it Matters
Users with less precise motor control or larger fingers may have difficulty tapping these tabs accurately, leading to user frustration or errors.
How to Fix
Increase the size and padding of these toggle tab buttons to meet at least 44x44 pixels touch target guidelines.
Issue Highlights
Excessive sidebar details increase visual clutter
Moderate
Efficiency & Cognitive Load
The Problem
The sidebar shows abundant non-action information such as user location, levels, codes (NBS, log), and local storage info, which adds clutter without clear interactive value.
Why it Matters
Extra non-action details distract users from primary navigation and decision points, increasing mental effort to find relevant controls.
How to Fix
Minimize or hide non-critical user metadata from the sidebar or move to an infrequent information screen.
Issue Highlights
Unclear action after 'Build your habits' prompts
Moderate
Flow & States Completeness
The Problem
The 'Build your habits' section displays prompts 'Start one!' for each habit, but there is no clear indication if these are buttons or what the user should do next to start a habit.
Why it Matters
Users might be unsure how to initiate habit tracking, causing confusion and reducing engagement with the feature.
How to Fix
Make 'Start one!' clickable buttons with visual affordance or provide clearer instructions or tooltips on how to start building habits.
Issue Highlights
Low contrast for subtitle text in habit cards
Moderate
Color & Contrast
The Problem
The text 'Start one!' in each habit card (No-Spend, Under Budget, Savings) has low contrast on dark backgrounds, making it faint and harder to read.
Why it Matters
Users may struggle to understand these important secondary labels, reducing clarity of habit status.
How to Fix
Lighten the subtitle text color to improve contrast ratio or add subtle background shading to increase text visibility.
Issue Highlights
Poor hierarchy between spend amount and context text
Moderate
Content Readability & Clarity
The Problem
The large green spend amount '$455.79' stands out well, but the supporting text 'You've spent' and 'this month' are very small and light compared to the main figure, making it hard to quickly understand what the number refers to.
Why it Matters
Users might get confused about the meaning of the large number without clear hierarchical cues linking it to its context.
How to Fix
Increase size and weight or use stronger contrast for the contextual text near the main spend figure to clearly associate it with the number.
Issue Highlights
Inconsistent pill badges styling
Moderate
Visual Consistency, Imagery & Media
The Problem
The badges such as 'Semi-monthly' in Zach's paycheck, 'Personalized' in Financial trends, and 'NBS'/'log' in the household section have different color intensities and border roundness, causing visual inconsistency.
Why it Matters
Inconsistent badge styles can confuse users about the type or importance of information badges convey.
How to Fix
Standardize badge styling including background color, border radius, font size, and text color across the entire interface.
Issue Highlights
Dense sidebar menu with many clickable items and sections
Moderate
Navigation & Structure
The Problem
The left sidebar contains many closely spaced menu items (10+) plus household member toggles and other controls, resulting in a dense vertical navigation area.
Why it Matters
This density could cause accidental clicks and cognitive overload, decreasing usability and making it harder for users to find what they need quickly.
How to Fix
Consider grouping related items, using collapsible sections, or adjusting spacing to reduce the density and improve clarity and clickable target size.
Issue Highlights
Limited orientation cues about current context beyond top label
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
While the screen has a large 'Dashboard' title, there is no breadcrumb or clear secondary navigation showing a deeper context or section within the dashboard or the selected household member beyond the small tabs.
Why it Matters
Users may have difficulty understanding their exact role, environment, or location in the app if deeper context or path isn't obvious, especially when switching between users.
How to Fix
Add breadcrumbs or more prominent contextual indicators showing current section, user, and role to improve clarity and navigation confidence.
Issue Highlights
Tiny page navigation arrows
Moderate
Accessibility & Input Ergonomics
The Problem
Left and right arrow buttons surrounding the 'March 2026' date label look small and may be narrower than recommended touch target size (around 30x30 pixels or less visible).
Why it Matters
Small tap targets can increase the chance of missed taps, slowing navigation and increasing user error.
How to Fix
Increase the size and spacing of these arrow buttons to ensure comfortable tap targets of at least 44x44 pixels.
Issue Highlights
Closely spaced user selection tabs in sidebar
Moderate
Accessibility & Input Ergonomics
The Problem
The two user selection buttons ('Zach' and 'Cailyn') directly below the 'Our Budget' logo in the sidebar are close with minimal horizontal spacing, increasing risk of accidental taps.
Why it Matters
Closely packed targets raise the chance users tap the wrong option, lowering task speed and satisfaction.
How to Fix
Add horizontal spacing or padding between these buttons to ensure clear separation and easy selection.
Issue Highlights
Multiple user/household filters cause extra decisions
Moderate
Efficiency & Cognitive Load
The Problem
The interface provides separate top-level selectors for user (Zach/Cailyn/Combined) in two places (sidebar and main content) which duplicates the selection step and may confuse users about which control is primary.
Why it Matters
Users have to process and reconcile two similar controls for filtering data by user, which increases cognitive load and slows decision-making.
How to Fix
Consolidate user selection to a single, clearly prominent control, or visually link the two to reduce redundancy and confusion.
Issue Highlights
Multiple toggles for filters and modes add complexity
Moderate
Efficiency & Cognitive Load
The Problem
The top right has 'Focus Mode', user badge (Binx), user toggles, and date navigation, all clustered together, forcing users to evaluate multiple unrelated settings before task execution.
Why it Matters
Users may spend cognitive resources prematurely deciding between modes or toggles that do not directly support their immediate goal, risking distraction and delay.
How to Fix
Group related controls logically, hide secondary toggles under expandable menus, or prioritize the primary task button (Add Expense) visually.
Issue Highlights
Overly Casual Tone in Financial Dashboard Greeting
Minor
Tone, Friendliness & Delight
The Problem
The greeting text 'Good evening, Zach! Great job staying under budget! ✨' uses casual language and emoji that may not match the more serious financial management context of a budgeting app dashboard.
Why it Matters
Users may perceive the app as less professional or trustworthy if the tone is overly casual in a context where financial responsibility is the focus.
How to Fix
Use a more neutral and professional tone for dashboard greetings, limiting or removing emojis, while maintaining friendly language.
Issue Highlights
No clear action related to the spending progress bar
Minor
Flow & States Completeness
The Problem
The spending progress bar shows the amount spent as 31% of take-home but lacks any guidance or buttons for managing budget or expenses.
Why it Matters
Users seeing their spending progress might want to adjust their budget or add new expenses but have no clear option visible here to do so.
How to Fix
Add an action button or link near the spending progress bar, such as 'Add Expense' or 'Adjust Budget'.
Issue Highlights
Unlabeled percentage progress bars
Minor
Content Readability & Clarity
The Problem
Progress bars in 'Build your habits' and 'Weekly Spending' sections lack explicit labels describing what the progress represents, especially for the colored bars without clear text.
Why it Matters
Users may not understand what the progress bars measure or how to interpret their status without clear labels.
How to Fix
Add concise labels or tooltips near each progress bar to clarify what they track and their target.
Issue Highlights
Unlabeled icons in habit streaks
Minor
Visual Consistency, Imagery & Media
The Problem
The icons representing 'No-Spend', 'Under Budget', and 'Savings' habits do not have labels explaining the icon meanings, requiring users to infer meaning from icon alone.
Why it Matters
Ambiguous icons can lead to confusion or misinterpretation about what habits are being tracked.
How to Fix
Add concise labels or tooltips for each icon to clearly indicate their meaning.
Issue Highlights
Small tags and badges with text
Minor
Accessibility & Input Ergonomics
The Problem
Text badges such as 'Personalized' and 'Semi-monthly' tags inside dashboard cards appear small and dense, potentially making them hard to tap if interactive.
Why it Matters
If these elements are interactive, their small size could hinder tap accuracy and cause frustration.
How to Fix
Ensure all interactive badges are sized for comfortable tapping with additional padding and spacing.
Issue Highlights
Tags in sidebar user info have low interactive affordance
Minor
Accessibility & Input Ergonomics
The Problem
Tags like 'NBS', 'Lvl 4: Debt Dodger', and 'log' next to user names look like static text but may be interactive or status indicators without clear affordance.
Why it Matters
Users could expect these elements to be clickable or actionable, resulting in confusion or missed functionality if they are not.
How to Fix
Ensure these tags visually convey their interactivity status by adding appropriate affordance cues or clarify if non-interactive.
Issue Highlights
No visible explanation for streak types
Minor
Efficiency & Cognitive Load
The Problem
The streak section shows 'No-Spend', 'Under Budget', and 'Savings' with instruction 'Start one!' but offers no on-screen explanation of what these streaks track or how to set them up.
Why it Matters
Users must recall from memory or external knowledge what the streaks mean and how to start them, increasing effort and uncertainty.
How to Fix
Add brief descriptions, tooltips, or onboarding hints explaining streaks and how to use them effectively.
Issue Highlights
No obvious next step after viewing 'Financial trends'
Minor
Flow & States Completeness
The Problem
The 'Financial trends' widget provides insight data but has no visible call-to-action or suggestion for what the user can do with this information next.
Why it Matters
Users may not know how to act on this financial data, leading to missed opportunities for further engagement or budget adjustments.
How to Fix
Add a contextual button or link such as 'View detailed report' or 'Adjust budget' to guide the user on possible next steps.
Issue Highlights