# Personal Finance Dashboard Design: Define Each Measure Source: https://www.jvds.cn/en/share/ui-design/personal-finance-dashboard-context-u132 Language: en Published: 2026-10-21 Author: JVDS Design Studio WealthWise puts net worth, budgets, transactions, and subscriptions in white-gray cards, using teal for data. The tidy shared style also makes different numbers look similar. Each card needs a defined question: current balance or period spending, score or composition, renewal plan or completed transaction. ## Key takeaways - Fixed navigation and independent cards separate overview, budget, and transactions within one teal style. - Dates, metric names, and comparison objects determine meaning; chart shapes cannot define measures alone. - Recurring transactions and subscription management have different tasks and should lead from summaries to checkable records. ## The overview divides questions among cards Dashboard is selected in white on fixed left navigation. Net Worth and AI Financial Health Score sit together above. Net worth shows 342,847 before income and expense cards; the score uses a dashed ring for 72% with explanations. Amount and evaluation have separate containers instead of one mixed chart. Cash Flow Visualization links income sources and expense categories; Net Spending shows composition, with Upcoming Bills and investment performance below. Flow, proportions, and upcoming objects suit different formats. Local date and filter entries at upper right let each area be adjusted independently. Saved beneath the score can make 72% look like a savings ratio. Readers need to know whether it is a score, target progress, or another metric. JVDS prefers [name, unit, and brief definition](https://www.jvds.cn/en/share/ui-design/dashboard-metric-selection) before choosing ring or numeric card; greater formal consistency requires more precise meanings. ![Teal overview with net worth, score ring, cash flow, and spending distribution](https://www.jvds.cn/upload/2026/1008/d187-tp/u132-i1.webp) Each chart answers a question; headings and units distinguish meanings. ## Budget summaries and monthly charts need matching scope Monthly Budget, Actual Spending, and Savings Rate use small bars, a line, and percentage summaries above Budget vs Actual. Its two curves have a date entry and a June tooltip with budget 22,352 and actual 17,642. Color separates series; the tooltip compares one time point directly. Above, 7,500 and 6,845 appear beside 97.8% of budget. These amounts produce about 91.3%, not 97.8%. The monthly chart has different-sized amounts and needs to identify differing accounts, scopes, or example states. Legible numbers and curves still require consistent definitions for percentage and trend. Recommendations lists categories beside budget composition and behavioral cues. Suggestions should lead back to the [periods and records used](https://www.jvds.cn/en/share/ui-design/dashboard-data-visualization-mistakes). Sequential summary, comparison, and recommendation layers are easier to understand than independent unsourced conclusions. ![Budget summaries, Budget vs Actual curves, and recommendations](https://www.jvds.cn/upload/2026/1008/d187-tp/u132-i2.webp) Two curves give comparison positions; summary percentages must match amounts and periods. ## Recurring plans and recent transactions have different time meanings Total Balance, Monthly Recurring, and This Month sit above Recurring Transactions with services, Next dates, amounts, and Monthly. Weekly Spending charts weekdays on the right; Recent Transactions lists Date, Description, Amount, Status, and Receipt below. Planned spending, weekly observation, and records remain separate. A separate subscription card has Monthly, Annual, Next renewal, Usage, and Manage Subscription. It can deepen recurring summaries but should explain its relationship to recent transactions: renewal plans differ from completed or Pending records. Management should return to the same service with updated results. Transactions is selected while the heading remains Budget & Spending. Another asset composition example repeats 62% across categories, conflicting with composition semantics. Reused cards need fields, values, units, and page identity checked alongside appearance and headings. ![Recurring transactions, weekly spending, recent records, and separate subscription card](https://www.jvds.cn/upload/2026/1008/d187-tp/u132-i3.webp) Plans, events, and management are separate; headings and percentages should update with data. ## Frequently asked questions ### Can finance cards have independent date controls? Yes, with current periods always visible. Cross-card comparison should confirm matching scopes or explain differences in summaries and tooltips, avoiding assumptions from similar graphics. ## Design review checklist - Define metrics, units, and time for amounts, percentages, and scores. - Recalculate budget ratios and compare summary and trend scopes. - Separate renewal plans, transaction states, and management results, and check page headings. ## Define financial information before arranging charts If your personal finance product combines budgets, transactions, and subscriptions in a workspace, JVDS Design Studio can help with UI/UX, website design, and development around data definitions and page hierarchy. Start with current fields and records to discuss what belongs in overview, comparison, or further management. [Contact JVDS to discuss your project](https://www.jvds.cn/contact)