Financial SaaS: Smart Deductions
Privacy as the First Impression
The upload screen is the first thing every user sees, before any data, before any insight. Most tools treat the empty state as a loading dock. I treated it as a trust contract. The privacy callout isn't footer copy; it's front and center, inlined with the upload zone, impossible to miss.
I inlined the privacy guarantee directly with the upload action, not buried in a privacy policy, not footnoted below the fold. At the moment of highest user anxiety ("am I about to upload my bank statements?"), the shield icon and the plain-language promise are the first readable text after the headline. For any product handling financial data, trust signals aren't a legal checkbox; they're a conversion mechanism and a brand promise simultaneously.
Cross-Linked Chart Interactions
The donut and bar chart are semantically linked. Hovering any segment highlights the corresponding bar, and vice versa. Color tokens are shared across both charts and the transaction table badges, so "purple = Subscriptions" becomes an internalized pattern within a single session. Try it:
Wireframe First, Pixels Later
Before any color or typography, I mapped the core layout spatially. The wireframe phase resolved one critical question: where does "the moment of trust" live? It can't be footer copy. It has to be inlined with the first interaction. That is why the privacy callout ended up inside the upload zone, not below it.
The wireframe placed the privacy callout inside the upload zone, not below it. That decision survived to final. It means every user reads the trust guarantee before they drag a file, not after. The final design only added the shield icon, the exact copy, and the color. The structural decision was made in greyscale.
Frictionless File Ingestion
SMB owners need speed and zero cognitive overhead at entry. The drag-and-drop zone accepts PDF bank statements, CSV exports, and bundled ZIP archives. Reduces manual data entry to zero. Multi-file processing means a full year of statements can be uploaded at once and merged into a single unified dashboard.
A key design decision: the processing animation intentionally runs for ~1–2 seconds even on fast files, so the tool feels considered rather than instant. Trust in financial tools is earned through perceived deliberateness. The same principle behind QB's loading states on sensitive operations like payroll processing.
Transparent Processing Feedback
I incorporated purposeful motion into the staggered processing bars. Rather than an instant flash, the deliberate 1.5s animation grounds the user's experience. building psychological trust that their sensitive financial data is being handled with care. Each file's bar animates independently so users can immediately spot if a statement failed to parse.
This visibility is a direct response to the primary SMB anxiety: "Did it get my data right?" By surfacing the extraction count live, users arrive at the dashboard already trusting the numbers, reducing the time they spend auditing results.
What Happens When It Goes Wrong
Most designers stop at the happy path. These are the three failure modes that matter most for a PDF parser, and the design decisions made for each.
Each failure mode gets a distinct signal color (yellow = recoverable, blue = user decision needed, red = unrecoverable) and a single clear action. No stack traces, no generic "something went wrong." The partial extraction warning is the most important: silently dropping 67 transactions would destroy the user's trust in every number on the dashboard. Surfacing it explicitly, with a count, keeps the user in control.
At-a-Glance Financial Summary
Four KPI cards anchor the dashboard. Est. Deductions is the hero card, not Total Spend. For LLC owners, the deductible figure is the one that changes their tax bill. Teal accent color signals this is a positive, opportunity-oriented number. The secondary cards (Total Spend, Transactions, Categories) provide context without competing for hierarchy.
Responsive from Day One
QBO users review expenses primarily on mobile. The layout adapts completely. KPI cards stack vertically, transaction rows expand to full-detail cards, and the export sheet anchors to the top of the viewport to prevent the dropdown-clip that breaks most financial apps on 375px screens.
The "NEEDS REVIEW" row gets a 3px left accent border, a touch-friendly signal that doesn't require a second label to understand. The Export dropdown on mobile anchors to the top of the viewport, preventing the clip that breaks most financial-app dropdowns on 375px screens. The "7 flagged for review" sticky banner is a deliberate QBO reference. QBO uses this pattern for unpaid invoices on its mobile home screen. It functions as a persistent task counter across scroll.
Filterable Transaction Details
Every parsed transaction surfaces with its auto-assigned Schedule C category badge, the same color token as the charts above. Negative amounts (credits, refunds, payments) are automatically separated from charges so users can instantly reconcile statement credits against purchases without manual scanning. Use the filters below to explore:
Clear Action Hierarchy & Platform Pathways
Three export formats serve distinct user needs. Schedule C CSV is the default hero action. IRS-labeled, pre-categorized, directly usable by an accountant or TurboTax upload. Full XLSX serves users who want every transaction for their own records. JSON serves developer/integrations workflows.
The accounting-sync module on the roadmap is intentional: Smart Deductions treats itself as a data preparation layer for larger ecosystems. Users who outgrow single-operator LLC tracking can carry their categorized history directly into their accounting software, a natural upgrade path rather than a dead end.
Global Navigation & Command Palette
The Command Palette (⌘K) is a keyboard-first, cross-surface navigation layer, the definition of a Shared Experience component. Power users can triage any action: upload, filter, export, or configure, without touching the mouse or memorizing a nav tree.
This pattern reduces cognitive load by eliminating deep menu hierarchies. It mirrors how QuickBooks power users navigate between company files, reports, and transaction views. The same mental model applied to a single-page financial tool.
- Fuzzy search across all app actions
- Group headers match the user's mental model (Navigate / Act / Filter / Settings)
- Keyboard navigation (↑↓ + Enter), zero mouse required
- Accessible:
role="combobox"+aria-activedescendant
The Messy Middle: Design Decisions Under Constraint
I intentionally chose a local-first, zero-server architecture to eliminate GDPR and CCPA compliance risks entirely. No user data ever leaves the device. No consent banner, no data retention policy, no breach liability. This is the most defensible legal posture for a financial tool, and it's the "privacy by design" approach I believe every product handling sensitive data should adopt. Client-side PDF.js trades some OCR accuracy for that guarantee; the UI surfaces confidence signals rather than silently accepting bad extractions.
Cut an ambitious OCR receipt-matching feature for V1 and shipped a rock-solid regex extraction engine instead. When engine confidence is low on a row, the UI flags it for user review rather than silently misfiling it. Shipping a reliable core outweighs experimental edge cases on V1.
An editable rule engine lets users teach the system over time. Correcting a misclassified merchant name saves that mapping for all future uploads. This builds a progressively smarter tool without any ML backend, server calls, or data leaving the device.
Color is never the only signal. Every category badge has a text label. Chart interactions also have keyboard equivalents. The processing screen uses role="status" live regions so screen readers announce progress. Financial tools must be accessible; a misfiled deduction can have real-money consequences.
I used Claude and Gemini to accelerate the React/Vite boilerplate. Scaffolding the PDF.js parsing pipeline, regex extraction engine, and CSV export logic in hours rather than days. This freed me to spend the majority of build time on the high-judgment design work: the confidence-flagging UX, the cross-linked chart interaction model, and the purposeful motion system. Adopting AI tools to improve efficiency is not a shortcut; it's a force multiplier for craft.
Numbers from the Field
Metrics from 4 weeks of personal use + 4 beta testers running real bank statements through the tool. Framed honestly as early instrumentation, not a controlled study, but they reflect real behavior on real financial data.