Designing Trust: Lessons from 90+ Usages of our SaaS Error & Loading Screens
Insights from our popular Figma community file on handling edge cases in financial AI interfaces to maintain user trust.
In consumer apps, an empty screen is a UX annoyance. In finance, it creates panic. When a Controller logs in to check the month-end status and sees a blank page, they don't think "the data is loading"; they think "the data is gone."
At ChatFin, we treat "edge cases"—errors, empty states, and loading transitions—as core financial communication channels. Our recent open-source release on Figma has garnered over 252 views and 90 usages, proving that the fintech community is hungry for better ways to handle the "in-between" moments.
The Silent Killer of Adoption
We discovered that trust in an AI system isn't built when things go right; it is built when things are uncertain. If an AI agent faces a connection timeout with the ERP, does it throw a cryptic "Error 500" code, or does it explain, "I'm having trouble reaching Oracle right now, retrying in 30 seconds"?
Our design kit focuses on transparency. We moved away from generic spinners to informative loading states that tell the user exactly what the system is doing, such as "Reconciling transactions..." or "Verifying vendor details."
Community Validation
The high engagement on our Figma file—"Error, Empty & Loading Screens - Saas"—validates a hypothesis: finance teams are tired of software that feels fragile. The 90+ usages suggest that designers are actively looking for patterns that convey stability.
By using a clean, white-themed aesthetic with clear typography, we reduce cognitive load. When an error occurs, the UI remains calm and prescriptive, guiding the user to a resolution rather than leaving them stranded.
Designing for the "Zero Data" State
One of the most critical screens in our kit is the "Empty State." For a new user, a blank dashboard is intimidating. We designed our empty states to be educational opportunities.
Instead of saying "No Reports Found," we say "Get started by generating your first P&L analysis," accompanied by a one-click action. This turns a dead end into an onboarding ramp, crucial for AI tools where the user might not know what to ask first.
Consistency Across the Stack
Having a standardized set of error and loading screens means that whether a user is in the reconciliation module or the forecasting agent, the application behaves predictably. Predictability breeds confidence.
We opened this file to the community to help other fintech builders elevate the standard of financial UX. If every finance tool handled errors gracefully, the perception of "buggy" enterprise software would diminish significantly.
Conclusion
Trust is not just about accurate algorithms; it is about how the software behaves when the algorithm is waiting for data. By sweating the details on the "boring" screens, we build a platform that finance professionals feel safe using.
Check out our resources on Figma and start building trust into your own financial applications.
Design With Us
Download the Error & Loading Screens kit on Figma Community.