Fintech Dashboard UI Design: Fey, Mercury & Revolut
Fey, Mercury, and Revolut each solve fintech dashboard UI design differently. Here are the patterns and principles worth borrowing for your own financial product.
Fintech dashboard UI design carries a weight that most product dashboards don't. A SaaS analytics screen might frustrate a user if it's confusing. A financial dashboard that's confusing can make someone misread their balance, miss a failed payment, or abandon an account before they ever fund it. Clarity — immediate, unambiguous clarity — is the design requirement that overrides everything else.
Fey (investment portfolio tracking), Mercury (business banking for startups), and Revolut (consumer neobank) each solve a different version of this core problem: make someone's financial picture legible at a glance, while projecting enough competence that they feel safe leaving their money there.
What makes studying all three useful is that they serve different users with different anxieties — the founder watching runway, the retail investor tracking gains, the traveler monitoring spending across currencies — and each made different tradeoffs to address those anxieties.
This breakdown covers publicly observable UI patterns from each product, with references to our curated screens. Browse Gummble for the actual app screens.
What Makes Fintech Dashboard Design Hard
Before comparing the three apps, it's worth understanding why fintech dashboard design is harder than it looks.
The hero-number question is higher stakes. Every dashboard must answer "what's the one thing I need to see?" In fintech, getting it wrong — showing a trailing 30-day average when the user wants today's balance — erodes trust instantly.
Trust is a visible design element. Typography weight, color restraint, number formatting precision, iconography — all of it communicates competence or its absence. In fintech, this is a UI concern, not just a brand one.
Charts vs. sparklines is a genuine tradeoff. A full chart communicates precision; a sparkline communicates trend. Most fintech dashboards need both, at different levels of hierarchy. Getting the wrong one in the wrong slot wastes space and misleads users about what question they should be asking.
Transaction lists are the workhorse UI. No matter how elegant the hero section, users spend most of their time in transaction lists. Search, filtering, merchant logos, categorization, status indicators — this is where financial apps win or lose daily.
Empty states matter more than most teams realize. A new account needs to feel like the product already works while giving the user a clear first action. This pattern is consistently undertreated in fintech.
The cost of confusion is real. In a consumer app, a confusing flow causes a drop-off. In fintech, it can cause a support ticket, a missed payment, or a complete loss of user trust.
Fey — Investment Tracking as a Designed Experience
Fey is a Mac and web app for serious retail investors who want a clean, single view of their portfolio across brokerages. It's a niche product, but it's one of the most considered pieces of fintech UI design in recent memory.
Portfolio value as the undisputed hero. Fey commits fully to one number: total portfolio value. It sits at the top, large, with today's gain or loss displayed immediately below it as an absolute dollar amount and a percentage. There's no ambiguity about what the app is for or what you should look at first. Secondary metrics — individual positions, sector breakdown, performance vs. index — are organized below in a clear hierarchy. The app never competes with itself.
Performance visualization that respects the user's sophistication. Fey's charts are clean but not dumbed-down. Line charts for portfolio performance use minimal axis labeling — just enough to orient without cluttering. The time-range selector is a compact set of time-range selectors that update the chart without a full page reload. The design assumes the user understands what they're looking at; it doesn't over-explain. See the actual Fey screens on Gummble for how this hierarchy plays out in practice.
Restrained dark-mode aesthetic. Fey's dark palette is a deliberate design choice, not a trend-chasing one. Dark backgrounds reduce visual noise around numerical data, improve contrast for green/red delta indicators, and create a "terminal" aesthetic that signals seriousness to the target user — someone who spends real time analyzing positions. The color palette is almost monochromatic except for the performance deltas, which makes those indicators land harder.
Takeaway: Fey demonstrates three durable principles. First, commit to one hero number — don't let secondary metrics compete with the primary one. Second, reserve green and red for performance deltas and use them nowhere else; when those colors appear, they should mean exactly one thing. Third, match aesthetic register to user intent: a restrained, high-contrast dark UI signals that the product takes money seriously.
Mercury — Business Banking for Startups
Mercury is explicitly built for founders and their teams, which means the design decisions are tuned for a specific set of anxieties: runway visibility, multi-account management, and team permissions.
Multi-account clarity. Most business banking accounts aren't a single account — they're a checking account, a savings account, treasury holdings, and maybe a credit card. Mercury's dashboard makes the relationship between these accounts visible rather than hiding them behind separate navigation. The balance hierarchy is clear: total cash at the top, individual account balances below, with enough labeling that you can understand your cash position at a glance without doing mental math.
Transaction and cash-flow legibility. Mercury's transaction list is one of the cleaner implementations in business banking. Merchant names are generally displayed more cleanly than in legacy banking apps, amounts are clearly formatted, and status indicators — pending, cleared, failed — are unambiguous. For a founder reviewing payroll, vendor payments, and software subscriptions in the same list, that clarity is genuinely functional, not decorative. See the actual Mercury screens on Gummble for specifics.
Earning trust with founders. Mercury's UI earns trust in a specific way: by looking like software that founders already use, rather than like traditional banking software. The typography is clean, the information density is high without feeling overwhelming, and the settings and permissions screens for team access are organized the way a SaaS admin panel would be — role-based, clear, with obvious consequences. This is a meaningful design decision. Founders trust software they understand how to configure.
Takeaway: Mercury's most transferable lessons are about hierarchy and metadata. Show total cash position before individual accounts — users need the aggregate first, breakdown second. Treat transaction metadata (status, category, merchant, amount) as first-class UI with distinct visual slots. And design team permissions to feel like software, not a corporate IT form: clear labels, obvious permission scopes, simple add/remove flows.
Revolut — Consumer Neobank as Lifestyle Product
Revolut is the most complex design challenge of the three. It's not a single product — it's a multi-product platform that includes current accounts, savings vaults, currency exchange, crypto trading, stock investing, travel insurance, budgeting tools, and more. The design problem is: how do you surface all of that without overwhelming someone who just wants to check their balance?
Balance and quick actions as the hierarchy anchor. Revolut solves the everything-app problem with aggressive hierarchy. The main balance is displayed prominently at the top. Directly below it is a row of quick-action icons covering the most frequent user actions without requiring navigation. Everything else — the full suite of financial products — is accessible but secondary. The user who opens Revolut to send money can do it in a few taps without ever seeing the crypto or investing screens. See the actual Revolut screens on Gummble to observe how this plays out across different flows.
Progressive disclosure for a complex product surface. The depth of Revolut's feature set could easily create an overwhelming UI. What prevents this is a consistent progressive disclosure model: the home screen shows the essentials, dedicated sections show the full product range, and each individual product (crypto, stocks, savings) has its own contained experience. You're never dumped into complexity you didn't ask for. Budgeting analytics, for example, live in a dedicated Analytics tab rather than cluttering the main dashboard — they're not surfaced by default.
Lifestyle design touches without losing financial clarity. Revolut's card designs, animated interactions, and occasional gamified rewards (cashback celebrations, savings milestones) are a deliberate product choice: make money management feel less like a chore and more like an app you actually enjoy opening. The risk is that this tips into being cute at the expense of being useful. Revolut mostly avoids that by keeping the core financial information — balance, transactions, exchange rates — in a clean, readable format and reserving the animation budget for celebratory moments rather than information display.
Takeaway: Revolut demonstrates that breadth doesn't have to mean clutter. Put the most frequent actions above the fold in a quick-actions row — users shouldn't need to navigate to do the thing they opened the app for. Contain complexity in clearly labeled sections rather than hiding it; power users will find depth, casual users won't be overwhelmed. And save animation for genuinely celebratory moments — successful payment, savings milestone — rather than information display, where motion creates anxiety more than delight.
Side-by-Side Comparison
| Fey | Mercury | Revolut | |
|---|---|---|---|
| Hero metric | Total portfolio value | Total cash across accounts | Current account balance |
| Primary user | Retail investor | Startup founder / finance team | Consumer / traveler |
| Density approach | High density, sophisticated | Medium density, clear labels | Progressive — low on entry, high in sub-sections |
| Aesthetic register | Dark, analytical, minimal color | Clean SaaS, neutral tones | Modern consumer, branded color |
| Standout strength | Investment data visualization | Multi-account clarity + team permissions | Full product surface with preserved usability |
5 Fintech Dashboard UI Design Principles
After studying Fey, Mercury, and Revolut — and looking at fintech UI patterns across the Gummble library — here are the principles that show up in the best financial dashboards, regardless of product type.
1. Commit to one hero number. Every financial dashboard needs a single undisputed answer to "what's my situation right now?" That number should be at the top, the largest typographic element on the screen, and immediately accompanied by the context that gives it meaning — change since yesterday, percentage of goal, available vs. total. Don't make users calculate anything.
2. Use sparklines instead of full charts for summary views. On mobile especially, a sparkline gives you trend information in a fraction of the space a full chart requires. Save full charts — with axes, data points, and labels — for dedicated analytics views that users navigate to intentionally. In the summary dashboard, the question is "is this going up or down?" A sparkline answers that. See dashboard design patterns for examples of how top apps handle this.
3. Treat trust signals as design, not as afterthought. Lock icons, bank-grade security badges, and clear data-handling language aren't just marketing. They're UI elements that need to be designed with the same care as any other component. Placed poorly, they feel like disclaimers. Placed well — on login screens, in settings headers, near sensitive account actions — they actively reduce user anxiety.
4. Use empty states to educate, not just hold space. The first-run experience for a fintech app is a critical trust-building moment. An empty dashboard should show users what they'll see when data exists, explain how to get there, and give them a clear first action. Onboarding patterns that connect directly to dashboard population — "connect your accounts," "make your first transfer," "set a savings goal" — perform far better than a generic empty illustration.
5. Use progressive disclosure for power features. Not every user needs currency exchange rates, team permissions, API access, or portfolio analytics on their first screen. Hide complexity in clearly labeled sections rather than surfacing everything upfront. Power users will find the depth; casual users won't be intimidated by it. This is the principle that separates Revolut's home screen from a cluttered mess, and Mercury's settings from a banking bureaucracy.
Explore These Apps on Gummble
If you're designing a financial product, the best thing you can do is study how Fey, Mercury, and Revolut handle specific screens. Not to copy them, but to understand the decisions behind them.
Gummble is a Mobbin alternative built for designers who want to move fast — indexed screenshots from shipped iOS, Android, and web products, organized by pattern and app.
See also: CRM app UI design examples · Mobile dashboard design examples · How to design a SaaS dashboard
Want more design inspiration? Browse 1,500+ apps on Gummble — across shipped iOS, Android, and web products.
Founder of Gummble. I build and maintain the Gummble catalog — UI screenshots and UX flows from 1,500+ real iOS, Android, and web apps — and write about the design patterns I see across them.
See these patterns in action
Browse 1,500+ apps across shipped iOS, Android, and web products.
Browse the Library →
